PostCSS plugin tailwindcss requires PostCSS 8.

[flosrn]

Describe the bug I'm facing an issue when I started storybook

To Reproduce Steps to reproduce the behavior:

1. Install storybook-addon-next: yarn add storybook-addon-next -D
2. Add 'storybook-addon-next' to main.js file
3. Lanch storybook: yarn storybook
4. See error

My package.json

"devDependencies": {
    "@babel/core": "^7.16.12",
    "@commitlint/cli": "^16.1.0",
    "@commitlint/config-conventional": "^16.0.0",
    "@next/bundle-analyzer": "^12.0.8",
    "@storybook/addon-a11y": "^6.4.14",
    "@storybook/addon-actions": "^6.4.14",
    "@storybook/addon-essentials": "^6.4.14",
    "@storybook/addon-links": "^6.4.14",
    "@storybook/addon-postcss": "^2.0.0",
    "@storybook/addons": "^6.4.14",
    "@storybook/builder-webpack5": "^6.4.14",
    "@storybook/manager-webpack5": "^6.4.14",
    "@storybook/react": "^6.4.14",
    "@storybook/theming": "^6.4.14",
    "@svgr/webpack": "^6.2.0",
    "@tailwindcss/forms": "^0.4.0",
    "@tailwindcss/typography": "^0.5.0",
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@types/react": "^17.0.38",
    "@types/tailwindcss": "^3.0.3",
    "@typescript-eslint/eslint-plugin": "^5.10.1",
    "@typescript-eslint/parser": "^5.10.1",
    "autoprefixer": "^10.4.2",
    "babel-jest": "^27.4.6",
    "babel-loader": "^8.2.3",
    "commitizen": "^4.2.4",
    "commitlint-config-gitmoji": "^2.2.5",
    "cz-customizable": "^6.3.0",
    "eslint": "8.6.0",
    "eslint-config-next": "^12.0.8",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-jsx-a11y": "^6.5.1",
    "eslint-plugin-react": "^7.28.0",
    "eslint-plugin-react-hooks": "^4.3.0",
    "eslint-plugin-simple-import-sort": "^7.0.0",
    "eslint-plugin-storybook": "^0.5.5",
    "eslint-plugin-unused-imports": "^2.0.0",
    "husky": "^7.0.4",
    "identity-obj-proxy": "^3.0.0",
    "inquirer-fuzzy-path": "^2.3.0",
    "jest": "^27.4.7",
    "lint-staged": "^12.3.1",
    "next-sitemap": "^2.0.7",
    "plop": "^3.0.5",
    "postcss": "^8.4.5",
    "prettier": "^2.5.1",
    "prettier-plugin-tailwindcss": "^0.1.4",
    "react-test-renderer": "^17.0.2",
    "standard-version": "^9.3.2",
    "storybook-addon-next": "^1.3.1",
    "storybook-theme-css-vars": "^0.0.4",
    "tailwindcss": "^3.0.16",
    "typescript": "^4.5.5"
  },

[RyanClementsHax]

Thanks for opening an issue :)

I've tracked this down to your inclusion of @storybook/addon-postcss. It adds as a dependency older versions of postcss-loader and postcss which is causing the issue. given. There does seem to be movement on that repository to support the newer versions

The addon in question seems to be moot however given that storybook-addon-next already handles postcss for you. Do you have a use case where you need both these addons? It seems to me like you can just drop @storybook/addon-postcss.

[flosrn]

Thank you for your help @RyanClementsHax

I removed @storybook/addon-postcss, but now it only works if I remove plugin:storybook/recommended from eslintrc.js. If I keep it I have the error in my IDE: Error: Failed to load plugin 'storybook' declared in '.eslintrc.js': Cannot find module 'eslint-plugin-storybook'

[RyanClementsHax]

No prob! About the other issue, sounds like you might need to wipe your node modules and maybe also your lock file then reinstall your dependencies. If that doesn't work I think I would need a minimal reproduction repo so I can poke around myself.

[flosrn]

Mmh yes I have already done this @RyanClementsHax, if you want you can check my repo: https://github.com/flosrn/nextjs-ts-starter/tree/with-storybook

[RyanClementsHax]

I'm not sure I can recreate the problem unfortunately :(

Eslint seems to be working fine for your repo.

[github-actions[bot]]

This issue has been automatically marked stale because it it received no activity for 60 days. If you wish to keep this open, please leave a comment. Thanks.

[github-actions[bot]]

This issue has been automatically closed because it received no activity for 60 days. If you think this was closed by accident, please leave a comment. Thanks.

[pfcodes]

This worked. Should add to the docs to remove @storybook/addon-postcss

[SpadarShut]

If you are using nextjs, remove @storybook/addon-postcss, add storybook-addon-next and it will work.