search

styled-components / xstyled

A utility-first CSS-in-JS framework built for React. 💅👩‍🎤⚡️
https://xstyled.dev
MIT License
2.27k stars 106 forks source link

CSS prop doesnt have access to the theme #285

Open ivanbanov opened 3 years ago

ivanbanov commented 3 years ago

Seems like the last css prop in the object does not work properly 🤷🏻‍♂️

xxx

A small repo with the reproduction can be found here https://github.com/ivanbanov/xstyled-single-css-prop-bug

ivanbanov commented 3 years ago

Actually I double checked and it seems to be happening with all the last cssprops in the style object

ivanbanov commented 3 years ago

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

agriffis commented 3 years ago

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?

agriffis commented 3 years ago

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

ivanbanov commented 3 years ago

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