En este artículo, analizamos la función buildDesignSystem en el código fuente CSS de Tailwind.
Tipo de DesignSystem elegido de 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)[] }
Al momento de escribir este artículo, design-system.ts tiene aproximadamente 144 LOC.
Analicemos cómo se utilizan los valores devueltos por la función de utilidad DefaultMap en 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), )
Estas variables se utilizan en el objeto designSystem como se muestra a continuación:
parseCandidate(candidate: string) { return parsedCandidates.get(candidate) }, parseVariant(variant: string) { return parsedVariants.get(variant) }, compileAstNodes(candidate: Candidate) { return compiledAstNodes.get(candidate) },
las utilidades y variantes son los valores devueltos por createUtilities y createVariants.
Claves como candidatesToCss, getVariantOrder y resolveThemeValue tienen implementaciones de funciones que requieren un análisis más detallado.
En Think Throo, tenemos la misión de enseñar los conceptos arquitectónicos avanzados de base de código utilizados en proyectos de código abierto.
10 veces tus habilidades de codificación practicando conceptos arquitectónicos avanzados en Next.js/React, aprende las mejores prácticas y crea proyectos de nivel de producción.
Somos de código abierto: https://github.com/thinkthroo/thinkthroo (¡Danos una estrella!)
También brindamos servicios de desarrollo web y redacción técnica. Comuníquese con nosotros en [email protected] para obtener más información.
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
Descargo de responsabilidad: Todos los recursos proporcionados provienen en parte de Internet. Si existe alguna infracción de sus derechos de autor u otros derechos e intereses, explique los motivos detallados y proporcione pruebas de los derechos de autor o derechos e intereses y luego envíelos al correo electrónico: [email protected]. Lo manejaremos por usted lo antes posible.
Copyright© 2022 湘ICP备2022001581号-3