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.

[astorije]

It seems like a lot of workarounds depend on Tailwind, but for anyone who ends up here in despair, this is unrelated to Tailwind, so it may happen to you (as it does to us) even if you're not using Tailwind.

In our case, we're using plain PostCSS with Autoprefixer, postcss-url, etc. @shilman, are there any plans to upgrade the version of PostCSS that Storybook uses internally?

Thanks everyone!

[LukyVj]

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.

Thank you @dazuaz, this approach fixed my issue.

I'm using Storybook with NextJS ( but not tailwind ) and I was facing this error:

ERROR in ./src/styles/globals.css (./node_modules/css-loader/dist/cjs.js??ref--7-1!./node_modules/@storybook/core/node_modules/postcss-loader/src??ref--7-2!./src/styles/globals.css)
Module build failed (from ./node_modules/@storybook/core/node_modules/postcss-loader/src/index.js):
TypeError: Invalid PostCSS Plugin found at: plugins[0]

The approach you show in your repo helped me getting rid of it.

[TheRusskiy]

I also had an issue with tailwind in storybook, ended up doing this ugliness, but it works: Import already compiled tailwind from node_modules .storybook/preview.js:

...
import 'tailwindcss/dist/base.css'
import 'tailwindcss/dist/components.css'
import 'tailwindcss/dist/utilities.css'
...

Specify somewhere that we are running a storybook .storybook/main.js:

...
global.__isStorybook = true
...

Disable tailwind postcss plugin if running within a storybook context postcss.config.js:

...
const plugins = {
  tailwindcss: {}
}

if (global.__isStorybook) {
  delete plugins.tailwindcss
}

module.exports = {
  plugins
}

...

[cdgugler]

I had the same issue in a project with postcss-mixins and postcss-nested. I ended up downgrading those packages to older versions for now (postcss-mixins 6.2.3 & postcss-nested 4.2.3).

[jmeischner]

Hej @LukyVj I would guess your problem can be solved by using the interoperable object-based format of the config file, see last gray box of this section in the docs

[TheRusskiy]

Another workaround: Compile tailwind using postcss-cli and use import compiled version, this way it respects tailwind customization. package.json:

"compile-tailwind-storybook": "postcss styles/tailwind.css -o ./.storybook/compiled/tailwind.css",
"storybook": "npm run compile-tailwind-storybook && start-storybook -p 6006",

.storybook/preview.js:

...
import './compiled/tailwind.css'
...

you can add .storybook/compiled/tailwind.css to .gitignore

[illepic]

Here is how we forced Storybook ^6.1 to use PostCSS 8. (This presumes a postcss.config.js file at the root of your project. )

First, install postcss@^8 and postcss-loader@^4:

npm install --save-dev postcss@^8 postcss-loader@^4

Now, mutate your Storybook webpack config by creating/editing .storybook/main.js:

module.exports = {
  stories: [
    // etc
  ],
  addons: [
    // etc
  ],
  webpackFinal: async config => {
    /**
     * CSS handling, specifically overriding postcss loader
     */
    // Find the only Storybook webpack rule that tests for css
    const cssRule = config.module.rules.find(rule =>
      'test.css'.match(rule.test),
    )
    // Which loader in this rule mentions the custom Storybook postcss-loader?
    const loaderIndex = cssRule.use.findIndex(loader => {
      // Loaders can be strings or objects
      const loaderString = typeof loader === 'string' ? loader : loader.loader
      // Find the first mention of "postcss-loader", it may be in a string like:
      // "@storybook/core/node_modules/postcss-loader"
      return loaderString.includes('postcss-loader')
    })
    // Simple loader string form, removes the obsolete "options" key
    cssRule.use[loaderIndex] = 'postcss-loader'

    // Uncomment the following to debug
    // console.dir(config, { depth: null })
    return config
  },
}

An explanation of what's happening here:

1. Find the CSS rule in Storybook's webpack config
2. Overwrite the 3rd (technically "first") loader, which is the Storybook's custom version of postcss-loader
3. Providing the simple string postcss-loader causes Webpack to use the module we installed above.

