Motivation

Two years ago, I discovered styled-components, it was a game changer for all my projects. At Smooth Code, we adopted it and it has significantly reduced development time. A year later, I discovered styled-system; it was a great discovery! Being able to style your components directly from props in a consistent way is so powerful.

styled-system is great, so great that I wanted to add it in the core of Smooth UI. Unfortunately it wasn't performant enough to be added in the core of the library. That's why I decided to rewrite it. I optimized it, added a bunch of features, and fixed things.

For the record, I contributed to styled-system. I refactored the codebase, introduced tree shaking and several features... Unfortunately, Brent Jackson's vision was not as close to mine as expected. That's why I decided to create xstyled. It follows the styled-system specification, but it evolves faster and gives me more freedom!

After one year using system based props in our code, we've pushed it to the next step: being able to use the system right in CSS props. It provides significant time-savings!