Autoprefixer: -webkit-flex removed by uglifyjs

[psimyn]

I'm using "last 3 versions" with postcss-loader (with webpack). With nothing else, I get -webkit and -ms prefixed. But when enabling uglifyjs plugin, it only leaves -ms-flex and flex

If I increase the range of browsers (e.g '> 1%') then I get -webkit-box and -ms-flex, but still no webkit-flex

Tried playing around with flexbox option as well, but same result.

Thanks!

[ai]

This thing is very weird. How uglifyjs is reletad to CSS?

Do you use browserlist config file or just pass options to autoprefixer plugin? Do you use postcss-loader or postcss-loader? Can you show full webpack config?

[psimyn]

Passing browsers list as options. I'll post webpack config a bit later.

My vaguish understanding of how it works is:

1. Uglifyjs in webpack adds the minimise option to other loaders
2. Postcss loader, when given the minimise option, passes some options to css nano
3. Css nano uses autoprefixer for removal, which I thought should respect the options it is passed

May be completely incorrect - this is based on casual read through. Writing that has given me some ideas to look into though

[ai]

@psimyn can you show your config? and how did you add Uglifyjs exactly?

[psimyn]

I've set up a sample repo showing the issue at https://github.com/psimyn/science/pull/1 - there are commands and sample output on the PR

some webpack config sections:

loaders: [{
  test: /\.css/,
  loader: 'css!postcss'
}],
postcss: [
  autoprefixer({
    browsers: ['last 3 versions'],
    remove: false    
  })
],
plugins: [
  new webpack.optimize.UglifyJsPlugin()
]

Using node 4.x where I noticed this issue, sample repo is 5.something.

Thanks for any info

[psimyn]

I think this is most likely due to https://github.com/webpack/webpack/issues/283

I think passing ?minimize&-autoprefixer to css loader should sort it out for now (and css-loader is more likely to be where is the issue is).

Happy to close, but 💯 if you have any more insight

edit: link to correct issue

[warmbowski]

I had my loader configured for css-modules and added &autoprefixer on the end of the loader that get optimized by UglifyJS and it worked. (i.e. css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]&-autoprefixer). Thanks for the tip!

[jasan-s]

Doesn't webpack have Autoprefixer built in ? when then would you use postcss to load autoprefixer?

[nikopavlica]

We had some funny issue when using autoprefixer and extract-text-plugin (in production build). The problem was that browserslist (dependency component) didn't found the 'browserslist' file in the root of a project all the times because of some webpack internal. It did found it sometimes though - very strange.

A solution to this was to explicitly set BROWSERSLIST_CONFIG environment variable to absolutely point to correct file (we just initiated the env variable in runtime actually). I know env variables aren't meant for initialising them in the code, but still i think that for this case, it was the best possible solution.

I hope it helps anybody with similar problem, because it took me almost a day to figure this shit out :)

[luxp]

Upgrade the css-loader version to 0.28.x can just fix this.