FullHuman / purgecss

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

Ability to target selected classes for removal #869

Closed spence-s closed 2 years ago

spence-s commented 2 years ago

Is your feature request related to a problem? Please describe.

I am attempting to get purge css to work with bootstrap - but I know there are well documented problems with it (#491) . What I thought might be a good solution was to target removal of only certain classes from the css output.

Describe the solution you'd like

What I would like to see is the ability to define a list of classes that purge css would target and then have it only remove those selectors if it does not find them in the extracted text.

For example...

In bootstrap - lets say I want to use bootstrap utility api to create 100 different margin classes that all have responsive variants. This creates like a million different classes. I want to keep the entire rest of the bootstrap css, but I want only the unused margin classes to be purged. I would like to be able to tell purgecss like:

 {
      content: ['./components/**/*.{js,jsx,ts,tsx}', "./pages/**/*.{js,jsx,ts,tsx}"],
      css: ['./styles/**/*.{css,scss}'],
      defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
      removalTargets: [/m-/, /mx-/, /my-/, /mt-/, /me-/, /mb-/, /ms-/]
    }

The removal targets could be an array of regex which match selectors, and purgecss will only remove selectors that match at least one of the removal targets.

Describe alternatives you've considered

This behavior would be identical to safelisting every single other selector except for removal targets. But that does not make sense when you have a much bigger selection of things to safelist than things you want to remove.

Thanks so much!

spence-s commented 2 years ago

After writing this out, it occurred to me that since safelists are just regexes I can probably accomplish this with a single regex that safelists everything but the removal targets.

However, I think maybe this should stay open, because whitelisting in this way goes against the intended use of the api (to have a list of single selectors to whitelist in an array).

I am going to leave this open in case others feel this api is more intuitive.

Feel free to close this since it actually is probably easily achievable with safelists.

github-actions[bot] commented 2 years ago

This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this will be closed in 5 days.