Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

-webkit-flex removed by uglifyjs #660

Closed
psimyn opened this issue May 21, 2016 · 9 comments
Closed

-webkit-flex removed by uglifyjs #660

psimyn opened this issue May 21, 2016 · 9 comments

Comments

@psimyn
Copy link

@psimyn psimyn commented May 21, 2016

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 comment has been minimized.

Copy link
Member

@ai ai commented May 21, 2016

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

This comment has been minimized.

Copy link
Author

@psimyn psimyn commented May 21, 2016

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

This comment has been minimized.

Copy link
Member

@ai ai commented May 21, 2016

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

@psimyn

This comment has been minimized.

Copy link
Author

@psimyn psimyn commented May 22, 2016

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

This comment has been minimized.

Copy link
Author

@psimyn psimyn commented May 22, 2016

I think this is most likely due to webpack/webpack#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

@psimyn psimyn closed this May 22, 2016
@warmbowski

This comment has been minimized.

Copy link

@warmbowski warmbowski commented Jun 7, 2016

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

This comment has been minimized.

Copy link

@jasan-s jasan-s commented Jun 24, 2016

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

@nikopavlica

This comment has been minimized.

Copy link

@nikopavlica nikopavlica commented Jul 22, 2016

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

This comment has been minimized.

Copy link

@luxp luxp commented Mar 23, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
6 participants
You can’t perform that action at this time.