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;”.

[warmbowski]

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 https://github.com/postcss/autoprefixer/issues/660

[stevewillard]

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 })];
  },