Vuejs 3 asking for PostCSS 8

[maxleistner]

Describe the bug

 Building for production...

 ERROR  Failed to compile with 1 error                                                                                                                                                11:04:58 AM

 error  in ./src/App.vue?vue&type=style&index=0&id=55151ce6&lang=scss

Error: PostCSS plugin postcss-purgecss requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users

 @ ./src/App.vue?vue&type=style&index=0&id=55151ce6&lang=scss 1:0-483 1:0-483
 @ ./src/App.vue
 @ ./src/main.js
 @ multi ./src/main.js

 ERROR  Build failed with errors.
error Command failed with exit code 1.

To Reproduce Steps to reproduce the behavior: Add purgecss to a vuejs3 project. run yarn build

Expected behavior clean build

Screenshots

Environment (please complete the following information):

• OS: macOS 12
• Package postcss-purgecss
• Version ^4.0.0
• node 16.13.0

Additional context Package Json

{
  "name": "noname",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@vueform/vueform": "file:./packages/vueform-1.1.0-rVN65Aet",
    "core-js": "^3.6.5",
    "express": "^4.17.1",
    "file-loader": "^6.2.0",
    "node-sass": "^6.0.1",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0-0"
  },
  "devDependencies": {
    "@babel/plugin-transform-runtime": "^7.16.4",
    "@fullhuman/postcss-purgecss": "^4.0.0",
    "@fullhuman/vue-cli-plugin-purgecss": "~4.1.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "axios": "^0.24.0",
    "babel-eslint": "^10.1.0",
    "bootstrap": "4.6.1",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0",
    "moment": "^2.29.1",
    "sass": "^1.26.5",
    "sass-loader": "10"
  }
}

[kevinramharak]

What version of postcss does your vue 3 project use? have your tried updating it to version 8?

[Ffloriel]

If you are using PostCSS 7, install @fullhuman/postcss-purgecss 3.0.0: npm i -D @fullhuman/postcss-purgecss@3.0.0. From version 4.0, it is compatible with PostCSS >=8 only.