[Bug]: :is and :where selector lists are purged regardless of matching elements

[chriskirknielsen]

Describe the bug

When purging CSS, if a non-blocklisted selector is present in an :is() or :where() selector (e.g. :is(h1, h2, h3), it is still purged from the resulting CSS.

To Reproduce

1. Create a basic HTML page with an <h2>Lorem ipsum</h2> element.
2. Create a CSS file with a declaration block of :is(h1, h2, h3) { color: red; } (placing * in front of the selector has no effect)
3. Run PurgeCSS on the created CSS file based on the content of the created HTML file.

Expected Behavior

The resulting styles should have :is(h1, h2, h3) { color: red; } and the <h2> should show up in red. Instead the whole declaration block is missing.

Environment

purgecss: 4.1.3
Environment: macOS v12.4, Node.js v18.6.0, npm v8.13.2

Add any other context about the problem here

CSS is minified (Sass -> CSS with compressed output) before being fed to PurgeCSS. Tested with expanded styles, same result.

Running this as an HTML transform on an Eleventy build (v.2.0.0-canary14) which grabs a hardcoded comment line and replaces it with the purged CSS, see this gist. (this makes it a little more difficult to debug)

My workaround is to safelist :is and :where but this causes unused CSS to be kept since the selectors are used across the stylesheet.

Code of Conduct

• I agree to follow this project's Code of Conduct

[GrimLink]

Same issue with the :any-link or any other selector starting with the colon

[diegohaz]

@Ffloriel I see that this has been fixed on the main branch. Is there anything we can do to get it released to npm?

[Ffloriel]

I'll release a beta version with the fix this weekend

[Ffloriel]

It's released under the next tag for the packages purgecss and @fullhuman/postcss-purgecss
npm i -D @fullhuman/postcss-purgecss@next should give you the version with the fix.

[laurentpayot]

Hi @Ffloriel. Unfortunately this issue seems to persist with version 6.0.0-alpha.0 (@fullhuman/postcss-purgecss@next).
I made a test and rules like :is(h1, h2) { color: red } are still removed from the bundle.

This is quite annoying for me because I’m using a CSS framework with functional pseudo-classes everywhere.
Any news about a fix?

[laurentpayot]

I just noticed that there is no difference between v6.0.0-alpha.0 (next version) and v5.0.0: v6.0.0-alpha.0...v5.0.0

Is it normal?

[laurentpayot]

I found a workaround by safelisting selectors starting with a colon this way:

safelist: {
  standard: [ /^\:[-a-z]+$/ ]
}

standard seems to be enough for my use case.

[leifmarcus]

@laurentpayot, I think, you need to check the difference between the versions the other way round like v5.0.0...v6.0.0-alpha.0.