From 3227e50b32105f8893f7dff2f29278c5b3a9f621 Mon Sep 17 00:00:00 2001
From: Cong <gucovip@gmail.com>
Date: Fri, 10 Nov 2023 16:44:08 +0800
Subject: [PATCH] fix(compiler-sfc): support `:is` and `:where` selector in
 scoped css rewrite (#8929)

---
 packages/compiler-sfc/__tests__/compileStyle.spec.ts | 10 ++++++++++
 packages/compiler-sfc/src/style/pluginScoped.ts      |  5 +++++
 2 files changed, 15 insertions(+)

diff --git a/packages/compiler-sfc/__tests__/compileStyle.spec.ts b/packages/compiler-sfc/__tests__/compileStyle.spec.ts
index b33dabfd2ce..66fc201f547 100644
--- a/packages/compiler-sfc/__tests__/compileStyle.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileStyle.spec.ts
@@ -85,6 +85,16 @@ describe('SFC scoped CSS', () => {
       ".baz .qux[data-v-test] .foo .bar { color: red;
       }"
     `)
+    expect(compileScoped(`:is(.foo :deep(.bar)) { color: red; }`))
+      .toMatchInlineSnapshot(`
+      ":is(.foo[data-v-test] .bar) { color: red;
+      }"
+    `)
+    expect(compileScoped(`:where(.foo :deep(.bar)) { color: red; }`))
+      .toMatchInlineSnapshot(`
+      ":where(.foo[data-v-test] .bar) { color: red;
+      }"
+    `)
   })
 
   test('::v-slotted', () => {
diff --git a/packages/compiler-sfc/src/style/pluginScoped.ts b/packages/compiler-sfc/src/style/pluginScoped.ts
index f6e9be2fde7..5394b77743f 100644
--- a/packages/compiler-sfc/src/style/pluginScoped.ts
+++ b/packages/compiler-sfc/src/style/pluginScoped.ts
@@ -173,6 +173,11 @@ function rewriteSelector(
     if (n.type !== 'pseudo' && n.type !== 'combinator') {
       node = n
     }
+
+    if (n.type === 'pseudo' && (n.value === ':is' || n.value === ':where')) {
+      rewriteSelector(id, n.nodes[0], selectorRoot, slotted)
+      shouldInject = false
+    }
   })
 
   if (node) {