[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.

[laurentpayot]

D’oh! 🤦 Thanks @leifmarcus.

[bryanjhv]

Seems to have been fixed on e9a6530.
Are there any plans on publishing any of the new changes from v6.0.0-alpha.0?

[meduzen]

Seems to have been fixed on e9a6530. Are there any plans on publishing any of the new changes from v6.0.0-alpha.0?

It’s not the same issue.

I checked on a project using v6 and it’s not fixed despite what’s mentioned in its changelog. Even :where(body) gets fully removed, and it’s probably the most basic use case out there.