この記事では、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) },
ユーティリティとバリアントは、createUtilities と createVariants によって返される値です。
candidateToCss、getVariantOrder、resolveThemeValue などのキーには、さらなる分析が必要な関数実装があります。
Think Throo では、オープンソース プロジェクトで使用される高度なコードベース アーキテクチャの概念を教えることを使命としています。
Next.js/React の高度なアーキテクチャ概念を実践してコーディング スキルを 10 倍にし、ベスト プラクティスを学び、本番レベルのプロジェクトを構築します。
私たちはオープンソースです — 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