Storybook: Storybook doesn't work with the newest version 10.0.1 of PostCSS Autoprefixer plugin

[aantipov]

Describe the bug
Storybook is failing to build itself when using newest versions of autoprefixer, postcss and postcss-loader

To Reproduce
Steps to reproduce the behavior:

1. Install newest versions of autoprefixer (10.0.1), postcss (8.1.1) and postcss-loader (4.0.3)
2. Use custom webpack configuration (which includes postcss-loader)
3. Run a command to build storybook
4. See the build fail with an error:

info => Building preview..
info => Loading preview config..
info => Loading presets
info => Loading config/preview file in ".storybook".
info => Loading config/preview file in ".storybook".
info => Adding stories defined in ".storybook/main.js".
info => Using custom .postcssrc.js
info => Loading custom Webpack config (full-control mode).
info => Compiling preview..
ERR! => Failed to build the preview
ERR! ./node_modules/@mdi/font/css/materialdesignicons.css (./node_modules/css-loader/dist/cjs.js??ref--5-1!./node_modules/@storybook/core/node_modules/postcss-loader/src??ref--5-2!./node_modules/@mdi/font/css/materialdesignicons.css)
ERR! Module build failed (from ./node_modules/@storybook/core/node_modules/postcss-loader/src/index.js):
ERR! Error: PostCSS plugin autoprefixer requires PostCSS 8.
ERR! Migration guide for end-users:
ERR! https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
ERR!     at Processor.normalize (/Users/<project-path>/node_modules/@storybook/core/node_modules/postcss/lib/processor.js:153:15)
ERR!     at new Processor (/Users/<project-path>/node_modules/@storybook/core/node_modules/postcss/lib/processor.js:56:25)
ERR!     at postcss (/Users/<project-path>/node_modules/@storybook/core/node_modules/postcss/lib/postcss.js:55:10)
ERR!     at /Users/<project-path>/node_modules/@storybook/core/node_modules/postcss-loader/src/index.js:140:12
ERR!  @ ./node_modules/@mdi/font/css/materialdesignicons.css 2:26-182
ERR!  @ ./src/plugins/vuetify.js
ERR!  @ ./.storybook/preview.js
ERR!  @ ./.storybook/preview.js-generated-config-entry.js
ERR!  @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-knobs/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js
(node:81728) UnhandledPromiseRejectionWarning: [object Object]
(node:81728) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 703)
(node:81728) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
npm ERR! code ELIFECYCLE
npm ERR! errno 1

System
Please paste the results of npx sb@next info here.

Environment Info:

  System:
    OS: macOS 10.15.7
    CPU: (4) x64 Intel(R) Core(TM) i5-7267U CPU @ 3.10GHz
  Binaries:
    Node: 12.11.1 - ~/.nvm/versions/node/v12.11.1/bin/node
    Yarn: 1.22.10 - ~/<project-path>/node_modules/.bin/yarn
    npm: 6.14.8 - ~/.nvm/versions/node/v12.11.1/bin/npm
  Browsers:
    Chrome: 85.0.4183.121
    Firefox: 81.0
    Safari: 14.0
  npmPackages:
    @storybook/addon-actions: ^6.0.26 => 6.0.26
    @storybook/addon-knobs: ^6.0.26 => 6.0.26
    @storybook/addons: ^6.0.26 => 6.0.26
    @storybook/vue: ^6.0.26 => 6.0.26

Additional context
It looks like the problem comes from the fact that Storybook uses it's own version of postcss-loader, which comes with it's own version 7.x of postcss
One solution that I see is to update postcss-loader and postcss
Another - provide a way to use project's versions of postcss-loader and postcss dependencies

[kiily]

Having the exact same issue when trying to make my postcss config work. It won't allow postcss-import in my case. Is there a workaround? Can I upgrade those deps in storybook somehow?

[4lejandrito]

I could workaround this by adding:

"resolutions": {
  "postcss": "8.1.7"
}

to my package.json.

