feat(compiler-sfc): allow using :deep, :global & :slotted for short in <style scoped>

This commit is contained in:
Evan You
2020-07-10 16:47:36 -04:00
parent bd5c3b96be
commit f3cc41f0c8
2 changed files with 18 additions and 3 deletions

View File

@@ -60,6 +60,10 @@ describe('SFC scoped CSS', () => {
})
test('::v-deep', () => {
expect(compileScoped(`:deep(.foo) { color: red; }`)).toMatchInlineSnapshot(`
"[test] .foo { color: red;
}"
`)
expect(compileScoped(`::v-deep(.foo) { color: red; }`))
.toMatchInlineSnapshot(`
"[test] .foo { color: red;
@@ -78,6 +82,11 @@ describe('SFC scoped CSS', () => {
})
test('::v-slotted', () => {
expect(compileScoped(`:slotted(.foo) { color: red; }`))
.toMatchInlineSnapshot(`
".foo[test-s] { color: red;
}"
`)
expect(compileScoped(`::v-slotted(.foo) { color: red; }`))
.toMatchInlineSnapshot(`
".foo[test-s] { color: red;
@@ -96,6 +105,11 @@ describe('SFC scoped CSS', () => {
})
test('::v-global', () => {
expect(compileScoped(`:global(.foo) { color: red; }`))
.toMatchInlineSnapshot(`
".foo { color: red;
}"
`)
expect(compileScoped(`::v-global(.foo) { color: red; }`))
.toMatchInlineSnapshot(`
".foo { color: red;