Storybook in React app isn't loading emotion styles.

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…

[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

[VinSpee]

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