Migrate from Glamor to Emotion

[j-f1]

Glamor was last updated in 2017, and Emotion is a popular and actively maintained alternative that remains largely compatible with Glamor’s APIs.

[albertogasparin]

Might be able to tackle this one sometime in the future (especially because glamor types are basically any 🤦 ), but first wanna make sure we know what we are getting into. The reason is that with React 18 and some of the work behind SSR/server components/concurrent features a lot of CSS-in-JS solutions out there are currently struggling.
[Important: I'm not listing any framework, eg Tailwind, as that is a different conversation]

⚠️ Emotion
Still on R16 and SSR not working properly (see issues), probably due to lack of resources. Thinkmill (main sponsor) is re-prioritising things, another main sponsors left and chakra-ui is also moving away from it. We might not face those challenges, but I think it is still worth mentioning.

⚠️ styled-components
A new version (v6) is in the works, but still beta and unclear whenever performance (currently 20% slower), full R18 support and stable API will come.

⚠️ compiled
Atlassian is investing in it, but there is no real community and official R18 support will come later this year. It is also optimised for large apps, so might not offer the be the best output.

👀 vanilla-extract
Slightly different and with no specific React binding, it has a very nice, type safe theming API (compared to the handmade once we currently have) but it is less known and might cause friction to casual contributors.

👀 linaria
Currently having momentum, but it is very strict on the feature set (eg no dynamic styles).

Ⓜ️ CSS modules
"Old, boring" tech that however still delivers best value in terms of performance and flexibility. Needs to be strongly linted to stop devs from writing bad CSS, and TS support is editor only but it is here to stay.

🔴 stitches
Seems stopped and in maintenance mode, plus current version does not support SSR properly

There are more (new ones being build every other week) but I think I covered the main ones. Outcome: seems like a quite uncertain period. Probably using anything with css is fine as we can easily migrate between libraries, but I'd recommend to stick to widely supported features so migration between libs (if necessary) is easier.

Also, any particular reason why we would prefer emotion to styled-components? SC is more popular and has better community support.

[j-f1]

The reason is that with React 18 and some of the work behind SSR/server components/concurrent features a lot of CSS-in-JS solutions out there are currently struggling.

Fortunately Actual is entirely a client rendered app (I don’t see server rendering as something that would make things much better given how the app is set up). Concurrent rendering could be nice but I also don’t think we would have a problem staying away from that if we wanted to.

Also, any particular reason why we would prefer emotion to styled-components? SC is more popular and has better community support.

When I looked at styled-components, it seemed like we would need to change a ton of existing code, while Emotion is inspired by Glamor and therefore has a very similar API. (For example, I don’t think SC supports sub selectors using the object syntax?).

[maxichrome]

Just passing by on my way through an entirely unrelated issue on an unrelated project, to shed some light on this specific bit:

(For example, I don’t think SC supports sub selectors using the object syntax?)

I edited the Style Objects example on styled-components' example to contain a child and it seems to work just fine:

Here, the child component has been modified by its parent to show yellow text instead of the child's self-defined red.

[youngcw]

@joel-jeremy Can this be closed now?

[youngcw]

completed by #3471