Workaround for ":where" selector for old browsers

[anantakrishna]

Currently global coverage is around 90%: https://caniuse.com/?search=where

But there is no plugin to workaround this selector for old browsers. Is it technically possible? Found this not-ideal suggestion: https://stackoverflow.com/a/71049791/3082178.

[Antonio-Laguna]

@anantakrishna thanks for asking!

The issue is what they outline in the comments. The main feature of :where is to achieve 0 specificity which can't be emulated with plain CSS as far as I know. We can increase specificity (as we've done for CSS Layers) but can't lower it.

[anantakrishna]

Thanks for a quick reply!

Yes, I understand the issue. Don't you consider that emulating :where with increased specificity still could be beneficial? At least there may be a chance of proper styling in the old browsers instead of completely unstyled HTML?

Examples:

• Typography plugin won't work in Electron iframe in Tailwind CSS v3.0+ tailwindlabs/tailwindcss#8001
• Usage of cutting-edge :where selector broken in old browsers facebook/docusaurus#7617

[Antonio-Laguna]

@anantakrishna that's a good point!

I don't think simply desugaring is the way to go here as the fallback has the side effect of just increasing specificity which means it loses the point. Such a plugin could be easily created but I don't think we would bundle it as is into preset-env given it would not be faithful to the spec since specificity wouldn't be preserved.

Now, discussing with @romainmenke, we should be able to reuse part of what was done for Cascade Layers as :where is a special cascade layer. That would, however, lead to the same sort of output we get out of Cascade Layers which means something like this.

Taking your example:

:where(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}

p {
  /* Unrelated */
  color: blue;
}

Would decompress to:

header p:hover,
main p:hover,
footer p:hover {
  color: red;
  cursor: pointer;
}

p:not(#\#) {
  color: blue;
}

This quickly explodes as your CSS grows and more and more :where is used which is something that makes us a bit nervous. It can be done but not something we're aiming for in the immediate future given the implications it can have.

---

All of that said, I think it should be safer to desugar yourself instead of leveraging :where if you're giving support for older browsers that do not support it.

[anantakrishna]

Thank you for giving it a thought.

The point is that the code is not of mine, it's from TailwindCSS Typography plugin (tailwindlabs/tailwindcss#8001). Anyhow, as of now I am going to resort to just ignoring the issue in the old browsers.

[andersk]

Similarly, Astro automatically inserts :where() to enable scoped CSS in components without interfering with specificity.

• https://docs.astro.build/en/guides/styling/#scoped-styles
• Preserve specificity in scoped CSS withastro/roadmap#63
• Preserve authored CSS specificity withastro/astro#4024