mergeTheme() — tailwindcss Function Reference

Architecture documentation for the mergeTheme() function in resolve-config.ts from the tailwindcss codebase.

Function typescript Oxide PreProcessors calls 2 called by 1

Entity Profile

Oxide→ PreProcessors→ mergeTheme() — tailwindcss Function Reference

Dependency Diagram

graph TD
  e544c002_a540_ba66_527d_bb3fc84f4e10["mergeTheme()"]
  cad44155_17aa_e1d6_081a_8f3b4f06bcde["resolve-config.ts"]
  e544c002_a540_ba66_527d_bb3fc84f4e10 -->|defined in| cad44155_17aa_e1d6_081a_8f3b4f06bcde
  bc7b25d3_d5ad_3609_d595_c9755dfadcbb["resolveConfig()"]
  bc7b25d3_d5ad_3609_d595_c9755dfadcbb -->|calls| e544c002_a540_ba66_527d_bb3fc84f4e10
  dabb13bc_6018_934b_19c4_595b7bea686d["createThemeFn()"]
  e544c002_a540_ba66_527d_bb3fc84f4e10 -->|calls| dabb13bc_6018_934b_19c4_595b7bea686d
  e135ce03_2957_5c11_2b7b_695da98ab45f["deepMerge()"]
  e544c002_a540_ba66_527d_bb3fc84f4e10 -->|calls| e135ce03_2957_5c11_2b7b_695da98ab45f
  style e544c002_a540_ba66_527d_bb3fc84f4e10 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/tailwindcss/src/compat/config/resolve-config.ts lines 198–273

function mergeTheme(ctx: ResolutionContext): Set<string> {
  let replacedThemeKeys: Set<string> = new Set()

  let themeFn = createThemeFn(ctx.design, () => ctx.theme, resolveValue)
  let theme = Object.assign(themeFn, {
    theme: themeFn,
    colors,
  })

  function resolveValue(value: ThemeValue | null | undefined): ResolvedThemeValue {
    if (typeof value === 'function') {
      return value(theme) ?? null
    }

    return value ?? null
  }

  for (let config of ctx.configs) {
    let theme = config.theme ?? {}
    let extend = theme.extend ?? {}

    // Keep track of all theme keys that were reset
    for (let key in theme) {
      if (key === 'extend') {
        continue
      }
      replacedThemeKeys.add(key)
    }

    // Shallow merge themes so latest "group" wins
    Object.assign(ctx.theme, theme)

    // Collect extensions by key so each group can be lazily deep merged
    for (let key in extend) {
      ctx.extend[key] ??= []
      ctx.extend[key].push(extend[key])
    }
  }

  // Remove the `extend` key from the theme It's only used for merging and
  // should not be present in the resolved theme
  delete ctx.theme.extend

  // Deep merge every `extend` key into the theme
  for (let key in ctx.extend) {
    let values = [ctx.theme[key], ...ctx.extend[key]]

    ctx.theme[key] = () => {
      let v = values.map(resolveValue)

      let result = deepMerge({}, v, mergeThemeExtension)
      return result
    }
  }

  for (let key in ctx.theme) {
    ctx.theme[key] = resolveValue(ctx.theme[key])
  }

  // Turn {min: '123px'} into '123px' in screens
  if (ctx.theme.screens && typeof ctx.theme.screens === 'object') {
    for (let key of Object.keys(ctx.theme.screens)) {
      let screen = ctx.theme.screens[key]
      if (!screen) continue
      if (typeof screen !== 'object') continue

      if ('raw' in screen) continue
      if ('max' in screen) continue
      if (!('min' in screen)) continue

      ctx.theme.screens[key] = screen.min
    }
  }

  return replacedThemeKeys
}