Your new post is loading...
Naman Goel, software engineer at Facebook, recently presented Stylex at React Finland 2021. Stylex is Facebook’s custom CSS-in-JS solution used for the new facebook.com website. StyleX alleviates key pain points of CSS-in-JS for large React applications (unused styles, large CSS files, CSS-in-JS library size). Goel anticipates that Stylex will be open-sourced by the end of 2021.
In his Rethink CSS - Introducing Stylex talk at React Finland 2021, Goel explained that Stylex has a three-pronged goal: be fast, familiar, and flexible.
The first goal is achieved by compiling away CSS-related instructions found in source files into static CSS files. Developers — and users — thus are not paying the cost of the CSS-in-JS library, bringing Stylex in line with other static CSS-in-JS libraries such as Linaria. For comparison purposes, the popular CSS-in-JS library styled-components contains 13KB of (tree-shakable) JavaScript, part of which will have to be subtracted from the application budget. In order to improve the user experience, an increasing number of web applications follow the best practice consisting of limiting the quantity of JavaScript that has to be downloaded on pages’ first load.
