Add an option to include the component's displayName in the generated class names

Hi this is feature request for an option to include the component’s displayName in the generated class names, something like MyComponent_u2jd38.

Without this, it is very hard identify where styling issues comes from when using Dev Tools to investigate. After a few weeks using styled-components in my team, this issue has been raised by several people. We transitioned from css-modules where we had this feature and now we miss it a lot.

FYI: We would probably enable this option for development builds only.

[olivierbeaulieu]

For those using create react app, you can solve this without ejecting by using babel macros.

Simply import styled-components/macro instead of the usual styled-components. You don’t need to install anything special. The downside is that you will need to import this everywhere.

Example:

import styled from 'styled-components/macro';

const MyStyledComponent = styled`
  color: pink;
`;

When used, this component will have a nice readable className like MyStyledComponent_fa09we8.

[VictorChen]

For people using create react app, is there any way to solve this without ejecting?