search

google / web-starter-kit

Web Starter Kit - a workflow for multi-device websites
http://developers.google.com/web/starter-kit
Apache License 2.0
18.43k stars 3.02k forks source link

cssnano conflicts with autoprefixer #938

Open beldevel opened 7 years ago

beldevel commented 7 years ago

If we leave cssnano plugin as is, it will use it's own autoprefixer plugin which:

Removes unnecessary prefixes based on the browsers option. Note that by default, it will not add new prefixes to the CSS file. link

So, the autoprefixer which is used before cssnano comes out with distorted output. In my case I needed display: -webkit-flex for older safari browsers but cssnano was just droppping it. Disabling cssnano's autoprefixer fixes this issue: $.cssnano({ autoprefixer: false })

bermanboris commented 7 years ago

I'm experiencing this problem as well.

@beldevel solution solves the problem. Not sure if that's the correct way though.

gulpfile.babel.js

replace: .pipe($.if('*.css', $.cssnano()))

with: .pipe($.if('*.css', $.cssnano({autoprefixer: false})))