From 433207240ca3a31ea8af7d6bbbf7a815468c2fc7 Mon Sep 17 00:00:00 2001
From: Philipp Rudloff <philipp.rudloff@konghq.com>
Date: Tue, 28 Nov 2023 10:43:31 +0100
Subject: [PATCH 1/2] fix(compiler-sfc): scoped style leak when using pseudo
 classes

Fix a scoped style leak when using pseudo classes caused by the scoped style attribute (i.e. `[data-v-...]`) not being attached to the key part of a selector when it contains pseudo class selectors.

Closes #8868.
---
 .../__tests__/compileStyle.spec.ts            | 36 +++++++++++++++----
 .../compiler-sfc/src/style/pluginScoped.ts    |  5 +--
 2 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/packages/compiler-sfc/__tests__/compileStyle.spec.ts b/packages/compiler-sfc/__tests__/compileStyle.spec.ts
index 1f9ae67225b..60391fca8bf 100644
--- a/packages/compiler-sfc/__tests__/compileStyle.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileStyle.spec.ts
@@ -47,22 +47,46 @@ describe('SFC scoped CSS', () => {
     )
   })
 
-  test('pseudo class', () => {
-    expect(compileScoped(`.foo:after { color: red; }`)).toMatch(
-      `.foo[data-v-test]:after { color: red;`,
-    )
+  test.each([
+    {
+      message: 'pseudo class with class',
+      source: `.foo:after { color: red; }`,
+      expected: `.foo:after[data-v-test] { color: red;`,
+    },
+    {
+      message: 'bare pseudo class at root',
+      source: `:after { color: red; }`,
+      expected: `:after[data-v-test] { color: red;`,
+    },
+    {
+      message: 'bare pseudo class as descendent',
+      source: `div :required { color: red; }`,
+      expected: `div :required[data-v-test] { color: red;`,
+    },
+    {
+      message: 'pseudo class with tag as descendent',
+      source: `div input:required { color: red; }`,
+      expected: `div input:required[data-v-test] { color: red;`,
+    },
+    {
+      message: ':not pseudo class',
+      source: `input:not(.error) { color: red; }`,
+      expected: `input:not(.error)[data-v-test] { color: red;`,
+    }
+  ])('$message', ({ source, expected }) => {
+    expect(compileScoped(source)).toMatch(expected)
   })
 
   test('pseudo element', () => {
     expect(compileScoped(`::selection { display: none; }`)).toMatch(
-      '[data-v-test]::selection {',
+      '::selection[data-v-test] {',
     )
   })
 
   test('spaces before pseudo element', () => {
     const code = compileScoped(`.abc, ::selection { color: red; }`)
     expect(code).toMatch('.abc[data-v-test],')
-    expect(code).toMatch('[data-v-test]::selection {')
+    expect(code).toMatch('::selection[data-v-test] {')
   })
 
   test('::v-deep', () => {
diff --git a/packages/compiler-sfc/src/style/pluginScoped.ts b/packages/compiler-sfc/src/style/pluginScoped.ts
index c5e01896130..681f9b2b69e 100644
--- a/packages/compiler-sfc/src/style/pluginScoped.ts
+++ b/packages/compiler-sfc/src/style/pluginScoped.ts
@@ -170,10 +170,7 @@ function rewriteSelector(
       }
     }
 
-    if (
-      (n.type !== 'pseudo' && n.type !== 'combinator') ||
-      (n.type === 'pseudo' && (n.value === ':is' || n.value === ':where'))
-    ) {
+    if (n.type !== 'combinator') {
       node = n
     }
   })

From 6eb0b24ef863e629714139dcb77967bfc2c21060 Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Wed, 3 Jan 2024 14:36:55 +0000
Subject: [PATCH 2/2] [autofix.ci] apply automated fixes

---
 packages/compiler-sfc/__tests__/compileStyle.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/compiler-sfc/__tests__/compileStyle.spec.ts b/packages/compiler-sfc/__tests__/compileStyle.spec.ts
index 60391fca8bf..965a6e9b950 100644
--- a/packages/compiler-sfc/__tests__/compileStyle.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileStyle.spec.ts
@@ -72,7 +72,7 @@ describe('SFC scoped CSS', () => {
       message: ':not pseudo class',
       source: `input:not(.error) { color: red; }`,
       expected: `input:not(.error)[data-v-test] { color: red;`,
-    }
+    },
   ])('$message', ({ source, expected }) => {
     expect(compileScoped(source)).toMatch(expected)
   })