Benchmarks

Performance tests and comparisons.

The tests

We've put together a test suite to test a range of performance factors across multiple CSS-in-JS libraries and CSS Components.

All tests use object notation. All tests were run in a production environment, on a machine with the following spec:

• Macbook Pro 2022
• Apple M1 Max
• 32GB LPDDR5

Just like CSS Components, our benchmark tests are also open-source.

Initial injection

The timing that it takes apply the initial styles. This happens when a component is rendered.

Updating variants

Since we are just switching classNames, changing variants is now faster than ever.

Note: Since styled-components and Emotion don't offer a first-class variant API, this was done via prop interpolation.

Updating style or css prop

The style or css is the best way to handle dynamic styles. This needs to happen fast - and it does!

Note: Since css-components don't offer a first-class css prop, we are comparing against the standard style prop.

Mounting deep tree

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.

Mount wide tree

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.

Summary

Our benchmarks compare against Stitches, 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.