buildDesignSystem fn in Tailwind CSS source code.

thinkthroo

thinkThroo

Posted on October 11, 2024

buildDesignSystem fn in Tailwind CSS source code.

In this article, we analyze buildDesignSystem function in Tailwind CSS source code.

Image description

DesignSystem type picked from design-system.ts

export type DesignSystem = {
  theme: Theme
  utilities: Utilities
  variants: Variants

  invalidCandidates: Set<string>

  // 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<typeof compileAstNodes>

  getVariantOrder(): Map<Variant, number>
  resolveThemeValue(path: string): string | undefined

  // Used by IntelliSense
  candidatesToCss(classes: string[]): (string | null)[]
}
Enter fullscreen mode Exit fullscreen mode

At the time of writing this article, design-system.ts has about 144 LOC.

Let’s discuss how the values returned by DefaultMap utility function is used in designSystem.

let parsedVariants = new DefaultMap((variant) => parseVariant(variant, designSystem))
let parsedCandidates = new DefaultMap((candidate) =>
  Array.from(parseCandidate(candidate, designSystem)),
)
let compiledAstNodes = new DefaultMap<Candidate>((candidate) =>
  compileAstNodes(candidate, designSystem),
)
Enter fullscreen mode Exit fullscreen mode

These variables are used in designSystem object as shown below:

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

utilities and variants are the values returned by createUtilities and createVariants.

Keys such as candidatesToCss, getVariantOrder and resolveThemeValue have their function implementations that require furter analysis.

About us:

At Think Throo, we are on a mission to teach the advanced codebase architectural concepts used in open-source projects.

10x your coding skills by practising advanced architectural concepts in Next.js/React, learn the best practices and build production-grade projects.

We are open source — https://github.com/thinkthroo/thinkthroo (Do give us a star!)

We also provide web development and technical writing services. Reach out to us at hello@thinkthroo.com to learn more!

References:

  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



💖 💪 🙅 🚩
thinkthroo
thinkThroo

Posted on October 11, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related