CSS variables are wrongly optimized in production

[javiereguiluz]

In a CSS file I define several CSS variables, including these:

:root {
    --border-width: 1px;
    --border-style: solid;
    --border-color: #e3e7ee;
}

When using yarn encore dev everything is great ... but with yarn encore production those 3 variables are destroyed and instead, the following wrong CSS is generated:

:root {
    border:1px solid #e3e7ee
}

How can I tell Webpack Encore to not optimize my CSS variables? Thanks!

[Lyrkan]

Hi @javiereguiluz,

It looks like a bug in the version of cssnano used by the css-loader (see webpack-contrib/css-loader#708).

As a workaround you could try disabling minification in the css-loader and using a newer version of cssnano through postcss:

$ yarn add --dev postcss-loader cssnano

// webpack.config.js
const Encore = require('@symfony/webpack-encore');

Encore
  // (...)
  .configureCssLoader(options => { options.minimize = false; })
  .enablePostCssLoader()
;

module.exports = Encore.getWebpackConfig();

// postcss.config.js
module.exports = {
  plugins: {
    'cssnano': {},
  }
}

[jfcherng]

css-loader has a stable release now! Maybe we should update it from ^0.28.10 to ^1.0.0.

[javiereguiluz]

@Lyrkan thanks a lot for your help. I tried doing that but I found an issue. This is my entire webpack.config.js file:

var Encore = require('@symfony/webpack-encore');

Encore
    .setOutputPath('./src/Resources/public/')
    .setPublicPath('/bundles/easyadmin')
    .setManifestKeyPrefix('bundles/easyadmin')

    .cleanupOutputBeforeBuild()
    .enableSassLoader()
    .enableSourceMaps(false)
    .enableVersioning(false)
    .autoProvidejQuery()

    // needed to avoid this bug: https://github.com/symfony/webpack-encore/issues/436
    .configureCssLoader(options => { options.minimize = false; })
    .enablePostCssLoader()

    .addEntry('app', './assets/js/app.js')
    .addEntry('app-rtl', './assets/js/app-rtl.js')
    .addEntry('bootstrap-all', './assets/js/bootstrap-all.js')
;

module.exports = Encore.getWebpackConfig();

And I run yarn add --dev postcss-loader cssnano and created postcss.config.js too, but I see this error:

$ yarn encore production

  Running webpack ...

  Error: Encore.configureCssLoader is not a recognized property or method.

  - index.js:969 Object.get
    [easy-admin-bundle]/[@symfony]/webpack-encore/index.js:969:27

  - webpack.config.js:15 Object.<anonymous>
    /Users/javier/code/easy-admin-bundle/webpack.config.js:15:5

  - module.js:624 Module._compile
    module.js:624:30

  - module.js:635 Object.Module._extensions..js
    module.js:635:10

  - module.js:545 Module.load
    module.js:545:32

  - module.js:508 tryModuleLoad
    module.js:508:12

  - module.js:500 Function.Module._load
    module.js:500:3

  - module.js:568 Module.require
    module.js:568:17

  - module.js:11 require
    internal/module.js:11:18

  - convert-argv.js:97 requireConfig
    [easy-admin-bundle]/[webpack]/bin/convert-argv.js:97:18


error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[jfcherng]

configureCssLoader() is introduced in encore 0.21.0.

[javiereguiluz]

@jfcherng you are absolutely right! I upgraded to 0.21 and it worked. @Lyrkan you are a genius and you perfectly solved my issue. Thanks a lot!

Closing as "fixed".