Hello, first I would like to thank you for this project. It was a source of inspiration for me, the goal of this issue is to improve this library and make it the default and best solution for styling components.

Problem

I would like to use styled-system in Smooth UI instead of using my own system. One of the problem is performance, it was one of my concern when I decided to create my own system, and it is still my concern.

As you can see in this benchmark, Smooth UI system is twice faster than styled-system:

@smooth-ui/system x 466,611 ops/sec ±0.65% (89 runs sampled)
@material-ui/system x 239,762 ops/sec ±0.44% (84 runs sampled)
styled-system x 213,444 ops/sec ±0.59% (88 runs sampled)
Fastest is @smooth-ui/system

https://repl.it/@neoziro/system-benchmarks
https://github.com/smooth-code/smooth-ui/blob/master/benchmarks/system.js

Solution

The problem in your solution is that it iterates on styles instead of iterating on props. There is always more styles than props and if we want to support more CSS properties, it will grow up.

Another problem is the lack of style indexing, by indexing styles on properties, you are always flat and very effective.

The best is to give a look to the compose function in smooth-ui/system.