Docs addon propType description broken when using CRA and emotion's jsx pragma
See original GitHub issueWhen using the jsx pragma for the css prop from emotion, storybook’s docs addon does not render propType descriptions.
Here is a repo that reproduces the issue: https://github.com/jscheel/storybook-cra-emotion-jsx-pragma
The repo provides a working and broken example. In the working example (NormalExample
), the description column of the prop table is generated properly. In the broken example (EmotionExample
), the description column is blank.
If I kill the create-react-app config (easiest way is to just npm remove react-scripts
), everything works as expected in both examples.
System:
Environment Info:
System:
OS: macOS Sierra 10.12.5
CPU: (8) x64 Intel(R) Core(TM) i7-4850HQ CPU @ 2.30GHz
Binaries:
Node: 12.13.0 - /var/folders/27/fqmq58ks6kzbkmmgg7whv4280000gn/T/fnm-shell-2901125/bin/node
Yarn: 1.13.0 - ~/.yarn/bin/yarn
npm: 6.12.0 - /var/folders/27/fqmq58ks6kzbkmmgg7whv4280000gn/T/fnm-shell-2901125/bin/npm
Browsers:
Chrome: 79.0.3945.79
Firefox: 70.0.1
Safari: 10.1.1
npmPackages:
@storybook/addon-actions: ^5.2.8 => 5.2.8
@storybook/addon-docs: ^5.2.8 => 5.2.8
@storybook/addon-links: ^5.2.8 => 5.2.8
@storybook/addons: ^5.2.8 => 5.2.8
@storybook/react: ^5.2.8 => 5.2.8
Normal, Working Example:
Broken, Emotion Example:
Issue Analytics
- State:
- Created 4 years ago
- Comments:10 (5 by maintainers)
Top Results From Across the Web
The css Prop - Emotion
The primary way to style elements with emotion is the css prop. It provides a concise and flexible API to style your components....
Read more >How To Customize React Components with Props
In this step, you will create a component that will change based on the input information called props. Props are the arguments you...
Read more >emotion-js on Create React App - 'jsx' is defined but never used
Another approach is to use emotion's babel plugin to automatically add the jsx import and jsx pragma comment automatically at compile time.
Read more >CHANGELOG.md - TINMAN
Some interesting CSS-in-JS libraries like styled-components, emotion or linaria have ... [docs] Fix broken link (#13096) @Hocdoc - [docs] Use the InputBase ...
Read more >the `@emotion/core` package has been renamed to ... - You.com
Apparently in Emotion 11, @emotion/core was renamed to @emotion/react, ... released a major version update with breaking changes to the package's naming.
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Fixed in
@storybook/preset-create-react-app@1.5.0
!! Please upgrade and try it out! Thanks @mrmckeb for the fix 🙌Then we can get back to the original issue about jsx pragma 😉
i think this is the underlying issue: https://github.com/storybookjs/presets/issues/78
will try to work through that, and then look into the emotion issue after it’s resolved. thanks for your patience!