c8r / x0

Document & develop React components without breaking a sweat

Home Page:https://compositor.io/x0/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Add Emotion as a supported css-in-js library

hamlim opened this issue Β· comments

πŸ‘‹ Hey All!

First off wanted to say thanks for making this cool tool, I have only used it a bit but definitely want to try using it for more of my small side projects.

The one thing holding me back from using it more is lack of out of the box Emotion support. As far as I can tell this should be fairly easy to adopt with a change to getCSS.js to add a function to handle requiring emotion-server, and calling extractCritical.

I could take a look at trying to make a PR for this if it is something that everyone thinks would be beneficial to add support for. The one part that I don't know how to tackle yet is the client side hydration, so if someone has any ideas on where that would live that would be greatly appreciated.

πŸ‘‹ We're definitely on board to add Emotion support. We don't currently have a cohesive/automatic rehydration story for css yet, but it definitely is something that we should spec out. I know that @jxnblk has some thoughts on this.

I wonder if in the meantime, as an MVP, if we could run with renderStyleToString since rehydration occurs automatically?

From some brief investigation it seems that renderStyleToString also returns the merged html with the styles.

I might not have too much time to look into this so if anyone else has a better idea or wants to tackle it before I could then feel free!

This is now automatically supported in v5.