CSS-in-JS benchmarks

The styled API's library slice used to scale straight-line with nesting; the perf runtime now collapses the chain at construction time and holds it flat. On the composition ladder (the Examples compose-1, compose-3 and compose-6 shown below) next-yak-9.7 keeps a ~0.138 ms SSR library slice at every depth, where the 9.6.0 baseline climbs 0.460 to 1.38 to 3.65 ms. In throughput that is 0.671 ms/1k at six levels against the baseline's 5.26, a 7.8× gap, and the interaction follows: the 9.6.0 baseline re-renders a six-level subtree in 24.2 ms against the perf runtime's 7.40 ms. On flat JSX (the Example realistic-button shown below) the perf runtime barely moves the needle, because there is no chain to collapse.

Disabling static folding (foldStatic:false) isolates what each mechanism buys. On the flat button (the Example realistic-button shown below) folding rewrites <DenseButton> to a plain <button className> and deletes the styling component, so turning it off costs about 2× SSR (0.962 vs 0.479 ms/1k) as the Yak wrapper returns with a 0.786 ms library slice. On the Example compose-6 shown below folding off costs only ~1.3×, because there the perf runtime, not the fold, does the work. Folding applies when the host is a known intrinsic tag or a class-toggle variant; it stops at styled(Component) seams, which is why the Example tabs shown below keeps a residual wrapper on its styled(Tabs) composition.

The css-prop fold is next-yak's fastest shipped path and ties vanilla

Where the styled fold hands each composition level its own class down a chain, the css-prop fold concatenates the whole chain into a single className on the plain element. On the Examples tabs, compose-3 and compose-6 shown below its SSR CPU matches or beats hand-written vanilla (0.507 vs 0.508 ms/1k at three levels), and it ships the smallest payload in the run, 2.39 kB gzipped on tabs, one class regardless of depth. For hot composed trees it is the path to recommend today; the styled API reaches the same shape only through the perf runtime, which leaves one residual wrapper on composed seams.

The libraries that name a class from the styles at render time pay for it every render. On the Example realistic-button shown below, emotion's murmur2 hash is 4.27 ms of its 7.53 ms render, the single most expensive styling function in the run, and generateAndInjectStyles is most of styled-components' slice. The cost repeats during hydration, when these libraries inject their sheet and force reflow: on the naive dynamic case (the Example dyn-translate shown below) goober injects 1000 distinct classes and its client mount blows out to 1270 ms. Every extracted lane (next-yak, StyleX, vanilla) ships zero styling runtime and hydrates as pure JS. That cost lands at render; the codegen tools pay theirs at build instead, where StyleX and Panda cold-build in 343-548 ms against 69-121 ms for everything else, with next-yak's transform adding only ~40 ms over the runtime libraries.

Dynamic values are a feature in next-yak, a discipline everywhere else

next-yak compiles a dynamic value into a static class plus a CSS custom property automatically. On the Example dyn-translate shown below, where each element carries a distinct value and nobody has hand-optimized, the hash libraries regenerate a class per element and their cost explodes (goober renders 5.83 ms/1k, 9.7× the css-prop fold). The fair comparison, the Example dyn-fair shown below, gives each library its hand-written best practice, a static class with the value on an inline style, and the field converges toward vanilla. That parity has a price the chart cannot show: the developer performs the split by hand, per component, on every dynamic value, forever, to reach what next-yak's css-var compile ships once as a feature. The naive pattern is what you get when nobody pays that discipline.

The Example btn-variant shown below isolates how each library expresses variants. Panda's precompiled cva recipe joins the fast cluster at 0.853 ms/1k, while its inline css() fn re-serializes every variant per element (13.3 ms of component self-time) and is the slowest lane in the case at 13.5 ms/1k, a 16× SSR-throughput swing inside one library. next-yak expresses variants as $prop class toggles that inline to a string concat and fold away, so it lands at the static-class floor with StyleX and vanilla.