Avoid v-deep duplication with SCSS and Vue 3

Question

Vue 3 deprecated using v-deep as a combinator: https://github.com/vuejs/rfcs/blob/master/active-rfcs/0023-scoped-styles-changes.md

We have existing code using SCSS and v-deep like this:

.class ::v-deep {
  .child-class1 {...}
  .child-class2 {...}
}

Which compiles into something like this:

.class[data-xxxxxx] .child-class1 {...}
.class[data-xxxxxx] .child-class2 {...}

In Vue 3, this syntax is deprecated, and we need to do this instead:

.class {
  ::v-deep(.child-class1) {...}
  ::v-deep(.child-class2) {...}
}

We have to repeat v-deep for every nested rule. In reality, there are many more, and some complicated rules.

Is there any way, in SCSS to construct a nested block where all the inner rules are wrapped into this ::v-deep(...) syntax?

---

I'm looking for something like this (not actual syntax):

::v-deep(&) {
  .child-class1 {...}
  .child-class2 {...}
}

Except that the self-selector (&) would have kind of the opposite meaning, referencing the child selector instead of the parent.

Boyles

Answer 1

You can do pretty much the same thing with an empty selector argument:

.class ::v-deep() {
  .child-class1 {...}
  .child-class2 {...}
}

Mf

Yes, but isn't that just the same as .class ::v-deep() .child-class. I have tried it, and it actually works, but I fear that it works for the same reason that the deprecated class ::v-deep .child-class combinator syntax works, and it will not work when the deprecated functionality is removed. – Boyles

No, it's not the same or there would be a deprecation warning as when using the old syntax. It works because it uses the new syntax. – Mf

This syntax does not works with less: it throws "Missing closing ')'". As a current workaround, I'm using .class ::v-deep(*) but it does not get the exact same result. – Louanneloucks