Class labels applied multiple times by babel plugin

[godiagonal]

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:

1. Go to https://codesandbox.io/s/emotion-babel-plugin-class-name-duplication-pud10
2. 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.
3. 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:

1. Go to https://godiagonal.github.io/emotion-babel-plugin-demo/build/
2. Same as step 2 above
3. 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:

• react version: 17.0.2
• @emotion/react version: 11.4.0
• @emotion/styled version: 11.3.0
• @emotion/babel-plugin version: 11.3.0

[raphaelbadia]

I just stumbled across the same issue :(

[sgehrman]

same issue.

[Hunter-Kwon]

same issue.

Env:

• react: 17.0.2
• @emotion/react: 11.10.5
• @emotion/styled: 11.10.5
• @emotion/babel-plugin: 11.10.5