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

[webcore-it]

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:

1 class when using react-scripts:

Not resolved theme values:

[hasparus]

Hey @webcore-it! Thanks for the issue.

This is a common problem — unfortunately, it's not a bug in our code per se, it's more of a design issue.

Let me explain what's happening:

• Storybook depends Emotion 10.
• Theme UI newer than 0.5.0 depends Emotion 11.

We're passing the theme to one context, and read it from the other.
The fact that we "hide" Emotion from the user, at least until problems like these happen, means Theme UI is a leaky abstraction.

I see a few possibilities of what we can do about it

• detecting two Emotion versions, and logging a nice error message describing that stuff like this will happen
• or moving Emotion to peerDeps and washing our hands of it

Neither is a satisfactory solution.

cc @lachlanjc what do you think? I added a new label to mark issues about this problem. I'm afraid this is going to be at least 1/4 of all our bug reports, maybe even more.

[lachlanjc]

Oof. What's the downside of moving Emotion to peerDeps & warn if folks install a version we're not compatible with?

[webcore-it]

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:
storybookjs/storybook#13300 (comment)

@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: webcore-it/theme-ui-storybook@62465d1)

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.

[hasparus]

Thanks for the workaround @webcore-it!

Oof. What's the downside of moving Emotion to peerDeps & warn if folks install a version we're not compatible with?

More friction to install peer deps? I tried hard to think of this one, and I don't see any more.
Let's do it. Emotion-context related issues pop up every week or two, and this problem is super annoying, because you install a library, copy some sample code and bam it doesn't work in your project.

[hasparus]

Let's keep this issue open and close it with a PR moving Emotion to peerDeps (and updating the docs).

[mryechkin]

@webcore-it thanks for the solution and the background info! Those exact steps helped solve the issue in our Storybook project (running version 6.2.9)

Was looking to try out theme-ui in our existing component library implementation, and couldn't even get it to run - but this solved it 🎉

[rafaelrinaldi]

FYI I was able to fix that by using pnpm's overrides feature. This is what I have added to my package.json:

{
  "pnpm": {
    "overrides": {
      "@emotion/core": "npm:@emotion/react",
      "@emotion/styled": "npm:@emotion/styled",
      "@emotion/styled-base": "npm:@emotion/styled",
      "emotion-theming": "npm:@emotion/react"
    }
  }
}

Note that I must run Storybook via pnpm in order for this to work:

pnpm run storybook

[iChip]

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

"resolutions": {
"@emotion/react": "^11.4.1"
},

[lachlanjc]

Our switch to having Emotion as a peer dependency should resolve the majority of cases of this! Please flag if you're still running into this.