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.
createStitches({
- insertionMethod: 'prepend',
})
#473 - Fixed specificity issue with inherited variants & variants leaking as DOM attributes.
#474 - Fixed specificity issue when components would share the same style.
#483 - Fixed responsive variants not respecting usage order.
#492 - Fixed default variants being ignored when responsively applying variants.
#523 - Fixed flash of unstyled content after upgrading from alpha to beta.
#532 - Fixed variant props being passed down to DOM elements.
#535 - Fixed performance degradation after migrating from alpha to beta.
#563 - Fixed resulting CSS from custom theme / globals not appending if parameters were the same.
#586 - Fixed inconsistent use of prefix.
#588 - Fixed backdropFilter not transforming locally-scoped tokens in css().
#622 - Fixed ability to set new default variants when composing components.
Performance fixed and improvements. Full benchmarks here.
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.
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:
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:
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:
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:
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.