fix(directives): theme() breaks @apply (#1025)

unocss · May 29, 2022 · d04ff70 · d04ff70
1 parent e87e422
commit d04ff70
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 3 deletions.
diff --git 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
@@ -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);
+        }
+        "
+      `)
+    })
   })
 })