Error in autoprefixer v10.0.0 / Ok with v9.8.6

[casulit]

package.json

{
  "name": "TailwindCSS Test",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "@types/jest": "^24.0.0",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.0",
    "@types/react-dom": "^16.9.0",
    "axios": "^0.20.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.4.3",
    "typescript": "~3.7.2"
  },
  "scripts": {
    "start": "yarn run build:css && react-scripts start",
    "build": "NODE_ENV=production yarn run build:css && react-scripts build",
    "build:css": "postcss src/assets/styles/tailwind.css -o src/assets/styles/main.css",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@fullhuman/postcss-purgecss": "^2.3.0",
    "@types/react-router-dom": "^5.1.5",
    "autoprefixer": "^10.0.0",
    "cssnano": "^4.1.10",
    "postcss-cli": "^7.1.2",
    "tailwindcss": "^1.8.10"
  }
}

postcss.config.js

// postcss.config.js
//const cssnano = require('cssnano');

const purgecss = require('@fullhuman/postcss-purgecss')({
  // Specify the paths to all of the template files in your project
  content: ['./src/**/*.tsx', './src/**/*.jsx', './src/**/*.html'],

  // This is the function used to extract class names from your templates
  defaultExtractor: (content) => {
    // Capture as liberally as possible, including things like `h-(screen-1.5)`
    const broadMatches = content.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || [];

    // Capture classes within other delimiters like .block(class="w-1/2") in Pug
    const innerMatches = content.match(/[^<>"'`\s.()]*[^<>"'`\s.():]/g) || [];

    return broadMatches.concat(innerMatches);
  },
});

// More minification of CSS
const cssnano = require('cssnano')({
  preset: 'default',
});

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
    ...(process.env.NODE_ENV === 'production' ? [purgecss, cssnano] : []),
  ],
};

Error

$ yarn run build:css && react-scripts start
$ postcss src/assets/styles/tailwind.css -o src/assets/styles/main.css
TypeError: Invalid PostCSS Plugin found at: plugins[1]

(@/home/csulit/Documents/GitHub/csulit.dev/postcss.config.js)
    at /home/csulit/Documents/GitHub/csulit.dev/node_modules/postcss-load-config/src/plugins.js:72:15
    at Array.forEach (<anonymous>)
    at plugins (/home/csulit/Documents/GitHub/csulit.dev/node_modules/postcss-load-config/src/plugins.js:58:13)
    at processResult (/home/csulit/Documents/GitHub/csulit.dev/node_modules/postcss-load-config/src/index.js:33:14)
    at /home/csulit/Documents/GitHub/csulit.dev/node_modules/postcss-load-config/src/index.js:94:14
    at async Promise.all (index 0)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[adamwathan]

Autoprefixer 10 requires PostCSS 8, and postcss-cli doesn’t support PostCSS 8 yet. Have to use Autoprefixer 9 until then.

[adamwathan]

We're planning to update to PostCSS 8 for Tailwind 2.0 next month but there's no issues at all anyways, as you can see here a PostCSS 8 project with postcss-cli and Autoprefixer 10 works perfectly fine with Tailwind 1.x:

https://github.com/adamwathan/postcss8-tailwind

Builds perfectly, no errors or anything at all. PostCSS 8 is backwards compatible.

Are you experiencing any sort of actual problem?

[mheob]

Thanks for the prompt answer.

I get the following build error when I use autoprefixer 10 and build my next.js project in production mode so that the purgecss is running. In development mode without purgecss I have no problems. Therefore, I assume that it is due to tailwind or the purgecss in any combination.

Failed to compile.

./styles/tailwind.css
Error: true is not a PostCSS plugin

> Build error occurred
Error: > Build failed because of webpack errors
    at build (XXX/node_modules/next/dist/build/index.js:15:918)

It does not hurt me to continue using autoprefixer 9 and wait for version 2 of tailwindcss.

Edit:
I have noticed that the problem seems to come from purgecsss. An issue is already open: FullHuman/purgecss#488

[adamwathan]

Do you mind creating a GitHub repo that reproduces the issue? I'd like to look into it.

[adamwathan]

Looks like the real issue is that Next.js needs to update to PostCSS 8 before you can use Autoprefixer 10:

vercel/next.js#17242

[mheob]

You can find the autoprefixer test branch of my project in early development stage here:
https://github.com/mheob/hsv-web/tree/autoprefixer-10-test

But do not waste your time. I also think it is because of nextjs. You need to do more important things like this.
Thank you for your work and your time.