Storybook in React app isn't loading emotion styles.

[johnsocf]

Describe the bug Storybook in React app isn't loading emotion styles.

To Reproduce Steps to reproduce the behavior:

1. adding storybook to existing react app which uses emotion.
2. set up webpack.config.js in ./storybook folder with code snippet below. Set up tsconfig.json with subsequent code snippet.
3. npm run storybook

Expected behavior I expect that storybook will load my stories with styles. It loads the stories in the storybook but they don't have styles associated.

Code snippets

for webpack.config.js in ./storybook

const path = require('path');

const SRC_PATH = path.join(__dirname, '../src');

module.exports = async ({ config, mode }) => {
    config.module.rules.push({
        test: /\.(ts|tsx)$/,
        include: [SRC_PATH],
        use: [
            {
                loader: require.resolve('awesome-typescript-loader'),
                options: {
                    configFileName: './.storybook/tsconfig.json',
                }
            },
            { loader: require.resolve('react-docgen-typescript-loader') }
        ]
    });
    config.resolve.extensions.push('.ts', '.tsx');
    return config;
};

for tsconfig.json in .storybook/

{
  "compilerOptions": {
    "baseUrl": "./",
    "allowSyntheticDefaultImports": true,
    "module": "es2015",
    "target": "es5",
    "lib": ["es6", "dom"],
    "sourceMap": true,
    "allowJs": false,
    "jsx": "react",
    "moduleResolution": "node",
    "rootDir": "../",
    "outDir": "dist",
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "declaration": true
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules",
    "build",
    "dist",
    "scripts",
    "acceptance-tests",
    "webpack",
    "jest",
    "src/setupTests.ts",
    "**/*/*.test.ts",
    "examples"
  ],
  "awesomeTypescriptLoaderOptions": {
    "useBabel": true,
    "babelOptions": {
      "babelrc": false, /* Important line */
      "presets": ["@babel/preset-env", "@emotion/babel-preset-css-prop"],
      "plugins": ["emotion"]
    },
    "babelCore": "@babel/core" // needed for Babel v7
  }
}

System:

• OS: Windows
• Device: na
• Browser: Chrome
• Framework: React
• Addons: na
• Version: latest

Additional Context: When I inspect the markup I can see that styles with data-emotion attributes are in the file and a class is specified (Also I see my css selectors and css styles in these style tags), but the dom doesn't associate to those styles with any class as if something fails in setting up the emotion connection between classes for styles and the markup..

[shilman]

what version of emotion are you using?

[slorber]

Myself using emotion 10, the css prop won't work. There are similar issues in Emotion repo btw.

[stale[bot]]

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!

[justinanastos]

I'm also seeing the css prop not working in any stories in Storybook v5.2-rc0. I'm using @emotion/core v10.0.15.

Update:

This is using the jsx pragma method (https://emotion.sh/docs/css-prop#jsx-pragma). Perhaps the jsx renderer is being overridden by Storybook?

[shilman]

Related: https://github.com/storybookjs/storybook/issues/7698

@justinanastos Are you using CSF? MDX? storiesOf stories?

Thanks!

[justinanastos]

@shilman it's a project using max and storiesOf, same one we went over before. I'm only using the css prop on storiesOf stories.

[shilman]

@vinspee Didn't you manage to get this working with a workaround?

[justinanastos]

I'd love to hear about a workaround! I tried the babel plugin with no luck, too.

[stale[bot]]

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!

[VinSpee]

Sorry for the late reply! WRT my use in the Docs page, the /** @jsx */ pragma worked fine

[duncanleung]

In my project I was able to get Storybook to recognize css-prop (without using the jsx pragma) by adding this config to /.storybook/webpack.config.js.

Line 17 - Line 19:

  config.module.rules[0].use[0].options.presets = [
    require.resolve('@babel/preset-react'),
    require.resolve('@babel/preset-env'),
    // Emotion preset must run BEFORE reacts preset to properly convert css-prop.
    // Babel preset-ordering runs reversed (from last to first). Emotion has to be after React preset.
    require.resolve('@emotion/babel-preset-css-prop'),
  ];

Also, I am including the @emotion/babel-preset-css-prop for .ts and .tsx files

Line 41 - Line 43:

  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    loader: require.resolve('babel-loader'),
    options: {
      presets: [
        ['react-app', { flow: false, typescript: true }],
        // Emotion preset must run BEFORE reacts preset to properly convert css-prop.
        // Babel preset-ordering runs reversed (from last to first). Emotion has to be after React preset.
        require.resolve('@emotion/babel-preset-css-prop'),
      ],
      // other plugins here...
    },
  });

I created a template to share my project config that uses Gatsby + TypeScript + Emotion + Storybook + React Intl + SVGR + Jest: https://github.com/duncanleung/gatsby-typescript-emotion-storybook

Here's a link to my webpack.config.js that enables @emotion/babel-preset-css-prop:

• Line 17 - Line 19: enables for JS files.
• Line 41 - Line 43: enables for TS files

[ndelangen]

This is fixed in storybook 7.0 beta.