DEV Community

Beto Muniz
Beto Muniz

Posted on • Updated on

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 on the list.

๐Ÿ”— https://github.com/callstack/linaria

๐Ÿ‘‰ Compiled

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

๐Ÿ”— https://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.

๐Ÿ”— https://github.com/4Catalyzer/astroturf

๐Ÿ‘‰ style9

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

๐Ÿ”— https://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.

๐Ÿ’Œ If you want to receive content like this about Web Development, please, subscribe to my Newsletter

Discussion (0)