})
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;
})
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;
})
test('::v-global', () => {
+ expect(compileScoped(`:global(.foo) { color: red; }`))
+ .toMatchInlineSnapshot(`
+ ".foo { color: red;
+ }"
+ `)
expect(compileScoped(`::v-global(.foo) { color: red; }`))
.toMatchInlineSnapshot(`
".foo { color: red;
}
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
// 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)
// 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