Astro purgecss integration removes rules with top level :where()

[minimaldesign]

Describe the bug Purgecss purges :where() top level rules from the astro build.

To Reproduce Steps to reproduce the behavior:

Write this in your css:

:where(h1, h2, h3) {
  border: 1px solid red;
}

Then npm run build in your Astro project. Inspect the bundled CSS file and the rule will be gone.

One potentially helpful detail, if your :where() is not at the top level, then it won't be purged, so something like this for instance will work as expected:

body :where(h1, h2, h3) {
  border: 1px solid red;
}

[minimaldesign]

Looks like a purgecss issue: https://github.com/FullHuman/purgecss/issues/1282

[mhdcodes]

Thanks for reporting on this issue. I think this is a purgecss issue, and since this plugin is a wrapper around purgecss will wait to be fixed.

[mhdcodes]

You can circumvent this by adding the * or global selector before it and it will be purged correctly. The only issue with this is that it may decrease performance

https://github.com/FullHuman/purgecss/issues/1282#issuecomment-2394928496