fix(compiler-sfc): fix universal selector scope

close vuejs#10548
Doctor-wu · Mar 20, 2024 · 5f81b26 · 5f81b26
1 parent ab59bed
commit 5f81b26
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 0 deletions.
diff --git a/packages/compiler-sfc/__tests__/compileStyle.spec.ts b/packages/compiler-sfc/__tests__/compileStyle.spec.ts
@@ -390,4 +390,15 @@ describe('SFC style preprocessors', () => {
 
     expect(res.errors.length).toBe(0)
   })
+
+  test('should mount scope on correct selector when have universal selector', () => {
+    expect(compileScoped(`* { color: red; }`)).toMatchInlineSnapshot(`
+      "[data-v-test] { color: red;
+      }"
+    `)
+    expect(compileScoped(`.foo * { color: red; }`)).toMatchInlineSnapshot(`
+      ".foo[data-v-test] * { color: red;
+      }"
+    `)
+  })
 })
diff --git a/packages/compiler-sfc/src/style/pluginScoped.ts b/packages/compiler-sfc/src/style/pluginScoped.ts
@@ -170,10 +170,23 @@ function rewriteSelector(
       }
     }
 
+    if (n.type === 'universal') {
+      const prev = selector.at(selector.index(n) - 1)
+      const next = selector.at(selector.index(n) + 1)
+      if (!prev && !next) {
+        node = selectorParser.combinator({
+          value: '',
+        })
+        selector.insertBefore(n, node)
+        selector.removeChild(n)
+      }
+    }
+
     if (
       (n.type !== 'pseudo' && n.type !== 'combinator') ||
       (n.type === 'pseudo' && (n.value === ':is' || n.value === ':where'))
     ) {
+      if (n.type === 'universal' && node) return
       node = n
     }
   })