[IdeaHunter]

Also a note on @illepic 's workaround - his workaround would work on linux for windows user the following adjustment is needed

return loaderString.includes(
  'postcss-loader',
)

[illepic]

@IdeaHunter, EDIT! I see what you're saying now. My solution works on Linux only because the string @storybook/core/node_modules/postcss-loader must only show on Linux, but not Windows, right?

I think I'll just update the OP to

return loaderString.includes('postcss-loader')

[trm217]

@shilman the workaround for this problem seems to be unreliable (I did not manage to get any of the solutions mentioned in this thread working). In my opinion, the "has workaround" label should be removed.

[thien-do]

^ I strongly agree with @trm217 :D The most reliable workaround I think is the "resolution", but even that requires us to use "yarn". I know many people love yarn but in some environment we must use NPM..

[shilman]

Crikey!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.2.0-alpha.15 containing PR #13640 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.

[shilman]

Yippee!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.2.0-alpha.16 containing PR #13655 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.

[shilman]

Yippee!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.2.0-alpha.17 containing PR #13669 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.

[vdh]

@shilman @storybook/core and @storybook/react are still pinned to the very old version of css-loader (^3.0.0 / ^3.6.0), which pins to the older postcss^7 version.

[shilman]

@vdh did you try @storybook/addon-postcss by @phated which is our proposed solution? Examples in the linked PR above.

[seonghyeonkimm]

when I do npx sb upgrade --prerelease, it does not affect my package.json at all. Am I doing upgrade in the wrong way? @shilman

[matamatanot]

I tried @storybook/addon-postcss.

"postcss": "8.2.4"

  addons: [
    {
      name: "@storybook/addon-postcss",
      options: {
        postcssLoaderOptions: {
          implementation: require("postcss"),
        },
      },
    },
  ],

However, I got an error that PostCSS 8 was not being used.

> start-storybook -p 6006

info @storybook/react v6.2.0-alpha.21
info
info => Loading presets
info => Loading presets
info => Loading 1 config file in "./.storybook"
info => Loading 8 other files in "./.storybook"
info => Adding stories defined in ".storybook/main.js"
info => Using PostCSS preset with postcss@8.2.4

~

ERROR in ./src/styles/global.css (/foobar/node_modules/css-loader/dist/cjs.js!/foobar/node_modules/@storybook/addon-postcss/node_modules/postcss-loader/dist/cjs.js??ref--11-2!./src/styles/global.css)
Module build failed (from /foobar/node_modules/@storybook/addon-postcss/node_modules/postcss-loader/dist/cjs.js):
Error: PostCSS plugin postcss-nested requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users

src/styles/global.css ("tailwindcss": "2.0.2")

@tailwind base;
@tailwind components;
@tailwind utilities;

[danspratling]

I also get the same issue as @matamatanot (also with tailwind 2.0.2)

I might have missed something from my config after doing

npx sb upgrade --prerelease

It's really not very clear what needs to be changed (if anything) to this to get storybook working with postcss 8 other than running the above command

Any guidance would be great but right now there's no difference than running the current version of sb, with my app running normally on postcss 8, but storybook failing.

ERROR in ./src/styles/index.css (./node_modules/css-loader/dist/cjs.js??ref--11-1!./node_modules/@storybook/core/node_modules/postcss-loader/dist/cjs.js??ref--11-2!./src/styles/index.css)
Module build failed (from ./node_modules/@storybook/core/node_modules/postcss-loader/dist/cjs.js):
Error: PostCSS plugin tailwindcss requires PostCSS 8.

---

Edit:

Looks like @storybook/addon-postcss does NOT get added automatically with the alpha version of storybook, but is required to fix the postcss errors.

Solution:

1. Install alpha version of storybook

   npx sb upgrade --prerelease

your package.json should now look like this

"@storybook/addon-actions": "^6.2.0-alpha.23",
"@storybook/addon-essentials": "^6.2.0-alpha.23",
"@storybook/addon-links": "^6.2.0-alpha.23",
"@storybook/react": "^6.2.0-alpha.23",

2. Manually add alpha version of addon-postcss

   npm i @storybook/addon-postcss@latest -D

