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

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.

Answer 1

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