tailwindcss
tailwindcss copied to clipboard
Loosen :is() wrapping rules in applyImportantSelector for more readable output
Hi, this is just a small quality of life improvement to the changes made in #10835, intended for a v3.x.
I'm using the important selector strategy, and noticed that for most cases, output like
.tw :is(.text-citrine-500) {
--tw-text-opacity: 1;
color: rgb(246 220 82 / var(--tw-text-opacity)) /* #f6dc52 */;
}
can be reduced to simply
.tw .text-citrine-500 {
--tw-text-opacity: 1;
color: rgb(246 220 82 / var(--tw-text-opacity)) /* #f6dc52 */;
}
because the nested selector doesn't contain a descendant selector like .dark .text-citrine-500. I'm sure the unnecessary :is() would be removed in minification, but having the "cleanest" possible output for Intellisense would be nice. (Trying to convince my coworkers to get on board, and making the previews feel more "hand-written" might help! 😁)
As far as I can tell, this change can't affect the behavior of any possible selector passed in. Feel free to close if you can find a counterexample. Thank you!