Error: PostCSS plugin xxx requires PostCSS 8.

[jarkin13]

I have tried removing each plugin to see if the errors lied in the plugins(ie: autoprefixer, postcss-nested, etc.)` and it always throws the following error

[dev:rollup] [!] (plugin postcss) Error: XXX plugin postcss-import requires PostCSS 8.
[dev:rollup] Migration guide for end-users:
[dev:rollup] https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
[dev:rollup] src/_bundle/main.css
[dev:rollup] Error: PostCSS plugin postcss-import requires PostCSS 8.
[dev:rollup] Migration guide for end-users:
[dev:rollup] https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
[dev:rollup]     at Processor.normalize (/Users/.../Workspace/gfe-builder/app/node_modules/rollup-plugin-postcss/node_modules/postcss/lib/processor.es6:117:15)
[dev:rollup]     at new Processor (/Users/.../Workspace/gfe-builder/app/node_modules/rollup-plugin-postcss/node_modules/postcss/lib/processor.es6:38:25)
[dev:rollup]     at postcss (/Users/.../Workspace/gfe-builder/app/node_modules/rollup-plugin-postcss/node_modules/postcss/lib/postcss.es6:34:10)
[dev:rollup]     at /Users/.../Workspace/gfe-builder/app/node_modules/rollup-plugin-postcss/dist/index.js:213:28
[dev:rollup]     at Generator.next (<anonymous>)
[dev:rollup]     at asyncGeneratorStep (/Users/.../Workspace/gfe-builder/app/node_modules/rollup-plugin-postcss/dist/index.js:19:24)
[dev:rollup]     at _next (/Users/.../Workspace/gfe-builder/app/node_modules/rollup-plugin-postcss/dist/index.js:41:9)

Here is my package.json

{
  ...
  "dependencies": {
    "@rollup/plugin-commonjs": "^16.0.0",
    "autoprefixer": "^10.0.2",
    "path": "^0.12.7",
    "postcss-import": "^13.0.0",
    "rollup": "^2.33.3",
    "rollup-plugin-postcss": "^3.1.8",
    "tailwindcss": "^2.0.1"
  },
  "devDependencies": {
    "postcss": "^8.1.10"
  },
  "peerDependencies": {
    "postcss": "^8.1.10"
  }
}

Here is my rollup.config.js

import path from "path";
import commonjs from "@rollup/plugin-commonjs";
import postcss from "rollup-plugin-postcss";
import postcssImport from "postcss-import";
import postcssNested from "postcss-nested";
import autoprefixer from "autoprefixer";

export default {
  input: "index.js",
  output: {
    file: "dist/main.bundle.js",
    format: "iife",
  },
  plugins: [
    postcss({
      extract: true,
      // Or with custom file name, it will generate file relative to bundle.js in v3
      extract: path.resolve("dist/main.style.css"),
      plugins: [
        postcssImport(),
        postcssNested(),
        autoprefixer(),
      ],
    }),
    commonjs(),
  ],
};

I also tried creating a postcss.config.js file and removing the plugin info above:

module.exports = {
  plugins: [
    require('postcss-import'),
    require('postcss-nested'),
    require('autoprefixer'),
  ],
}

[ai]

rollup-plugin-postcss doesn’t suppport PostCSS 8.

Please comment in this PR to force the Rollup team to fix PostCSS 8 support egoist/rollup-plugin-postcss#325

Until that you need to downgrade PostCSS plugins versions npm uninstall autoprefixer && npm i autoprefixer@^9