Add Component name as a className in dev mode

[wscotten]

First of all, thank you for the awesome library! I really enjoy using it. A small ask I have of the library is to add the component name as a className in development mode, or add it as an option during instantiation.

Styled-components does this, and its really helpful in the dev flow where I open devtools on a page, find a component's name in the clasname, search for it in VS Code, then easily find where the component lives in my codebase.

I understand that each className is tied to a style, so this extra className would just be a wasted className without a style attached to it. I am not sure the technical challenges required to add this, but I think it would be really helpful. I am open to helping with this as well. Thanks again!

[peduarte]

@wscotten hey! Yeah I think its a great idea too!

AFAIK its not something we can do within Stitches, it needs to be done at the transpile time. Thats why SC uses babel too.

Someone has created a babel package to do this: babel-plugin-transform-stitches-display-name

Have you tried it?