your package.json should now look like this

"@storybook/addon-actions": "^6.2.0-alpha.23",
"@storybook/addon-essentials": "^6.2.0-alpha.23",
"@storybook/addon-links": "^6.2.0-alpha.23",
"@storybook/addon-postcss": "^2.0.0",
"@storybook/react": "^6.2.0-alpha.23",

3. Ensure @storybook/addon-postcss is being used by storybook .storybook/main.js

   module.exports = {
   stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
   '@storybook/addon-links',
   '@storybook/addon-essentials',
   // Add everything below here
   {
     name: '@storybook/addon-postcss',
     options: {
       postcssLoaderOptions: {
         implementation: require('postcss'),
       },
     },
   },
   ],
   }

4. Run Storybook

   npm run storybook

[phated]

@danspratling Thanks for the guide! You are correct that addon-postcss isn't automatically added as a dependency when you upgrade because the deprecation is the only real "change". Adding addon-postcss is a solution for people that want to opt-in to using postcss (and then you can further configure it as outlined in your guide). Thanks again 😄

[shilman]

@seonghyeonkimm sorry for the confusion. --prerelease updates you to the most recently released version, which is the alpha version 99% of the time since I release alphas all the time. However, occasionally I release a patch version without releasing an alpha afterward, and then that becomes the upgrade target. It's is a bug in the upgrade script, but a corner case.

[renielsalvador]

I had the same problem. I ended up downgrading postcss plugins.

[dominikhaid]

I also got this error today with the last stable version of storybook. Didn't tryed the --prerealse thing. I also just downgraded everything to postCss 7 sadly. Stack is Tailwind 2.0.3 Next 10.3 and React 16.6. Would be cool if this gets fixed in astable release until Next 11 is released so I can use Storybook along Next 11 React 17 and Tailwind ^2.

[phated]

@dominikhaid this is already fixed in the prerelease + installing the @storybook/addon-postcss module.

[phated]

For people just getting to this thread, https://github.com/storybookjs/storybook/issues/12668#issuecomment-773958085 is a guide on using new postcss with the prerelease of storybook 6.2

[larsenwork]

In relation to npx sb upgrade --prerelease not resolving to the latest prerelease but to the latest release https://github.com/storybookjs/storybook/issues/12668#issuecomment-774505942 the package.json currently required to get things working is

    "@storybook/addon-actions": "^6.2.0-beta.6",
    "@storybook/addon-essentials": "^6.2.0-beta.6",
    "@storybook/addon-links": "^6.2.0-beta.6",
    "@storybook/addon-postcss": "^2.0.0",
    "@storybook/react": "^6.2.0-beta.6",

[shilman]

@larsenwork apologies. fixing with the release of 6.2.0-beta.7 now

[skworden]

npx sb upgrade --prerelease worked for me - it push it to ^6.2.0-rc.0

[dalmo3]

I'm runnning Storybook 6.2.9 + NextJS 10 + Tailwind 2 and although the addons-postcss solution from https://github.com/storybookjs/storybook/issues/12668#issuecomment-773958085 allowed sb to build, upon visiting localhost:6006 it shows Cannot GET /.

What worked for me was downgrading tailwind as per https://github.com/storybookjs/storybook/issues/12668#issuecomment-730194625.

[heldr]

Got running in 6.2.9 with https://github.com/storybookjs/storybook/issues/12668#issuecomment-773958085 , but after upgrading to 6.3.0 error is back.

[Dupflo]

Got running in 6.2.9 with #12668 (comment) , but after upgrading to 6.3.0 error is back.

Same for Next.js 11 and Tailwind 2

[skworden]

Got running in 6.2.9 with #12668 (comment) , but after upgrading to 6.3.0 error is back.

Same for Next.js 11 and Tailwind 2

I explicitly added webpack@5 to my packages and my Next 11 / tailwind2 app works again.

[CodyBontecou]

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.

This did it for me.

[developer-rakeshpaul]

@CodyBontecou thanks a lot for the repo. I also got it working following the instructions. Much appreciate your efforts. Regards..