purgecss icon indicating copy to clipboard operation
purgecss copied to clipboard

Recover deleted code after purge

Open Quidam74 opened this issue 2 years ago • 3 comments

Is your feature request related to a problem? Please describe. I'm curently trying to make some optimisation of LCP and purging seems to be a good solution. But i'll like to go deeper, a lot of my classes are modificator (BEM) and i don't need them before the document ready, so i could load all those classes later, in a splited css file loaded from javascript. I'm using webpack.

Describe the solution you'd like A good solution for me could be to get the purged css in a separated file, i looked for something like this in documentation but doesn't find it. It could also allow to realy purge your dead code, i mean, purge your source code, not only the compiled one.

Describe alternatives you've considered An other solution would be to create a new entry point, dedicated to this post-domReady load, but in many way it's a bit too hard for the time i have on this task. (dynamic name in javascrypt, BEM build as autonome component ...)

Additional context First issue opened on a public repo ! be gentle ;-) Also i have no knowlenge about creating plugins with webpack, but i'll be happy to contribute, any explaination/ressources would be nice !

ty for reading !

Quidam74 avatar Dec 08 '21 12:12 Quidam74

I implemented this feature a few weeks ago, but I don't think I updated the docs (or they need a seperate publish process). See https://github.com/FullHuman/purgecss/pull/763.

Usage: purgecss --css <css...> --content <content...> [options]
Remove unused css selectors
Options:
  -V, --version                        output the version number
  -con, --content <files...>           glob of content files
  -css, --css <files...>               glob of css files
  -c, --config <path>                  path to the configuration file
  -o, --output <path>                  file path directory to write purged css files to
  -font, --font-face                   option to remove unused font-faces
  -keyframes, --keyframes              option to remove unused keyframes
  -v, --variables                      option to remove unused variables
  -rejected, --rejected                option to output rejected selectors
  -rejected-css, --rejected-css        option to output rejected css
  -s, --safelist <list...>             list of classes that should not be removed
  -b, --blocklist <list...>            list of selectors that should be removed
  -k, --skippedContentGlobs <list...>  list of glob patterns for folders/files that should not be scanned
  -h, --help                           display help for command

@Ffloriel Do you need to do something seperate to update the documentation website?

kevinramharak avatar Dec 09 '21 13:12 kevinramharak

Also I havent 'upstreamed' those options to any of the tool plugins yet. For webpack it would have to be implemented here https://github.com/FullHuman/purgecss/tree/main/packages/purgecss-webpack-plugin

kevinramharak avatar Dec 09 '21 13:12 kevinramharak

Hi ! thank you for your anwser, i'll try to work on this next week ! happy to have this opportunity !

Don't know if it's a good think to close this issue by myself now, feel free to do it !

Quidam74 avatar Dec 09 '21 14:12 Quidam74