Emotion: babel-plugin-emotion to support more packages

[ndelangen]

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'; ?

[Andarist]

Seems reasonable to me - providing custom styled has some valid use cases, would be good to have benefits of the babel plugin when using this.

Would you be willing to work on this feature?

[ndelangen]

Yes, But I do not know how.

[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]

This will get fixed by https://github.com/emotion-js/emotion/pull/1220 which we should land this month. Closing this to keep the issue tracker clean.

[mbeauchamp7]

@ndelangen Hi, I'm having the same issue you mentioned in your first post, Error: Component selectors can only be used in conjunction with babel-plugin-emotion. Did you ever find a solution to make the plugin work with storybook? Thanks

[Andarist]

@mbeauchamp7 this got implemented in #1220 and is available in the upcoming Emotion 11. I encourage you to try it out - its breaking changes are usually insignificant to the majority of users.

[mbeauchamp7]

@Andarist Under the @emotion/[email protected] tag?

[Andarist]

Yes, you should use it in combination with @emotion/[email protected] and @emotion/[email protected]

[mbeauchamp7]

Thanks, I finally found out what I was doing wrong with the component selectors. I was exporting one styled component from another file and using it in another styled component, which I don't think is supported.