[tsdx-config] Error: "PostCSS plugin postcss-modules requires PostCSS 8" when PostCSS 8 is installed

[ranjithvbr]

Current Behavior

Create a new project with react template: npx tsdx create mylib

after I installed all for postcss, I'm facing this issue

package.json

{
  "version": "1.1.2",
  "license": "MIT",
  "main": "dist/index.js",
  "typings": "dist/index.d.ts",
  "files": [
    "dist",
    "src"
  ],
  "engines": {
    "node": ">=10"
  },
  "scripts": {
    "start": "tsdx watch",
    "build": "tsdx build",
    "test": "tsdx test --passWithNoTests",
    "lint": "tsdx lint",
    "prepare": "tsdx build",
    "size": "size-limit",
    "analyze": "size-limit --why"
  },
  "peerDependencies": {
    "react": ">=16"
  },
  "husky": {
    "hooks": {
      "pre-commit": "tsdx lint"
    }
  },
  "prettier": {
    "printWidth": 80,
    "semi": true,
    "singleQuote": true,
    "trailingComma": "es5"
  },
  "name": "learn-react-webpack",
  "author": "Ranjith",
  "module": "dist/mylib.esm.js",
  "size-limit": [
    {
      "path": "dist/mylib.cjs.production.min.js",
      "limit": "10 KB"
    },
    {
      "path": "dist/mylib.esm.js",
      "limit": "10 KB"
    }
  ],
  "babel": {
    "presets": [
      "@babel/env",
      "@babel/react"
    ],
    "plugins": [
      "transform-object-rest-spread"
    ]
  },
  "devDependencies": {
    "@babel/core": "^7.1.6",
    "@babel/preset-env": "^7.1.6",
    "@babel/preset-react": "^7.14.5",
    "@size-limit/preset-small-lib": "^5.0.1",
    "@types/react": "^17.0.14",
    "@types/react-dom": "^17.0.9",
    "babel-loader": "^8.0.4",
    "babel-plugin-react-transform": "^2.0.0-beta1",
    "husky": "^7.0.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "size-limit": "^5.0.1",
    "tsdx": "^0.14.1",
    "tslib": "^2.3.0",
    "typescript": "^4.3.5",
    "webpack": "^4.25.1",
    "webpack-cli": "^3.1.2"
  },
  "dependencies": {
    "@babel/plugin-syntax-jsx": "^7.14.5",
    "autoprefixer": "^10.3.1",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "cssnano": "^5.0.6",
    "postcss": "^8.3.5",
    "rollup-plugin-postcss": "^4.0.0"
  }
}

tsdx.config.js

const postcss = require('rollup-plugin-postcss')
const autoprefixer = require('autoprefixer')
const cssnano = require('cssnano')

module.exports = {
  /**
   * @param {import('rollup/dist/rollup').InputOptions} config
   */
  rollup(config, options) {
    config.plugins.push(
      postcss({
        modules: true,
        plugins: [
          autoprefixer(),
          cssnano({
            preset: 'default',
          }),
        ],
        inject: true,
        // only write out CSS for the first bundle (avoids pointless extra files):
        extract: !!options.writeMeta,
      })
    )
    return config
  },
}

Did I miss something?

[azoreG]

Same problem :(

[azoreG]

Install postcss as dev dependency

[rottitime]

If you're receiving the error message "PostCSS plugin postcss-modules requires PostCSS 8," it means that the version of PostCSS that you have installed is not compatible with the postcss-modules plugin that you're using.

To fix this error, you can upgrade your version of PostCSS to version 8. You can do this by running the following command in your terminal:

npm install postcss@^8.0.0

This command will update your installation of PostCSS to the latest version of version 8.x. After running this command, you should be able to use the postcss-modules plugin without any issues.