Parcel: PostCSS plugin autoprefixer requires PostCSS 8. Update PostCSS or downgrade this plugin.

[michaelpumo]

🐛 bug report

Error when running dev or build with Parcel.

🎛 Configuration (.babelrc, package.json, cli command)

.babelrc

{
  "presets": [
    "@babel/preset-env"
  ]
}

package.json

{
  "name": "jbg",
  "version": "1.0.0",
  "description": "",
  "main": "assets/js/app.js",
  "scripts": {
    "dev": "parcel watch assets/js/app.js --public-url /wp-content/themes/jbg/dist",
    "build": "parcel build assets/js/app.js --public-url /wp-content/themes/jbg/dist"
  },
  "author": "Michael Pumo",
  "devDependencies": {
    "@babel/core": "^7.11.6",
    "@babel/preset-env": "^7.11.5",
    "autoprefixer": "^10.0.0",
    "eslint": "^7.9.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-plugin-prettier": "^3.1.4",
    "parcel-bundler": "^1.12.4",
    "postcss-modules": "^3.2.2",
    "prettier": "^2.1.2",
    "sass": "^1.26.11"
  },
  "dependencies": {
    "lazysizes": "^5.2.2",
    "magic-grid": "^3.2.4"
  }
}

🤔 Expected Behavior

Project should build without errors.

😯 Current Behavior

Full error message:

> parcel watch assets/js/app.js --public-url /wp-content/themes/jbg/dist

🚨  /Users/michaelpumo/Documents/websites/jbg-wordpress/wp-content/themes/jbg/assets/scss/app.scss:undefined:undefined: PostCSS plugin autoprefixer requires PostCSS 8. Update PostCSS or downgrade this plugin.
    at Processor.normalize (/Users/michaelpumo/Documents/websites/jbg-wordpress/wp-content/themes/jbg/node_modules/postcss/lib/processor.js:153:15)
    at new Processor (/Users/michaelpumo/Documents/websites/jbg-wordpress/wp-content/themes/jbg/node_modules/postcss/lib/processor.js:56:25)
    at postcss (/Users/michaelpumo/Documents/websites/jbg-wordpress/wp-content/themes/jbg/node_modules/postcss/lib/postcss.js:55:10)
    at module.exports (/Users/michaelpumo/Documents/websites/jbg-wordpress/wp-content/themes/jbg/node_modules/parcel-bundler/src/transforms/postcss.js:17:19)

💁 Possible Solution

Downgrade Autoprefixer to:
"autoprefixer": "^9.8.6"

🔦 Context

Project was building successfully until after updating autoprefixer package.

💻 Code Sample

N/A

🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | ^1.12.4
| Node | v10.7.0
| npm/Yarn | 6.14.8
| Operating System | macOS Catalina v 10.15.6

[Sam10F]

The "Possible Solution" worked for me.
Waiting for a definitive solution...

[josef256]

i have the same issue downgrading the version to 9.8.6 fixed it

[johnwmartinez]

The possible solution worked for me too.

[codemaster138]

Your possible solution isn't working for me...

[codemaster138]

Nevermind working now

[Alecto]

the same error

[IanLin09]

same error and possible solution isn't working for me either

[9mm]

Same problem except I'm using "postcss-cli": "^8.0.0", as well

[adithwip]

The Possible Solution also worked for me.
Glad I am not the only one.

[marklai1998]

mine problem is with postcss-loader 4.0, which removed postcss from dependency
install postcss separately will to the job
https://github.com/webpack-contrib/postcss-loader/blob/master/CHANGELOG.md

your problem should be with postcss-modules which postcss is only v7
you need to wait for it to upgrade
https://github.com/css-modules/postcss-modules/blob/master/package.json

[mischnic]

you need to wait for it to upgrade

PostCSS 8 is backwards compatible with version 7: https://github.com/parcel-bundler/parcel/issues/5152#issuecomment-694289970

[marklai1998]

you need to wait for it to upgrade

PostCSS 8 is backwards compatible with version 7: #5152 (comment)

autoprefixer doesn't

[devongovett]

This isn't a Parcel issue right? We don't have autoprefixer as a dependency...

[Vassi]

I mean, Parcel added post-css and whatnot, all I did (as per the documentation) was add a postcssrc like this:

{
  plugins: {
    'autoprefixer': {}
  }
}

Even though postcss was added @ 8.0.9 (by parcel I assume) I still get this error so something is off?

[mischnic]

The point is that if you use autoprefixer, you need to install explicitly it yourself, meaning you also control the version of autoprefixer which needs to be at downgrades as per Possible Solution.

[ai]

@devongovett Parcel needs to update PostCSS to be able to use PostCSS 8 plugins

[krishnaUIDev]

downgrade autoprefixer to 9.8.6. Then it should work fine.

[ai]

Another option is a migration to Parcel 2, which use PostCSS 8

[emirahajj]

Cheers, downgrading it works

[williamroger]

The Possible Solution worked for me too.
Thanks!

[HuangHongRui]

1. Emmmm...
2. Install postcss -D
3. Done.

[dirad]

1. Emmmm...
2. Install postcss -D
3. Done.

👍

why does this work?

[LukeTOBrien]

Hi,

I just came across this error today, I'm not sure if it was bundle-text:... or a dependancy I am using in my project.
Your suggested solution worked for me but I don't know why.

[ProLoser]

1. Emmmm...
2. Install postcss -D
3. Done.

👍

why does this work?

It works because it's doing the same thing as explicitly installing an older version of autoprefixer it's explicitly installing a different version than the one that would be implicitly installed from a sub-dependency.

Explicitly pinning autoprefixer keeps it with older but known-to-be-compatible version, while your implementation forces the resolved postcss version to be newer.

I don't really know which solution is better, they will yield similar results (aside from other incompatibilities you may encounter)