feat(compileStyle): support :is and :where selector

[gucovip]

close #8915

[doutatsu]

Watching this 🙏🏻 Thanks for opening a PR so quickly! Hopefully it gets approved soon

[adamwathan]

Just throwing my hat in from the Tailwind team to say this would be a super welcome fix — right now Vue's scoped styles don't properly handle some of these more modern CSS features which means certain features of Tailwind don't work for Vue users the way they'd expect.

[doutatsu]

@patak-dev Maybe we can bump this up? Seems like a quick one to get through and will help countless devs upgrading their TailwindCSS version

[doutatsu]

@sxzz Curious how come this is not merged, if it's been approved 🤔 Are there some other blockers I am not aware of?

[sxzz]

#8989 (comment)

[sodatea]

/ecosystem-ci run

[vue-bot]

📝 Ran ecosystem CI: Open

suite	result	latest scheduled
language-tools	✅ success	✅ success
nuxt	✅ success	✅ success
pinia	✅ success	✅ success
quasar	❌ failure	❌ failure
router	✅ success	✅ success
test-utils	✅ success	✅ success
vant	✅ success	✅ success
vite-plugin-vue	✅ success	✅ success
vitepress	✅ success	✅ success
vue-i18n	✅ success	✅ success
vue-macros	❌ failure	❌ failure
vuetify	✅ success	✅ success
vueuse	✅ success	✅ success
vue-simple-compiler	✅ success	✅ success

[doutatsu]

😭 How much longer I wonder

[yyx990803]

Didn't realize this is merged into minor, but this is technically a fix so I cherry picked in main and will be released in the next patch.

[doutatsu]

Amazing, thank you, can't wait to finally upgrade Tailwind 😭

[matthew-dean]

Please be aware: when this was released in 3.3.9 (? or 3.3.10?) this caused major breaking changes in our builds.

These selectors:

:is(.button) {}
.button:where(.primary) {}

...were rendered as

[data-v-dc180684]:is(.button) {} /* specificity (0,2,0) */
.button[data-v-dc180684]:where(.primary) {}  /* specificity (0,2,0) - same, but later, so wins */

After this change, they were rendered as:

:is(.button[data-v-dc180684]) {} /* specificity (0,2,0) - higher, wins */
.button:where(.primary[data-v-dc180684]) {} /* specificity (0,1,0) */

It's great to "fix" scoping within :is() and :where(), but please in the future do not change selector specificity without bumping the minor version. This was not a patch.

[matthew-dean]

Also, I don't understand the rationale here for the change. Why should the component not be scoped to the main selector? By moving component scoping (the attribute selector) to a :where() you effectively lower the specificity below anything not using :where(). That breaks the entire idea in Vue of scoping the CSS to the component.

IMO, this is semantically the correct way to render these:

[data-v-dc180684]:is(.button) {}
.button[data-v-dc180684]:where(.primary) {}

The component is scoped at the top, then refined with :is() and :where().

[sodatea]

In the latest v3.4.23, the specificity issue is fixed:

It's compiled as:

:is(.button[data-v-7ba5bd90]) {} /* specificity (0,2,0) */
.button[data-v-7ba5bd90]:where(.primary) {} /* specificity (0,2,0), but comes later, wins */

https://play.vuejs.org/#eNp9Uk1PwzAM/Ssmlw2JdQw4lW4SoEnAARAgccmldN6WkSZR4u6Dqv8dt93GJNBusd/z8/NTSnHjXLQsUMQiCZlXjiAgFW4kjcqd9QQleJxCBVNvc+gwtSONNJk1gSAPMxjWeLdzj1pb+LBeT046p9Ik/VaOhbggzJ1OCbkCSOYDyHQawlCKz4LIGnBe5anfSDEqy0a1qpL+fNDSlXEFwbKX2wlqnmFcCugzmPQPhLkMtNEIIbMOJ9yJVehG7YZTKGutqTXUC+obY7g4d+traSpptpR4NUeP3Wjr5e/EYD/Bx9WbRuJMEG8zUzWLFsEaTrEZkiKzuVMa/bMjxVFJEbdyNZZyUqvHpke+wLNdP5tj9vVPfxHWdU+KF48B/RKl2GOU+hlSC4/fnnDN7z3IgRWa2UfAVwxWF7XHlnZbmAnbPuA1bh+av6DM7D2M14Qm7I6qjdbMquFLwf/j7sjpv3Yvo6tmjvMU1Q8X0NlV

[matthew-dean]

@sodatea Oh, thank you!!