fix(compiler-sfc): replace universal selector with :where([id]) in scoped styles

Author: edison1105

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

@@ -493,7 +493,7 @@ describe('SFC style preprocessors', () => {
       }"
     `)
     expect(compileScoped(`.foo * { color: red; }`)).toMatchInlineSnapshot(`
-      ".foo[data-v-test] [data-v-test] { color: red;
+      ".foo[data-v-test] :where([data-v-test]) { color: red;
       }"
     `)
     expect(compileScoped(`.foo :active { color: red; }`))
@@ -503,7 +503,7 @@ describe('SFC style preprocessors', () => {
     `)
     expect(compileScoped(`.foo *:active { color: red; }`))
       .toMatchInlineSnapshot(`
-      ".foo[data-v-test] [data-v-test]:active { color: red;
+      ".foo[data-v-test] :where([data-v-test]):active { color: red;
       }"
     `)
     expect(compileScoped(`.foo * .bar { color: red; }`)).toMatchInlineSnapshot(`
@@ -512,12 +512,12 @@ describe('SFC style preprocessors', () => {
     `)
     expect(compileScoped(`:last-child * { color: red; }`))
       .toMatchInlineSnapshot(`
-      "[data-v-test]:last-child [data-v-test] { color: red;
+      "[data-v-test]:last-child :where([data-v-test]) { color: red;
       }"
     `)
     expect(compileScoped(`:last-child *:active { color: red; }`))
       .toMatchInlineSnapshot(`
-      "[data-v-test]:last-child [data-v-test]:active { color: red;
+      "[data-v-test]:last-child :where([data-v-test]):active { color: red;
       }"
     `)
   })

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

@@ -218,7 +218,7 @@ function rewriteSelector(
         }
       }
       // store the universal selector so it can be rewritten later
-      // .foo * -> .foo[xxxxxxx] [xxxxxxx]
+      // .foo * -> .foo[xxxxxxx] :where([xxxxxxx])
       starNode = n
     }
 
@@ -280,15 +280,20 @@ function rewriteSelector(
       }),
     )
     // Used for trailing universal selectors (#12906)
-    // `.foo * {}` -> `.foo[xxxxxxx] [xxxxxxx] {}`
+    // `.foo * {}` -> `.foo[xxxxxxx] :where([xxxxxxx]) {}`
     if (starNode) {
       selector.insertBefore(
         starNode,
-        selectorParser.attribute({
-          attribute: idToAdd,
-          value: idToAdd,
-          raws: {},
-          quoteMark: `"`,
+        selectorParser.pseudo({
+          value: ':where',
+          nodes: [
+            selectorParser.attribute({
+              attribute: idToAdd,
+              value: idToAdd,
+              raws: {},
+              quoteMark: `"`,
+            }),
+          ],
         }),
       )
       selector.removeChild(starNode)