Css style

Facebook CSS-in-JS Stylex solution showcased at React Finland 2021

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 mitigates major CSS-in-JS issues for large React applications (unused styles, large CSS files, CSS-in-JS library size). Goel predicts that Stylex will be open source by the end of 2021.

In his Rethinking CSS – Introducing Stylex At the React Finland 2021 conference, Goel explained that Stylex has a three-pronged goal: to be fast, familiar and flexible.

The first goal is achieved by compiling the CSS instructions found in the source files into static CSS files. Developers – and users – therefore don’t pay the cost of the CSS-in-JS library, aligning Stylex with other static CSS-in-JS libraries such as Linaria. For comparison, the popular CSS-in-JS library styled-components contains 13 KB of JavaScript (tree-shakable), part of which should be subtracted from the application’s budget. In order to improve the user experience, more and more web applications are following the good practice of limiting the amount of JavaScript to download when pages load for the first time.

As an example, Goel provides the following code using the Stylex library:

const styles = stylex.create({
  base: {
    position: 'absolute',
    top: 0,
    start: 0,
    end: 0,
    bottom: 0
  },
  active: {
    position: 'static',
  }
});

<div className={stylex(styles.base, isActive && styles.active}/>

This code leads to the following compiled CSS file:

.position-abs {
  position: absolute;
}
.top-0 {top: 0; }
.start-0 {left: 0; }
.end-0 {right: 0; }
.bottom-0 {bottom: 0; }
.position-st {
  position: 'static';
}

This CSS file is associated with the corresponding HTML code:

<div
  className="
    position-abs
    top-0
    start-0
    end-0
    bottom-0
  "
/>

To optimize the compiled CSS file, Stylex strives to remove unused styles and reduce the size of the CSS file by identifying atomic styles that can be reused instead of repeated. Style reuse goes from a CSS file size that increases linearly with the number of components to a size where the CSS file size plateaued as rule reuse multiplies:

Stylex also resolves the styling in a way that supports loading CSS bundles in random order without affecting the user interface. Goel illustrates how the user interface is affected by the order of CSS rules as follows:

How the order of CSS rules can affect the user interface

The previous illustration shows how CSS specificity rules can cause different styles to be applied depending on the order of the rules. To improve the user experience, large applications can be divided into batches that are loaded on demand and as needed. The order of the CSS rules will therefore depend on the particular order in which the bundles are loaded, making it impossible to guarantee a specific order in advance.

Goel further pointed out that Stylex enables style composition via React props:

Stylex style composition through accessories

Developers are encouraged to refer to the entire briefing at React Finland 2021. The briefing contained numerous code samples, illustrations that detail the technical and design choices made by Stylex. React Finland 2021 took place online between August 30 and September 3.