With that I can successfully use Tailwind 2.0 inside storybook.

Edit: There is a better solution: https://github.com/storybookjs/storybook/issues/12668#issuecomment-730194625.

[developer-rakeshpaul]

@4lejandrito would you mind sharing your storybook setup or a sample repo on this setup.. I am having trouble getting my tailwind 2.0 working with postcss@8

[4lejandrito]

Hi @developer-rakeshpaul,

At the end I followed the instructions at https://tailwindcss.com/docs/installation#post-css-7-compatibility-build and everything works like a charm without dirty hacks.

I created a sample project: https://github.com/4lejandrito/storybook-tailwind2.

[developer-rakeshpaul]

@4lejandrito thanks you so much for taking the time to set up the sample repo for reference. I did try the instructions for post-css-7-compatibility-build.. However, I was getting some weird errors.. I am trying to use this as part of rushjs monorepo.. Tried your repo and it is working perfectly fine.. Will try to incorporate my stories to yours and see if it works..

[aantipov]

The workaround with resolutions field in package.json seems to work only for yarn users. Npm doesn't support it :(
For resolultions to work with npm you need to install extra tool - npm-force-resolutions.
I think I better wait for Storybook to migrate to latest Postcss

[4lejandrito]

Hey @aantipov at the end I didn't need to use resolutions. See my previous comment. Tailwind provides a compat version for PostCSS 7.

Hi @developer-rakeshpaul,

At the end I followed the instructions at https://tailwindcss.com/docs/installation#post-css-7-compatibility-build and everything works like a charm without dirty hacks.

I created a sample project: https://github.com/4lejandrito/storybook-tailwind2.

[eric-burel]

Hi, I've a similar issue with styled-jsx-plugin-postcss and next, where the build hangs instead of failing.

(Non minimal) reproduction here: https://github.com/VulcanJS/vulcan-next/tree/bugfix/styled-jsx-postcss-storybook-build-fail, in main.js we can see that removing the plugin will make the build work again

Edit: I've cross-posted to Next github where it is probably more suited.

[developer-rakeshpaul]

I was using tsdx for building a react component library and it is throwing errors even after setting up this for PostCSS 7. Got it working with non tsdx version easily with the sample @4lejandrito shared.

[developer-rakeshpaul]

it was more of a tailwind issue than of tsdx. https://github.com/tailwindlabs/tailwindcss/issues/2795. got it working by commenting the "@tailwind components"

[eric-burel]

The styled-jsx-plugin-postcss issue is fixed by upgrading it to >3.0.2 (I was using v2), also upgraded Next 10.0.2. Now Storybook is building again.
Thanks @shilman and @ndelangen for narrowing done the issue. I've now have a full working example of Next 10 + Storybook v6, including advanced features of Next like styled-jsx support.

[shilman]

Great news @eric-burel ! Awesome job figuring that out. Thanks to you we're one step closer to a first class nextjs/storybook integration 🎉

[dazuaz]

As a workaround for TailwindCSS, I opted to first, build out the CSS and then adding it to the (.storybook/preview-head.html), I think this method is more robust and easier to maintain. Example repo.

[kawinie]

Hey @dazuaz I tried following your example repo but storybook still trigger tailwind build when ran. I understand your reasoning here but I don't get how you stop tailwind from doing that. Still same error: PostCSS plugin tailwindcss requires PostCSS 8

[dazuaz]

@kawinie Are you able to run next without any errors? or tailwind build ./styles/tailwind.css -o ./public/storybook/tailwind.storybook.css ,make sure you check the examples package.json

storybook will trigger tailwind build if you import it in .storybook/preview.js

Are you able to clone the repo and run it?

[kawinie]

@dazuaz It seems like storybook itself looks for postcss.config.js and triggers Tailwind when it sees Tailwind in the plugin list. I couldn't get it to work even with a custom storybook Webpack config, storybook stills use the top-level PostCSS config. However, using Tailwind compat works, so that's what I'm using for now.