本文我們分析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