本文我们分析Tailwind CSS源码中的buildDesignSystem函数。
从 design-system.ts 中选取的 DesignSystem 类型
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) },
utilities和variants是createUtilities和createVariants返回的值。
candidateToCss、getVariantOrder、resolveThemeValue等键都有其函数实现,需要进一步分析。
在 Think Throo,我们的使命是教授开源项目中使用的高级代码库架构概念。
通过在 Next.js/React 中练习高级架构概念,提高您的编码技能,学习最佳实践并构建生产级项目。
我们是开源的 — https://github.com/thinkthroo/thinkthroo (请给我们一颗星!)
我们还提供网络开发和技术写作服务。请通过 [email protected] 联系我们了解更多信息!
https://github.com/tailwindlabs/tailwindcss/blob/next/packages/tailwindcss/src/design-system.ts
https://github.com/tailwindlabs/tailwindcss/blob/c01b8254e822d4f328674357347ca0532f1283a0/packages/tailwindcss/src/index.ts#L319
免责声明: 提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发到邮箱:[email protected] 我们会第一时间内为您处理。
Copyright© 2022 湘ICP备2022001581号-3