Skip to content

Commit

Permalink
fix(compiler-sfc): support :is and :where selector in scoped css …
Browse files Browse the repository at this point in the history
…rewrite (#8929)
  • Loading branch information
gucovip authored and yyx990803 committed Nov 10, 2023
1 parent 3e08d24 commit 3227e50
Show file tree
Hide file tree
Showing 2 changed files with 15 additions and 0 deletions.
10 changes: 10 additions & 0 deletions packages/compiler-sfc/__tests__/compileStyle.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand Down
5 changes: 5 additions & 0 deletions packages/compiler-sfc/src/style/pluginScoped.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down

0 comments on commit 3227e50

Please sign in to comment.