В этой статье мы анализируем функцию buildDesignSystem в исходном коде CSS Tailwind.

Тип DesignSystem, выбранный из файла 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, используются в designSystem.

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.

Такие ключи, как CandidateToCss, getVariantOrder иsolveThemeValue, имеют реализации своих функций, требующие дальнейшего анализа.

О нас:

В Think Throo мы стремимся обучать передовым архитектурным концепциям кодовой базы, используемым в проектах с открытым исходным кодом.

Увеличьте свои навыки программирования в 10 раз, практикуя передовые архитектурные концепции в 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