buildDesignSystem fn im Tailwind CSS-Quellcode.

In diesem Artikel analysieren wir die buildDesignSystem-Funktion im Tailwind CSS-Quellcode.

DesignSystem-Typ ausgewählt aus 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)[]
}

Zum Zeitpunkt des Schreibens dieses Artikels hat design-system.ts etwa 144 LOC.

Lassen Sie uns besprechen, wie die von der DefaultMap-Dienstprogrammfunktion zurückgegebenen Werte in designSystem verwendet werden.

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),
)

Diese Variablen werden im designSystem-Objekt wie unten gezeigt verwendet:

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

Dienstprogramme und Varianten sind die von createUtilities und createVariants zurückgegebenen Werte.

Schlüssel wie „candidatenToCss“, „getVariantOrder“ und „resolveThemeValue“ haben ihre Funktionsimplementierungen, die einer weiteren Analyse bedürfen.

Über uns:

Bei Think Throo haben wir die Mission, die fortgeschrittenen Codebasis-Architekturkonzepte zu vermitteln, die in Open-Source-Projekten verwendet werden.

Verzehnfachen Sie Ihre Programmierkenntnisse, indem Sie fortgeschrittene Architekturkonzepte in Next.js/React üben, die Best Practices erlernen und Projekte in Produktionsqualität erstellen.

Wir sind Open Source – https://github.com/thinkthroo/thinkthroo (Geben Sie uns einen Stern!)

Wir bieten auch Webentwicklungs- und technische Redaktionsdienste an. Kontaktieren Sie uns unter hello@thinkthroo.com, um mehr zu erfahren!

Referenzen:

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

Das obige ist der detaillierte Inhalt vonbuildDesignSystem fn im Tailwind CSS-Quellcode.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!