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.