Autoprefixer "browsers" option is deprecated in v9, produces warnings #14530

lcfd · 2019-06-04T10:05:26Z

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

The text was updated successfully, but these errors were encountered:

robertcoopercode · 2019-06-04T10:17:17Z

Seems to be caused by autoprefixer's latest release.

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

wardpeet · 2019-06-04T12:07:33Z

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

gatsby/packages/gatsby/src/utils/webpack-utils.js

Line 222 in 6070279

autoprefixer({ browsers, flexbox: `no-2009` }),

robertcoopercode · 2019-06-04T12:13:53Z

I'll do it ✌🏻

wardpeet · 2019-06-04T13:41:16Z

That was fast! awesome @robertcoopercode

zefviktor · 2019-06-09T09:16:37Z

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"
  }
}

lucasjohnson · 2019-06-18T13:51:43Z

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.

rmolinamir · 2019-06-18T15:02:53Z

@lucasjohnson
Thanks! I assume it should be the same with webpack.

I also assume autoprefixer will fallback to the package.json settings, right?

jwangyangls · 2019-08-06T07:06:53Z

I found the following link helpful to me and solved my problem.

https://github.com/ng-packagr/ng-packagr/pull/1311/files

lucasjohnson · 2019-08-06T15:51:50Z

@lucasjohnson
Thanks! I assume it should be the same with webpack.

I also assume autoprefixer will fallback to the package.json settings, right?

Correct

vonderklaas · 2019-10-14T15:22:47Z

Thank you very much for this solutions! Saved me!

lucasjohnson · 2020-04-02T02:54:57Z

You can see the full working example here: https://github.com/lucasjohnson/gulp-templating/blob/master/package.json

freiksenet added status: confirmed Issue with steps to reproduce the bug that’s been verified by at least one reviewer. type: bug An issue or pull request relating to a bug in Gatsby labels Jun 4, 2019

freiksenet changed the title ~~Warnings related to browserslist package~~ Autoprefixer "browsers" option is deprecated in v9, produces warnings Jun 4, 2019

wardpeet added good first issue Issue that doesn't require previous experience with Gatsby help wanted Issue with a clear description that the community can help with. labels Jun 4, 2019

robertcoopercode self-assigned this Jun 4, 2019

robertcoopercode mentioned this issue Jun 4, 2019

fix(gatsby): autoprefixer browsers option warning #14533

Merged

DSchau closed this as completed in #14533 Jun 4, 2019

bjornharvold mentioned this issue Jun 5, 2019

Autoprefixer "browsers" option is deprecated in v9, produces warnings angular/angular-cli#14674

Closed

saadan mentioned this issue May 7, 2020

looks like there is a autoprefixer bug jonsuh/hamburgers#93

Open

rosannablanco mentioned this issue Jun 4, 2020

Option autoprefixer browserlist deprecated rosannablanco/02-gestor-of-projects#16

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Autoprefixer "browsers" option is deprecated in v9, produces warnings #14530

Autoprefixer "browsers" option is deprecated in v9, produces warnings #14530

lcfd commented Jun 4, 2019 •

edited

Loading

robertcoopercode commented Jun 4, 2019 •

edited

Loading

wardpeet commented Jun 4, 2019

robertcoopercode commented Jun 4, 2019

wardpeet commented Jun 4, 2019

zefviktor commented Jun 9, 2019 •

edited

Loading

lucasjohnson commented Jun 18, 2019 •

edited

Loading

rmolinamir commented Jun 18, 2019

jwangyangls commented Aug 6, 2019

lucasjohnson commented Aug 6, 2019

vonderklaas commented Oct 14, 2019

lucasjohnson commented Apr 2, 2020

Autoprefixer "browsers" option is deprecated in v9, produces warnings #14530

Autoprefixer "browsers" option is deprecated in v9, produces warnings #14530

Comments

lcfd commented Jun 4, 2019 • edited Loading

Description

Steps to reproduce

Expected result

Actual result

Environment

robertcoopercode commented Jun 4, 2019 • edited Loading

wardpeet commented Jun 4, 2019

robertcoopercode commented Jun 4, 2019

wardpeet commented Jun 4, 2019

zefviktor commented Jun 9, 2019 • edited Loading

lucasjohnson commented Jun 18, 2019 • edited Loading

rmolinamir commented Jun 18, 2019

jwangyangls commented Aug 6, 2019

lucasjohnson commented Aug 6, 2019

vonderklaas commented Oct 14, 2019

lucasjohnson commented Apr 2, 2020

lcfd commented Jun 4, 2019 •

edited

Loading

robertcoopercode commented Jun 4, 2019 •

edited

Loading

zefviktor commented Jun 9, 2019 •

edited

Loading

lucasjohnson commented Jun 18, 2019 •

edited

Loading