Use parcel/css to speed up performance

[oorestisime]

Parcel css seems to be much more performant than cssnano and could be integrated in current webpack builds with this.

I wonder how i can test this on Gatsby. I know I can change some of the webpack config but I wonder how i can plug myself in here

gatsby/packages/gatsby/src/utils/webpack-utils.ts

Line 687 in 8488135

plugins.minifyCss = (

and switch it.

Unless i need to completely overwrite here https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/utils/webpack.config.js#L700
In any case this could be a plugin to start to see if any improvements in build time before making a breaking change. I am willing to work on this plugin

[LekoArts]

This article should give you an idea: https://www.eduard.work/posts/adjust-css-minification-in-gatsby/
You can get the complete webpack config in the lifecycle and have to return a valid one, how you replace certain values in between is really up to you but all possible :)

Please try it out, I'm curious if this would be beneficial for everyone!

[oorestisime]

Hm so tried with

exports.onCreateWebpackConfig = ({ stage, actions, getConfig, plugins }) => {
  if (stage === "build-javascript" || stage === "develop") {
    const config = getConfig();

    // find CSS minimizer if exists (on develop we are not applying css minimize)
    if (config.optimization.minimizer) {
      const minifyCssIndex = config.optimization.minimizer.findIndex(
        minimizer => minimizer.constructor.name === "CssMinimizerPlugin"
      );
      // if found, overwrite existing CSS minimizer with the new one
      if (minifyCssIndex > -1) {
        config.optimization.minimizer[minifyCssIndex].minimizer = [
          new CssMinimizerPlugin({
            minify: CssMinimizerPlugin.parcelCssMinify,
          }),
        ];
      }
    }

    actions.replaceWebpackConfig(config);
  }
};

But i haven't seen any improvements in build times. Not sure though if i might be missing anything here.
Adding here in case anyone else wants to test as well.