-
-
Notifications
You must be signed in to change notification settings - Fork 1.1k
Description
emotion
version: 10.0.9react
version: 16.8.6
What you did:
We're working with emotion
to style our components in our component library, and we're currently using it in a monorepo.
We're using the following babel-plugin-emotion
options when transpiling the code:
["babel-plugin-emotion", {
sourceMap: true,
autoLabel: true,
labelFormat: '[filename]__[local]',
}],
Because of some transformation we do to the CSS after building (production & dev) we need the labels to be always on, and we also specify a specific format as seen above. The labels are applied properly when building the component library.
This is the interesting part. In the same monorepo we have an app which will showcase those components, and the app itself also uses emotion
to style its own custom components (similarly to how you would use react-styleguidist).
What happened:
Because the two packages use the same babel configuration, when using the transpiled components in development, the labels for those classes are applied twice. See screenshot below:
As you can see, the highlighted line is generated by the Button
component from the library, and the "double" label can be seen as css-1ert58-Button__base-Button__base
. Inspecting the bundled output from the "styleguide" app which uses the component, looking for the Button
component styles we can see the following:
var Button_styles = {
base:
/*#__PURE__*/
/*#__PURE__*/
emotion_esm_css( true ? {
name: "10sdv60-Button__base",
styles: "background:red;label:Button__base;"
} : undefined, "label:Button__base;" + ( true ? "" : undefined))
};
Where in the last section the label Button__base
is added twice. Whereas in the Button.js
transpiled component from the component library, we only have this:
base:
/*#__PURE__*/
_css(process.env.NODE_ENV === "production" ? {
name: "10sdv60-Button__base",
styles: "background:red;label:Button__base;"
}
Reproduction:
You can reproduce this through this repo we made to show the issue: https://github.com/nicmosc/emotion-bug
Suggested solution:
We tried to use package-specific babel options but with the current behaviour it is impossible for us to get the desired outcome.