Posted in Uncategorized

UglifyJSPlugin is mangling valid CSS

   February 23, 2021  1 Comment on UglifyJSPlugin is mangling valid CSS

With these lines enabled in webpack.config.js, this

/* 1 */
/*!****************************************************************************!*\
  !*** ./~/css-loader!./~/autoprefixer-loader!./~/sass-loader!./styles.scss ***!
  \****************************************************************************/
/***/ function(module, exports, __webpack_require__) {

    module.exports =
        ".Test{width:calc(100vw / 2 - 6px + 0px);}";

get mangled to this

/* 1 */
/*!****************************************************************************!*\
  !*** ./~/css-loader!./~/autoprefixer-loader!./~/sass-loader!./styles.scss ***!
  \****************************************************************************/
/***/ function(module, exports, __webpack_require__) {

    module.exports =
        ".Test{width:calc(100vw/2 - 6px + 0)}";

/***/ },

The conversion of “0px” to “0” prevents Chrome (and perhaps others) from parsing this style.

Here’s a reduction where you can test it yourself.

Author: Fantashit

1 thought on “UglifyJSPlugin is mangling valid CSS”

  1. @prewk never mind, I got it.

    For anyone else who needs it, this is what I did:

    postcss: function (webpack) {
    return [
      require('postcss-import')({
        addDependencyTo: webpack
      }),
      require('postcss-url')(),
      require('postcss-cssnext')({
        browsers: ['last 2 versions', 'ie >= 9'],
        compress: true
      }),
      require('cssnano')({zindex: false})
    ];
  },

Comments are closed.