Skip to content
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

Merged
merged 1 commit into from
Nov 10, 2023

Conversation

gucovip
Copy link
Contributor

@gucovip gucovip commented Aug 8, 2023

close #8915

@doutatsu
Copy link

doutatsu commented Aug 9, 2023

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

@adamwathan
Copy link

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
Copy link

@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

@edison1105 edison1105 added the ready to merge The PR is ready to be merged. label Aug 11, 2023
@doutatsu
Copy link

doutatsu commented Aug 26, 2023

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

@sxzz
Copy link
Member

sxzz commented Aug 27, 2023

#8989 (comment)

@haoqunjiang haoqunjiang changed the base branch from main to minor October 19, 2023 07:31
@haoqunjiang
Copy link
Member

/ecosystem-ci run

@vue-bot
Copy link
Contributor

vue-bot commented Oct 19, 2023

📝 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
Copy link

😭 How much longer I wonder

@yyx990803 yyx990803 merged commit c6083dc into vuejs:minor Nov 10, 2023
9 checks passed
@yyx990803
Copy link
Member

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
Copy link

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

@matthew-dean
Copy link

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
Copy link

matthew-dean commented Apr 16, 2024

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().

@matthew-dean
Copy link

@sodatea Oh, thank you!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
ready to merge The PR is ready to be merged.
Projects
Status: Done
Development

Successfully merging this pull request may close these issues.

Vue doesn't work correctly with dark classes in Tailwind 3.3
9 participants