Facebook выпустил новую CSS-in-JS библиотеку — StyleX

Верней оформил 5 декабря 2023 года для всех то, чем его разработчики пользуются уже давно. Позиционируется данный помощник для js-подобных фреймворков типа React, Preact, Solid, lit-html и Angular, однако оперирующие html шаблонами Vue и Svelte тоже могут задействовать StyleX, но после предварительной специальной её кастомизации.

Код в React в итоге выглядит примерно так:

import * as stylex from '@stylexjs/stylex';  const colorStyles = stylex.create({   red: {     backgroundColor: 'lightred',     borderColor: 'darkred',   },   green: {     backgroundColor: 'lightgreen',     borderColor: 'darkgreen',   }, });

import * as React from 'react'; import * as stylex from '@stylexjs/stylex';  const styles = stylex.create({ ... });  function ReactDiv({ color, isActive, style }) {   return <div {...stylex.props(     styles.main,     // apply styles conditionally     isActive && styles.active,     // choose a style variant based on a prop     colorStyles[color],     // styles passed as props     style,   )} />; }

StyleX компилируется в атомарные CSS, для чего используется Babel плагин.

Основная утверждаемая выгода от использования StyleX — переиспользование, типизация, будет всё круто на больших проектах. Ну и получение наконец полного «Single File Component» файла с js, css и html в одном флаконе.

Предполагается, что StyleX теперь будет продвигаться как best practice для React проектов.

Для сравнения DX вот примерно один и тот же код, написанный на React+StyleX и на Vue+CSS

import * as React from "react"; import * as stylex from "@stylexjs/stylex";  const colorStyles = stylex.create({   red: {     backgroundColor: "lightred",     borderColor: "darkred",   },   green: {     backgroundColor: "lightgreen",     borderColor: "darkgreen",   }, });  const styles = stylex.create({   main: {     padding: "1rem",     border: "1px solid grey",   }, });  function ReactDiv({ color, isActive, style }) {   return (     <div       {...stylex.props(         styles.main,         isActive && styles.active,         colorStyles[color],         style,       )}     />   ); } 

<script setup> import { ref } from "vue"; const color = ref("red"); const props = defineProps(["style", "isActive"]); </script>  <template>   <div     class="main"     :class="[color, { isActive: props.isActive }, props.style]"   /> </template>  <style scoped> .red {   background-color: "lightred";   border-color: "darkred"; } .green {   background-color: "lightgreen";   border-color: "darkgreen"; } .main {   padding: 1rem;   border: 1px solid grey; } </style> 

Ну и интересны причины возникновения StyleX:

Предыдущий сайт Facebook использовал нечто похожее на CSS-модули и страдал от различных проблем, которые и вдохновили на создание CSS-in-JS. Средний посетитель facebook.com загружал десятки мегабайт CSS. Большая часть из них не использовалась. Чтобы оптимизировать первоначальную загрузку, мы лениво загружали наш CSS, что, в свою очередь, приводило к медленному обновлению (или «Interaction to Next Paint»). Использование сложных селекторов приводило к конфликтам или «войнам за специфичность». Инженеры часто прибегали к использованию !important или более сложных селекторов для решения своих проблем, что делало всю систему постепенно хуже.

Несколько лет назад, когда мы перестраивали facebook.com с нуля, используя React, мы поняли, что нам нужно что-то лучшее, и создали StyleX.

StyleX был разработан для масштабирования, и его дизайн доказал свою эффективность за годы использования. Мы добавили в StyleX новые функции без снижения производительности и масштабируемости, сделав StyleX еще более приятным в использовании.

Использование StyleX стало для нас в Meta значительным улучшением как в плане масштабируемости, так и в плане выразительности. На сайте facebook.com мы смогли сократить количество CSS-пакетов с десятков мегабайт лениво загружаемого CSS до одного пакета размером в пару сотен килобайт.

Мы создали StyleX не только для того, чтобы удовлетворить потребности React-разработчиков в стилях в Интернете, но и для унификации стилей для React в веб-версии и нативной версии.