DEV Community

loading...

Build Time CSS-in-JS: Explained

Beto Muniz
Indie Creator @ listtta.com ~ seujob.tech ~ protocoloalterado.com.br β€’ OSS Crafter β€’ Writing about Web Development
・Updated on ・2 min read

🧡 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)