diff --git a/radar/2023-09-01/css-in-js.md b/radar/2023-09-01/css-in-js.md new file mode 100644 index 0000000..46d8c1c --- /dev/null +++ b/radar/2023-09-01/css-in-js.md @@ -0,0 +1,22 @@ +--- +title: "CSS-in-JS" +ring: adopt +quadrant: methods-and-patterns +tags: [coding, frontend] +--- + +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](https://github.com/reactwg/react-18/discussions/110) 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](https://github.com/stitchesjs/stitches/discussions/1149#discussioncomment-6223090). + +Fortunately, more and more CSS-in-JS solutions that generate CSS at buildtime are emerging since then. +Libraries like [Vanilla Extract](https://vanilla-extract.style/), [panda](https://panda-css.com/) or [Kuma UI](https://www.kuma-ui.com/) 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.