Миграция Linear на StyleX ускорила навигацию на 30%
Миграция Linear на StyleX, которая перевела React-приложения компании со styled-components больше чем за 1000 пул-реквестов, завершилась в начале августа 2026 года, написал инженер Кеннет Скоухус 26 августа 2026 года. В работе сочетались детерминированный кодмод, кодинг-агенты и ручная проверка. По словам Linear, страницы с большим числом элементов теперь нагружают основной поток на 20-35% меньше, а навигация на среднем по мощности компьютере быстрее примерно на 30%. Клиенты получили более быстрый продукт без переписывания с нуля.
Почему Linear ушла со styled-components
У Linear было две проблемы со старой библиотекой стилей: скорость и контроль. CSS-in-JS на этапе выполнения заставляет браузер генерировать стили и вставлять CSS-правила прямо во время отрисовки приложения. Linear остро почувствовала эту цену после перехода на конкурентный рендеринг React 18, примерно тогда, когда styled-components перешла в режим поддержки. Коди Олсен из Sanity выпустил оптимизированный форк, который сократил время рендеринга в Linear на 40 процентов, но назвал его крайней мерой.
Вторая проблема касалась инкапсуляции. Такие приемы, как styled(Button), позволяли легко менять вид компонента снаружи, и после редизайна Linear пришлось разбирать длинный хвост регрессий в интерфейсе. Инженер Кеннет Скоухус написал, что чем больше кода пишут кодинг-агенты, тем важнее четкие границы.
Что Linear выбрала вместо и почему
Команда задала правила для новой библиотеки: генерация стилей на этапе сборки, стилизация издалека намеренно затруднена, предсказуемое слияние стилей между файлами, хорошая поддержка React и активное сопровождение. Она рассмотрела большинство вариантов стилизации для React. Ближайшую альтернативу, vanilla-extract, отвергли из-за раздробленного API и отдельных файлов со стилями.
Победил StyleX, атомарная CSS-in-JS-библиотека с открытым кодом от Meta. Она переносит генерацию стилей на этап сборки, выдает небольшие атомарные классы без коллизий и работает в веб-версиях Facebook, Instagram и WhatsApp. Стили лежат рядом с компонентами, API небольшой, а контракты стилизации типобезопасны. Цена у этого одна, жесткость: селекторы, зависящие от родителя, глобальные селекторы и перестилизация через обертки усложняются, поэтому Linear оставила CSS Modules как запасной выход для глобальных селекторов.
Как работу поделили кодмод, агенты и инженеры
Работа началась с детерминированного кодмода, а не с агентов. Скоухус создал styled-components-to-stylex-codemod на основе большого набора тестов, а агенты помогали его развивать. У инструмента есть онлайн-песочница, и, по данным InfoQ, он насчитывает больше 500 пул-реквестов и примерно 100 000 строк.
Команда сначала задала переменные StyleX и общие базовые компоненты, дала агентам узкие задачи с раннером кодмода, примерами, скриптами проверки и чек-листом и переносила листовые компоненты раньше общих. Агенты часто застревали на проверке визуальных различий вроде состояний наведения и тем оформления. Из-за этого пришлось много тестировать вручную, пока в середине проекта не вышли две новые модели, Fable и Sol.
"Если бы мы начинали эту миграцию сегодня, мы бы гораздо больше опирались на Fable и Sol и поручили бы им выполнить ее напрямую." Кеннет Скоухус, инженер Linear
Как Linear удерживала темп миграции месяцами
Linear не останавливала продуктовую разработку, пока обе системы сосуществовали, и поддерживала миграцию инструментами. Счетчик на панели разработчика показывал, сколько styled-components на каждой странице, подсветка отмечала уже перенесенные компоненты, а бот помечал новые styled-components в пул-реквестах. Теперь новые правила закрепляют правила Oxlint.
График прогресса показывает кривую. Файлы со styled-components составляли 100% всех файлов со стилями React на неделе 8 марта 2026 года, 49% к 7 июня и 0% к 6 августа. Число новых файлов со styled-components упало с пика в 22 на неделе 19 апреля до нуля в большинстве недель после 31 мая.
Что дала миграция Linear на StyleX
Измеренные результаты принадлежат самой Linear. Миграция заняла больше 1000 пул-реквестов и примерно пять месяцев и завершилась в начале августа 2026 года. Linear сообщает о снижении нагрузки на основной поток на 20-35% на страницах с большим числом элементов, об ускорении навигации примерно на 30% на среднем компьютере и о нуле CSS-правил, вставляемых при смене страницы.
Что это значит для компаний с большими веб-приложениями
Для софтверной компании задача здесь такая: заменить ключевую фронтенд-библиотеку в большой живой кодовой базе, не останавливая работу над продуктом. Ответ Linear состоял из трех частей: детерминированный кодмод для однотипного массива, агенты с узкими задачами для остального и инженеры для оценки и визуальных проверок. По ее собственному мнению, сегодня агенты взяли бы на себя больше работы.
Рынок движется в ту же сторону. InfoQ пишет, что Cursor перешел на StyleX с Tailwind, а в подкасте Syntax решили, что дополнительная жесткость людям не слишком приятна, зато агентам она подходит.
Вопросы и ответы
Сколько длился переход Linear на StyleX?
Около пяти месяцев и больше 1000 пул-реквестов. Linear закончила в начале августа 2026 года, а Скоухус описал проект 26 августа 2026 года.
Почему Linear выбрала StyleX, а не vanilla-extract?
Vanilla-extract предлагал статическое извлечение стилей и типобезопасность, но Linear сочла его API раздробленным, а отдельные файлы со стилями ей не понравились. StyleX держит стили рядом с компонентами и имеет более компактный API.
Миграцию выполняли ИИ-агенты?
Частично. Детерминированный кодмод сделал большую часть однотипной работы, агенты брали узкие задачи, а инженеры занимались визуальными проверками, пока в середине проекта не появились модели Fable и Sol.
Взгляд MOZGII
Как бы мы это построили
Этот случай хорошая модель для любой крупной миграции кода, потому что Linear не начала с передачи задачи агентам. Сначала она написала конвертер на правилах с большим набором тестов, затем использовала агентов для того, с чем конвертер не справился, а людей оставила там, где машины пока работают плохо, например в оценке того, выглядит ли страница правильно. Мы бы шли в том же порядке.
Если бы мы вели такую миграцию, то начали бы с общего фундамента: дизайн-токенов и базовых компонентов, которые обязан использовать каждый преобразованный файл. Конвертер обрабатывал бы типовые шаблоны и отказывался от всего незнакомого, чтобы нестандартные случаи попадали к агенту или человеку, а не преобразовывались неверно. Агенты получали бы по одной небольшой четко описанной задаче, с примерами и скриптом, проверяющим результат. Видимый счетчик и проверка в каждом пул-реквесте не дали бы новому коду в старом стиле вернуться.
Слабым местом стали бы визуальные проверки. Код может компилироваться и проходить тесты, а состояние наведения или темная тема при этом выглядят неправильно, и Linear обнаружила, что агенты спотыкаются именно здесь. Мы бы добавили сравнение скриншотов для каждого преобразованного компонента и отправляли любое различие человеку. Единственная метрика, за которой мы бы следили, это доля файлов со стилями на старой библиотеке по неделям, вместе с числом новых файлов в старом стиле.
Далее мы превратили бы правила линтера в стандарт для нового кода, чтобы следующий редизайн начинался с чистого листа.
Источники
Откуда взяты факты этой новости.