FullHuman / purgecss

Remove unused CSS
https://purgecss.com
MIT License
7.8k stars 248 forks source link

[Bug]: `:where` is incorrectly purged when it is a child of `:not` #1197

Open AdrianGonz97 opened 11 months ago

AdrianGonz97 commented 11 months ago

Describe the bug

When the pseudo-class :where is a child of :not and the selector inside of :where is an "unused" selector, it is incorrectly purged.

I would also assume that :is is also affected by this as both pseudo-classes are treated similarly.

To Reproduce

.root :not(:where(.unused)) {
    color: purple;
}

Expected Behavior

The rule should not be purged.

Environment

purgecss@6.0.0-alpha.0

Add any other context about the problem here

n/a

Code of Conduct

zokkis commented 7 months ago

a hack is to safelist a regex like /:not.+/

meduzen commented 7 months ago

a hack is to safelist a regex like /:not.+/

As there’s the same issue (#978) for multiple pseudo-selectors, what I do is the following:

const purgeCssOptions = {
  safelist: [
    /:is/, // https://github.com/FullHuman/purgecss/issues/978
    /:where/, // https://github.com/FullHuman/purgecss/issues/978
    /:not/, // https://github.com/FullHuman/purgecss/issues/1197
  ],
}
ogbotemi-2000 commented 5 months ago

PurgeCSS is clearly lacking more ways than this. When I used it to audit TailwindCSS against a html file, it totally ignored the utility classes for media query breakpoints: *8sm, md, lg, xl, 32xl**

To cater for my needs I created a thorough and concise alternative available here: https://www.npmjs.com/package/rmrf-css. I'm sure it will provide the expected output you seek. Cheers