babel-preset-css-prop does not work with Storybook

• emotion version: 10.0.9
• react version: 16.8.3
• storybook version 5.0.6

Relevant code:

// babel.config.js
module.exports = {
  presets: [
    'react-app',
    '@emotion/babel-preset-css-prop',
  ],
  plugins: [
    'emotion',
  ],
};

// Button.jsx
import React from 'react';
import { css } from '@emotion/core';

const Button = props => (
  <button
    css={css`
      background-color: blue;

      &:hover {
        background-color: lightblue;
      }
    `}
  >
    {'Hello'}
  </button>
);

export default Button;

What you did:

Bootstrap a new Storybook instance:

npx -p @storybook/cli sb init --type react

What happened:

Output is <button css="[object Object]">Hello</button>

Problem description:

The css prop is not transformed. It does, however, work when using /** @jsx jsx */ pragma.

Per https://storybook.js.org/docs/configurations/custom-babel-config/ Storybook uses the app’s babel config so the note about custom configs should not apply.

[LukeAskew]

Played around a bit with these solutions and realized that Storybook only supports loading .storybook/.babelrc and not babel.config.js.

It only loads from .storybook (not root, where most babel configs are located), and only supports .babelrc.

If you drop a .babelrc file in .storybook/ then it works.

🤦‍♂️

[iamyoki]

.storybook/main.js

module.exports = {
  ...,
  babel: async (options) => ({
    ...options,
    presets: [...options.presets, '@emotion/babel-preset-css-prop'],
  }),
}

https://storybook.js.org/docs/react/configure/babel#gatsby-focus-wrapper