-
-
Notifications
You must be signed in to change notification settings - Fork 8.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(compileStyle): support :is
and :where
selector
#8929
Conversation
Watching this 🙏🏻 Thanks for opening a PR so quickly! Hopefully it gets approved soon |
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. |
@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 |
@sxzz Curious how come this is not merged, if it's been approved 🤔 Are there some other blockers I am not aware of? |
/ecosystem-ci run |
📝 Ran ecosystem CI: Open
|
😭 How much longer I wonder |
Didn't realize this is merged into |
Amazing, thank you, can't wait to finally upgrade Tailwind 😭 |
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 |
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 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 |
In the latest v3.4.23, the specificity issue is fixed: It's compiled as:
|
@sodatea Oh, thank you!! |
close #8915