&[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 {
last = ss
})
- // if css nesting is used, we need to insert a nesting combinator
- // before the ::v-deep node
+ // 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) {
- let hasNestingCombinator = false
- let index = n.parent.index(n) - 1
- while (index >= 0) {
- const prev = n.parent.at(index)
- if (!prev) break
- if (prev.type === 'nesting') {
- hasNestingCombinator = true
- break
- }
- index--
- }
- if (!hasNestingCombinator) {
+ 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)
}