postcss-cli do not support PostCSS 8 plugins yet.

Do not update Autoprefixer until it will release next major update.

switching back to version 9 yarn add autoprefixer@9 helped

If Autoprefixer v10 isn't ready for the masses to use yet then it would be best not to make it the default download when people install using

npm i autoprefixer

You should publish a new v9 release and then publish a v10 release using

npm publish --tag next

This means that by default users will install the stable v9 release.

Users can then opt into the unstable v10 release using this command:

npm i autoprefixer@next

@Dan503 it is already ready for webpack users. Some users will always suffer because many environments needs a year to update PostCSS.

Right now we have a clear error message PostCSS 7 do not support PostCSS 8 plugin autoprefixer. Downgrade it or update PostCSS. I think it is enough. It is better to spend a day and help postcss-cli team to get an update.

autoprefixer version 10 breaks next.js on start. It clashes with next's postcss-loader, returning

error - ./styles/index.css (./node_modules/next/node_modules/css-loader/dist/cjs.js??ref--5-oneOf-5-1!./node_modules/next/dist/compiled/postcss-loader??__nextjs_postcss!./styles/index.css)
Error: true is not a PostCSS plugin

Rolling back to autoprefixer@9.8.6 resolved the issue.

@DopamineDriven please vote for this issue to update PostCSS 8 in Nuxt.js vercel/next.js#17242

autoprefixer 10 doesnt work

Closing this issue, since Autoprefixer 10 requires PostCSS 7.

I also had problem with Autoprefixer v10, there were no build errors but it didn't add prefixes.
I did fallback to Autoprefixer v9 and it worked fine.

"autoprefixer": "^9.8.6",
"postcss": "^8.0.9",
// webpack
"postcss-loader": "^4.0.2",
"webpack": "^4.44.2",

@x35a you will need the latest postcss 8.1 to use the latest Autoprefixer 10.0.1 because we fixed a bug in the latest PostCSS.

Thanks @ai

PostCSS v8.1.1 with Autoprefixer v10.0.1 does not work for me.

Error: Uncaught TypeError: Cannot read property 'unprefixed' of undefined

Found in: node_modules/postcss-rtl/lib/keyframes.js:5

Code:

"use strict";

const postcss = require('postcss');

const unprefixed = postcss.vendor.unprefixed; // <--- HERE
// ...

Example Code:

const path = require('path')
const sass = require('node-sass')
const postcss = require('postcss')
const cssnano = require('cssnano')
const rtl = require('postcss-rtl')
const autoprefixer = require('autoprefixer')

const postCssCompiler = postcss([ autoprefixer ])
const postCssRtlCompiler = postcss([ rtl({}) ])

const nano = postcss([
  cssnano({
    preset: ['default', {
      mergeLonghand: false,
      convertValues: false,
      cssDeclarationSorter: false,
      reduceTransforms: false
    }]
  })
])
// ...

@hawkeye64 postcss-rtl need to be updated to be used with PostCSS 8. Open an issue in postcss-rtl repository.

@ai Now I feel less worthy. :(
Not sure how I didn't catch that. Sorry for the intrusion and thanks for pointing out the errors of my way.
I really do appreciate it. ❤️

As identified in this post:

https://stackoverflow.com/a/64837198/1611058

Manually installing postcss and postcss-loader fixed the issue for me without having to downgrade Autoprefixer.

package.json

  "devDependencies": {
    "autoprefixer": "^10.0.2",
    "postcss": "^8.1.7",
    "postcss-loader": "^4.0.4"
  }