Обзор на новую CSS-in-JS либу от Facebook* – StyleX

Недавно компания Facebook* (aka Meta**) выпустила в опенсорс собственную CSS-in-JS библиотеку под названием StyleX. По заявлениям разработчиков, она отлично подходит для больших проектов и ключевым ее преимуществом является перфоманс.

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

Начать стоит с того, что StyleX – framework agnostic. Это означает, что библиотеку можно использовать с любым JS фреймворком, будь то React, Preact, Solid, Angular или Qwik. Однако те, что используют кастомные расширения файлов, типа Svelte и Vue, могут потребовать дополнительной настройки.

Предлагаю взглянуть на компонент Button, написанный на React и TypeScript:

import * as React from "react";
import * as stylex from "@stylexjs/stylex";
import type { StyleXStyles } from "@stylexjs/stylex/lib/StyleXTypes";

const MEDIA_MOBILE = "@media (max-width: 700px)" as const;

const ButtonStyles = stylex.create({
  base: {
    border: "none",
    background: "none",
    cursor: "pointer",
    // Использование медиа-запросов
    fontSize: {
      default: "24px",
      [MEDIA_MOBILE]: "16px",
    },
  },
  primary: {
    color: "white",
    backgroundColor: "black",
  },
  secondary: {
    color: "black",
    backgroundColor: "white",
  },
  block: {
    display: "flex",
    width: "100%",
  },
  dynamic: (opacity) => ({
    opacity,
  }),
});

const Button = ({
  color = "primary",
  block = false,
  styles,
}: {
  color: string;
  block: boolean;
  styles?: StyleXStyles<{
    backgroundColor?: string;
    color?: string;
  }>;
}) => {
  return (
    <button
      {...stylex.props(
        // Применяется по умолчанию
        ButtonStyles.base,
        // Применяется один из вариантов в зависимости от пропса color
        ButtonStyles[color],
        // Применяется условно в зависимости от пропса block
        block && ButtonStyles.block,
        // Применяется результат выполнения функции dynamic
        ButtonStyles.dynamic(state.opacity),
        // Стили, прокинутые пропсом
        styles
      )}
    />
  );
};

Библиотека имеет довольно простое API, мы разберем основные функции и типы. С остальными можно ознакомиться по ссылке.

С помощью stylex.create() создается объект стилей, свойства которого мы можем передать в stylex.props() условно, по ключу или динамически – с использованием функции. Так как props() возвращает объект, его нужно развернуть через spread-оператор.

А используя встроенный тип StyleXStyles мы можем ограничить css-свойства, передаваемые извне.

В StyleX также доступно создание переменных, на которых можно строить дизайн-систему:

import * as stylex from '@stylexjs/stylex';

const colors = stylex.defineVars({
  accent: 'blue',
  background: 'white',
});

Обращение к ним происходит так же, как и к обычным свойствам объекта:

import * as stylex from '@stylexjs/stylex';
import {colors} from './vars.stylex.js';

const styles = stylex.create({
  container: {
    color: colors.accent,
    backgroundColor: colors.background,
  },
});

Ключевые преимущества

Разработчики библиотеки декларируют ряд достоинств:

• Перфоманс – библиотека на этапе компиляции с помощью Babel-плагина превращает JS в оптимизированный по размеру единый CSS файл, таким образом мы избегаем классических CSS-in-JS проблем с рантаймом.

• Масштабируемость – гениальный Babel-плагин использует кэширование на уровне файлов и генерирует атомарные названия классов, за счет чего минимизируется размер бандла, а рост количества компонентов в приложении не сильно отражается на размере CSS файла.

• Предсказуемость – приоритизация селекторов в StyleX очень проста – всегда побеждает последний заданный стиль. Это значит, что можно забыть про каскадность.

• Комбинируемость – объекты стилей можно экспортировать и передавать в компоненты. При этом стили всегда будут вести себя предсказуемо.

• Типизация – каждое css-свойство и переменная полностью типизированы, а мы можем использовать TypeScript или Flow, чтобы определить стили, передаваемые в компонент.

• Все в одном месте – библиотека поощряет определение стилей в том же файле, что и компонента. При таком подходе StyleX удаляет неиспользуемые свойства из бандла и убирает дубликаты.

История создания

Идея создать новую систему работы с CSS зародилась несколько лет назад, когда разработчики Meta начали переписывать фронтенд фейсбука на React.

Ранее в проекте использовалось нечто похожее на CSS-модули и lazy loading, но у этого подхода были проблемы с масштабированием. При навигации по сайту модули подгружались в разном порядке, что порождало различные казусы с приоритизацией стилей.

В StyleX высший приоритет всегда имеет последнее примененное свойство, а значит можно с легкостью контролировать стили и переопределять их при необходимости.

Еще одной проблемой стало огромное количество ненужных стилей. По заявлению разработчиков, раньше средний пользователь facebook загружал десятки Мегабайт CSS, большая часть которого даже не использовалась.

В результате перехода на StyleX размер первоначального CSS бандла facebook.com составил 140 Кбайт. На первый взгляд может показаться, что это много, но нужно учитывать, что эти стили покрывают 100% приложения. Браузер загружает их всего один раз, а потом достает кэша.

Конкуренты

По-моему, сравнивать StyleX, в первую очередь, стоит с Emotion и Tailwind.

Тут у нас, как и в Emotion, co-located подход – стили находятся в одном файле с компонентом. Для многих это большой плюс с точки зрения DX и читабельности кода. Но в то же время, StyleX обгоняет конкурента за счет отсутствия рантайм-нагрузки.

В сравнении с Tailwind, библиотека не так проста и удобна – мы не можем использовать сокращения из коробки, их придется создавать самостоятельно.

Зато нам доступны встроенные типы, которые позволяют четко определить свойства, которые можно будет переопределять. И для этого нам не нужно будет создавать отдельный пропс под каждое свойство.

Заключение

Думаю, данное решение будет полезно на больших проектах, при построении сложных дизайн-систем, которыми пользуются множество команд.

Компания Facebook* три года тестировала и дорабатывала свой продукт, прежде чем отдать его в опенсорс. Мне кажется, это достаточное основание полагать, что библиотека проверена и может использоваться в реальных проектах.

Лично я рад появлению этой технологии, а что думаете вы?

*Социальная сеть запрещена в России

**Компания Meta Platforms Inc. признана в России экстремистской организацией и запрещена.