1.6 KiB
title, ring, quadrant, tags
| title | ring | quadrant | tags | ||
|---|---|---|---|---|---|
| CSS-in-JS | adopt | methods-and-patterns |
|
Since the arrival of react 18, many CSS-in-JS libraries like styled components, emotion and stitches face a big problem. They generate CSS only at runtime and therefore incompatible with streaming and React Server Components. The React developers have written an article about this, in which they explicitly advise against CSS-in-JS libraries that generate CSS at runtime.
This has led to great uncertainty among developers and communities of the affected libraries. Is refactoring possible to turn the runtime libraries into buildtime libraries? So far, none of the libraries have announced anything in this direction and one of the most popular new libraries, stitches, has been no longer maintained.
Fortunately, more and more CSS-in-JS solutions that generate CSS at buildtime are emerging since then. Libraries like Vanilla Extract, panda or Kuma UI keep the excellent developer experience, compensate the performance disadvantages and are compatible to React 18.
Unfortunately, these libraries are not yet very widespread and it is difficult to judge how they will develop. Therefore, at AOE we continue to use the established solutions as long as the new React features are not mandatory.
In addition, we are gaining experience with the new libraries because we see a lot of potential.