panda

Pandaは、モダンなウェブ開発のためのスタイリングソリューションであり、ユニバーサルで型安全、かつスケーラブルなCSS-in-JSとして定義されています。ビルド時に動作し、スタイルオブジェクトやスタイルプロップをCSSに抽出します。主な機能には、ビルド時に抽出されるスタイルオブジェクトやスタイルプロップの記述、カスケードレイヤー（@layer）とCSS変数を使用したモダンな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 からのインスピレーションについて言及しています。