fix(transformer-directives): @apply in grouping selectors (#4895)

Jungzl · web-flow · commit 30bcc3d3566e · 2025-08-30T11:37:04.000Z
diff --git a/packages-presets/transformer-directives/src/apply.ts b/packages-presets/transformer-directives/src/apply.ts
@@ -85,7 +85,10 @@ export async function parseApply({ code, uno, applyVariable }: TransformerDirect
     if (parent || (selectorOrGroup && selectorOrGroup !== '.\\-') || meta?.noMerge) {
       let newSelector = generate(node.prelude)
       const className = code.slice(node.prelude.loc!.start.offset, node.prelude.loc!.end.offset)
-      if (selectorOrGroup && selectorOrGroup !== '.\\-') {
+      if (meta?.noMerge) {
+        newSelector = _selector!
+      }
+      else if (selectorOrGroup && selectorOrGroup !== '.\\-') {
         // use rule context since it could be a selector(.foo) or a selector group(.foo, .bar)
         const ruleAST = parse(`${selectorOrGroup}{}`, {
           context: 'rule',
@@ -128,7 +131,6 @@ export async function parseApply({ code, uno, applyVariable }: TransformerDirect
         code.appendRight(childNode!.loc!.end.offset + semicolonOffset, body)
     }
   }
-  // todo: after transformered remove empty css like `selector{}`
   code.remove(
     childNode!.loc!.start.offset,
     childNode!.loc!.end.offset + semicolonOffset,
diff --git a/test/transformer-directives.test.ts b/test/transformer-directives.test.ts
@@ -1492,6 +1492,28 @@ describe('wind4', () => {
         `)
     })
 
+    it('grouping selectors', async () => {
+      const result = await transform(
+        `.btn:focus-visible, .btn:hover {
+          @apply outline;
+        }`,
+      )
+      await expect(result)
+        .toMatchInlineSnapshot(`
+          ".btn:focus-visible,
+          .btn:hover {
+            outline-style: var(--un-outline-style);
+            outline-width: 1px;
+          }
+          @property --un-outline-style {
+            syntax: "*";
+            inherits: false;
+            initial-value: solid;
+          }
+          "
+        `)
+    })
+
     it('theme()', async () => {
       const result = await transform(
         `.btn {
