Emotion: Class name labels not added when using a re-exported version of the styled function

Created on 15 Dec 2019 · 7Comments · Source: emotion-js/emotion

Current behavior:

babel-plugin-emotion doesn't add a class name label when using a re-exported version to the styled function.

To reproduce:

https://codesandbox.io/s/emotion-issue-template-r8v3h

Import styled from @emotion/styled and re-export it.
Import the re-exported styled in your app and use it to create a component
Notice how the class name generated by babel-plugin-emotion does not include the variable name.

Description | Screenshot
--- | ---
Using styled directly from @emotion/styled. Notice -Title is appended to the class name of the <h1>. |
Using a re-exported version of styled. Notice -Title is missing from the class name of the <h1>. |

Expected behavior:

babel-plugin-emotion should add the appropriate label to class names when using a re-exported version of the styled function. I'm currently using a re-exported version of styled in order to add the correct TypeScript types to the function, as instructed in the documentation.

Environment information:

react version: 16.12.0
@emotion/core version: 10.0.22
@emotion/styled version: 10.0.23
babel-plugin-emotion version: 10.0.23

bug

Source

robertcoopercode

👍1

Most helpful comment

Closing this because, as mentioned, this will be resolved in v11 - but with it, there will also be fewer use cases for re-exporting styled. So, in general, it should become less of a pain to work with. Stay tuned.

Andarist on 11 Jan 2020

👍2

All 7 comments

This is a known issue and it has been fixed in v11 (available on npm under next tag). Unfortunately, it's too complicated to backport this to v10 - but hopefully we should be able to ship v11 in a month (I encourage you to try it out today though, it's stable and doesn't include many breaking changes).

Additionally - with v11 you shouldn't have to reexport styled just to add Theme type. Instead, you will be able to augment builtin interface

Andarist on 22 Dec 2019

🎉2

@Andarist Great, thanks! I would love to try v11 today but I can't find a summary of all the breaking changes. I can browse through all next releases but it's not very convenient.. Is there a recap somewhere?

Kerumen on 22 Dec 2019

I've extracted quickly the list from our changesets (which are available here - https://github.com/emotion-js/emotion/tree/1e4a741de6424d3d9c1f3ca9695e1953bed3a194/.changeset ):

Remove support for deprecated innerRef prop
Reworked TypeScript definitions so it's easier to provide a type for Theme. Instead of creating custom instances (like before) you can augment builtin Theme interface
Removed support for the instances option, any usage of it should be replaced with the importMap option (babel plugin)
Added the T parameter to the Matchers interface in the TypeScript definitions to make this module compatible with @types/jest@^24.0.20.
Drop Babel 6 support (babel plugin)
Removed @emotion/css - it's main purpose was to allow css to be a Babel macro, but since babel-plugin-macros allows us to keep imports nowadays this is no longer needed. @emotion/core/macro has been added to account for this use case and appropriate changes has been made to babel-plugin-emotion to facilitate those changes.
Removed support for @emotion/styled-base package. It has been moved to @emotion/styled and is available as @emotion/styled/base. This simplifies how the regular and base versions relate to each other and eliminates problems with stricter package managers when @emotion/styled-base was not installed explicitly by a user.
Use hooks internally for improved bundle size and a better tree in React DevTools
emotion-theming has been removed and all its exports were moved to @emotion/core package. Please import them like this import { useTheme, ThemeProvider, withTheme } from '@emotion/core' from now on.