Emotion: Reexporting `styled` (for a typed theme) breaks the babel macro

[pierpo]

Current behavior:

I generated an app using Create React App + Typescript.
I wanted to:

• have a typed theme
• use the babel plugin

The only way I got the babel plugin to work was through the macro.

Then I started typing my theme using the docs https://emotion.sh/docs/typescript#define-a-theme

And I noticed that once I reexport my own typed module for Emotion, the macro stops working (even though I do export the babel macro). When I inspect my elements, I don't see the readable class names.

To reproduce:

Here is a detailed CodeSandbox.

https://codesandbox.io/s/interesting-dawn-0hmtk?file=/src/App.tsx

1. Inspect the "works" button: see that it's got the proper class
2. Inspect the "doesn't work" button: see that it doesn't

Expected behavior:

Both buttons should have the properly named class.

Environment information:

• react version: 16.13.0
• emotion version: 10.0.27

[pierpo]

I am not familiar with Babel macros... It might be inherent to the usage of a macro and might have no solution, but I think this should be documented.

There might be a workaround with re-typing @emotion/styled/macro through Typescript directly, without re-exporting it in a new module :thinking:

[Andarist]

I recommend migrating to Emotion 11 and using this way of defining a global theme: https://deploy-preview-1600--emotion.netlify.app/docs/typescript#define-a-theme

[pierpo]

Indeed, that will solve the issue! Thank you for the super quick answer.

Should we close this one since it won't be a problem anymore?

[Andarist]

Yes, going to close this as its solved in v11 and we do not plan any changes tegarding that in v10