panda

Panda est une solution de stylisation pour le développement web moderne, décrite comme un CSS-in-JS universel, type-safe et évolutif. Il fonctionne au moment du build, extrayant les objets de style ou les props de style vers du CSS. Les fonctionnalités clés incluent : l'écriture d'objets de style ou de props de style extraits au build ; une sortie CSS moderne utilisant les couches de cascade @layer et les variables CSS ; une compatibilité avec la plupart des frameworks JavaScript ; des recettes et variants similaires à Stitches ; des jetons de design (design tokens) de haut niveau pour des thèmes simultanés ; et des styles type-safe avec autocomplétion via codegen. L'installation s'effectue via npm : npm i -D @pandacss/dev, puis npx panda init -p pour générer la configuration et postcss. Le fichier CSS d'entrée doit contenir @layer reset, base, tokens, recipes, utilities ; et être importé dans l'application. Exemple d'utilisation : import { css } from '../styled-system/css'; import { stack, vstack, hstack } from '../styled-system/patterns'; puis utilisez des noms de classes comme hstack({ gap: '30px', color: 'pink.300' }) ou css({ fontSize: 'lg', color: 'red.400' }). Le monorepo comprend des packages tels que cli, core, config, extractor, generator, parser, is-valid-prop, node, token-dictionary et shared. Le projet fournit une documentation sur panda-css.com, un playground StackBlitz, un guide de contribution et une communauté Discord. Il est sous licence MIT. Le README reconnaît l'inspiration tirée de Chakra UI, Vanilla Extract, Stitches, Tailwind CSS, Class Variance Authority, Styled System, Linaria, Uno CSS et Goober.