CSS files not minimized in production build?

[x1oJ0]

Trying to figure out why our CSS files are not minimized when use encore production. JS files are minimized without any problems but CSS files not, any ideas why?

[x1oJ0]

Preview of our config:

Encore
  .setOutputPath(outputPath)
  .setPublicPath(publicPath)

  // Clean output dir before build
  .cleanupOutputBeforeBuild()

  .splitEntryChunks()
  .enableSingleRuntimeChunk()

  // Generate JS files
  .addEntry('main', './assets/javascript/main.js')

  .enableEslintLoader()
  .configureTerserPlugin((options) => {
    options.cache = true;
    options.parallel = true;
    options.terserOptions = {
      output: {
        comments: false,
      },
    };
  })

  // Generate CSS files
  .addStyleEntry('base', './assets/styles/base.scss')
  .addStyleEntry('components', './assets/styles/components.scss')
  .addStyleEntry('layout', './assets/styles/layout.scss')

  // Enable SASS loader with PostCSS config
  .enableSassLoader((options) => {
    options.sourceComments = !Encore.isProduction();
    options.outputStyle = 'compressed';
  }, {})
  .enablePostCssLoader()

  .enableSourceMaps(!Encore.isProduction())
  .enableVersioning(Encore.isProduction())

  // CSS Hot Loader for HMR in webpack dev server
  .addLoader({
    enforce: 'post',
    test: /\.(s?c|sa)ss$/,
    exclude: /node_modules/,
    loader: 'css-hot-loader',
  })

  .addPlugin(new StyleLintPlugin({
    lintDirtyModulesOnly: Encore.isProduction(),
    context: './assets/styles/',
    quiet: false,
  }));

Does anyone face the same problem? @weaverryan @Lyrkan

[jfcherng]

Currently, I added a custom CSS compression plugin.

const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

if (Encore.isProduction()) {
  Encore
    // @see: https://github.com/NMFR/optimize-css-assets-webpack-plugin
    .addPlugin(new OptimizeCssAssetsPlugin({
      assetNameRegExp: /\.(c|s[ac])ss$/,
      cssProcessorPluginOptions: {
        preset: ['default', {
          discardComments: {
            removeAll: false // remove any comments?
          }
        }],
      },
      canPrint: true,
    }));
}

[x1oJ0]

Thanks @jfcherng, we've done that already but I would like to not use external library when encore should do it alone in the background. :) We will see if we get any reaction on this issue.

[weaverryan]

Yea, this should not require an outside plugin. I just triple-checked, on SymfonyCasts.com (for example) the CSS is minified just fine. There may be something custom in your setup, though nothing looks very "weird"... except for maybe css-hot-loader? How is that working for you, btw?

[x1oJ0]

@weaverryan well I tried to disable plugins one by one but with no luck. The css-hot-loader allows control HMR on styles. When we include files what we want to watch for hot reload in our main js file, webpack can then hot reload styles on page without reloading. Weird is that minifying CSS worked for us on version 0.20 with same configuration but after upgrading to latest release it stop.

[weaverryan]

May be fixed in #440

@ondrajonas Question: do you have css-loader in your package.json? And what version do you see if you run yarn why css-loader? I'm trying to see if #440 will be the fix.

Thanks!

[x1oJ0]

@weaverryan well ye, looks like we have ‘ "css-loader": "^1.0.1"’ there. So probably thats the problem? :-)

[x1oJ0]

@weaverryan looks like it was the problem. I just removed css-loader from our dev dependencies in package.json and now minimizing works again.

[weaverryan]

Excellent! That means the linked PR will fix the problem no matter what. Thanks for confirming!