Emotion CSS stringify errors after upgrading to 6.1.5

[KevinGhadyani-minted]

Describe the bug
Seeing Emotion CSS stringify object errors on a css attribute after upgrading to 6.1.3 or 6.1.5.

This issue does not occur when using 6.1.0, 6.1.1, or 6.1.2.

To Reproduce
Steps to reproduce the behavior:

1. Upgrade to Storybook 6.1.5 (tested both: 6.1.3, and 6.1.5).
2. Open Storybook with something that has Emotion CSS.
3. See error.

Expected behavior
I expect this to render CSS classes instead of text in a class attribute. The css property should not be rendered as an HTML attribute and also does not contain text; it contains the an Emotion CSS class object.

Screenshots

Code snippets
babel.config.js

{
  plugins: (
    [
      '@babel/plugin-proposal-object-rest-spread',
      '@babel/plugin-transform-runtime',
      'babel-plugin-emotion',
    ]
      .concat(
        isDevelopment
          ? 'react-hot-loader/babel'
          : []
      )
  ),
  presets: [
    [
      '@babel/preset-env',
      {
        modules: (
          isTest
            ? 'commonjs'
            : false
        ),
        useBuiltIns: false,
      },
    ],
    '@babel/preset-react',
    '@emotion/babel-preset-css-prop',
  ],
}

Any React component with Emotion styling:

const tabContainerStyles = css`
  width: 100%;
`

const SomeComponent = ({
  children,
}) => {
  <div css={tabContainerStyles}>
     {children}
  </div>
)

System
Docker container in the working state:

  System:
    OS: Linux 5.4 Alpine Linux
    CPU: (4) x64 AMD Ryzen 7 3800X 8-Core Processor
  Binaries:
    Node: 12.19.1 - /usr/local/bin/node
    Yarn: 1.22.5 - /usr/local/bin/yarn
    npm: 6.14.8 - /usr/local/bin/npm
  npmPackages:
    @storybook/addon-actions: 6.0.28 => 6.0.28
    @storybook/addon-essentials: 6.0.28 => 6.0.28
    @storybook/addon-links: 6.0.28 => 6.0.28
    @storybook/react: 6.0.28 => 6.0.28

Additional context
I logged the Babel config and did see '@emotion/babel-preset-css-prop', at the bottom in all versions tested.

[mverissimo]

What version of emotion are you using?

I received the same error using emotion(11), but I think this, not a bug with the storybook and yes with the emotion.

[KevinGhadyani-minted]

  {
    "@emotion/cache": "^10.0.29",
    "@emotion/core": "^10.0.35",
    "@emotion/babel-preset-css-prop": "^10.0.9",
    "babel-plugin-emotion": "^10.0.33",
    "emotion": "^10.0.27",
  }

Strange that this would occur only after updating 6.0 to 6.1 though.

[mverissimo]

Stranger, but I think this is a bug with emotion yet, you can share a repo case?

[KevinGhadyani-minted]

Sadly, I can't share this code.

After some playing around with another similar Storybook project:

• Storybook v6.1 only works with Emotion v11.
• Storybook v6.0 only works with Emotion v10.

I had both of these situations working locally, but not any deviation from these versions.

[mverissimo]

Ok, maybe import the jsx pragma solve this problem!

Or maybe, you can try:

const tabContainerStyles = () => css`
  width: 100%;
`

[KevinGhadyani-minted]

You might be onto something with JSX pragma. I've tried a number of things to mess with configurations and found some more info.

I have two projects both with Storybook and with different configurations.

Both showed this error if I only used @emotion/babel-plugin along with:

    [
      '@babel/preset-react',
      {
        importSource: '@emotion/react',
        runtime: 'automatic',
      },
    ],

Although, using @emotion/babel-preset-css-prop, everything works fine. Something about processing React 17 and @babel/preset-react may not be working properly with Emotion or that @emotion/babel-preset isn't working as intended.

These look like issues unrelated to Storybook, but I'm not certain because I only saw these errors after upgrading Storybook. And it definitely seems fishy when certain versions of Emotion don't work with certain versions of Storybook.

[mverissimo]

Recently I set up a storybook and everything works fine, check the babel maybe can help you.

[VivekFitkariwala]

Recently I set up a storybook and everything works fine, check the babel maybe can help you.

@mverissimo where have you used emotion's css props?

[mverissimo]

Hi @VivekFitkariwala some other examples here

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[KevinGhadyani-minted]

Closing this issue as I've already resolved this issue. Certain versions of Storybook only work with certain versions of Emotion. It appears that the Emotion Babel props docs were updated recently to reflect the proper uses cases as well.