Emit source maps

Debugging styled-components can sometimes be a bit hard, because in the DevTools the CSS properties are linked to a random JS bundle. It would be awesome to somehow support source maps for styled-components generated CSS so that I can click on the link next to a CSS fragment and see the untranspiled source code of my component.

This is the spec for source maps, and this is a great walkthrough talks by @bentlegen through the format and why it is the way it is.

This would probably have to live in a Babel? Webpack? plugin which emits a some .map file or maybe adds something to the webpack/babel generated one? Maybe we could also leveraged the mentioned source-map module by Mozilla?

If somebody wants to pick this up that’d be much appreciated!

[madiodio]

So, given that this is more like “eye candy” than essential I closed it for now.

@kitten I completely disagree that this feature should be considered as “eye candy”. Imho this should be the most important feature of a css-in-js lib like styled-components which does not support build time CSS extraction.

Just having a look at issues that have been opened here, this is the second most upvoted feature request and still the most upvoted issue on the babel plugin repo but it’s still somehow closed without further considerations.

We also failed to implement this for two roadmaps.

This, in my opinion, is just due to neglect after multiple people have been asking for it since 2016 and after there are been attempts to bring it on the babel plugin side but again have been opened for almost 4 years now due to lack of attention. I also think the fact that it has been considered but dropped for two consecutive roadmaps doesn’t mean that it’s not essential.

The other being it’s rather poorly supported and not well working even if we got to an implementation. Many CSS-in-JS library choose to skip this these days

Granted source maps browser support and integrations are not perfect but to me, in terms of debuggability, they are way ahead of relying on features such as displayName (that aren’t less buggy or better tbf : https://github.com/styled-components/styled-components/issues/2318, https://github.com/styled-components/styled-components/issues/1985, https://github.com/styled-components/babel-plugin-styled-components/issues/261, https://github.com/styled-components/babel-plugin-styled-components/issues/2, and so on …) and or having to add a specific className. Really, just clicking on the component name right from the styles tab is unmatched and is a superior DX than having to grep on the React Devtool tab to find a specific component. Also many css-in-js libs (at least the most popular ones) already support source maps : https://github.com/vercel/styled-jsx#features & https://emotion.sh/docs/source-maps. And this is a reason why zero-runtime css-in-js libs like linaria have source maps listed as one of their top feature, it’s just not a nice-to-have.

So please reconsider this position because source maps are just so essential for DX for a lib like styled-components to consider it as “eye-candy”.

PS: Thank you and all the contributors for the hard work regardless.

[thysultan]

For reference there is a good example of this in how styled-jsx does it using a plugin with stylis and the source-map module.