Команда GitHub Primer рассказала, как перевела интерфейс платформы с CSS-in-JS на CSS Modules, сократила использование prop sx и в итоге полностью отказалась от библиотеки styled-components без нарушений в работе сервиса.
Primer Design System лежит в основе большинства интерфейсных компонентов GitHub — от кнопок до баннеров и навигации. Эти элементы должны быть доступными, гибкими и быстрыми в самых разных сценариях. К 2023 году число компонентов на отдельных страницах резко выросло, что привело к заметным проблемам с производительностью существующего CSS-in-JS‑решения.
Команде стало ясно, что нужно менять подход к стилям, убирая избыточные вычисления на клиенте и сервере. При этом новая технология не должна ломать интерфейс GitHub в процессе миграции. В итоге Primer перешёл на CSS Modules, что позволило использовать нативный CSS, сохранить частичную «сопряжённость» стилей с кодом компонентов и отказаться от рантайма CSS-in-JS.
CSS Modules дали возможность хранить стили в отдельных CSS‑файлах рядом с исходниками компонентов, использовать локальные имена классов по умолчанию и снизить риск конфликтов глобальных селекторов. Стили собирались в обычные CSS‑стили, которые загружались вместе с HTML, без дополнительной работы на клиенте или сервере.
Решение сильно отличалось от прежнего подхода на CSS-in-JS. Потребовалось обновить каждый компонент Primer и все компоненты GitHub, которые полагались на этот способ стилизации. При этом старый метод должен был продолжать работать там, где его ещё используют. Дизайн‑система оказалась удобным каналом для внедрения таких изменений во всём продукте.
Primer выбрал поэтапную стратегию миграции компонентов на CSS Modules с широким использованием feature flag‑ов. Это позволило постепенно включать новые реализации, отслеживать ошибки на ранних стадиях и параллельно измерять производительность в реальных условиях.
К декабрю 2024 года все компоненты Primer были переведены на CSS Modules. Команда зафиксировала улучшения производительности на разных участках интерфейса и решила исследовать, можно ли добиться аналогичного эффекта в других частях GitHub, а также полностью отказаться от CSS-in-JS в кодовой базе.
Ключевой проблемой стал prop sx, который долгое время был стандартом стилизации в GitHub. Через него команды передавали объекты с настройками внешнего вида компонентов Primer, что давало гибкость, но также усиливало зависимость от CSS-in-JS и влияло на скорость работы.
Первым шагом стало снижение использования sx по всему GitHub. Это сразу принесло схожие улучшения производительности и подготовило почву для окончательного отказа от CSS-in-JS. Однако в кодовой базе оставались тысячи таких пропов, без миграции которых нельзя было перейти на новую версию @primer/react, не зависящую от styled-components.
Чтобы перейти на новую архитектуру без массовых поломок, команда создала промежуточную библиотеку @primer/styled-react. В ней появились «обёртки» над компонентами, уже переведёнными на CSS Modules. Эти обёртки принимали sx и позволяли GitHub UI оставаться совместимым, тогда как те части кода, где sx не использовался, получали максимум выигрыша от прямого импорта компонентов из @primer/react.
Следующий этап миграции строился вокруг двух направлений: постепенное удаление sx из кода и поэтапное отключение зависимостей styled-components. Обе задачи решались через инкрементальные изменения, тестирование в продакшене и фичефлаги, которые включали и отключали новые механизмы по частям.
Дополнительным подтверждением правильного курса стало объявление о переводе styled-components в режим ограниченной поддержки. Внутри GitHub к этому моменту уже готовились к крупной зачистке sx и переходу на новые версии библиотек.
Работа по массовой миграции стартовала в апреле 2025 года при максимуме около 7 760 sx‑props, которые требовали переработки. Один из инженеров, Ян Сандерс, создал плагин для VS Code, помогающий мигрировать каждый проп. Параллельно разработали внутренний codemod для автоматического обновления целых файлов.
Хотя часть задач требовала ручной проверки и валидации, основная работа была автоматизирована. Ротация из восьми инженеров за шесть месяцев перенесла 6 419 пропов, достигнув улучшения времени серверного рендеринга от 1% до 22% на некоторых страницах.
Параллельно GitHub активно развивал Copilot: росли возможности ИИ‑ассистента, выходили новые функции, такие как агент Copilot и код‑ревью на основе ИИ. К моменту возобновления миграции в апреле 2026 года команда могла уже активно использовать Copilot coding agents для автоматизации рутины.
С их помощью и усилиями двух инженеров число оставшихся sx‑props сократилось с 895 до нуля всего за три недели. Это фактически завершило многолетнюю работу по удалению sx и подготовило платформу к полному отказу от styled-components.
Однако до окончательного удаления зависимостей оставалась ещё одна задача — темы. GitHub поддерживает семь тем, каждая из которых имеет вариант с высоким контрастом. Вся эта система тем была реализована с помощью styled-components, поэтому требовалось её разделение и перенос.
Полный пересмотр тем оказался проще, чем могло показаться. Переменные для оформления с самого начала описывались в CSS через пакет @primer/css, а при миграции @primer/react в конце 2025 года уже учитывался сценарий без styled‑Theming. Оставалось убрать зависимость от JavaScript‑утилит, связанных с библиотекой, и ещё раз пройти путь поэтапной миграции с фичефлагами.
Процесс занял около двух месяцев и сопровождался отдельным фичефлагом даже для удаления зависимостей, чтобы снизить риски. После устранения последних привязок к styled-components GitHub смог полностью переключиться на новую архитектуру оформления.
С июня 2026 года GitHub работает на 100% CSS Modules. Система страховок и поэтапных включений позволила провести крупные архитектурные изменения, тестировать их в реальной нагрузке, быстро находить и устранять ошибки и при этом постепенно улучшать производительность интерфейса.
То, что начиналось как миграция CSS, в итоге превратилось в постепенную перестройку всего подхода GitHub к стилизации, темам и доставке UI. В результате из основной кодовой базы были удалены sx, styled-components и styled-system, а сервис продолжал стабильно работать на каждом этапе. Команда GitHub подчёркивает, что улучшение скорости и качества работы продуктов остаётся одним из главных приоритетов.
Автором этих изменений выступил, в частности, инженер Джош Блэк из Остина, Техас, который специализируется на дизайн‑системах и доступных интерфейсах. Над миграцией также работала инженер Мари из команды GitHub Primer, базирующаяся в Атланте.
Источник: технический блог GitHub.
