Theme-ui: Where does theme-ui fit in with Rebass + styled-system

[coreybruyere]

Sorry if this has been asked but I couldn't find an answer that made sense to me... But is there any documentation or a blog post explaining the differences and primary usage for theme-ui, styled-system, and rebass? I've grouped them all so closely together that I'm having a hard time understanding the differences between each project, specifically theme-ui and styled-system. The README of theme-ui says it's an "Evolution of Styled System". Is that evolution the emergence of the sx prop? Is the emergence of a theme spec mean that we're doing away with styled utility functions (styled-system) in favor of inline, camel-cased properties via sx prop? Very interested in all the work going on in this sphere in the world of front-end. Just trying to grasp it all. Thanks for all the work over here!

[jxnblk]

The most that I've written about this is here: https://theme-ui.com/guides/motivation

Key takeaways are:

• Styled System is framework agnostic (works with svelte, vue, node, etc)
• Styled System requires you to build everything on your own + the IKEA effect
• Theme UI is "batteries-included"
• Theme UI has stronger conventions for the theme shape and props API, which will allow other tools to be built on top of it - i.e. Interoperability
• Theme UI has conventions for styling content-based sites with MDX, which can be painful to do using Styled System alone
• Rebass is the oldest library and where Styled System originated

Generally I'd say if you have a greenfield project, use Theme UI. If you have already built something with Styled System and Rebass, those are fairly stable and probably won't change much in the future.

[coreybruyere]

Thanks for the explanation. The move towards a stronger and more consistent API makes a lot more sense. I'll have to spend some time to move over my small site from styled-components + rebass + styled-system over to theme-ui so I can start messing around. Reason I initially asked this is I noticed Rebass wasn't getting as much attention as it used to when I asked a Q here: https://github.com/rebassjs/rebass/issues/897. But seeing that theme-ui is essentially an evolved version of Rebass, again, it all makes sense.

With that said is there a migration guide of any sort? I have a fairly small and simple site and theme. Utilizing @rebass Box, Flex, Button, and a few other components. As simple as updating my theme to match theme spec, moving all SC styles into sx prop, removing SC dependency, and maybe using emotion styled and css if needed?

[jxnblk]

Awesome! I don't think a migration guide exists at the moment, but I think what you've mentioned should cover most bases. If you feel like it, feel free to add a Migrating from Rebass guide to the docs