عن المشروع

Panda هو حل للتنسيق في تطوير الويب الحديث، يوصف بأنه CSS-in-JS عالمي وآمن النوع وقابل للتوسع. يعمل في وقت البناء، حيث يستخرج كائنات الأنماط أو خصائص الأنماط إلى CSS. تشمل الميزات الرئيسية: كتابة كائنات أنماط أو خصائص أنماط يتم استخراجها في وقت البناء؛ مخرجات CSS حديثة باستخدام طبقات الشلال @layer ومتغيرات CSS؛ التوافق مع معظم أطر عمل JavaScript؛ الوصفات (recipes) والمتغيرات (variants) بشكل مشابه لـ 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' }). يتضمن المستودع الأحادي (monorepo) حزمًا مثل 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.