Why do i have to install @fullhuman/postcss-purgecss to fix purgecss requires Postcss 8

[Bluefitdev]

According to this discussion, I am finally able to fix my bug of upgrading my CRA app from 3 to 4 with tailwind.

I'm having the popular issue ONLY when building final app yarn build:

yarn run v1.22.10
$ GENERATE_SOURCEMAP=false craco build
craco:  *** Cannot find ESLint plugin (ESLintWebpackPlugin). ***
Creating an optimized production build...
Failed to compile.

./src/styles/app-components.css
Error: PostCSS plugin postcss-purgecss requires PostCSS 8.
Migration guide for end-users:

Even after following the official docs to fix it.

Not sure why this is happening on my current's project. However when i tried to create fresh CRA app with craco and following tailwind instruction, it doesn't run that error.

My question is, is there any explanation why my app is fixed after installing "@fullhuman/postcss-purgecss": "3.0.0"? I'm scratching my head over this bug because it took me couple of hours to browse over the internet until i tried this solution which has no explanation...

Thanks guys

This is my package.json btw:

{
  "dependencies": {
    "@craco/craco": "^6.1.1",
    "@date-io/core": "1.3.13",
    "@date-io/date-fns": "1.x",
    "@date-io/dayjs": "1.3.13",
    "@formatjs/intl-pluralrules": "^1.3.5",
    "@google/markerclusterer": "^2.0.9",
    "@lottiefiles/react-lottie-player": "^3.0.2",
    "@material-ui/core": "^4.11.2",
    "@material-ui/data-grid": "^4.0.0-alpha.23",
    "@material-ui/icons": "^4.11.2",
    "@material-ui/lab": "^4.0.0-alpha.57",
    "@material-ui/pickers": "3.2.10",
    "@material-ui/styles": "^4.11.3",
    "@material-ui/x-grid": "^4.0.0-alpha.23",
    "@mui-treasury/components": "^1.10.1",
    "@mui-treasury/styles": "^1.13.1",
    "@tryghost/content-api": "^1.5.1",
    "antd": "^4.3.4",
    "auth0-lock": "11.27.2",
    "autosuggest-highlight": "3.1.1",
    "axios": "0.21.1",
    "axios-mock-adapter": "1.19.0",
    "chart.js": "2.9.3",
    "clsx": "1.1.1",
    "cross-fetch": "3.0.4",
    "date-fns": "^2.16.1",
    "dayjs": "^1.10",
    "draft-js": "^0.11.7",
    "draftjs-to-html": "^0.9.1",
    "eslint-config-react-app": "^6.0.0",
    "eslint-plugin-flowtype": "^5.6.0",
    "formik": "^2.2.6",
    "formsy-react": "2.2.1",
    "fusioncharts": "^3.15.1-sr.1",
    "google-map-react": "^2.1.6",
    "history": "4.10.1",
    "i18next": "19.4.2",
    "isomorphic-fetch": "2.2.1",
    "jsonwebtoken": "8.5.1",
    "jsqr": "^1.3.1",
    "jss": "10.1.1",
    "jss-plugin-extend": "10.1.1",
    "jss-rtl": "0.3.0",
    "jwt-decode": "2.2.0",
    "keycode": "2.2.0",
    "konva": "^7.2.2",
    "lodash": "4.17.15",
    "lottie-web": "^5.7.6",
    "marked": "0.8.2",
    "material-table": "1.67.0",
    "material-ui-popup-state": "1.7.1",
    "mobile-detect": "1.4.4",
    "moment": "2.24.0",
    "notistack": "^1.0.5",
    "object-path": "^0.11.4",
    "path-to-regexp": "3.2.0",
    "perfect-scrollbar": "1.5.0",
    "prismjs": "1.22.0",
    "prop-types": "15.7.2",
    "qs": "6.9.4",
    "raw-loader": "4.0.2",
    "react": "^17.0.1",
    "react-app-polyfill": "1.0.6",
    "react-autosuggest": "10.0.0",
    "react-beautiful-dnd": "13.0.0",
    "react-big-calendar": "^0.30.0",
    "react-chartjs-2": "2.9.0",
    "react-dom": "^17.0.1",
    "react-draft-wysiwyg": "^1.14.5",
    "react-draggable": "4.3.1",
    "react-dropzone": "^11.0.3",
    "react-frame-component": "4.1.1",
    "react-fusioncharts": "^3.1.2",
    "react-google-recaptcha": "^2.1.0",
    "react-i18next": "11.3.4",
    "react-intl": "^3.6.2",
    "react-is": "^16.13.1",
    "react-konva": "17.0.1-3",
    "react-map-gl": "^5.2.9",
    "react-masonry-css": "1.0.14",
    "react-number-format": "4.4.1",
    "react-popper": "1.3.7",
    "react-qr-reader": "^2.2.1",
    "react-redux": "7.2.0",
    "react-router": "^5.2.0",
    "react-router-config": "5.1.1",
    "react-router-dom": "5.2.0",
    "react-scripts": "4.0.3",
    "react-select": "3.1.0",
    "react-signature-canvas": "^1.0.3",
    "react-spring": "8.0.27",
    "react-swipeable-views": "0.13.9",
    "react-swipeable-views-utils": "0.13.9",
    "react-table": "7.6.3",
    "react-text-mask": "5.4.3",
    "react-virtualized": "9.22.3",
    "react-window": "1.8.6",
    "redux": "4.0.5",
    "redux-persist": "^6.0.0",
    "redux-saga": "^1.1.3",
    "redux-thunk": "2.3.0",
    "styled-components": "^5.1.1",
    "typeface-muli": "1.1.3",
    "use-image": "^1.0.6",
    "velocity-animate": "1.5.2",
    "velocity-react": "1.4.3",
    "victory": "^34.3.12",
    "web-vitals": "^1.1.0",
    "yup": "^0.29.1"
  },
  "peerDependencies": {
    "autoprefixer": "9.8.6",
    "postcss": "7.0.35",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "resolutions": {
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "babel-loader": "8.1.0"
  },
  "devDependencies": {
    "@babel/core": "7.12.13",
    "@babel/node": "7.12.13",
    "@babel/plugin-transform-react-jsx": "7.12.13",
    "@babel/preset-env": "7.12.13",
    "@fullhuman/postcss-purgecss": "3.0.0",
    "@tailwindcss/postcss7-compat": "^2.1.0",
    "@typescript-eslint/eslint-plugin": "^4.0.0",
    "@typescript-eslint/parser": "^4.0.0",
    "@wojtekmaj/enzyme-adapter-react-17": "^0.4.1",
    "@yarnpkg/pnpify": "^2.0.0-rc.20",
    "autoprefixer": "^9.8.6",
    "babel-eslint": "10.1.0",
    "cross-env": "7.0.2",
    "cypress": "^6.8.0",
    "enzyme": "^3.11.0",
    "eslint": "^7.18.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-prettier": "^7.2.0",
    "eslint-import-resolver-node": "^0.3.4",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-prettier": "^3.1.4",
    "eslint-plugin-react": "^7.21.5",
    "eslint-plugin-react-hooks": "^4.2.0",
    "eslint-webpack-plugin": "^2.5.3",
    "husky": "^6.0.0",
    "js-beautify": "1.13.0",
    "lint-staged": "^10.5.4",
    "node-sass": "^4.13.0",
    "postcss": "^7.0.35",
    "prettier": "^2.2.1",
    "prettier-eslint": "^9.0.1",
    "promise": "8.1.0",
    "purgecss": "1.4.2",
    "react-test-renderer": "^16.13.1",
    "source-map-explorer": "^2.5.2",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat",
    "tailwindcss-dir": "4.0.0"
  },
  "scripts": {
    "start": "craco start",
    "build": "GENERATE_SOURCEMAP=false craco build",
    "tailwind": "tailwind build ./src/styles/tailwind-config.css -c ./tailwind.config.js -o ./src/styles/tailwind.css",
    "purge-tailwind": "node ./purge-tailwindcss.js",
    "test": "craco test --env=jsdom --verbose",
    "eject": "react-scripts eject",
    "build-docs": "find ./src/app/main/documentation/material-ui-components \\( -name '*.ts' -o -name '*.tsx' \\) -type f -delete && babel-node --presets @babel/preset-env src/app/main/documentation/material-ui-components/build.js",
    "analyze": "yarn run tailwind && yarn run purge-tailwind && react-scripts build && source-map-explorer 'build/static/js/*.js' --html analyze-result.html",
    "pnpify-sdk": "yarn pnpify --sdk",
    "lint": "eslint . --fix",
    "format": "prettier --write \"**/*.+(js|jsx|json|css|md)\"",
    "cypress:open": "cypress open",
    "prepare": "husky install"
  },
  "lint-staged": {
    "src/**/*.+(js|jsx)": [
      "eslint --fix"
    ],
    "src/**/*.+(json|css|md|scss)": [
      "prettier --write"
    ],
    "*.js": "eslint --cache --fix"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

[mcmire]

You have postcss 7 listed in your devDependencies. I believe you need to upgrade to 8 to get rid of the error.

[Bluefitdev]

I'm using CRA.. so i have to use postcss 7

[mcmire]

Ah, gotcha, missed that part.

I am not sure what exact steps you performed to upgrade, but the only thing I can think is that you may have accidentally installed the latest version of @fullhuman/postcss-purgecss, which according to the package.json relies on PostCSS 8. However, v3 relies on PostCSS 7. So even though @tailwindcss/postcss7-compat should have brought in PostCSS 7, perhaps there was some kind of conflict going on and for some reason the incorrect version was chosen. It depends on whether you're using npm or yarn — they have different version resolution algorithms. Regardless, something is fishy here for sure. I'm curious what your yarn.lock or package-lock.json was at the time, as it could have shed some more light on this.

[Bluefitdev]

I actually have checked prior to that, I did not have @fullhuman/postcss-purgecss

Steps taken:

• Deleted yarn.lock and package-lock.json
• Deleted node_modules
• ran the fix command from the docs

npm uninstall tailwindcss postcss autoprefixer
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

• Then reinstall everything

Doesn't work until i installed "@fullhuman/postcss-purgecss": "3.0.0"

I really have to thank this comment, otherwise I would have been stuck for longer than that