xstyled icon indicating copy to clipboard operation
xstyled copied to clipboard

Make `x.div` debug easier

Open gregberge opened this issue 4 years ago • 0 comments

Context

As mentioned by @agriffis in https://github.com/gregberge/xstyled/issues/44#issuecomment-779344568, it would be great to have an hint in x.div to help debugging it and identify it.

Implementation

The best way to support it is using sourceMap, Emotion already supports it and styled-components has an issue.

However even if libraries are supporting it, we have to do something in xstyled to make the support complete.

We should be able to view the JS file and the <x.div component when we inspect it in the browser.

It looks like we will need to create a Babel plugin that adds <x.div __map="# sourceMappingURL=..." />. Then we will have to add this map at the end of injected styles.

gregberge avatar Feb 17 '21 07:02 gregberge