tailwindcss icon indicating copy to clipboard operation
tailwindcss copied to clipboard

Loosen :is() wrapping rules in applyImportantSelector for more readable output

Open joshwilsonvu opened this issue 1 year ago • 0 comments

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!

joshwilsonvu avatar Jun 26 '24 15:06 joshwilsonvu