Skip to content

CSS Class label applied twice #1328

@nicmosc

Description

@nicmosc
  • emotion version: 10.0.9
  • react 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:

image

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions