How to stop Webpack-3's PurifyCSSPlugin from cleaning to much?

Question

Problem

Everything else equal, my final pages differ in their CSS result. The prod version lacks the proper flexbox alignment as seen in the following comparison:

Dev

Prod

The problem is caused by the PurifyCSSPlugin. I don't know how to configure it still cleaning up the right parts of the css, keeping the parts I really need?

Any help would be appreciated. The complete code is available here.

Research so far

Update 2017-08-21:

In the production version there is css missing for the following classes

subtitle

title:not(.is-spaced) + .subtitle { margin-top: -1.5rem; }
columns

@media screen and (min-width: 769px), print .columns:not(.is-desktop) { display: flex; }

Setup

I use webpack-3 together with bulma to make a webpage. I have two script tasks defined to build my application 1. in development and 2. for production.

"dev": "webpack-dev-server --progress --colors",
"prod": "npm run clean && NODE_ENV=prod webpack -p",

Inside my webpack config I switch between two configurations for the css handling, depending on the NODE_ENV variable. The config looks as follows:

const cssConfigEnvironments = {
    'dev': ['style-loader', 'css-loader?sourceMap', 'sass-loader'],
    'prod': ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: ['css-loader', 'sass-loader']
    })
}

In addition I disable the ExtractTextPlugin for development.

    new ExtractTextPlugin({                                                                 // Builds .css, see https://github.com/webpack-contrib/extract-text-webpack-plugin
        filename: '[name].css',
        allChunks: true,
        disable: !envIsProd
    }),

The only noticeable info shown inside the console is the following deprecation warning:

(node:2275) DeprecationWarning: Chunk.modules is deprecated. Use Chunk.getNumberOfModules/mapModules/forEachModule/containsModule instead.

score 1 · Accepted Answer · answered Aug 26 '17 at 14:14

The problem is really coming from the PurifyCSSPlugin there is an issue already open tackling it.

As a quick fix you have to whitelist the not tag:

    new PurifyCSSPlugin({
        // Give paths to parse for rules. These should be absolute!
        paths: glob.sync(path.join(__dirname, 'src/*.html')),
        minimize: envIsProd,
        purifyOptions: {
          info: true,
          whitelist: [ '*:not*' ]
        }
    })