Sourcemaps are incorrect

[sharifmacky]

Using stylex, the chrome devtool sourcemaps are out of sync and debugger statements show the incorrect line. See https://github.com/sharifmacky/source-map-bug

import {create, props} from "@stylexjs/stylex" <========  if this line is commented Chrome debugger works fine

const Container = (props) => {
    const {style, children, other, stuff, that, is, not, here} = props; <==== this line also has an effect
    debugger <=====================  Chrome debugger doesn't show this as the active line
    return <div>{children}</div>
}

export default function App() {
    return (   <=====================  Chrome debugger highlights this line
        <Container/>
    );
}

I raised the issue with Vite and they responded that the plugin changes the source but doesn't return a sourcemap. See https://github.com/vitejs/vite/issues/15972

[zardoy]

@HorusGoul hey, this breaks one of the core vite features: DX. This should be the first priority as currently, it makes debugging not possible. Source maps are really important and are used for a lot of things like Sentry reporting. Unfortunately, this plugin breaks everything.

As I can see here it is actually not hard to fix, but I wonder if the rewrite can break something else so maybe you have a better understanding of how it can be tested there to avoid regressions.

And it is really easy to reproduce:

import stylex from '@stylexjs/stylex'

const styles = stylex.create({
    root: {
        color: 'red',
    },
})
// comment
console.log('highlight me in devtools')
//
console.log()