Gatsby: [gatsby-plugin-postcss] breaks css minification in production

[ooloth]

Description

Adding gatsby-plugin-postcss to a Gatsby v2 site seems to cause CSS to no longer be minified in production.

Steps to reproduce

Install the default Gatsby v2 starter, run gatsby build && gatsby serve and note that the production CSS is minified. (So far, so good.)

Now, run npm i gatsby-plugin-postcss precss autoprefixer and add gatsby-plugin-postcss to gatsby-config.

Then, add a postcss.config.js file to the project root:

// postcss.config.js

module.exports = {
  plugins: [require(`precss`), require(`autoprefixer`)()],
}

Finally, run gatsby build && gatsby serve again.

Expected result

Production CSS should still be minified after adding gatsby-plugin-postcss.

Actual result

Production CSS is no longer minified.

Environment

System:
    OS: macOS High Sierra 10.13.6
    CPU: x64 Intel(R) Core(TM) i5-7500 CPU @ 3.40GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 10.8.0 - /usr/local/bin/node
    Yarn: 1.7.0 - /usr/local/bin/yarn
    npm: 6.4.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 68.0.3440.106
    Firefox: 61.0.2
    Safari: 11.1.2
  npmPackages:
    gatsby: next => 2.0.0-rc.3
    gatsby-plugin-manifest: next => 2.0.2-rc.1
    gatsby-plugin-offline: next => 2.0.0-rc.1
    gatsby-plugin-postcss: ^1.0.0 => 1.0.0
    gatsby-plugin-react-helmet: next => 3.0.0-rc.1
  npmGlobalPackages:
    gatsby-cli: 1.1.58

[KyleAMathews]

Could you create a small reproduction site for this? Not sure what's going on. Does mini-css-extract-plugin minify by default for us? Perhaps you want this? https://github.com/leodido/postcss-clean

[ooloth]

No problem! Here's a reproduction site: https://github.com/ooloth/gatsby-postcss-test.

It's just the default Gatsby v2 starter with gatsby-plugin-postcss added (along with a couple example postcss plugins). Just run gatsby build && gatsby serve to see the unminified CSS output.

If you comment out gatsby-plugin-postcss and run gatsby build && gatsby serve, the production CSS will be minified as expected.

Yes, I believe mini-css-extract-plugin minifies CSS by default in Gatsby v2, but it seems that gatsby-plugin-postcss may be accidentally removing that functionality?

Thanks for the link to postcss-clean, but if possible I'd prefer to just use the default Gatsby CSS minification even if I've added gatsby-plugin-postcss. I'm guessing a lack of minification isn't an intended side effect of using the plugin.

[KyleAMathews]

@mdreizin any idea what's happening?

[mdreizin]

I will take a look as soon as I reach home.

[KyleAMathews]

Thanks!

[mdreizin]

@ooloth @KyleAMathews I could reproduce this issue, but I need more time to fix it.

[KyleAMathews]

@mdreizin sounds great — this isn't an urgent bug so can take a bit of time. If you do get blocked on fixing, please write up your guess at the cause so someone else could pick it up if they'd like.

[mdreizin]

@KyleAMathews @ooloth We could achieve minification by using the recommendation from https://github.com/webpack-contrib/mini-css-extract-plugin#minimizing-for-production.

For instance, you can use the following snippet:

gatsby-node.js

exports.onCreateWebpackConfig = ({
  actions,
  stage
}) => {
  const isProduction = stage !== 'develop';

  if (isProduction) {
    actions.setWebpackConfig({
      devtool: false,
      optimization: {
        minimizer: [new OptimizeCssAssetsPlugin({})]
      }
    });
  }
};

[KyleAMathews]

@ooloth how do we know Gatsby is minimizing CSS by default?

[KyleAMathews]

(thanks for the research work @mdreizin)

[ooloth]

@KyleAMathews I'm inferring that Gatsby is minimizing the CSS by default from that fact that when you install the default starter and build it, the CSS inlined in the head is minified.

It only stops being minified after you activate gatsby-plugin-postcss.

Hope that adds up!

[stefanprobst]

I think this should be resolved with #7934 which adds OptimizeCssAssetsPlugin.

[madeleineostoja]

This seems to be fixed (using 2.0.0-rc.25), presumably by #7934

[ooloth]

Agreed! It's fixed in 2.0.0-rc.25.

Thanks everyone!