fix(compiler-sfc): support :is and :where selector in scoped css …

…rewrite (#8929)
vuejs · Nov 10, 2023 · c6083dc · c6083dc
1 parent fe82f96
commit c6083dc
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 0 deletions.
diff --git 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
@@ -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) {