Classes in Media Queries ignored

[GertTimmerman]

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

[gw0]

Same happens for me using Bulma and Vue.js.

[gw0]

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;
}

[gw0]

Upstream issue: https://github.com/purifycss/purifycss/issues/161

[KerimG]

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.