theluyuan/vue3-yuanma
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

7
packages/compiler-sfc/src/stylePluginScoped.ts
View File

@ -44,9 +44,10 @@ export default postcss.plugin('vue-scoped', (options: any) => (root: Root) => {
} }
if (n.type === 'pseudo') { if (n.type === 'pseudo') {
const { value } = n
// deep: inject [id] attribute at the node before the ::v-deep // deep: inject [id] attribute at the node before the ::v-deep
// combinator. // combinator.
if (n.value === '::v-deep') { if (value === ':deep' || value === '::v-deep') {
if (n.nodes.length) { if (n.nodes.length) {
// .foo ::v-deep(.bar) -> .foo[xxxxxxx] .bar // .foo ::v-deep(.bar) -> .foo[xxxxxxx] .bar
// replace the current node with ::v-deep's inner selector // replace the current node with ::v-deep's inner selector
@ -81,7 +82,7 @@ export default postcss.plugin('vue-scoped', (options: any) => (root: Root) => {
// slot: use selector inside `::v-slotted` and inject [id + '-s'] // slot: use selector inside `::v-slotted` and inject [id + '-s']
// instead. // instead.
// ::v-slotted(.foo) -> .foo[xxxxxxx-s] // ::v-slotted(.foo) -> .foo[xxxxxxx-s]
if (n.value === '::v-slotted') { if (value === ':slotted' || value === '::v-slotted') {
rewriteSelector(n.nodes[0] as Selector, true /* slotted */) rewriteSelector(n.nodes[0] as Selector, true /* slotted */)
selector.insertAfter(n, n.nodes[0]) selector.insertAfter(n, n.nodes[0])
selector.removeChild(n) selector.removeChild(n)
@ -93,7 +94,7 @@ export default postcss.plugin('vue-scoped', (options: any) => (root: Root) => {
// global: replace with inner selector and do not inject [id]. // global: replace with inner selector and do not inject [id].
// ::v-global(.foo) -> .foo // ::v-global(.foo) -> .foo
if (n.value === '::v-global') { if (value === ':global' || n.value === '::v-global') {
selectors.insertAfter(selector, n.nodes[0]) selectors.insertAfter(selector, n.nodes[0])
selectors.removeChild(selector) selectors.removeChild(selector)
return false return false