panda

Panda é uma solução de estilização para o desenvolvimento web moderno, descrita como um CSS-in-JS universal, type-safe e escalável. Ele opera no momento do build, extraindo objetos de estilo ou props de estilo para CSS. Os principais recursos incluem: escrita de objetos de estilo ou props de estilo que são extraídos no build; saída de CSS moderno utilizando camadas de cascata @layer e variáveis CSS; compatibilidade com a maioria dos frameworks JavaScript; recipes e variants semelhantes ao Stitches; tokens de design de alto nível para temas simultâneos; e estilos type-safe com preenchimento automático via codegen. A instalação é feita via npm: npm i -D @pandacss/dev, seguido de npx panda init -p para criar a configuração e o postcss. O arquivo CSS de entrada deve conter @layer reset, base, tokens, recipes, utilities; e ser importado no aplicativo. Exemplo de uso: import { css } from '../styled-system/css'; import { stack, vstack, hstack } from '../styled-system/patterns'; então utilize nomes de classes como hstack({ gap: '30px', color: 'pink.300' }) ou css({ fontSize: 'lg', color: 'red.400' }). O monorepo inclui pacotes como cli, core, config, extractor, generator, parser, is-valid-prop, node, token-dictionary e shared. O projeto fornece documentação em panda-css.com, um playground no StackBlitz, um guia de contribuição e uma comunidade no Discord. Possui licença MIT. O README reconhece a inspiração vinda de Chakra UI, Vanilla Extract, Stitches, Tailwind CSS, Class Variance Authority, Styled System, Linaria, Uno CSS e Goober.