An option to generate scoped styles using :where

[brc-dd]

What problem does this feature solve?

Currently styles are generated like this:

.className[data-v-hash] {
  color: green;
}

It would be better if there is some option that can generate styles like this:

.className:where([data-v-hash]) {
  color: green;
}

In the above output, the specificity of the selector is preserved.

What does the proposed API look like?

Some option at config level like:

// vite.config.ts

export default {
  plugins: [
    vue({
      style: {
        useWhereInAttributeSelectors: true // some better name probably
      }
    })
  ]
}

[kleinfreund]

If it this can work reliably in all cases, that would be a great idea.

I just want to point out that within the current major version of Vue, this should be an opt-in change as this could easily break existing applications that rely on that increased specificity (often unbeknownst to the developers).

[rocifier]

so basically allow :where() and :is()?

[baiwusanyu-c]

Seems to be supported in vuejs/core#8929

[brc-dd]

Ah, vuejs/core#8929 is a bit different. It still generates the scoped attribute like .foo[data-v-test].

So, if I have something like this:

In future, there might be a way to opt into style generation like this:

.foo:where([data-v-7ba5bd90]) {
    color: red;
}

However, I agree this might not be desirable in some cases, and it would be easier to just do it with a custom postcss plugin instead. IG this can likely be closed as not planned.

[kleinfreund]

This issue is not about supporting :is() and :where() in general. It’s about changing the Vue mechanism for scoped styles to compile scoped styles using :where() as outlined in the original post. Instead of selector[data-v-*], you would get selector:where([data-v-*]) (very much a simplified example). This has the advantage of not unnecessarily increasing the specificity of scoped styles through the introduction on the attribute selector part.

[baiwusanyu-c]

Yes, these supports still require further consideration