fix(compiler-sfc): preserve leading universal selector when followed by combinator

packages/compiler-sfc/__tests__/compileStyle.spec.ts

@@ -397,6 +397,86 @@ color: red
       ).toHaveBeenWarned()
     })
   })
+
+  test('should keep leading universal selector before non-space combinator', () => {
+    // * > .foo: * removed → invalid CSS ` > .foo`
+    expect(compileScoped(`* > .section { color: red; }`))
+      .toMatchInlineSnapshot(`
+      "* > .section[data-v-test] { color: red;
+      }"
+    `)
+    // * + .foo: * removed → invalid CSS ` + .foo`
+    expect(compileScoped(`* + .section { color: red; }`))
+      .toMatchInlineSnapshot(`
+      "* + .section[data-v-test] { color: red;
+      }"
+    `)
+    // * ~ .foo: * removed → invalid CSS ` ~ .foo`
+    expect(compileScoped(`* ~ .section { color: red; }`))
+      .toMatchInlineSnapshot(`
+      "* ~ .section[data-v-test] { color: red;
+      }"
+    `)
+  })
+
+  test('should keep leading universal selector in nested rules', () => {
+    // non-nested: * should still be removed
+    expect(compileScoped(`* .section { color: red; }`)).toMatchInlineSnapshot(`
+      ".section[data-v-test] { color: red;
+      }"
+    `)
+    // .outer { * .section {} } → * must be preserved to avoid matching direct children
+    expect(compileScoped(`.outer { * .section { color: red; } }`))
+      .toMatchInlineSnapshot(`
+      ".outer {
+      * .section[data-v-test] { color: red;
+      }
+      }"
+    `)
+    // nested non-space combinator should also keep *
+    expect(compileScoped(`.outer { * > .section { color: red; } }`))
+      .toMatchInlineSnapshot(`
+      ".outer {
+      * > .section[data-v-test] { color: red;
+      }
+      }"
+    `)
+    // *.foo in nested: * should still be removed (*.foo is equivalent to .foo)
+    expect(compileScoped(`.outer { *.foo { color: red; } }`))
+      .toMatchInlineSnapshot(`
+      ".outer {
+      .foo[data-v-test] { color: red;
+      }
+      }"
+    `)
+    // standalone * in nested: converted to [data-v-id]
+    expect(compileScoped(`.outer { * { color: red; } }`))
+      .toMatchInlineSnapshot(`
+      ".outer {
+      [data-v-test] { color: red;
+      }
+      }"
+    `)
+    // @media at top-level (no rule ancestor): * should still be removed
+    expect(compileScoped(`@media screen { * .section { color: red; } }`))
+      .toMatchInlineSnapshot(`
+      "@media screen {
+      .section[data-v-test] { color: red;
+      }
+      }"
+    `)
+    // * nested inside .outer via @media: * must be preserved
+    expect(
+      compileScoped(`.outer { @media screen { * .section { color: red; } } }`),
+    ).toMatchInlineSnapshot(`
+      ".outer[data-v-test] {
+      @media screen {
+      * .section[data-v-test] { color: red;
+      }
+      }
+      }"
+    `)
+  })
 })
 
 describe('SFC CSS modules', () => {

packages/compiler-sfc/src/style/pluginScoped.ts

@@ -76,17 +76,22 @@ function processRule(id: string, rule: Rule) {
   }
   processedRules.add(rule)
   let deep = false
+  let isNested = false
   let parent: Document | Container | undefined = rule.parent
   while (parent && parent.type !== 'root') {
     if ((parent as any).__deep) {
       deep = true
       break
     }
+    if (parent.type === 'rule') {
+      isNested = true
+      break
+    }
     parent = parent.parent
   }
   rule.selector = selectorParser(selectorRoot => {
     selectorRoot.each(selector => {
-      rewriteSelector(id, rule, selector, selectorRoot, deep)
+      rewriteSelector(id, rule, selector, selectorRoot, deep, false, isNested)
     })
   }).processSync(rule.selector)
 }
@@ -98,6 +103,7 @@ function rewriteSelector(
   selectorRoot: selectorParser.Root,
   deep: boolean,
   slotted = false,
+  isNested = false,
 ) {
   let node: selectorParser.Node | null = null
   let shouldInject = !deep
@@ -199,9 +205,16 @@ function rewriteSelector(
       if (!prev) {
         // * .foo {} -> .foo[xxxxxxx] {}
         if (next) {
-          if (next.type === 'combinator' && next.value === ' ') {
-            selector.removeChild(next)
+          if (next.type === 'combinator') {
+            if (next.value === ' ' && !isNested) {
+              // * .foo {} -> .foo[xxxxxxx] {}
+              selector.removeChild(next)
+              selector.removeChild(n)
+            }
+            // keep *: nested .outer { * .foo {} } or non-space combinator (* > .foo etc.)
+            return
           }
+          // *.foo {} -> .foo[xxxxxxx] {}
           selector.removeChild(n)
           return
         } else {