[Bug]: :is and :where selector lists are purged regardless of matching elements #978
Comments
chriskirknielsen
changed the title
|
Same issue with the |
|
@Ffloriel I see that this has been fixed on the main branch. Is there anything we can do to get it released to npm? |
|
I'll release a beta version with the fix this weekend |
|
It's released under the next tag for the packages purgecss and @fullhuman/postcss-purgecss |
|
Hi @Ffloriel. Unfortunately this issue seems to persist with version 6.0.0-alpha.0 (@fullhuman/postcss-purgecss@next). This is quite annoying for me because I’m using a CSS framework with functional pseudo-classes everywhere. |
|
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? |
|
I found a workaround by safelisting selectors starting with a colon this way: safelist: {
standard: [ /^\:[-a-z]+$/ ]
}
|
|
@laurentpayot, I think, you need to check the difference between the versions the other way round like |
|
D’oh! 🤦 Thanks @leifmarcus. |
|
Seems to have been fixed on e9a6530. |
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 |
|
I can confirm that this is still an issue as of version
<!DOCTYPE html>
<html lang="en">
<head> <link rel="stylesheet" href="/main.css"> </head>
<body> <h1>Some heading</h1> </body>
</html>
/* Single pseudo-class selectors will be purged */
:is(body) {
background: white;
}
:is(h1, h2, h3) {
font-weight: 700;
}
/* Combining pseudo-classes with other selectors won't be purged */
:is(body) h1 {
color: black;
}
body :is(h1, h2, h3) {
display: flex;
}Running Here's a complete log of what I have done: $ npx purgecss --version
6.0.0
$ npx purgecss --css main.css --content index.html --output ./out
$ cat ./out/main.cssThe output from the last command is: /* Single pseudo-class selectors will be purged */
/* Combining pseudo-classes with other selectors won't be purged */
:is(body) h1 {
color: black;
}
body :is(h1) {
display: flex;
} |
|
I skimmed through the source code in the This may be a culprit as whatever logic led to their hardcoding is not ubiquitous and may fail as unique scenarios using these terms arise upon usage. Pending the fix of this bug, here is an alternative developed by me that promises to be thorough and do better: https://www.npmjs.com/package/rmrf-css |
|
I can confirm that I still see this issue. For instance, the following selector gets removed: As a temporary fix, I am manually unwrapping the :where selector like this: |
|
Hello, you may try this alternative package that I developed which has a browser-based version to do away with the quirks and bugs of PurgeCSS: https: https://www.npmjs.com/package/rmrf-css |
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
<h2>Lorem ipsum</h2>element.:is(h1, h2, h3) { color: red; }(placing*in front of the selector has no effect)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
:isand:wherebut this causes unused CSS to be kept since the selectors are used across the stylesheet.Code of Conduct
The text was updated successfully, but these errors were encountered: