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

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:

[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: 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.

[iChip]

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

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