root
/
vue3-core
mirror of https://github.com/vuejs/core.git
1
0
Fork 0
Code Issues Actions 4 Packages Projects Releases Wiki Activity

fix(compiler-sfc): support `:is` and `:where` selector in scoped css rewrite (#8929)

This commit is contained in:
Cong 2023-11-10 16:44:08 +08:00 committed by GitHub
parent fe82f96376
commit c6083dcad3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 15 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/compiler-sfc/__tests__/compileStyle.spec.ts
View File

@ -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', () => {

5
packages/compiler-sfc/src/style/pluginScoped.ts
View File

@ -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) {