webpack-contrib
Classes in Media Queries ignored
I have a clean project, i have installed bulma css which i import into a less file. When i run webpack, all the classes within media queries are ignored. I have googled it, and i found this bug in purifycss, but that bug is fixed in version 1.0.15
I am user purify-css version 1.2.6, purifycss-webpack version 0.7.0. Here is my code:
main.less
@import "../../node_modules/bulma/css/bulma.css";
webpack.config.js
var webpack = require("webpack")
var path = require('path')
var glob = require('glob');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var PurifyCSSPlugin = require('purifycss-webpack');
var CleanWebpackPlugin = require('clean-webpack-plugin');
var inProduction = (process.env.NODE_ENV === 'production');
module.exports = {
entry: {
main: [
'./src/js/main.js',
'./src/less/main.less'
]
},
output: {
path: path.resolve(__dirname, './dist'),
filename: '[name].[chunkhash].js'
},
module: {
rules: [
{
test: /\.less/,
use: ExtractTextPlugin.extract({
use: ['css-loader', 'less-loader'],
fallback: 'style-loader'
})
},
]
},
plugins: [
new CleanWebpackPlugin(['dist'], {
root: __dirname,
verbose: true,
dry: false
}),
new ExtractTextPlugin('[name].[chunkhash].css'),
new PurifyCSSPlugin({
paths: glob.sync(path.join(__dirname, 'index.php')),
minimize: inProduction
}),
new webpack.LoaderOptionsPlugin({
minimize: inProduction,
debug: !inProduction
}),
function () {
this.plugin('done', stats => {
require('fs').writeFileSync(
path.join(__dirname, 'dist/manifest.json'),
JSON.stringify(stats.toJson().assetsByChunkName)
);
});
}
]
};
if(inProduction) {
module.exports.plugins.push(
new webpack.optimize.UglifyJsPlugin()
)
}
My index.php
<div class="columns">
<div class="column">
First column
</div>
<div class="column">
Second column
</div>
<div class="column">
Third column
</div>
<div class="column">
Fourth column
</div>
</div>
without the purifycss-webpack plugin i get the css code of bulma, but with the plugin i get only a couple of lines css, without any media query
I tracked the problem down to purify-css not handling :not correctly. The problematic media query in Bulma that gets removed:
@media screen and (min-width: 769px), print
columns.sass:204
.columns:not(.is-desktop) {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
I think this issue is still not fixed, because PurifyCssPlugin still removes way too much Bulma CSS code.
I tried using the 'whitelilst' option but then my webpack build fails.
