GitHub перейшов на CSS Modules і відмовився від styled-components

Інженери GitHub розповіли, як компанія замінила CSS-in-JS на CSS Modules у своєму інтерфейсі. Допис опубліковано в блозі GitHub 25 вересня 2026 року; його автори, інженери дизайн-системи Primer Джош Блек і Марі Лукка, повідомляють про вимірювані результати.

Чому система стилів стала вузьким місцем

Проблеми почалися 2023 року, коли кількість компонентів на деяких сторінках різко зросла. Початкове завантаження сторінок сповільнилося, бо стилі ініціалізувалися на клієнті, продуктивність серверного рендерингу впала, а оновлення стилів виходили з-під контролю разом зі зростанням кількості компонентів. Команді Primer потрібне було рішення, яке позбавляло обох типів витрат і не ламало GitHub.

CSS Modules і поступова міграція

Вибір зупинили на CSS Modules. У цьому форматі стилі пишуть у CSS-файлі поруч із JavaScript-кодом компонента, назви класів локальні, а runtime не потрібен: стилі збираються в таблиці, які надсилаються разом з HTML сторінки. Кожен компонент переходив за прапорцем функції, який перемикав старі та нові стилі, візуальні регресійні тести підтверджували ідентичність знімків, а розгортання поступово охопило всіх користувачів. До грудня 2024 року міграція завершилася: серверний рендеринг сторінки потребує на 55% менше часу, а ініціалізація компонентів на сторінці — на 25% менше.

Відмова від пропа sx

Складнішою частиною був проп sx, усталений спосіб налаштування компонентів Primer. Він давав хорошу підтримку TypeScript, але мав високу вартість під час виконання і погано масштабувався. GitHub спершу створив пакет сумісності @primer/styled-react, щоб наявний код і далі імпортував компоненти, поки реалізації переходили на @primer/react. Робота почалася у квітні 2025 року: потрібно було перенести близько 7760 пропів sx. Вісім інженерів за шість місяців перенесли 6419 пропів, а виграш у серверному рендерингу на деяких сторінках сягав від 1% до 22%. У квітні 2026 року двоє інженерів разом із агентами Copilot звели решту 895 пропів до нуля за три тижні.

Сім тем і фінальне прибирання

GitHub підтримує сім тем, кожна з варіантом високої контрастності, і всі вони працювали через styled-components. Змінні тем уже жили в CSS, тож лишалося прибрати утиліти JavaScript. За два місяці залежності зникли. З червня 2026 року GitHub працює на 100% CSS Modules, а sx, styled-components і styled-system видалено з основного застосунку.