mergeTheme() — tailwindcss Function Reference

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

Function typescript CompilerEngine ModuleResolution calls 2 called by 1

Entity Profile

CompilerEngine→ ModuleResolution→ mergeTheme() — tailwindcss Function Reference

Dependency Diagram

graph TD
  9c6a3a4b_953d_4928_2f26_12c610c5c0e4["mergeTheme()"]
  678b66f4_0a04_0d6e_1925_b3716614324d["resolveConfig()"]
  678b66f4_0a04_0d6e_1925_b3716614324d -->|calls| 9c6a3a4b_953d_4928_2f26_12c610c5c0e4
  1ea8fd4a_634f_c2f0_5465_01d387d5207b["createThemeFn()"]
  9c6a3a4b_953d_4928_2f26_12c610c5c0e4 -->|calls| 1ea8fd4a_634f_c2f0_5465_01d387d5207b
  982d7e72_5afc_4832_dfcb_f221e9d52c64["deepMerge()"]
  9c6a3a4b_953d_4928_2f26_12c610c5c0e4 -->|calls| 982d7e72_5afc_4832_dfcb_f221e9d52c64
  style 9c6a3a4b_953d_4928_2f26_12c610c5c0e4 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
}