Tailwind CSS 源代码中的 buildDesignSystem fn。

在本文中，我们分析了 Tailwind CSS 源代码中的 buildDesignSystem 函数。

从 design-system.ts 中选取的 DesignSystem 类型

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)[]
}

在撰写本文时，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>((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)
},

utilities和variants是createUtilities和createVariants返回的值。

candidateToCss、getVariantOrder 和resolveThemeValue 等键都有其函数实现，需要进一步分析。

关于我们：

在 Think Throo，我们的使命是教授开源项目中使用的高级代码库架构概念。

通过在 Next.js/React 中练习高级架构概念，将您的编码技能提高 10 倍，学习最佳实践并构建生产级项目。

我们是开源的 — https://github.com/thinkthroo/thinkthroo （请给我们一颗星！）

我们还提供网络开发和技术写作服务。请通过hello@thinkthroo.com联系我们了解更多信息！

参考资料：

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

以上是Tailwind CSS 源代码中的 buildDesignSystem fn。的详细内容。更多信息请关注PHP中文网其他相关文章！