xstyled
xstyled copied to clipboard
styled-components
CSS prop doesnt have access to the theme
Seems like the last css prop in the object does not work properly 🤷🏻♂️
A small repo with the reproduction can be found here https://github.com/ivanbanov/xstyled-single-css-prop-bug
Actually I double checked and it seems to be happening with all the last cssprops in the style object
Ok one more update, it seems to be connected to the importMap configuration as well https://github.com/gregberge/xstyled/issues/286
I removed it and things started partially work, the styles are generated but inject in the wrong order. It might be related to this other issue https://github.com/gregberge/xstyled/issues/287
I removed it and things started partially work, the styles are generated but inject in the wrong order
This was a misunderstanding of how styled wrappers work, as explained in #287 (now closed)
Actually I double checked and it seems to be happening with all the last cssprops in the style object
I agree, it only affects the last pair in the style object, and it's only broken with the macro.
Unfortunately I don't know anything about the macro (or very much about emotion since I don't use it). Perhaps you can debug more to figure out what needs to be fixed?
Ok, this seems to fix the problem:
cssPropOptimization: false
in the babel plugin configuration, from here: https://github.com/emotion-js/emotion/tree/main/packages/babel-plugin#csspropoptimization
I don't really know what that does, it just seemed suspicious :man_shrugging:
Maybe it deserves a change in the upstream, maybe in xstyled, maybe just in documentation. Pull request would be welcome if you're able to figure it out.
However that doesn't fix #286
Unfortunately, it didn't seem to work for me, I will research a bit more to understand what is going on, I post it here if I find a solution