Storybook 6.1.0-rc.4 & Emotion 11.0 support

Describe the bug When you upgrade emotion (@emotion/css) to version 11.0 - storybook seems to build successfully, but on every single set of stories, simply renders this error screen:

To Reproduce

1. Init a basic storybook
2. Install @emotion/css and @emotion/babel-plugin
3. setup a basic component which uses { css } from @emotion/css
4. do npm run build-storybook
5. See error:

css is not defined
ReferenceError: css is not defined
    ...

Code snippets

//./storybook/main.js
module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-knobs',
  ],
  typescript: { reactDocgen: 'react-docgen' },
};

System

$ npx sb@next info

Environment Info:

  System:
    OS: macOS 10.15.7
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 14.15.1 - ~/.nvm/versions/node/v14.15.1/bin/node
    Yarn: 1.19.0 - /usr/local/bin/yarn
    npm: 6.14.8 - ~/.nvm/versions/node/v14.15.1/bin/npm
  Browsers:
    Chrome: 86.0.4240.198
    Edge: 86.0.622.69
    Firefox: 82.0.3
    Safari: 14.0.1
  npmPackages:
    @storybook/addon-actions: ^6.1.0-rc.4 => 6.1.0-rc.4 
    @storybook/addon-essentials: ^6.1.0-rc.4 => 6.1.0-rc.4 
    @storybook/addon-knobs: ^6.1.0-rc.4 => 6.1.0-rc.4 
    @storybook/addon-links: ^6.1.0-rc.4 => 6.1.0-rc.4 
    @storybook/react: ^6.1.0-rc.4 => 6.1.0-rc.4 

[shilman]

FYI we are working on a proper fix for this–not a workaround–hopefully arriving in the next few days.

[shilman]

Hurrah!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.5.0-alpha.31 containing PR #17000 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there’s still more to do.