emotion Class labels applied multiple times by babel plugin

Class labels applied multiple times by babel plugin

Open godiagonal opened this issue 3 years ago • 2 comments

Current behavior:

When using @emotion/babel-plugin to add class labels to styled components, the labels are added multiple times if nested css calls are used (at least I think that's the cause). I found this problem mentioned in https://github.com/emotion-js/emotion/issues/1328 which is supposed to be fixed by https://github.com/emotion-js/emotion/pull/1602 but I'm still facing a similar issue. The number of label repetitions seems to correlate to the number of nested css calls.

I have tried using both @emotion/babel-plugin and the babel macros - both give the same result.

To reproduce:

Babel macros example:

Go to https://codesandbox.io/s/emotion-babel-plugin-class-name-duplication-pud10
Inspect the "Regular title" element. Note that the class label (Title in css-i01hwx-Title) is not duplicated. This element does not use styles with nested css calls.
Inspect the "Large title" element. Note that the class label (Title-Title in css-15g50z7-Title-Title) is duplicated. This element does use styles with nested css calls.

@emotion/babel-plugin example:

Go to https://godiagonal.github.io/emotion-babel-plugin-demo/build/
Same as step 2 above
Same as step 3 above

Source: https://github.com/godiagonal/emotion-babel-plugin-demo

Expected behavior:

I expect the class label of a styled component to be applied only once, regardless of the number of nested css calls. In the example above that would be class name css-15g50z7-Title rather than css-15g50z7-Title-Title for the "Large title" element.

Environment information: