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.

theme-ui creates 2 class names in storybook when using sx prop

See original GitHub issue

Describe the bug I have an react app. Starting with v0.5.0, theme-ui is creating 2 classes when rendered in storybook for all components whenever the sx prop is used. (HTML tags with sx have only one class). One class contains the style of the component, the other class the style from the sx prop.

When using react-scripts to render the app, only one class is generated and all css properties are merged in that one class.

There is another issue with storybook: Not all sx/theme property values are resolved, so the css class(es) contains something like background-color: primary;. (That’s is not the case when the app is rendered with react-scripts.)

To Reproduce Steps to reproduce the behavior:

  1. Clone https://github.com/webcore-it/theme-ui-storybook
  2. run yarn
  3. run yarn dev to start storybook
  4. Inspect any of the elements to see the generated classes

To check react-scripts:

  1. run yarn start to start with react-scripts
  2. Inspect any of the elements to see the generated class

Expected behavior Only one class is generated when using storybook and all theme styles are applied.

Screenshots 2 classes when using storybook: Screenshot 2021-02-27 at 15 02 30

1 class when using react-scripts: Screenshot 2021-02-27 at 15 03 10

Not resolved theme values: Screenshot 2021-02-27 at 15 03 41

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:2
  • Comments:9 (5 by maintainers)

github_iconTop GitHub Comments

9reactions
webcore-itcommented, Mar 2, 2021

Thanks for your response. I looked at the Storybook issue board and there are a few tickets with requests to update the dependencies there to emotion 11.

As a workaround if found this comment in a merge request: https://github.com/storybookjs/storybook/pull/13300#issuecomment-783268111

@bebraw Thanks, this got me most of the way there. I also had to do the same to managerWebpack as that contains aliases referencing the v10 packages and would give me runtime errors without it. This only became apparent to me when I cleared node_modules/.cache/storybook.

Also found v10 references in the default babel config which I needed to replace in order to get the CSS prop to work at runtime.

Finally I also needed to install @emotion/styled as a dev dependency to ensure I had v11 in node_modules and not the v10 that gets installed for Storybook.

In the end this setup is now working for me (Emotion 11, Storybook 6.1.18, Yarn Workspaces).

.storybook/main.js

// Location of root node_modules
const modulesDir = path.join(__dirname, '../../../../node_modules');

const updateEmotionAliases = (config) => ({
  ...config,
  resolve: {
    ...config.resolve,
    alias: {
      ...config.resolve.alias,
      '@emotion/core': path.join(modulesDir, '@emotion/react'),
      '@emotion/styled': path.join(modulesDir, '@emotion/styled'),
      '@emotion/styled-base': path.join(modulesDir, '@emotion/styled'),
      'emotion-theming': path.join(modulesDir, '@emotion/react'),
    },
  },
});

module.exports = {
  // ...
  managerWebpack: updateEmotionAliases,
  webpackFinal: updateEmotionAliases,
  babel: (config) => {
    const getEntryIndexByName = (type, name) => {
      return config[type].findIndex((entry) => {
        const entryName = Array.isArray(entry) ? entry[0] : entry;
        return entryName.includes(name);
      });
    };

    // Replace reference to v10 of the Babel plugin to v11.
    const emotionPluginIndex = getEntryIndexByName('plugins', 'babel-plugin-emotion');
    config.plugins[emotionPluginIndex] = require.resolve('@emotion/babel-plugin');

    // Storybook's Babel config is already configured to use the new JSX runtime.
    // We just need to point it to Emotion's version.
    // https://emotion.sh/docs/css-prop#babel-preset
    const presetReactIndex = getEntryIndexByName('presets', '@babel/preset-react');
    config.presets[presetReactIndex][1].importSource = '@emotion/react';

    return config;
  },
  // ...
};

This also worked in my example repo. Now there is one css class and the components are rendered as expected. (Here the only change to .storybook/main.js: https://github.com/webcore-it/theme-ui-storybook/commit/62465d1efcc2dbe19ffe9c167413dc9c4d167ee5)

I’ve applied this workaround to the actual codebase (yarn monorepo + multiple Gatsby apps) as well, and it worked on the first look.

Feel free to close this issue.

2reactions
iChipcommented, Nov 5, 2021

For the yarn users out there - my less configuration-related workaround was:

“resolutions”: { “@emotion/react”: “^11.4.1” },

Read more comments on GitHub >

github_iconTop Results From Across the Web

Theme UI sx prop ignored when importing a storybook ...
I have setup and published to a private server a StoryBook design system using ThemeUI that contains components. One such component ...
Read more >
Material UI in Storybook
This recipe shows you how to configure Storybook to load Material UI components and dynamically interact with their API. Bundle your fonts ...
Read more >
Ternary in Theme UI SX prop : r/reactjs - Reddit
I'm having a problem on my gatsby app where using a ternary operation inside the sx prop will work just fine in my...
Read more >
Theme UI with Storybook: A great way to create a components ...
As per Theme UI website: "Theme UI is a library for creating themeable user interfaces based on constraint-based design principles.
Read more >
Build a new design system in a couple afternoons
You and your designer set the tone once, create the elements, some basic rules, ... You can do it with CSS classes but...
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