Styled-system: Performances

[gregberge]

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.

[jxnblk]

Thanks for putting this together! Performance is certainly something that could be improved in styled-system, and if that's one of the main deterrents for you and possibly others, I'd love some help in trying to make that better!

If you have time to start a PR (even if just a spike), I think that'd be a great way to see the difference.

The problem in your solution is that it iterates on styles instead of iterating on props.

Yeah, I think a very early prototype did loop over the props for space, but wanted to move the API to use more of a composed approach. If you have a way to make the implementation better with the current style & compose APIs, I'd love to see that. (I'll also poke around the smooth-ui repo later)

As a side note, I think we'll want to keep an eye on the API in @styled-system/css, which (currently) loops over full style objects as well (allowing styled-system props to work inside nested selectors like &:hover)

[gregberge]

Good to hear! I will try to work on a PR in this way! I don't have so much time but I will try.

[peduarte]

This is awesome! Happy to help out 👋

I'm using Styled System a lot, and performance was also one of my concerns, so I'd love to help make it better/faster/stronger 💪

[gregberge]

I will submit a PR, as soon as I have a moment!