babel-plugin-emotion to support more packages

Hey emotion dev-team. Storybook maintainer here. Got a weird request… Concerning https://github.com/emotion-js/emotion/tree/master/packages/babel-plugin-emotion

Storybook uses emotion, and it’s great, but we’ve got a conflict: If a user of storybook is also using emotion (happening more and more) potential conflicts of versions happen. When multiple version of emotion are in 1 frame, it mostly works, but theme contexts get “confused”.

So I came up with a solution so storybook would get control of the version inside itself (and addons) and users are in control of the emotion they are using. And the install of the user’s version would happen where they’d expect.

The solution was to wrap emotion packages by a package called @storybook/theming. It also happens to include the default themes.

So when I’m creating emotion components it looks like this:

import { styled } from '@storybook/theming';

Obviously the babel-plugin-emotion doesn’t detect this, and so it doesn’t do anything. Sad. For the most part it’s OK, except the autoLabel feature is sweeet. But the babel-plugin is a requirement for certain features it seems. I’m getting this:

Component selectors can only be used in conjunction with babel-plugin-emotion

So sorry for the long intro… here’s my question: What can I do to get babel-plugin-emotion to work on import { styled } from '@storybook/theming'; ?

[Nitive]

I’m currently use the following workaround to resolve this problem.

I have added paths option to compilerOptions

"compilerOptions": {
  "paths": {
    // Workaround for https://github.com/emotion-js/emotion/issues/1203
    // Remove after https://github.com/emotion-js/emotion/pull/1220 gets merged
    "@original-emotion/styled": ["./node_modules/@emotion/styled"],
    "@emotion/styled": ["src/utils/emotion/styled.ts"]
  }
}

Then, I have created styled file like documentation said. I have used @original-emotion/styled alias to get original @emotion/styled

import styled, { CreateStyled } from '@original-emotion/styled'
import { Theme } from '../../themes/types'

export default styled as CreateStyled<Theme>

So now we can import styled from @emotion/styled, it will be typed

import styled from '@emotion/styled'

Not a perfect solution, but it works

[Andarist]

Yes, you should use it in combination with @emotion/react@11.0.0-next.15 and @emotion/styled@11.0.0-next.15