panda

Panda — это решение для стилизации в современной веб-разработке, описываемое как универсальный, типобезопасный и масштабируемый CSS-in-JS. Он работает на этапе сборки, извлекая объекты стилей или style props в CSS. Ключевые особенности включают: написание объектов стилей или style props, которые извлекаются при сборке; вывод современного CSS с использованием каскадных слоев @layer и CSS-переменных; совместимость с большинством JavaScript-фреймворков; рецепты и варианты, аналогичные Stitches; высокоуровневые дизайн-токены для одновременных тем; и типобезопасные стили с автодополнением через codegen. Установка осуществляется через npm: npm i -D @pandacss/dev, затем npx panda init -p для создания конфигурации и postcss. Входной CSS-файл должен содержать @layer reset, base, tokens, recipes, utilities и быть импортирован в приложение. Пример использования: import { css } from '../styled-system/css'; import { stack, vstack, hstack } from '../styled-system/patterns'; затем используйте имена классов, такие как hstack({ gap: '30px', color: 'pink.300' }) или css({ fontSize: 'lg', color: 'red.400' }). Монорепозиторий включает такие пакеты, как cli, core, config, extractor, generator, parser, is-valid-prop, node, token-dictionary и shared. Проект предоставляет документацию на panda-css.com, площадку StackBlitz, руководство по контрибьютингу и сообщество в Discord. Распространяется под лицензией MIT. В README упоминается вдохновение от Chakra UI, Vanilla Extract, Stitches, Tailwind CSS, Class Variance Authority, Styled System, Linaria, Uno CSS и Goober.