Removes classes used in node_module react plugin

[nealoke]

Everything works great except for the fact that it removes classes which are used in a node_modules plugins.

My config

new PurifyCSSPlugin({
    paths: globAll.sync([
        path.join(__dirname, 'dist/*.html'),
        path.join(__dirname, 'src/**/*.js')
    ]),
    moduleExtensions: ['.js']
}),

Plugins The plugins it removes the styling for are react-select and react-day-picker. None of the classnames used in these plugins are kept when using purifycss-webpack, which is not the desired case ofcourse.

Any ideas on how to solve this?

[jmahc]

I had just asked this question to @bebraw on a LINK IS DEAD - see below answer from @IgnusG

[nealoke]

@jmahc is it correct that the link goes to a github page? :)

[jmahc]

Hahaha! I copied the wrong thread... LINK IS DEAD - see below answer from @IgnusG

@nealoke All fixed ;)

[chacestew]

@jmahc @nealoke

We are running into this exact issue, but the twitter links above are dead! Could you update with an explanation of how you fixed it here?

[IgnusG]

@chacestew you need to whitelist the (react) modules you are using:

new PurifyCssPlugin({
+      paths: glob.sync(dir.source('/**/*.{js,jsx}'), { nodir: true }),
+      minimize: true,
+      purifyOptions: {
+        whitelist: [ '*daterangepicker*' ]
+      }
+    }),

[chacestew]

Thanks @IgnusG - Is this the only way to parse node modules? Using moduleExtensions doesn't seem to have an effect.

Regarding the whitelist, we've had to move to PurgeCSS for the regex patterns so that we could properly whitelist classes with uppercase letters.

[IgnusG]

@chacestew unfortunately I’m unfamiliar with either of your use-cases ^^'

What are you using moduleExtensions for? As for the the uppercase letters - I would figure as long as you case the class name in the whitelist correctly it ought to work (something like *datePicker*. Have you tried that?

[chacestew]

I was hoping there was an easier way to make purifycss also recursively parse all imported React libraries. Whitelisting all the styles for each library adds manual steps and means none of those styles will be optimised. From the documentation this seemed like a benefit purifycss brought, but we haven't had it work correctly yet (seems to preserve only a random subset of the class names used by them).

Regarding the whitelist patterns, it is actually coercing them to lowercase but not doing the same at the comparison step, so it's impossible to match on camelCase: https://github.com/purifycss/purifycss/issues/145. There was a fix committed about a year ago but never merged. We've found the regex patterns of purgecss to handle this better.

Admittedly, these are all issues with purifycss and not the webpack plugin, so we can't resolve them here but it's worth making the info available.