"Se um trabalhador quiser fazer bem o seu trabalho, ele deve primeiro afiar suas ferramentas." - Confúcio, "Os Analectos de Confúcio. Lu Linggong"
Primeira página > Programação > buildDesignSystem fn no código-fonte CSS do Tailwind.

buildDesignSystem fn no código-fonte CSS do Tailwind.

Publicado em 2024-11-08
Navegar:379

Neste artigo, analisamos a função buildDesignSystem no código-fonte CSS do Tailwind.

buildDesignSystem fn in Tailwind CSS source code.

Tipo DesignSystem escolhido em 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)[]
}

No momento em que este artigo foi escrito, design-system.ts tinha cerca de 144 LOC.

Vamos discutir como os valores retornados pela função utilitária DefaultMap são usados ​​​​no 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),
)

Essas variáveis ​​são usadas no objeto designSystem conforme mostrado abaixo:

parseCandidate(candidate: string) {
  return parsedCandidates.get(candidate)
},
parseVariant(variant: string) {
  return parsedVariants.get(variant)
},
compileAstNodes(candidate: Candidate) {
  return compiledAstNodes.get(candidate)
},

utilitários e variantes são os valores retornados por createUtilities e createVariants.

Chaves como candidateToCss, getVariantOrder e resolveThemeValue têm suas implementações de função que requerem análise mais aprofundada.

Sobre nós:

No Think Throo, temos a missão de ensinar os conceitos avançados de arquitetura de base de código usados ​​em projetos de código aberto.

10x suas habilidades de codificação praticando conceitos de arquitetura avançados em Next.js/React, aprenda as melhores práticas e crie projetos de nível de produção.

Somos código aberto - https://github.com/thinkthroo/thinkthroo (Dê-nos uma estrela!)

Nós também fornecemos serviços de desenvolvimento web e redação técnica. Entre em contato conosco em [email protected] para saber mais!

Referências:

  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



Declaração de lançamento Este artigo foi reproduzido em: https://dev.to/thinkthroo/builddesignsystem-fn-in-tailwind-css-source-code-42gb?1 Se houver alguma violação, entre em contato com [email protected] para excluí-la
Tutorial mais recente Mais>

Isenção de responsabilidade: Todos os recursos fornecidos são parcialmente provenientes da Internet. Se houver qualquer violação de seus direitos autorais ou outros direitos e interesses, explique os motivos detalhados e forneça prova de direitos autorais ou direitos e interesses e envie-a para o e-mail: [email protected]. Nós cuidaremos disso para você o mais rápido possível.

Copyright© 2022 湘ICP备2022001581号-3