buildDesignSystem() — tailwindcss Function Reference

Source Code

packages/tailwindcss/src/design-system.ts lines 70–255

export function buildDesignSystem(
  theme: Theme,
  utilitiesSrc?: SourceLocation | undefined,
): DesignSystem {
  let utilities = createUtilities(theme)
  let variants = createVariants(theme)

  let parsedVariants = new DefaultMap((variant) => parseVariant(variant, designSystem))
  let parsedCandidates = new DefaultMap((candidate) =>
    Array.from(parseCandidate(candidate, designSystem)),
  )

  let compiledAstNodes = new DefaultMap<number>((flags) => {
    return new DefaultMap<Candidate>((candidate) => {
      let ast = compileAstNodes(candidate, designSystem, flags)

      try {
        // Arbitrary values (`text-[theme(--color-red-500)]`) and arbitrary
        // properties (`[--my-var:theme(--color-red-500)]`) can contain function
        // calls so we need evaluate any functions we find there that weren't in
        // the source CSS.
        substituteFunctions(
          ast.map(({ node }) => node),
          designSystem,
        )

        // JS plugins might contain an `@variant` inside a generated utility
        substituteAtVariant(
          ast.map(({ node }) => node),
          designSystem,
        )
      } catch (err) {
        // If substitution fails then the candidate likely contains a call to
        // `theme()` that is invalid which may be because of incorrect usage,
        // invalid arguments, or a theme key that does not exist.
        return []
      }

      return ast
    })
  })

  let trackUsedVariables = new DefaultMap((raw) => {
    for (let variable of extractUsedVariables(raw)) {
      theme.markUsedVariable(variable)
    }
  })

  function candidatesToAst(classes: string[]): AstNode[][] {
    let result: AstNode[][] = []

    for (let className of classes) {
      let wasValid = true

      let { astNodes } = compileCandidates([className], designSystem, {
        onInvalidCandidate() {
          wasValid = false
        },
      })

      if (utilitiesSrc) {
        walk(astNodes, (node) => {
          // We do this conditionally to preserve source locations from both
          // `@utility` and `@custom-variant`. Even though generated nodes are
          // cached this should be fine because `utilitiesNode.src` should not
          // change without a full rebuild which destroys the cache.
          node.src ??= utilitiesSrc
          return WalkAction.Continue
        })
      }

      // Disable all polyfills to not unnecessarily pollute IntelliSense output
      astNodes = optimizeAst(astNodes, designSystem, Polyfills.None)

      result.push(wasValid ? astNodes : [])
    }

    return result
  }

  function candidatesToCss(classes: string[]): (string | null)[] {