Using plugin “webpack.optimize.UglifyJsPlugin” led to remove the style “display: -webkit-flex;”

Thank you to review the issue.

I using this plugin to compress js and css. I found an issue. It will remove the style “display: -webkit-flex;”.

The css file

.product-grid {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: wrap;
  flex-wrap: wrap;
  -ms-flex-line-pack: center;
  -webkit-align-content: center;
  align-content: center;
}

after webpack builded, the css will become

.product-grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  display: -webkit-flex;
  -webkit-flex-flow: wrap;
  flex-wrap: wrap;
  -ms-flex-line-pack: center;
  align-content: center
}

The result is it remove “display: -webkit-flex;”.

Author: Fantashit

7 thoughts on “Using plugin “webpack.optimize.UglifyJsPlugin” led to remove the style “display: -webkit-flex;”

  1. Are you sure this is related to UglifyJsPlugin. I mean, it is UglifyJsPlugin 😄

    I had a similar problem where I was using cssnano as a PostCSS process. It turns out it aggressively removes things it shouldn’t. This is how I fixed it:

      postcss: function() {
        return [autoprefixer, cssnano({ safe: true })];
      },
    
  2. I use the webpack in version 1.13.1, I remove UglifyJsPlugin and build again is normal. But js and css files be not compressed. After I upgrade the webpack to version v2.1.0-beta.7, the UglifyJsPlugin only compress js files, it do not uglify css files. I think it will compress css in version 1.x.

    At before,I use the webpack UglifyJsPlugin to build, it will uglify js and css, and it will not remove “display: -webkit-flex;”. After I upgrade webpack to 1.13.1, the issue appeared.

  3. I need to strike my last post. When I upgraded from node 5 to node 6, I had to reinstall all of my node_modules, and I think it messed up my post-css autoprefixer config for {browsers: []}. So properly configuring that fixed most of the autoprefixing, except when running through UglifyJS webpack plugin.

    I finally wrapped my head around the problem, though, and now I understand that when you use UglifyJSPlugin, it is only used to optimized the JS (of course), BUT simultaneously, using that plugin enables the minimize parameter on css-loader. This in turn enables cssnano in css-loader which has autoprefixing enabled by default. This autoprefixer overrides any postcss autoprifixer, and does not inherit the proper {browsers: []} configuration. So it doesn’t prefix properly. To disable the autoprefixer in css-loader and allow postcss to take over, you will need to add -autprefixer to the loader parameters. See this issue in postcss/autoprefixer for more info postcss/autoprefixer#660

  4. We get this problem, too, it’s my not cased by UglifyJsPlugin, it remove by css-loader, css loader use cssnano to optimize css files, and cssnano use the autopreifxer to process prefix. autoprefix remove -webkit default at the lastest version.

    style!css?-autoprefixer!postcss!sass
    postcss: [
    			require('autoprefixer')({
    				browsers: ['iOS >= 7', 'android >= 4', 'ie >= 9']
    			}),
    			require('postcss-flexibility')
    		],
    

    just remove cssloader autoprefixer config setting, and use postcss to add autoprefixer.

Comments are closed.