Combine with purgecss

[technic]

Hi,

Thanks a lot for this cool plugin!

I am trying to understand what is the order of css plugins and how to customize it. What I want to achieve is to apply fontmin after purgecss. (https://purgecss.com/plugins/webpack.html)

I use font-awesome, and import it to css. The webpack outputs very small and lightweight css file, where only few icons are present. However fontmin still includes all icons in the font. After small debugging I put the following line in the source code

console.log(item.asset.source())

What I see is that the source code that fontmin sees the unporcessed css file, it is minified but not purged. And includes all icons. If I replace my original css file with the postporcess one, which has only limited number of icons, then fontmin works as expected and cuts the web font files significanlty.

[patrickhulce]

Thanks for filing @technic! The success of this depends a lot on how the CSS removal plugin works and at what stages specifically it replaces the webpack asset so that fontmin-webpack can see the minified version.

I originally wrote nukecss-webpack for this purpose so I could control it carefully.

It looks like purgecss runs its hook at the compilation stage while fontmin works at thisCompilation stage (which happens before compilation. Admittedly it's been a long time since I wrote this particular piece, so if there's a strong argument for moving our phase to compilation instead, I'm open to it if it's coupled with strong tests.

[technic]

Hi, great. Thanks for quick answer. changing to compilation stage fixed my use case. I can try to help on tests, however I am new to webpack. Which tests are you thinking of?

[patrickhulce]

Mainly just ensuring all the existing tests continue to work as expected and add one for purgecss plugin with a parallel config.