ИИтог

GitHub перешёл с CSS-in-JS на CSS Modules и ускорил рендеринг сайта

инфраструктураРедакция ИИтогHacker News🔥42Рейтинг ИИтог42Влияние45Новизна50Релевантность70Неожиданность20Участники65Достоверность85

Команда дизайн-системы Primer в GitHub рассказала, как компания полностью отказалась от CSS-in-JS (библиотеки styled-components) в пользу CSS Modules, формата, где стили пишутся в отдельном CSS-файле рядом с компонентом, компилируются без какого-либо рантайма и попадают в HTML страницы уже готовыми стилями. Причиной стал рост числа компонентов на страницах начиная с 2023 года: старое решение на CSS-in-JS создавало заметные накладные расходы и на клиенте, и на сервере.

Первый этап, перевод самих компонентов Primer на CSS Modules, команда завершила в декабре 2024 года. Миграцию проводили постепенно, компонент за компонентом, с фича-флагами, чтобы не сломать GitHub во время перехода. Результат: страницы стали рендериться на сервере на 55% быстрее, а время инициализации компонентов на странице сократилось на 25%.

Второй, более трудоёмкий этап, избавление от prop-а sx, через который команды по всему GitHub передавали компонентам Primer произвольные объекты кастомизации стиля. К моменту старта этой работы в апреле 2025 года таких sx-обращений в коде накопилось пиково около 7760. Чтобы не ломать существующий код, разработчики сделали промежуточную библиотеку-обёртку @primer/styled-react, через которую старые вызовы продолжали работать, пока новые компоненты уже подключались напрямую из @primer/react. Внутренний разработчик Иэн Сандерс написал плагин для VS Code, помогавший переносить prop по одному, а параллельно был создан кодмод для автоматической миграции целых файлов. Ротация из 8 инженеров за 6 месяцев перенесла 6419 таких prop-ов, при этом на части страниц замерили прирост скорости серверного рендеринга от 1% до 22%. Параллельно с этой работой было объявлено, что сама библиотека styled-components переходит в режим поддержки без активной разработки, в команде восприняли это как подтверждение правильности выбранного пути. К апрелю 2026 года оставалось перенести всего 895 prop-ов, эту финальную часть команда из двух инженеров, активно использовавшая ИИ-агентов GitHub Copilot для написания кода, закрыла всего за три недели.

Третий этап, разделение логики темизации. GitHub поддерживает семь тем оформления, каждая с вариантом высокой контрастности, и вся эта логика была завязана на утилиты styled-components (сами переменные тем уже были описаны в CSS через пакет @primer/css). На то, чтобы отвязать темизацию от styled-components и подготовиться к удалению зависимости, ушло два месяца постепенного выката с фича-флагами. В итоге по состоянию на июнь 2026 года GitHub работает на 100% CSS Modules: styled-components, styled-system и prop sx полностью удалены из кода продукта.

Ключевые факты

  • GitHub завершил многолетнюю миграцию github.com с CSS-in-JS (styled-components) на CSS Modules
  • К декабрю 2024 года все компоненты Primer перевели на CSS Modules: серверный рендеринг ускорился на 55%, инициализация компонентов, на 25%
  • С апреля 2025 по апрель 2026 года шла миграция prop-а sx: с пикового значения около 7760 случаев ротация из 8 инженеров за 6 месяцев перенесла 6419, а оставшиеся 895 команда из 2 инженеров с помощью ИИ-агентов Copilot закрыла за три недели
  • Финальный этап, разделение темизации для семи поддерживаемых тем GitHub, ранее завязанной на styled-components, занял два месяца
  • По состоянию на июнь 2026 года GitHub работает на 100% CSS Modules, styled-components и styled-system удалены из кода полностью

Почему это важно

Это подробный отчёт о реальной крупномасштабной миграции архитектуры фронтенда, от CSS-in-JS к CSS Modules, с конкретными цифрами прироста производительности (55% и 25%), а не абстрактное сравнение подходов. Кейс показывает, что отказ от рантайм-генерации стилей на клиенте и сервере может дать измеримый выигрыш в скорости на продукте такого масштаба, как GitHub.

Кому это важно

Материал полезен фронтенд-инженерам и командам, которые поддерживают дизайн-системы и думают о переходе с CSS-in-JS (styled-components, emotion и подобных) на более статичные подходы к стилизации, а также разработчикам, которые проектируют масштабные многолетние миграции кода без остановки продукта.

Как это применить

Ключевая идея, постепенная миграция компонент за компонентом под фича-флагами с постоянной поставкой изменений в продакшен, чтобы проблемы обнаруживались рано. Для сохранения обратной совместимости во время переноса создавалась промежуточная библиотека-обёртка (@primer/styled-react), а для автоматизации переноса самого массового и рутинного prop-а, специальный плагин для редактора кода и кодмод для целых файлов; на финальном рывке команда дополнительно ускорила работу с помощью ИИ-агентов для написания кода.

Можно ли доверять

Источник, официальный инженерный блог GitHub, статья написана непосредственными участниками проекта (Джош Блэк и Мари Лукка), с детальными датами и цифрами по каждому этапу миграции. Это внутренний отчёт компании о собственной работе, независимой проверки цифр нет.

Риски и подводные камни

Миграция заняла несколько лет (с 2023 по июнь 2026 года) и требовала переноса тысяч использований prop-а sx по всей кодовой базе без единого сбоя продукта, авторы прямо упоминают, что на пути были и «заминки». Разделение логики темизации для семи тем оказалось отдельной сложной задачей, а не просто побочным эффектом основной миграции, и заняло ещё два месяца уже после завершения переноса компонентов и prop-ов.