Purgecss stripping out 3rd party library styles

[nitroplonker]

When trying to use purgecss-webpack-plugin in my app it extracts all the css for any 3rd party plugin loaded such as jqueryui or tinyMCE. The page specific css is fine. My webpack config is :

  new PurgecssPlugin({
     paths: glob.sync([
       path.join(__dirname, 'Views/**/*.cshtml'),
       path.join(__dirname, 'src/app/**/*.js'),
       path.join(__dirname, 'src/app/**.ts'),
     ]), 
     extractors: [
       {
         extractor: class {
           static extract(content) {
             return content.match(/[A-z0-9-:\/]+/g) || []
           }
         },
         extensions: ['cshtml', 'js', 'ts']
       }
     ],
}),

I am using
webpack 4,
purgecss-webpack-plugin@1.0.2

Any ideas?

Many thanks

[jsnanigans]

Hi, you can fix this by adding a whitelistPattern to the purgecss config.
try this:

whitelistPatterns: [/^mceu/]

https://www.purgecss.com/whitelisting#patterns

[nitroplonker]

Thanks for that jsnanigans,

Does that mean that i have to whitelist all 3rd party plugin elements that i am using as that would be a pretty huge list?

When using PurifyCss in webpack 3 it was able to do this automatically though seems to have broken when upgrading to webpack 4.

Isn't this the point of using something like Purgecss? to strip out unnecessary css from libraries like bootstrap?

[jsnanigans]

when using webpack you need to use npm i purgecss-webpack-plugin@next -D to install the next channel.

The point of purgecss is to strip out unused css, however purgecss can not magically know what css you are actually using (at the moment), so you need to give it some html or templates from where purgecss extracts selectors that are possibly used, if there is a library that dynamically adds html, that is not in your original templates, you need to either add the JS file that generates the html but this approach does not work if the styles are created dynamically in the JS since purgecss does not run the JS (at the moment), the other option is just to keep all css selectors that start with, for example, mceu. when using bootstap you actually add the classes in your html so then purgecss knows which classes you used and removes the rest.

So you only need to whitelist third party plugins that add html dynamically, like tinyMCE, if you are using a lightbox plugin that appends some html automatically youll have to add that too.. but for bootstrap, bulma, pure, foundation and most other ui kits you don't have to whitelist anything although you might have to use a special extractor for some.

Hope that helps, let me know if you have any other issues :)

[nitroplonker]

Thanks very much for clearing that up for me jsnanigans, very much appreciated.

[jsnanigans]

FYI, the newest version 1.2.0 supports both webpack 4 and 3 so please, if you are on the next channel, install 1.2.0

[Telokis]

I'd like to ask a question related to this issue.
You said purgecss can not magically know what css you are actually using.
Wouldn't this be possible by extracting keywords from the generated bundle instead of extracting theme from the source files?
This way it would take into account the libraries that I am effectively using and their own css.
(I'm using semantic ui for React and when I use the component Container, the underlying one uses the class .ui.container which isn't picked up by purgecss since it's not inside my own source code.

Since this is a webpack plugin, it could run after webpack has generated the final bundles. Those bundles certainly use tree shaking which guarantees that only the React components I effectively use are included. This would, in turn, allow us to extract keywords regardless of dependencies.

But, to do this, purgecss should be able to take direct content as input ; as opposed to taking paths.

What about that, does it seem feasible? Did I miss something?

/cc @jsnanigans @Ffloriel