Build Time CSS-in-JS: Explained
🧵 Have you heard about Build Time CSS-in-JS libraries?
🔥 Build Time CSS-in-JS libraries are moving a step forward about use CSS-in-JS in a performance-first manner remaining the ergonomic CSS-in-JS design and processing the CSS in build time instead of leaving it to JS runtime. It aims to remove the current CSS-in-JS negative cost.
⚡️ Still, Build Time CSS-in-JS libraries reduce significantly or remove completely the downsides while parsing, generating, and rendering CSS through JS, which impacts directly and positively memory consumption and metrics like Largest Contentful Paint, which also impacts the page load UX and performance.
🙅♂️ There are a few examples and proof of concepts exploring the Build Time CSS-in-JS approach. The most popular proposals that I know are:
The most popular, powerful, and active on the list.
A familiar and performant compile time CSS-in-JS library for React created by Atlassian.
CSS-in-JS compiler based on the ideas of Facebook's stylex
🎬 And that’s it from me - I’m fascinated by this and still learning. So let me know if you know more libraries like these and/or more about this topic.