How do I solve "Greetings, time traveller. We are in the golden age of prefix-less CSS, where Autoprefixer is no longer needed for your stylesheet."?

Question

In my Next.JS app I import my stylesheet in _app.js like this:

import '../public/css/Index.css';

Index.css contains this:

.index-container {
    margin: 20px auto 0;
}

How do I solve the error message:

./src/public/css/Index.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-5-1!./node_modules/next/dist/compiled/postcss-loader??__nextjs_postcss!./src/public/css/Index.css) Warning

Greetings, time traveller. We are in the golden age of prefix-less CSS, where Autoprefixer is no longer needed for your stylesheet.

score 42 · Accepted Answer · edited Oct 05 '21 at 13:58

42

Your issue can be solved package.json by applying code below:

 "browserslist": {
    "production": [
      ">0.3%",
      "not ie 11",
      "not dead", 
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version",
      ">0.3%",
      "not ie 11",
      "not dead", 
      "not op_mini all"
    ]
  }

After you have made these changes restart your server. you will no longer get this warning.

edited Oct 05 '21 at 13:58

Adarsh_V_Desai

195
1
8

answered Jul 30 '20 at 05:50

Ian90

444
4
2

23

An explanation to why this fixes the issue would help. :) – Jebin Nov 10 '21 at 18:44

score 13 · Answer 2 · answered Jun 15 '21 at 20:18

13

I had to change both production and dev items as follows and this worked.

"browserslist": {
  "production": [
    ">0.3%",
    "not ie 11",
    "not dead",
    "not op_mini all"
  ],
"development": [
    ">0.3%",
    "not ie 11",
    "not dead",
    "not op_mini all"
  ]
},

answered Jun 15 '21 at 20:18

jbailey

309
4
6

1

This fixed for me... should others note: I encountered this issue after npm audit fix, my package.json already looked like the accepted answer, changing to this solved my issue. What a horrendous warning. – Eric Ballard Apr 25 '22 at 21:01

score 9 · Answer 3 · answered Mar 10 '22 at 16:31

9

npx browserslist --update-db worked for me

answered Mar 10 '22 at 16:31

charlieb

306
3
4

For Angular (v11 for me), this command updated my package-lock.json. Just after re run my application, libraries was compiled and application ran without error. see this link and take in account readme.md for more explanations : https://github.com/browserslist/update-db – Vifier Lockla Nov 07 '22 at 16:58

rifaidev · Answer 4 · 2020-07-27T20:24:47.333

5

This was an issue due to some incompatibility between browserslist and the bundled version of postcss-preset-env with v9.4.4.

Updating to v9.5.0 should solve it.

edited Jul 27 '20 at 20:24

answered Jul 25 '20 at 21:45

rifaidev

146
1
4

How do I solve "Greetings, time traveller. We are in the golden age of prefix-less CSS, where Autoprefixer is no longer needed for your stylesheet."?

4 Answers4

Linked