Severe performance degradation caused by postcss-browser-comments

[CyberAP]

After profiling my webpack builds multiple times I have noticed that postcss-browser-comments is present in almost every task that I zoomed into. After disabling postcss-normalize my build time sped up by 5 times. It seems that postcss-browser-comments performs highly unoptimized transformations on every single CSS file. This side effect is not really explicit in the readme and probably should be dealt with. I will create a similar issue in the postcss-browser-comments repo. (in case it can be fixed in that repo, otherwise I'd prefer having a setting to disable it completely)

Attaching my performance snapshots:

profiles.zip

The slow one is with postcss-normalize enabled and the fast one is without.

Perhaps postcss-browser-comments should be run only on the reset.css, instead of every input it gets.

[jonathantneal]

It’s excellent of you to report this. I don’t know to read these profile JSON files. However, I’m determined to help us find a way to improve the performance here.

[CyberAP]

It’s excellent of you to report this. I don’t know to read these profile JSON files. However, I’m determined to help us find a way to improve the performance here.

You can open these profiles in Chrome Dev Tools Performance tab. Keep in mind that slow profile could take a while.

[CyberAP]

From what I've seen broswerslist query is run against every property declaration, even for those that do not contain any comments against them.

[CyberAP]

If that helps, here's how my webpack loaders config for CSS looks like:

        {
          test: /\.css$/,
          use: [
            {
              loader: MiniCssExtractPlugin.loader,
            },
            {
              loader: 'css-loader',
              options: {
                importLoaders: 1
              },
            },
            'postcss-loader'
          ],
        },

PostCSS config:

module.exports = {
  plugins: [
    require('postcss-normalize')(),
    require('postcss-custom-media')({
      importFrom: path.join(srcPath, 'css/50.custom-media.css')
    }),
    require('postcss-color-mod-function')({
      importFrom: path.join(srcPath, 'css/10.variables.css')
    }),
    require('postcss-media-minmax')(),
    require('postcss-easing-gradients')(),
    require('autoprefixer')
  ]
};

I use @import-normalize; directive to add normalize.

[CyberAP]

Another way of solving this: cache browserslist results (in node_modules/.cache) and perform this query once.

[CyberAP]

It seems that I was running an old version of postcss-normalize: 7.0.1. Updating to the latest version fixed the problem. Sorry for the false alarm.