search

JeremyEnglert / JointsWP

A blank WordPress theme built with Foundation 6, giving you all the power and flexibility you need to build complex, mobile friendly websites without having to start from scratch.
http://jointswp.com
851 stars 272 forks source link

Autoprefixer issue #417

Open easYnow opened 4 years ago

easYnow commented 4 years ago

Hi

I'm getting the following notice when running npm run watch on a project -

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

  Using browsers option can cause errors. 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

Can anyone please offer guidance on where to edit files for this issue?

Thanks Tom

garretthyder commented 4 years ago

Hello @easYnow

Currently the codebase passes browser information via the autoprefixer browser config here; https://github.com/JeremyEnglert/JointsWP/blob/master/gulpfile.js#L122

It appears that the Autoprefixer tool now uses Browserslist; https://github.com/postcss/autoprefixer#browsers *Hence the prompt you're seeing, appears like a warning so should still work but to dismiss you can make the switch.

To switch you can remove the 'browsers' part of the gulpfile.js call to autoprefixer (first link in post above), then either "Use browserslist key in package.json or .browserslistrc file."

The format seems similar so you might be able to just move the "browsers" array from the gulpfile.js into the package.json and rename it to "browserslist", then rebuild your project.

You may need to tweak it and can consult their github documentation; https://github.com/browserslist/browserslist#readme

If you do get it working let us know would love a snippet or PR as I'm sure others would appreciate a fix as it seems it's a fairly new change to autoprefixer. Specifically seems to have come out in Autoprefixer 9.6; https://github.com/postcss/autoprefixer/blob/master/CHANGELOG.md#96-nunc-id-vides-nunc-ne-vides

easYnow commented 4 years ago

Hey Garret,

Thanks for your help on this! Just had a chance to work through this, and got it working by removing the browsers array and adding the .browserslistrc file. The crucial step I had missed was re-building the project. Thanks again! Tom