Panda CSS – популярная библиотека CSS‑in‑JS, позволяющая писать типизированные стили прямо в JavaScript и TypeScript. В версии 2.0 авторы объявили о полной переписке компилятора на Rust, что привело к значительному ускорению сборки и снижению нагрузки на редакторы. В этой статье мы разберём, какие улучшения появились, как они влияют на разработку и какие шаги нужно предпринять, чтобы перейти на новую версию.
Context and practical value
Видео описывает выпуск Panda CSS 2.0 с компилятором на Rust, перечисляет приросты производительности и улучшения в генерации TypeScript‑типов.
В статье подробно разбираются конкретные цифры ускорения, влияние на разработку и практические шаги миграции, которые не раскрыты в описании видео.
Tutorial profile
- Format: how_to
- Topic: frontend-tools
- Audience: intermediate
Key takeaways
- Компилятор Panda CSS 2.0 написан на Rust, что ускоряет извлечение стилей в 15–37 раз.
- Повторный парсинг в watch‑mode стал быстрее примерно в 360 раз.
- Генерация staticCss ускорилась в 85 раз, а количество инстанцирований TypeScript‑типов сократилось на 99 %.
- Новая версия поддерживает те же способы описания стилей: css(), JSX style props и recipes.
- Panda CSS продолжает генерировать статический CSS без runtime‑поддержки в браузере.
Что изменилось в Panda CSS 2.0?
Основное изменение – компилятор полностью переписан на Rust, что дало прирост скорости в 15–37 раз при извлечении стилей. В режиме watch парсинг стал быстрее в 360 раз, а генерация staticCss ускорилась в 85 раз. Кроме того, была переработана генерация TypeScript‑типов, что сократило их количество на 99 %.
Как это влияет на разработку?
Быстрая сборка означает меньше времени ожидания в процессе разработки и CI. Снижение нагрузки на редакторы улучшает UX при работе с большими проектами. Поскольку Panda CSS генерирует статический CSS, в браузере не требуется runtime‑поддержка, что упрощает деплой и повышает производительность.
Миграция на Panda CSS 2.0
Переход прост: обновите пакет до версии 2.0, проверьте совместимость API (css(), JSX style props, recipes). Убедитесь, что ваш сборщик поддерживает Rust‑компилятор (например, Vite, Webpack с соответствующим плагином). После обновления можно измерить прирост скорости, запустив тесты сборки.
Practical next steps
- Обновите зависимость panda-css до версии 2.0 в package.json.
- Проверьте, что ваш сборщик поддерживает Rust‑компилятор, и настройте соответствующий плагин.
- Запустите сборку в watch‑mode и сравните время парсинга с предыдущей версией.
- Проверьте типы в редакторе, убедитесь, что количество инстанцирований сократилось.
- Проведите тесты генерации staticCss и сравните размер выходного CSS.
Limits and verification
- Описание не содержит конкретных команд установки или конфигурации сборщика.
- Не указаны версии зависимостей, которые могут потребоваться для работы Rust‑компилятора.
FAQ
Нужен ли runtime‑поддержка в браузере после обновления?
Нет, Panda CSS генерирует статический CSS, поэтому в браузере не требуется runtime‑поддержка.
Как быстро можно увидеть прирост производительности?
Запустив сборку в watch‑mode и измерив время парсинга, можно увидеть ускорение в 360 раз.