Emit source maps

[mxstbr]

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!

[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.

[quantizor]

@mxstbr should this be moved to the babel plugin repo? Not sure if it can be achieved without a preprocessing step.

[rtsao]

Figured this may be relevant here, but I recently implemented this in a way that doesn't require any build-time plugins to work: https://ryantsao.com/blog/generating-css-to-js-source-maps-with-web-workers-and-webassembly

styled-components could potentially leverage a similar method (although if most styled-component users are already using a Babel plugin, this might be less salient)

[d7my11]

i would like to pick this one if nobody did.

[d7my11]

There is an open PR for that already #180

[nhooyr]

Emotion supports this so might be a good idea to see how it does it.

[matatablack]

Any updates on why #180 is not merged yet?
Thanks!

[elektronik2k5]

@kitten any reason to close this feature request?

[kitten]

@elektronik2k5 Multiple reasons. We're dropping non-CSSOM support first of all, so this would lead to all kinds of shenanigans necessary to get something like "X is line Y here" into the browser. 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, especially given that React devtools for instance has a much more multiplicative usefulness. We also failed to implement this for two roadmaps, so there's no point so far in putting it on the third, when we already have experiments we'd deem as more important on the V6 roadmap. So, given that this is more like "eye candy" than essential I closed it for now.

[craigcosmo]

"eye candy" ? this feature will make it possible to debug/understand the css from browser inspector. Because of missing this I had to to something like this

const Div = styled.div`
	--component: 'ModalBoxOk';
	text-align: center;
	padding: 30px;
`

[kitten]

@craigcosmo That's an entirely different use case however that's covered by the Babel plugin. If we're talking debugging names and naming then that's currently achieved by letting the Babel plugin add an extra config to each component, which includes a display name and a component ID.

[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 : #2318, #1985, styled-components/babel-plugin-styled-components#261, styled-components/babel-plugin-styled-components#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.

[jove4015]

We just had styled components foisted on our project. Now dev tools are pretty much useless for fixing styling problems, which sucks because there are a lot of them, because all of our CSS just got clobbered. I'm looking at the React dev tools and I don't see anything there about inspecting styled components at all - so the comment about those dev tools having "multiplicative usefulness" literally makes no sense, it's actually less useful because you can't even see style information at all.

I saw this PR in google hunting for source maps and was so excited that other people were thinking the same thing, only to see that this was closed out of hand with no respect for the people requesting it. I sincerely hope this is the last time I have to work with this.

[quantizor]

@jove4015 your hostility is not welcome, feel free to vent your frustration elsewhere