mergeTheme() — tailwindcss Function Reference

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

Function typescript UpgradeToolkit Codemods calls 2 called by 1

Entity Profile

UpgradeToolkit→ Codemods→ mergeTheme() — tailwindcss Function Reference

Dependency Diagram

graph TD
  63f5d3ac_b848_6ab0_af8e_5d1ec324c0d5["mergeTheme()"]
  9b5d2e3d_392e_c654_c350_1352ed70f5e8["resolve-config.ts"]
  63f5d3ac_b848_6ab0_af8e_5d1ec324c0d5 -->|defined in| 9b5d2e3d_392e_c654_c350_1352ed70f5e8
  0ed24ba5_7c39_3f5a_fdbb_f973a617a172["resolveConfig()"]
  0ed24ba5_7c39_3f5a_fdbb_f973a617a172 -->|calls| 63f5d3ac_b848_6ab0_af8e_5d1ec324c0d5
  d30151e4_eee8_a868_f516_c653088f4a03["createThemeFn()"]
  63f5d3ac_b848_6ab0_af8e_5d1ec324c0d5 -->|calls| d30151e4_eee8_a868_f516_c653088f4a03
  a21213f9_9467_d282_d4f1_fcb2cf2ae2fc["deepMerge()"]
  63f5d3ac_b848_6ab0_af8e_5d1ec324c0d5 -->|calls| a21213f9_9467_d282_d4f1_fcb2cf2ae2fc
  style 63f5d3ac_b848_6ab0_af8e_5d1ec324c0d5 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
}