buildDesignSystem fn dalam kod sumber CSS Tailwind.

Dalam artikel ini, kami menganalisis fungsi buildDesignSystem dalam kod sumber CSS Tailwind.

Jenis DesignSystem dipilih daripada design-system.ts

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

  invalidCandidates: Set<string>

  // 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<typeof compileAstNodes>

  getVariantOrder(): Map<Variant, number>
  resolveThemeValue(path: string): string | undefined

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

Pada masa menulis artikel ini, design-system.ts mempunyai kira-kira 144 LOC.

Mari bincangkan bagaimana nilai yang dikembalikan oleh fungsi utiliti DefaultMap digunakan dalam designSystem.

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

Pembolehubah ini digunakan dalam objek designSystem seperti yang ditunjukkan di bawah:

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

utiliti dan varian ialah nilai yang dikembalikan oleh createUtilities dan createVariants.

Kunci seperti candidatesToCss, getVariantOrder dan resolveThemeValue mempunyai pelaksanaan fungsinya yang memerlukan analisis lebih lanjut.

Tentang kami:

Di Think Throo, kami berada dalam misi untuk mengajar konsep seni bina asas kod lanjutan yang digunakan dalam projek sumber terbuka.

10x kemahiran pengekodan anda dengan mempraktikkan konsep seni bina lanjutan dalam Next.js/React, pelajari amalan terbaik dan bina projek gred pengeluaran.

Kami adalah sumber terbuka — https://github.com/thinkthroo/thinkthroo (Beri kami bintang!)

Kami juga menyediakan pembangunan web dan perkhidmatan penulisan teknikal. Hubungi kami di hello@thinkthroo.com untuk mengetahui lebih lanjut!

Rujukan:

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>

   🎜

Atas ialah kandungan terperinci buildDesignSystem fn dalam kod sumber CSS Tailwind.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!