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:

👉 Linaria

The most popular, powerful and active in the list.

🔗 github.com/callstack/linaria

👉 Compiled

A familiar and performant compile time CSS-in-JS library for React created by Atlassian.

🔗 github.com/atlassian-labs/compiled

👉 astroturf

A library that lets you write CSS in your JavaScript files without adding any runtime layer, and with your existing CSS processing pipeline.

🔗 github.com/4Catalyzer/astroturf

👉 style9

CSS-in-JS compiler based on the ideas of Facebook's stylex

🔗 github.com/johanholmerin/style9

🎬 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.