Foundation-sites: gulpfile.js | Replace Autoprefixer browsers option to Browserslist config

[ITZAP]

Downloaded latest ZURB Foundation v6.5.3 on 25 June 2019.
Basic Web Template with SASS compiler for latest Windows 10.
Upon running CMD foundation watch ...

What should happen?

gulpfile.js SASS should compile app.css without any warning or error.

What happens instead?

CSS is compiled as before, BUT the CMD window prints this warning message ...

Replace Autoprefixer browsers option to Browserslist config.
Use browserslist key in package.json or .browserslistrc file.

Using browsers option cause some error. Browserslist config
can be used for Babel, Autoprefixer, postcss-normalize and other tools.

If you really need to use option, rename it to overrideBrowserslist.

Learn more at:
https://github.com/browserslist/browserslist#readme
https://twitter.com/browserslist

Possible Solution

Check out those URL's to learn that autoprefixer and browserlist have been updated.

gulpfile.js line 19 needs to be changed
FROM:
autoprefixer({ browsers: ['last 2 versions', 'ie >= 9'] })
TO (I think) something like:
autoprefixer({ Browserslist: ['last 2 versions', 'ie >= 9'] })

That runs without warning, BUT the CSS produced does not include -webkit code variant, like it did before.

Maybe you can figure the correct working solution?

Appreciate any help, regards
Gary Flack, I.T. ZAP Website Design Works.

[DanielRuf]

Hi @ITZAP,

We use yarn.lock and package-lock.json to lock dependencies so this should not happen when you use Yarn or npm ci.

[DanielRuf]

Hi @gioriv,

can you provide a reproducible test case (small repo)?

[ineptian]

@DanielRuf If you install the foundation starter template "foundation new --framework sites --template zurb", and run foundation watch after installation, the warning will be there.

The fix proposed by gioriv looks to remove autoprefixr completely, so I don't think it's really a solution.

[DanielRuf]

The fix proposed by gioriv looks to remove autoprefixr completely, so I don't think it's really a solution.

We already have the mentioned .browserslist file here in foundation-sites. You can probably copy it. Alternatively the warning can be safely ignored for now.

[gilbertnigg]

As @ineptian mentioned: Don't remove the autoprefixer-function by itself.
Remove the parameters from the function:
autoprefixer({ browsers: COMPATIBILITY })
to autoprefixer()
Those parameters should be in the .browserslistrc-file

[DanielRuf]

Hi @gilbertnigg,

thanks for letting us know. Can and do you want to provide a PR? That would be huge =)