Skip to content

babel-plugin-emotion to support more packages #1203

@ndelangen

Description

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

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions