AJR/TechradarDev
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

docs: streamline formatting and proofreading

Browse Source
This commit is contained in:
Stefan Rotsch
2023-10-16 12:22:46 +02:00
committed by Stefan Rotsch
parent 2c541dfbea
commit 94ac286c34
43 changed files with 177 additions and 257 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
radar/2023-09-01/css-in-js.md
View File

@@ -1,22 +1,16 @@
---
title: "CSS-in-JS"
ring: adopt
quadrant: methods-and-patterns
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.
Since the release of React 18, many CSS-in-JS libraries like styled-components, emotion, and stitches have encountered a significant challenge. They generate CSS only at runtime, making them incompatible with streaming and [React Server Components](../methods-and-patterns/react-server-components.html). React developers have addressed this issue in an [article](https://github.com/reactwg/react-18/discussions/110), where they explicitly advise against using 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).
This has created substantial uncertainty among developers and the communities of these affected libraries. The question arises: Is it possible to refactor these runtime libraries into buildtime libraries? To date, none of the libraries have announced any such plans, and, unfortunately, one of the most popular new libraries, stitches, is [no longer being 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.
Fortunately, there has been a growing number of CSS-in-JS solutions that generate CSS at buildtime. Libraries like [Vanilla Extract](https://vanilla-extract.style/), [panda](https://panda-css.com/), and [Kuma UI](https://www.kuma-ui.com/) maintain an excellent developer experience, overcome performance disadvantages, and are compatible with 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.
Unfortunately, these libraries are not yet widely adopted, and it's challenging to predict how they will develop in the future. Therefore, at AOE, we continue to use 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.
Moreover, we are gaining experience with these new libraries because we see significant potential in them.