Version 10 doesn’t work in PostCSS 7

[davidenco]

Since the release of v10, autoprefixer is now failing with a variety of errors.

My command is as follows:

npx postcss file.css --use autoprefixer --no-map --replace

Some errors say "[object, Object] is not a PostCSS plugin" (when using -u autoprefixer).

Without the "-u autoprefixer", the error is "You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js.". This is happening even if a postcss.config.js is present.

Removing the "--replace" resolves the issue, but adding "--output file2.css" results in the same error as above.

These issues occur after running "npm install -g --save-dev autoprefixer postcss".

Downgrading to v9 resolves the problem.

[ai]

postcss-cli do not support PostCSS 8 plugins yet.

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

[JLarky]

switching back to version 9 yarn add autoprefixer@9 helped

[Dan503]

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

[ai]

@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.

[DopamineDriven]

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.

[ai]

@DopamineDriven please vote for this issue to update PostCSS 8 in Nuxt.js https://github.com/vercel/next.js/issues/17242

[Alecto]

autoprefixer 10 doesnt work

[ai]

Closing this issue, since Autoprefixer 10 requires PostCSS 7.

[x35a]

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

[ai]

@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.

[x35a]

Thanks @ai

[hawkeye64]

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
    }]
  })
])
// ...

[ai]

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

[hawkeye64]

@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. :heart:

[Dan503]

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