Source maps aren't pointing to the line number

Current behavior:

Source maps don’t seem to be pointing to the line number, but instead to the first line. E.g. clicking on color: green in DevTools takes me to the first line (const headerCss = styled.div) instead of the second:

const headerCss = styled.div`
  color: green;
`

To reproduce:

https://github.com/boycce/emotion-source-map-issue

Expected behavior:

Clicking on color: green in DevTools takes me to line 2, similar to what is showing in the GIF here https://emotion.sh/docs/source-maps

Environment information:

• react version: 16.13.1
• emotion version: 10.0.28

[Andarist]

I’ve educated myself a little bit about source maps and VLQs which are contained in them. This feature request seems plausible to do but I can’t be 100% sure without diving into this further.

I believe this can’t be done statically as it wouldn’t work for too many scenarios. Therefore it would have to be done at runtime and would inquire some extra costs - sourcemaps would have to be decoded, VLQs would have to be adjusted and the whole thing would have to be encoded again.

If only we would have to support things like [style1, style2] this wouldn’t be hard at all - I think that most likely this would only require some changes around those lines: https://github.com/emotion-js/emotion/blob/fa1c25dae5967e71bc28ee7828ecf6a9d84f09e3/packages/serialize/src/index.js#L356-L363

However patterns like this:

{
  backgroundColor: 'black',
  ':hover': otherStyle,
  color: 'hotpink'
}

makes the whole thing a little bit harder and I’m not yet sure how to handle this. The problem with this is that the outer source map is for both backgroundColor and color properties, and the inner one targets stuff “in-between”.

Oh, and please note that pointing each property to the very specific style declaration is definitely too hard to do and I don’t intend to work on it. What I was investigating is for styles coming from a particular “partial” style to point to that partial declaration (instead of always pointing to the outermost part).

[Andarist]

Unfortunately not, I’ve concluded that only a runtime-based solution could work here and that it would require too much to be feasible in our performance budget. In other words - you would have to trade performance for improved DX (which isn’t always a bad thing to do but I feel like, here, the cost is too big).

I might, of course, miss an easier solution for this - so I encourage exploration in the area but I, personally, have no idea how to make it correct and performant at the same time.