في هذه المقالة، نقوم بتحليل وظيفة buildDesignSystem في كود مصدر Tailwind CSS.

تم اختيار نوع نظام التصميم من design-system.ts

export type DesignSystem = {
  theme: Theme
  utilities: Utilities
  variants: Variants

  invalidCandidates: Set

  // Whether to mark utility declarations as !important
  important: boolean

  getClassOrder(classes: string[]): [string, bigint | null][]
  getClassList(): ClassEntry[]
  getVariants(): VariantEntry[]

  parseCandidate(candidate: string): Candidate[]
  parseVariant(variant: string): Variant | null
  compileAstNodes(candidate: Candidate): ReturnType

  getVariantOrder(): Map
  resolveThemeValue(path: string): string | undefined

  // Used by IntelliSense
  candidatesToCss(classes: string[]): (string | null)[]
}

في وقت كتابة هذا المقال، كان لدى design-system.ts حوالي 144 LOC.

دعونا نناقش كيفية استخدام القيم التي يتم إرجاعها بواسطة وظيفة الأداة المساعدة DefaultMap في نظام التصميم.

let parsedVariants = new DefaultMap((variant) => parseVariant(variant, designSystem))
let parsedCandidates = new DefaultMap((candidate) =>
  Array.from(parseCandidate(candidate, designSystem)),
)
let compiledAstNodes = new DefaultMap((candidate) =>
  compileAstNodes(candidate, designSystem),
)

يتم استخدام هذه المتغيرات في كائن designSystem كما هو موضح أدناه:

parseCandidate(candidate: string) {
  return parsedCandidates.get(candidate)
},
parseVariant(variant: string) {
  return parsedVariants.get(variant)
},
compileAstNodes(candidate: Candidate) {
  return compiledAstNodes.get(candidate)
},

الأدوات المساعدة والمتغيرات هي القيم التي يتم إرجاعها بواسطة createUtilities و createVariants.

مفاتيح مثل المرشحين ToCss، getVariantOrder وresolveThemeValue لها تطبيقات وظائفها التي تتطلب تحليلا أكثر.

معلومات عنا:

في Think Throo، نحن في مهمة لتعليم المفاهيم المعمارية لقاعدة التعليمات البرمجية المتقدمة المستخدمة في المشاريع مفتوحة المصدر.

ضاعف مهاراتك في البرمجة من خلال ممارسة المفاهيم المعمارية المتقدمة في Next.js/React، وتعلم أفضل الممارسات وبناء مشاريع على مستوى الإنتاج.

نحن مفتوح المصدر - https://github.com/thinkthroo/thinkthroo (لا تعطينا نجمة!)

نحن أيضًا نقدم خدمات تطوير الويب والكتابة الفنية . تواصل معنا على [email protected] لمعرفة المزيد!

مراجع:

1. https://github.com/tailwindlabs/tailwindcss/blob/next/packages/tailwindcss/src/design-system.ts

2. https://github.com/tailwindlabs/tailwindcss/blob/c01b8254e822d4f328674357347ca0532f1283a0/packages/tailwindcss/src/index.ts#L319