From 660cadc7aadb909ef33a6055c4374902a82607a4 Mon Sep 17 00:00:00 2001
From: Doctor Wu <44631608+Doctor-wu@users.noreply.github.com>
Date: Mon, 25 Mar 2024 14:12:33 +0800
Subject: [PATCH] fix(compiler-sfc): :is() and :where() in compound selectors
 (#10522)

Co-authored-by: Haoqun Jiang <haoqunjiang@gmail.com>

Closes #10511
---
 .../__tests__/compileStyle.spec.ts            | 39 +++++++++++++++++++
 .../compiler-sfc/src/style/pluginScoped.ts    |  4 +-
 2 files changed, 42 insertions(+), 1 deletion(-)

diff --git a/packages/compiler-sfc/__tests__/compileStyle.spec.ts b/packages/compiler-sfc/__tests__/compileStyle.spec.ts
index 1f9ae67225b..0da713a0504 100644
--- a/packages/compiler-sfc/__tests__/compileStyle.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileStyle.spec.ts
@@ -161,6 +161,45 @@ describe('SFC scoped CSS', () => {
     `)
   })
 
+  // #10511
+  test(':is() and :where() in compound selectors', () => {
+    expect(
+      compileScoped(`.div { color: red; } .div:where(:hover) { color: blue; }`),
+    ).toMatchInlineSnapshot(`
+    ".div[data-v-test] { color: red;
+    }
+    .div[data-v-test]:where(:hover) { color: blue;
+    }"`)
+
+    expect(
+      compileScoped(`.div { color: red; } .div:is(:hover) { color: blue; }`),
+    ).toMatchInlineSnapshot(`
+    ".div[data-v-test] { color: red;
+    }
+    .div[data-v-test]:is(:hover) { color: blue;
+    }"`)
+
+    expect(
+      compileScoped(
+        `.div { color: red; } .div:where(.foo:hover) { color: blue; }`,
+      ),
+    ).toMatchInlineSnapshot(`
+    ".div[data-v-test] { color: red;
+    }
+    .div[data-v-test]:where(.foo:hover) { color: blue;
+    }"`)
+
+    expect(
+      compileScoped(
+        `.div { color: red; } .div:is(.foo:hover) { color: blue; }`,
+      ),
+    ).toMatchInlineSnapshot(`
+    ".div[data-v-test] { color: red;
+    }
+    .div[data-v-test]:is(.foo:hover) { color: blue;
+    }"`)
+  })
+
   test('media query', () => {
     expect(compileScoped(`@media print { .foo { color: red }}`))
       .toMatchInlineSnapshot(`
diff --git a/packages/compiler-sfc/src/style/pluginScoped.ts b/packages/compiler-sfc/src/style/pluginScoped.ts
index c5e01896130..0a46de7fcb4 100644
--- a/packages/compiler-sfc/src/style/pluginScoped.ts
+++ b/packages/compiler-sfc/src/style/pluginScoped.ts
@@ -172,7 +172,9 @@ function rewriteSelector(
 
     if (
       (n.type !== 'pseudo' && n.type !== 'combinator') ||
-      (n.type === 'pseudo' && (n.value === ':is' || n.value === ':where'))
+      (n.type === 'pseudo' &&
+        (n.value === ':is' || n.value === ':where') &&
+        !node)
     ) {
       node = n
     }