require-v-deep-argument | should fix with :deep()

[seahindeniz]

Hi!
Is it possible to configure vue-scoped-css/require-v-deep-argument rule to apply fixes with :deep() instead of ::v-deep for Vue 3 projects?

As stated in the following articles, the :deep() is currently supported syntax over the deprecated ::v-deep syntax.

• https://vuejs.org/api/sfc-css-features.html#deep-selectors
• https://stackoverflow.com/a/63986379/6934292

[ota-meshi]

So far there are rules to convert to ::v-deep() instead of ::v-deep, but no rules to convert to :deep(). Could you please open a PR to add the new rule?

https://future-architect.github.io/eslint-plugin-vue-scoped-css/rules/require-v-deep-argument.html

[seahindeniz]

Sure, I'll take a look at it later.
But the thing is, do you think this issue should lead to have a new rule?

I mean, with the next version, there can be a breaking change that could state the changes over the rule. It can also support converting the deprecated selector to the supported one 🤔
What do you think?

[ota-meshi]

I think we should add a new rule.
Also, I think it would be useful if that rule could also check and convert v-global, etc.

https://github.com/vuejs/rfcs/blob/master/active-rfcs/0023-scoped-styles-changes.md

[ota-meshi]

Note that the new rule does not check for v-deep, which has no arguments.

.a ::v-deep .b {}

Simply replacing it will break the selector.

.a ::deep .b {}

An already existing checking rule makes it a safe replaces.
https://future-architect.github.io/eslint-plugin-vue-scoped-css/rules/require-v-deep-argument.html

The new rule checks for v-deep with arguments.

.a ::v-deep(.b) {}