Stitches homepage
Blog

Stitches 0.2.0

Changelog for Stitches 0.2.0.

Pedro Duarte

3 min readChangelog

We're happy to announce that Stitches v0.2.0 has been released. This version comes with lots of performance improvements and bug fixes.

npm install @stitches/react@latest

This release includes one breaking change.

The insertionMethod config option has been removed.

createCss({
- insertionMethod: 'prepend', })

We've switched the style injection strategy to rely on CSSOM. This alone yielded huge performance gains. Additionally, we added extra layers of caching and memoizations.

One way to demonstrate our new injection method is by injecting CSS into a page one style at a time and checking that the later styles are injected as fast or faster than the first injection.

Here's a comparison of the 1000th style injection between Stitches v0.1.9 and Sitches v0.2.0.

Stitches 0.2.0Stitches 0.1.9
0.2ms
34.78ms

We’ve reduced the time it takes to create and mount components. Every component you create is now faster.

Here's a comparison between Stitches v0.1.9, Stitches v0.2.0:

Stitches 0.2.0Stitches 0.1.9
1.72ms
2.79ms

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!

Here's a comparison between Stitches v0.1.9 and Stitches v0.2.0:

Stitches 0.2.0Stitches 0.1.9
1.06ms
1.46ms

In this test, we render the Sierpinski Triangle. Each node is a different color, to ensure styles are dynamic.

Here's a comparison between Stitches v0.1.9 and Stitches v0.2.0:

Stitches 0.2.0Stitches 0.1.9
29.54ms
216.65ms

Finally, this last test creates a full landing page, including responsive styles, tokens, variants. The test was based on the Stitches homepage.

Here's a comparison between Stitches v0.1.9 and Stitches v0.2.0:

Stitches 0.2.0Stitches 0.1.9
15.51ms
55.42ms

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

We're excited to see the community adopt Stitches, raise issues, and provide feedback. Whether it's a feature request, bug report, or a project to showcase, please get involved!

We're grateful for everyone who contributed and provided feedback along the way.

Special thanks to Jonathan Neal for the commitment and dedication.

Special thanks to Stephen Haney for building our benchmark tool.

Special thanks to Pedro Duarte for writing the test cases, roadmap and documentation.

Share this post on Twitter.