diff --git a/packages/compiler-sfc/__tests__/compileStyle.spec.ts b/packages/compiler-sfc/__tests__/compileStyle.spec.ts index 628eaffdd..b1bd2ee01 100644 --- a/packages/compiler-sfc/__tests__/compileStyle.spec.ts +++ b/packages/compiler-sfc/__tests__/compileStyle.spec.ts @@ -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; diff --git a/packages/compiler-sfc/src/stylePluginScoped.ts b/packages/compiler-sfc/src/stylePluginScoped.ts index f9c1d7799..ef4664fd7 100644 --- a/packages/compiler-sfc/src/stylePluginScoped.ts +++ b/packages/compiler-sfc/src/stylePluginScoped.ts @@ -44,9 +44,10 @@ export default postcss.plugin('vue-scoped', (options: any) => (root: Root) => { } if (n.type === 'pseudo') { + const { value } = n // deep: inject [id] attribute at the node before the ::v-deep // combinator. - if (n.value === '::v-deep') { + if (value === ':deep' || value === '::v-deep') { if (n.nodes.length) { // .foo ::v-deep(.bar) -> .foo[xxxxxxx] .bar // 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'] // instead. // ::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 */) selector.insertAfter(n, n.nodes[0]) 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]. // ::v-global(.foo) -> .foo - if (n.value === '::v-global') { + if (value === ':global' || n.value === '::v-global') { selectors.insertAfter(selector, n.nodes[0]) selectors.removeChild(selector) return false