Emotion: Better displayNames for React DevTools

[smlmrkhlms]

Love this library and I am currently working on a POC to persuade my team and organization to use it in production. Thanks!

• emotion version: 7.3.2
• react version: 15.6.1

Problem description:
Currently, React DevTools shows emotion components like so: styled(Component). Is there an option in the babel plugin to transform the displayName into something more debuggable/readable.

Suggested solution:
I would prefer if the displayName was transformed to whatever the name of the component is when the variable is declared. Cheers!

[avaragado]

@mitchellhamilton I realise this issue is closed with a fix, but I suspect it's not the solution @SMLMRKHLMS was looking for. Consider this component:

const Circle = styled.div`
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: red;
`;

export default Circle;

In React DevTools, this now shows up as Styled(div) (in react-emotion 8.0.2-13). Without digging into code you can't see that it's a Circle. This makes debugging etc trickier.

A workaround: set the displayName property of the exported function.

Circle.displayName = 'Circle';

[mitchellhamilton]

Yup, @tkh44 is working on this in #375.

[mitchellhamilton]

Closed via #375 and #442

Use the autoLabel option in your config for babel-plugin-emotion and the variable name will be on the displayName.