-
-
Notifications
You must be signed in to change notification settings - Fork 1.1k
Description
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';
?