Storybook setup is incomplete.

[theMasix]

Subject

Storybook Instsallation

Description

I tried to add Panda to a Storybook that uses webpack5. After applying changes carefully, I get these styles generated by PostCSS:

This means that PostCSS is not working!

After some research, I found this documentation:

• https://storybook.js.org/docs/configure/styling-and-css#css-processors

Is says:

If you're using Vite as your builder, you're covered! Vite supports Sass and PostCSS out-of-the-box 🎉
However, if you're using Webpack and want to use Sass and PostCss, you'll need some extra configuration. We recommend installing @storybook/addon-styling-webpack to help you configure these tools.

Although I couldn't set up PostCSS with that yet (the following error appears), it should be mentioned in the documents that further Storybook setup may be required.

[email protected][email protected]/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[14].use[2]!./src/index.css)
Module build failed (from ./node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/postcss-loader/dist/cjs.js):

SyntaxError

(1726:14) <css input> Missed semicolon

  1724 |   }
  1725 |   .or_fixed_margin\:_-1rem {
> 1726 |     or: fixed margin: -1rem;
       |              ^
  1727 |   }
  1728 |   .d_flex {
 @ ./src/index.css 8:6-338 22:17-24 26:7-21 52:25-39 53:36-47 53:50-64 57:6-67:7 58:54-65 58:68-82 64:42-53 64:56-70 66:21-28 77:0-308 77:0-308 78:22-29 78:33-47 78:50-64 55:4-68:5
 @ ./.storybook/preview.tsx 8:0-26
 @ ./storybook-config-entry.js 9:2185-2257 33:2-36:4 33:2177-36:3

preview compiled with 1 error

I think there are two things here:

• documentation is not completed
• and there is a bug with fixed margin style.

[segunadebayo]

From the screenshot provided, the css declaration feels odd. Don’t remember any css property value called “fixed margin”

could you share a reproduction? and perhaps check your code to find the spot where “or fixed margin: -1rem” is used.

[theMasix]

After applying these changes in my Emotion styles, the error was solved.

NOTE that we have more than 90 components in the UI-kit and more than 4000 lines of code in Emotion! I don't know what the HELL was with the PostCSS that was throwing errors with only those lines of code. I'm so confused and tired of finding those SECRET BUGS in the HUGE codebase. It took me more than 4 hours to find those lines of code. OMG