Gatsby: Autoprefixer "browsers" option is deprecated in v9, produces warnings

Created on 4 Jun 2019 · 11Comments · Source: gatsbyjs/gatsby

Description

I'm getting a series of warnings related to the browserslist package.
I can't override the settings following the warning instructions because I can't find
where the wrong properties are written.

Steps to reproduce

yarn develop

Expected result

There should be no warnings.

Actual result

warn
  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

DONE Compiled successfully in 9137ms

Environment

System:
    OS: macOS 10.14.5
    CPU: (4) x64 Intel(R) Core(TM) i5-6360U CPU @ 2.00GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 11.9.0 - /usr/local/bin/node
    Yarn: 1.15.2 - /usr/local/bin/yarn
    npm: 6.5.0 - /usr/local/bin/npm
  Languages:
    Python: 2.7.10 - /usr/bin/python
  Browsers:
    Chrome: 74.0.3729.169
    Firefox: 67.0
    Safari: 12.1.1
  npmPackages:
    gatsby: ^2.2.1 => 2.8.2
    gatsby-image: ^2.0.34 => 2.1.2
    gatsby-plugin-feed: ^2.0.15 => 2.2.2
    gatsby-plugin-google-analytics: ^2.0.17 => 2.0.20
    gatsby-plugin-google-tagmanager: ^2.0.13 => 2.0.15
    gatsby-plugin-manifest: ^2.0.24 => 2.1.1
    gatsby-plugin-offline: ^2.0.25 => 2.1.1
    gatsby-plugin-react-helmet: ^3.0.10 => 3.0.12
    gatsby-plugin-sass: ^2.0.11 => 2.0.11
    gatsby-plugin-sharp: ^2.0.29 => 2.1.3
    gatsby-plugin-sitemap: ^2.1.0 => 2.1.0
    gatsby-remark-copy-linked-files: ^2.0.11 => 2.0.13
    gatsby-remark-images: ^3.0.10 => 3.0.14
    gatsby-remark-prismjs: ^3.2.6 => 3.2.9
    gatsby-remark-responsive-iframe: ^2.1.1 => 2.1.1
    gatsby-remark-smartypants: ^2.0.9 => 2.0.9
    gatsby-source-contentful: ^2.0.47 => 2.0.67
    gatsby-source-filesystem: ^2.0.27 => 2.0.38
    gatsby-transformer-remark: ^2.3.7 => 2.3.12
    gatsby-transformer-sharp: ^2.1.17 => 2.1.21
  npmGlobalPackages:
    gatsby-cli: 2.6.3
    gatsby: 2.7.5

good first issue help wanted confirmed bug

Source

lcfd

👍8

Most helpful comment

To get rid of the error with Gulp do the following:

Add browserslist options array to your package.json file.

"browserslist": [
    "last 2 version",
    "> 2%"
  ],
  "scripts": {},

Then remove the same options from your gulpfile.js file wherever you were calling them; leaving the autoprefixer callback empty.

const postCssOptions = [
  assets({ loadPaths: ['images/'] }),
  autoprefixer(),
  postcssNormalize({
    browsers: 'last 2 versions',
    forceImport: true
  })
];

Template on.

lucasjohnson on 18 Jun 2019

👍37 🎉11 ❤5 🚀2

All 11 comments

Seems to be caused by autoprefixer's latest release.

Update: I think I found the usage of the browsers option in the gatsby repo.

robertcoopercode on 4 Jun 2019

🚀1

Yeah seems like it autoprefixers latest release. We would love to get this fixed.

Upgrade autoprefixer in gatsby to 9.6.0
Rename browsers to overrideBrowserslist inside https://github.com/gatsbyjs/gatsby/blob/6070279f68aab0c82f2d244f54088f8ad4a74503/packages/gatsby/src/utils/webpack-utils.js#L222

wardpeet on 4 Jun 2019

👍5

I'll do it ✌🏻

robertcoopercode on 4 Jun 2019

❤8

That was fast! awesome @robertcoopercode

wardpeet on 4 Jun 2019

🚀1

Hi, I have the same error only in the Gulp system

Actual result

 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

package.json

{
  "name": "zefviktor",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "devDependencies": {
    "browser-sync": "^2.26.3",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^6.1.0",
    "gulp-clean": "^0.4.0",
    "gulp-clean-css": "^4.0.0",
    "gulp-cli": "^2.0.1",
    "gulp-concat-css": "^3.1.0",
    "gulp-file": "^0.4.0",
    "gulp-footer": "^2.0.2",
    "gulp-header": "^2.0.7",
    "gulp-install": "^1.1.0",
    "gulp-modify-css-urls": "^2.0.0",
    "gulp-rename": "^1.4.0",
    "gulp-sass": "^4.0.2",
    "gulp-sass-glob": "^1.0.9",
    "gulp-sourcemaps": "^2.6.5",
    "gulp-tap": "^1.0.1",
    "gulp-uglify": "^3.0.2",
    "node-sass": "^4.10.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "zefviktor",
  "license": "MIT",
  "dependencies": {
    "bootstrap": "^4.3.1",
    "masonry-layout": "^4.2.2"
  }
}

zefviktor on 9 Jun 2019

👍13