Skip to content

-webkit-flex removed by uglifyjs #660

Closed
@psimyn

Description

@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!

Activity

ai

ai commented on May 21, 2016

@ai
Member

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

psimyn commented on May 21, 2016

@psimyn
Author

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

ai commented on May 21, 2016

@ai
Member

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

psimyn

psimyn commented on May 22, 2016

@psimyn
Author

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

psimyn commented on May 22, 2016

@psimyn
Author

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

warmbowski

warmbowski commented on Jun 7, 2016

@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

jasan-s commented on Jun 24, 2016

@jasan-s

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

nikopavlica

nikopavlica commented on Jul 22, 2016

@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

luxp commented on Mar 23, 2018

@luxp

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @ai@warmbowski@psimyn@nikopavlica@luxp

        Issue actions

          -webkit-flex removed by uglifyjs · Issue #660 · postcss/autoprefixer