Performance tests and comparisons.
We've put together a test suite to test a range of perfomance factors across multiple CSS-in-JS libraries.
All tests use object notation. All tests were run in a production environment, on a machine with the following spec:
Macbook Pro 2019
2.3Ghz 8-core i9
32GB 2667 MHz DDR4
Just like Stitches, our benchmark tests are also open-source.
The timing that it takes to inject the initial styles. This happens when a component is rendered.
Changing the variants is now faster than ever. Since variants can be conditionally applied, we ensure this happens as fast as possible.
Note: Since styled-components and Emotion don't offer a first-class variant API, this was done via prop interpolation.
The css prop is useful for setting styles at the consumption layer. These styles need to be converted to CSS rules and injected to the DOM. This needs to happen fast - and it does!
Note: Since styled-components and Emotion don't offer a first-class css prop API without the need of Babel, this was done via prop interpolation.
In this test, we render the Sierpinski Triangle. Each node is a different color, to ensure styles are dynamic.
Note: This test was taken from the styled-components benchmarks. Emotion also tests against this.
In this test, we mount a tree with many nested nodes.
Note: This test was taken from the styled-components benchmarks. Emotion also tests against this.
In this test, we mount a tree with many sibling nodes.
Note: This test was taken from the styled-components benchmarks. Emotion also tests against this.
Our benchmarks compare against styled-components and Emotion because they're the most popular CSS-in-JS libraries, and they've pushed us to improve our performance. Our goal with these benchmarks is to provide transparent performance comparisons for the community.
If you'd like us to include your CSS-in-JS library, or think the tests could be improved, please open an issue.