feat(shadcn): update handling of import and apply at rules (#8109)

* fix: plugin imports

* fix(shadcn): import in css

* feat(shadcn): allow empty body for apply rules

* chore: changeset

* fix: type issue

Author: shadcn

.changeset/solid-seas-wear.md

@@ -0,0 +1,5 @@
+---
+"shadcn": minor
+---
+
+update handling of import and apply at rules

apps/v4/public/schema/registry-item.json

@@ -163,32 +163,7 @@
       "type": "object",
       "description": "CSS definitions to be added to the project's CSS file. Supports at-rules, selectors, nested rules, utilities, layers, and more.",
       "additionalProperties": {
-        "oneOf": [
-          {
-            "type": "string",
-            "description": "Direct CSS string (e.g., 'font-family: sans-serif; line-height: 1.5;')"
-          },
-          {
-            "type": "object",
-            "description": "CSS properties or nested selectors",
-            "additionalProperties": {
-              "oneOf": [
-                {
-                  "type": "string",
-                  "description": "CSS property value (e.g., 'blue', 'var(--color-primary)')"
-                },
-                {
-                  "type": "object",
-                  "description": "Nested selector or rule with properties",
-                  "additionalProperties": {
-                    "type": "string",
-                    "description": "CSS property value for nested rule"
-                  }
-                }
-              ]
-            }
-          }
-        ]
+        "$ref": "#/definitions/cssValue"
       }
     },
     "envVars": {
@@ -219,5 +194,22 @@
       "description": "The name of the registry item to extend. This is used to extend the base shadcn/ui style. Set to none to start fresh. This is available for registry:style items only."
     }
   },
-  "required": ["name", "type"]
+  "required": ["name", "type"],
+  "definitions": {
+    "cssValue": {
+      "oneOf": [
+        {
+          "type": "string",
+          "description": "CSS property value or direct CSS string"
+        },
+        {
+          "type": "object",
+          "description": "Nested CSS properties, selectors, or at-rules. Empty objects are allowed for at-rules with no body.",
+          "additionalProperties": {
+            "$ref": "#/definitions/cssValue"
+          }
+        }
+      ]
+    }
+  }
 }

packages/shadcn/src/registry/schema.ts

@@ -52,19 +52,13 @@ export const registryItemCssVarsSchema = z.object({
   dark: z.record(z.string(), z.string()).optional(),
 })
 
