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.

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*' ]
        }
    })