Better debugging of classnames

[siddharthkp]

TL;DR: We'll be able to add better debugging for developers without having to eject from create-react-app

I really miss not having displayNames in the class to make the dev experience better. (Ref: https://www.styled-components.com/docs/tooling#better-debugging)

This is easy for apps with custom webpack configs, but if you're using create-react-app (some projects in the company do), there's no official way to do it.

react-app-rewired is one approach but it requires some configuration work from the developers, which I'm not a fan of (sample implementation)

Until now!

babel-plugin-macros were proposed in create-react-app back in July 2017 and are going to land in stable sometime in the near future (Merged PR: facebook/create-react-app#3675)

styled-components folks already have a working plugin-macro that would work

Here's a blog post about plugin-macros for the curious: https://babeljs.io/blog/2017/09/11/zero-config-with-babel-macros

[nkohari]

@siddharthkp Is this something we still want to do?

[siddharthkp]

Yes, but they don't have the macro ready yet 😢

I will add this eventually though, can close this issue though