postcss-import: Throws "Error: PostCSS plugin postcss-import requires PostCSS 8" even when PostCSS 8 is installed

We ended up pinning postcss-import at 12.x while keeping up-to-date with postcss on the latest branch:

    "postcss": "^8.1.9",
    "postcss-import": "12.0.1",

Closing, since no reduced test case has presented itself.

In my case it was a bunch of modules requesting postcss@7 as dependency. See yarn why postcss Since the postcss API from 7 to 8 should not differ much I just resolved the issue by adding postcss@8 to the resolutions in package.json

 "resolutions": {
    "postcss": "8"
  }

I’m not using any post css and I’m getting this when using mini-css-extract-plugin

Just ran into this myself today, the culprit being Storybook that references an older postcss-loader that in turn imported an older postcss-import (https://github.com/storybookjs/storybook/blob/next/lib/core/package.json#L112)

I think in my case it may be something to do with vuepress calling an older version of postcss under the hood…

Thanks @karladler at https://github.com/postcss/postcss-import/issues/435#issuecomment-939991463 for the yarn solution.

In my case, I am using npm.

I didn’t use postcss directly. However, when Renovate does lock file maintenance of package-lock.json, it throws error

PostCSS plugin postcss-discard-comments requires PostCSS 8

when I build my web app.

Because some dependencies of dependencies are using PostCSS 7

Adding overrides:

"overrides": {
   "postcss": "8.4.19"
}

in package.json which is similar to resolutions from yarn.

Then run npm install. Next time, when Renovate does lock file maintenance of package-lock.json, it will use PostCSS 8 instead of PostCSS 7.

Note

1. overrides got supported since npm 8.3.0.
2. peerDependencies does not work for me in this Renovate lock file maintenance case. Some are still using PostCSS 7.

We ended up pinning postcss-import at 12.x while keeping up-to-date with postcss on the latest branch:

    "postcss": "^8.1.9",
    "postcss-import": "12.0.1",

I had trouble with rollup-plugin-postcss. It worked, just run yarn add -D postcss@8.1.9 and yarn add -D postcss-loader@4.1.0.

I has this error happen to me while I only had postcss-cli in my explicit dependencies. Adding postcss as an explicit dependency fixed it.

On my file package.json I configured this:

"dependencies": {
   "postcss-import": "^14.1.0",
   "postcss-loader": "^4.3.0",
   "postcss-mixins": "^9.0.2",
   "postcss-nesting": "^10.1.4",
 },
 "devDependencies": {
   "postcss": "^8.4.18",
 },
 "peerDependencies": {
   "postcss": "^8.4.18"
 },

I noticed the file package-lock.json had a section for an specific package I use (@ckeditor/ckeditor5-dev-utils) and it was requiring specific versions installed:

"@ckeditor/ckeditor5-dev-utils": {
      "version": "31.1.5",
      "resolved": "https://registry.npmjs.org/@ckeditor/ckeditor5-dev-utils/-/ckeditor5-dev-utils-31.1.5.tgz",
      "integrity": "sha512-0hBxhrA0aLkLHxmC3Pc9ruebELeWtOFqK599Lo304CdA3R9UOIYwHnNCXw8NTwnxAtPuvsqAATwbHGEV/tpy9g==",
      "requires": {
           
        "postcss": "^8.4.12",
        "postcss-import": "^14.1.0",
        "postcss-loader": "^4.3.0",
        "postcss-mixins": "^9.0.2",
        "postcss-nesting": "^10.1.4",
           
      },
      "dependencies": {
    [rest of the list of dependences].
      }
    },

Just downgrade to “postcss-loader”: “^4.1.0”

Also I followed these links:

https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users https://evilmartians.com/chronicles/postcss-8-plugin-migration

Thanks @karladler. Elegant and effective solution. Afterwards I just had to refresh running yarn and the error was gone.