feat(shadcn): handle @apply directive in css prop

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

@@ -277,7 +277,24 @@ 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") {
+      // Handle @apply
+      if (prop === "@apply" && typeof value === "string") {
+        const applyAtRule = postcss.atRule({
+          name: "apply",
+          params: value,
+          raws: { semicolon: true, before: "\n    " },
+        })
+
+        // Replace existing apply or add new one
+        const existingApply = rule.nodes?.find(
+          (node): node is AtRule =>
+            node.type === "atrule" && node.name === "apply"
+        )
+
+        existingApply
+          ? existingApply.replaceWith(applyAtRule)
+          : rule.append(applyAtRule)
+      } else if (typeof value === "string") {
         const decl = postcss.decl({
           prop,
           value: value,
@@ -313,6 +330,18 @@ function processRule(parent: Root | AtRule, selector: string, properties: any) {
             const clone = node.clone()
             clone.raws.before = "\n    "
             rule?.append(clone)
+          } else if (node.type === "atrule" && node.name === "apply") {
+            // Handle @apply in string, replace existing one if present
+            const clone = node.clone()
+            clone.raws.before = "\n    "
+
+            const existingApply = rule.nodes?.find(
+              (node): node is AtRule =>
+                node.type === "atrule" && node.name === "apply"
+            )
+            existingApply
+              ? existingApply.replaceWith(clone)
+              : rule?.append(clone)
           }
         })
       }

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

@@ -125,6 +125,32 @@ describe("transformCss", () => {
     `)
   })
 
+  test("should add styles with @apply", async () => {
+    const input = `@tailwind base;
+@tailwind components;
+@tailwind utilities;`
+
+    const result = await transformCss(input, {
+      "@layer components": {
+        ".card": {
+          "@apply": "rounded-lg bg-white p-6 shadow-xl",
+        },
+      },
+    })
+
+    expect(result).toMatchInlineSnapshot(`
+      "@tailwind base;
+      @tailwind components;
+      @tailwind utilities;
+
+      @layer components {
+        .card {
+          @apply rounded-lg bg-white p-6 shadow-xl;
+        }
+      }"
+    `)
+  })
+
   test("should update existing rules", async () => {
     const input = `@import "tailwindcss";
 
@@ -159,6 +185,34 @@ describe("transformCss", () => {
     `)
   })
 
+  test("should update existing @apply", async () => {
+    const input = `@import "tailwindcss";
+
+@layer components {
+  .card {
+    @apply bg-white p-4;
+  }
+}`
+
+    const result = await transformCss(input, {
+      "@layer components": {
+        ".card": {
+          "@apply": "rounded-lg bg-background p-6 shadow-xl",
+        },
+      },
+    })
+
+    expect(result).toMatchInlineSnapshot(`
+      "@import "tailwindcss";
+
+      @layer components {
+        .card {
+          @apply rounded-lg bg-background p-6 shadow-xl;
+        }
+      }"
+    `)
+  })
+
   test("should add multiple rules and types", async () => {
     const input = `@tailwind base;
 @tailwind components;
@@ -268,6 +322,31 @@ describe("transformCss", () => {
     `)
   })
 
+  test("should handle direct string content with @apply", async () => {
+    const input = `@tailwind base;
+@tailwind components;
+@tailwind utilities;`
+
+    const result = await transformCss(input, {
+      "@layer base": {
+        body: "@apply bg-background font-sans text-foreground; line-height: 1.5;",
+      },
+    })
+
+    expect(result).toMatchInlineSnapshot(`
+      "@tailwind base;
+      @tailwind components;
+      @tailwind utilities;
+
+      @layer base {
+        body {
+          @apply bg-background font-sans text-foreground;
+          line-height: 1.5;
+        }
+      }"
+    `)
+  })
+
   test("should handle nested at-rules", async () => {
     const input = `@tailwind base;
 @tailwind components;