question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Docs addon propType description broken when using CRA and emotion's jsx pragma

See original GitHub issue

When 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: normal

Broken, Emotion Example: emotion

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:10 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
shilmancommented, Dec 16, 2019

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 😉

1reaction
shilmancommented, Dec 16, 2019

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!

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found