From a153f22a20239fd7f6bccc0119eaccd3d17148c2 Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Wed, 28 May 2025 22:10:05 +0800
Subject: [PATCH] fix(compiler-sfc): replace universal selector with
 :where([id]) in scoped styles

---
 .../__tests__/compileStyle.spec.ts            |  8 ++++----
 .../compiler-sfc/src/style/pluginScoped.ts    | 19 ++++++++++++-------
 2 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/packages/compiler-sfc/__tests__/compileStyle.spec.ts b/packages/compiler-sfc/__tests__/compileStyle.spec.ts
index 70c6af557ab..c35fcf55967 100644
--- a/packages/compiler-sfc/__tests__/compileStyle.spec.ts
+++ b/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;
       }"
     `)
   })
diff --git a/packages/compiler-sfc/src/style/pluginScoped.ts b/packages/compiler-sfc/src/style/pluginScoped.ts
index 4845d8eee39..9b7d237bae4 100644
--- a/packages/compiler-sfc/src/style/pluginScoped.ts
+++ b/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)