fix(directives): resolve scoped css (#3383)

unocss · Nov 29, 2023 · f5a10ce · f5a10ce
1 parent 811cc49
commit f5a10ce
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 1 deletion.
diff --git a/packages/transformer-directives/src/apply.ts b/packages/transformer-directives/src/apply.ts
@@ -92,7 +92,11 @@ export async function parseApply({ code, uno, offset, applyVariable }: Transform
       code.appendLeft(calcOffset(node.loc!.end.offset), css)
     }
     else {
-      code.appendRight(calcOffset(childNode!.loc!.end.offset), body)
+      // If nested css was scoped, put them last.
+      if (body.includes('@'))
+        code.appendRight(code.original.length, body)
+      else
+        code.appendRight(calcOffset(childNode!.loc!.end.offset), body)
     }
   }
   code.remove(

diff --git a/playground/src/auto-imports.d.ts b/playground/src/auto-imports.d.ts
@@ -175,6 +175,7 @@ declare global {
   const useCeil: typeof import('@vueuse/math')['useCeil']
   const useClamp: typeof import('@vueuse/math')['useClamp']
   const useClipboard: typeof import('@vueuse/core')['useClipboard']
+  const useClipboardItems: typeof import('@vueuse/core')['useClipboardItems']
   const useCloned: typeof import('@vueuse/core')['useCloned']
   const useColorMode: typeof import('@vueuse/core')['useColorMode']
   const useConfirmDialog: typeof import('@vueuse/core')['useConfirmDialog']
@@ -514,6 +515,7 @@ declare module 'vue' {
     readonly useCeil: UnwrapRef<typeof import('@vueuse/math')['useCeil']>
     readonly useClamp: UnwrapRef<typeof import('@vueuse/math')['useClamp']>
     readonly useClipboard: UnwrapRef<typeof import('@vueuse/core')['useClipboard']>
+    readonly useClipboardItems: UnwrapRef<typeof import('@vueuse/core')['useClipboardItems']>
     readonly useCloned: UnwrapRef<typeof import('@vueuse/core')['useCloned']>
     readonly useColorMode: UnwrapRef<typeof import('@vueuse/core')['useColorMode']>
     readonly useConfirmDialog: UnwrapRef<typeof import('@vueuse/core')['useConfirmDialog']>
@@ -847,6 +849,7 @@ declare module '@vue/runtime-core' {
     readonly useCeil: UnwrapRef<typeof import('@vueuse/math')['useCeil']>
     readonly useClamp: UnwrapRef<typeof import('@vueuse/math')['useClamp']>
     readonly useClipboard: UnwrapRef<typeof import('@vueuse/core')['useClipboard']>
+    readonly useClipboardItems: UnwrapRef<typeof import('@vueuse/core')['useClipboardItems']>
     readonly useCloned: UnwrapRef<typeof import('@vueuse/core')['useCloned']>
     readonly useColorMode: UnwrapRef<typeof import('@vueuse/core')['useColorMode']>
     readonly useConfirmDialog: UnwrapRef<typeof import('@vueuse/core')['useConfirmDialog']>

diff --git a/test/transformer-directives.test.ts b/test/transformer-directives.test.ts
@@ -507,4 +507,26 @@ div {
         "
       `)
   })
+
+  it('@apply animate- scoped', async () => {
+    const result = await transform(
+      '.btn { @apply: animate-pulse }',
+    )
+    expect(result)
+      .toMatchInlineSnapshot(`
+        ".btn {
+          animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+        }
+        @keyframes pulse {
+          0%,
+          100% {
+            opacity: 1;
+          }
+          50% {
+            opacity: 0.5;
+          }
+        }
+        "
+      `)
+  })
 })