From d04ff7031de9fef1136adc8fbd659c7c3ebe90fe Mon Sep 17 00:00:00 2001
From: Dunqing <dengqing0821@gmail.com>
Date: Sun, 29 May 2022 23:14:29 +0800
Subject: [PATCH] fix(directives): `theme()` breaks `@apply` (#1025)

---
 packages/transformer-directives/src/index.ts |  6 ++---
 test/transformer-directives.test.ts          | 25 ++++++++++++++++++++
 2 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/packages/transformer-directives/src/index.ts b/packages/transformer-directives/src/index.ts
index b3268ec81d..0435abc296 100644
--- a/packages/transformer-directives/src/index.ts
+++ b/packages/transformer-directives/src/index.ts
@@ -189,10 +189,10 @@ export async function transformDirectives(
   const stack: Promise<void>[] = []
 
   const processNode = async (node: CssNode, _item: ListItem<CssNode>, _list: List<CssNode>) => {
-    if (hasThemeFn) {
+    if (hasThemeFn)
       handleThemeFn(node)
-    }
-    else if (isApply && node.type === 'Rule') {
+
+    if (isApply && node.type === 'Rule') {
       await Promise.all(
         node.block.children.map(async (childNode, _childItem) => {
           if (childNode.type === 'Raw')
diff --git a/test/transformer-directives.test.ts b/test/transformer-directives.test.ts
index bf7a0facf1..eab132bfd9 100644
--- a/test/transformer-directives.test.ts
+++ b/test/transformer-directives.test.ts
@@ -452,5 +452,30 @@ describe('transformer-directives', () => {
       )).rejects
         .toMatchInlineSnapshot('[Error: theme() expect exact one argument, but got 2]')
     })
+
+    test('with @apply', async () => {
+      expect(await transform(
+        `
+            div {
+              @apply flex h-full w-full justify-center items-center;
+
+              --my-color: theme('colors.red.500');
+              color: var(--my-color);
+            }
+        `,
+      )).toMatchInlineSnapshot(`
+        "div {
+          height: 100%;
+          width: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+
+          --my-color: theme(\\"colors.red.500\\");
+          color: var(--my-color);
+        }
+        "
+      `)
+    })
   })
 })