Currently the CSS-in-JS ecosystem is split into two camps:
Runtime CSS-in-JS (Emotion, styled-components) keeps JS on the client for full dynamism. At hydration it reuses the SSR-injected styles, so the CSSOM isn't duplicated but JS code still runs.
Zero-runtime (Linaria, Vanilla Extract, Panda CSS) removes runtime entirely: styles become static .css files at build time. The price is equally radical — dynamic styles are limited to CSS-native abilities such as Custom Properties, and you need a build plugin.
Both ask you to accept a trade-off: full dynamism or perfomative runtime. But I think it is an effect of the deeper problem.
I suppose we need to look at the deeper thing: every CSS-in-JS approach answers the same question: how do you map a piece of logic to a CSS selector? Runtime and zero-runtime give two different answers, and both tie the style to its identity. Understanding exactly what they tie together is the key to the third path.
