diff --git a/packages/compiler-sfc/__tests__/compileStyle.spec.ts b/packages/compiler-sfc/__tests__/compileStyle.spec.ts index 9b7e7c537..abee9b595 100644 --- a/packages/compiler-sfc/__tests__/compileStyle.spec.ts +++ b/packages/compiler-sfc/__tests__/compileStyle.spec.ts @@ -158,6 +158,24 @@ color: red } }" `) + expect(compileScoped(`.foo { :deep(.bar) { color: red; }}`)) + .toMatchInlineSnapshot(` + ".foo { + &[data-v-test] .bar { color: red; + }}" + `) + expect(compileScoped(`.foo { :deep(.bar),:deep(.baz) { color: red; }}`)) + .toMatchInlineSnapshot(` + ".foo { + &[data-v-test] .bar,&[data-v-test] .baz { color: red; + }}" + `) + expect(compileScoped(`.foo { & :deep(.bar) { color: red; }}`)) + .toMatchInlineSnapshot(` + ".foo { + &[data-v-test] .bar { color: red; + }}" + `) }) test('::v-slotted', () => { diff --git a/packages/compiler-sfc/src/style/pluginScoped.ts b/packages/compiler-sfc/src/style/pluginScoped.ts index d0aaddd76..0c7f700e1 100644 --- a/packages/compiler-sfc/src/style/pluginScoped.ts +++ b/packages/compiler-sfc/src/style/pluginScoped.ts @@ -133,6 +133,22 @@ function rewriteSelector( selector.insertAfter(last, ss) last = ss }) + + // if css nesting is used, we need to insert a nesting selector + // before the ::v-deep's inner selector. + // .foo { ::v-deep(.bar) } -> .foo { &[xxxxxxx] .bar } + const isNestedRule = rule.parent && rule.parent.type === 'rule' + if (isNestedRule && n.parent) { + const hasNestingSelector = n.parent.nodes + .slice(0, n.parent.index(n)) + .some(node => node.type === 'nesting') + + if (!hasNestingSelector) { + node = selectorParser.nesting() + selector.insertBefore(n, node) + } + } + // insert a space combinator before if it doesn't already have one const prev = selector.at(selector.index(n) - 1) if (!prev || !isSpaceCombinator(prev)) {