-export const registryItemCssSchema = z.record(
-  z.string(),
-  z.lazy(() =>
-    z.union([
-      z.string(),
-      z.record(
-        z.string(),
-        z.union([z.string(), z.record(z.string(), z.string())])
-      ),
-    ])
-  )
+// Recursive type for CSS properties that supports empty objects at any level.
+const cssValueSchema: z.ZodType<any> = z.lazy(() =>
+  z.union([z.string(), z.record(z.string(), cssValueSchema)])
 )
 
+export const registryItemCssSchema = z.record(z.string(), cssValueSchema)
+
 export const registryItemEnvVarsSchema = z.record(z.string(), z.string())
 
 export const registryItemSchema = z.object({

packages/shadcn/src/utils/updaters/update-css.ts

@@ -60,6 +60,21 @@ export async function transformCss(
   })
 
   let output = result.css
+
+  // PostCSS doesn't add semicolons to at-rules without bodies when they're the last node.
+  // We need to manually ensure they have semicolons.
+  const root = result.root
+  if (root.nodes && root.nodes.length > 0) {
+    const lastNode = root.nodes[root.nodes.length - 1]
+    if (
+      lastNode.type === "atrule" &&
+      !lastNode.nodes &&
+      !output.trimEnd().endsWith(";")
+    ) {
+      output = output.trimEnd() + ";"
+    }
+  }
+
   output = output.replace(/\/\* ---break--- \*\//g, "")
   output = output.replace(/(\n\s*\n)+/g, "\n\n")
   output = output.trimEnd()
@@ -79,20 +94,77 @@ function updateCssPlugin(css: z.infer<typeof registryItemCssSchema>) {
 
           const [, name, params] = atRuleMatch
 
-          // Special handling for plugins - place them after imports
-          if (name === "plugin") {
-            // Find existing plugin with same params
-            const existingPlugin = root.nodes?.find(
+          // Special handling for imports - place them at the top.
+          if (name === "import") {
+            // Check if this import already exists.
+            const existingImport = root.nodes?.find(
               (node): node is AtRule =>
                 node.type === "atrule" &&
-                node.name === "plugin" &&
+                node.name === "import" &&
                 node.params === params
             )
 
+            if (!existingImport) {
+              const importRule = postcss.atRule({
+                name: "import",
+                params,
+                raws: { semicolon: true },
+              })
+
+              // Find the last import to insert after, or insert at beginning.
+              const importNodes = root.nodes?.filter(
+                (node): node is AtRule =>
+                  node.type === "atrule" && node.name === "import"
+              )
+
+              if (importNodes && importNodes.length > 0) {
+                // Insert after the last existing import.
+                const lastImport = importNodes[importNodes.length - 1]
+                importRule.raws.before = "\n"
+                root.insertAfter(lastImport, importRule)
+              } else {
+                // No imports exist, insert at the very beginning.
+                // Check if the file is empty.
+                if (!root.nodes || root.nodes.length === 0) {
+                  importRule.raws.before = ""
+                } else {
+                  importRule.raws.before = ""
+                }
+                root.prepend(importRule)
+              }
+            }
+          }
+          // Special handling for plugins - place them after imports.
+          else if (name === "plugin") {
+            // Ensure plugin name is quoted if not already.
+            let quotedParams = params
+            if (params && !params.startsWith('"') && !params.startsWith("'")) {
+              quotedParams = `"${params}"`
+            }
+
+            // Normalize params for comparison (remove quotes).
+            const normalizeParams = (p: string) => {
+              if (p.startsWith('"') && p.endsWith('"')) {
+                return p.slice(1, -1)
+              }
+              if (p.startsWith("'") && p.endsWith("'")) {
+                return p.slice(1, -1)
+              }
+              return p
+            }
+
+            // Find existing plugin with same normalized params.
+            const existingPlugin = root.nodes?.find((node): node is AtRule => {
+              if (node.type !== "atrule" || node.name !== "plugin") {
+                return false
+              }
+              return normalizeParams(node.params) === normalizeParams(params)
+            })
+
             if (!existingPlugin) {
               const pluginRule = postcss.atRule({
                 name: "plugin",
-                params,
+                params: quotedParams,
                 raws: { semicolon: true, before: "\n" },
               })
 
@@ -141,7 +213,34 @@ function updateCssPlugin(css: z.infer<typeof registryItemCssSchema>) {
               }
             }
           }
-          // Special handling for keyframes - place them under @theme inline
+          // Check if this is any at-rule with no body (empty object).
+          else if (
+            typeof properties === "object" &&
+            Object.keys(properties).length === 0
+          ) {
+            // Handle any at-rule with no body (e.g., @apply, @tailwind, etc.).
+            const atRule = root.nodes?.find(
+              (node): node is AtRule =>
+                node.type === "atrule" &&
+                node.name === name &&
+                node.params === params
+            ) as AtRule | undefined
+
+            if (!atRule) {
+              const newAtRule = postcss.atRule({
+                name,
+                params,
+                raws: { semicolon: true },
+              })
+
+              root.append(newAtRule)
+              root.insertBefore(
+                newAtRule,
+                postcss.comment({ text: "---break---" })
+              )
+            }
+          }
+          // Special handling for keyframes - place them under @theme inline.
           else if (name === "keyframes") {
             let themeInline = root.nodes?.find(
               (node): node is AtRule =>
@@ -339,25 +438,43 @@ function processRule(parent: Root | AtRule, selector: string, properties: any) {
 
   if (typeof properties === "object") {
     for (const [prop, value] of Object.entries(properties)) {
-      if (typeof value === "string") {
+      // Check if this is any at-rule with empty object (no body).
+      if (
+        prop.startsWith("@") &&
+        typeof value === "object" &&
+        value !== null &&
+        Object.keys(value).length === 0
+      ) {
+        // Parse the at-rule.
+        const atRuleMatch = prop.match(/@([a-zA-Z-]+)\s*(.*)/)
+        if (atRuleMatch) {
+          const [, atRuleName, atRuleParams] = atRuleMatch
+          const atRule = postcss.atRule({
+            name: atRuleName,
+            params: atRuleParams,
+            raws: { semicolon: true, before: "\n    " },
+          })
+          rule.append(atRule)
+        }
+      } else if (typeof value === "string") {
         const decl = postcss.decl({
           prop,
           value: value,
           raws: { semicolon: true, before: "\n    " },
         })
 
-        // Replace existing property or add new one
+        // Replace existing property or add new one.
         const existingDecl = rule.nodes?.find(
           (node): node is Declaration =>
             node.type === "decl" && node.prop === prop
         )
 
         existingDecl ? existingDecl.replaceWith(decl) : rule.append(decl)
       } else if (typeof value === "object") {
-        // Nested selector (including & selectors)
+        // Nested selector (including & selectors).
         const nestedSelector = prop.startsWith("&")
           ? selector.replace(/^([^:]+)/, `$1${prop.substring(1)}`)
-          : prop // Use the original selector for other nested elements
+          : prop // Use the original selector for other nested elements.
         processRule(parent, nestedSelector, value)
       }
     }