From: Doctor Wu <44631608+Doctor-wu@users.noreply.github.com>
Date: Mon, 15 Apr 2024 11:36:13 +0000 (+0800)
Subject: fix(compiler-sfc): fix universal selector scope (#10551)
X-Git-Tag: v3.4.22~12
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=54a6afa75a546078e901ce0882da53b97420fe94;p=thirdparty%2Fvuejs%2Fcore.git

fix(compiler-sfc): fix universal selector scope (#10551)

close #10548
---

diff --git a/packages/compiler-sfc/__tests__/compileStyle.spec.ts b/packages/compiler-sfc/__tests__/compileStyle.spec.ts
index 0da713a050..71c0689a39 100644
--- a/packages/compiler-sfc/__tests__/compileStyle.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileStyle.spec.ts
@@ -429,4 +429,23 @@ 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;
+      }"
+    `)
+    expect(compileScoped(`*.foo { color: red; }`)).toMatchInlineSnapshot(`
+      ".foo[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
index 0a46de7fcb..3812e67092 100644
--- a/packages/compiler-sfc/src/style/pluginScoped.ts
+++ b/packages/compiler-sfc/src/style/pluginScoped.ts
@@ -170,6 +170,32 @@ function rewriteSelector(
       }
     }
 
+    if (n.type === 'universal') {
+      const prev = selector.at(selector.index(n) - 1)
+      const next = selector.at(selector.index(n) + 1)
+      // * ... {}
+      if (!prev) {
+        // * .foo {} -> .foo[xxxxxxx] {}
+        if (next) {
+          if (next.type === 'combinator' && next.value === ' ') {
+            selector.removeChild(next)
+          }
+          selector.removeChild(n)
+          return
+        } else {
+          // * {} -> [xxxxxxx] {}
+          node = selectorParser.combinator({
+            value: '',
+          })
+          selector.insertBefore(n, node)
+          selector.removeChild(n)
+          return false
+        }
+      }
+      // .foo * -> .foo[xxxxxxx] *
+      if (node) return
+    }
+
     if (
       (n.type !== 'pseudo' && n.type !== 'combinator') ||
       (n.type === 'pseudo' &&