temporarilyDisableThemeInline() — tailwindcss Function Reference

Architecture documentation for the temporarilyDisableThemeInline() function in canonicalize-candidates.ts from the tailwindcss codebase.

Function typescript UpgradeToolkit TemplateAnalysis calls 1 called by 1

Entity Profile

UpgradeToolkit→ TemplateAnalysis→ temporarilyDisableThemeInline() — tailwindcss Function Reference

Dependency Diagram

graph TD
  39ea4a1e_d717_23df_d73b_dd349e716a3b["temporarilyDisableThemeInline()"]
  7d350d81_5de1_f9f3_5b2c_19ec8fd3c37e["canonicalize-candidates.ts"]
  39ea4a1e_d717_23df_d73b_dd349e716a3b -->|defined in| 7d350d81_5de1_f9f3_5b2c_19ec8fd3c37e
  3f0c9850_42a7_e7cb_36cc_12b1cb9274dd["createUtilitySignatureCache()"]
  3f0c9850_42a7_e7cb_36cc_12b1cb9274dd -->|calls| 39ea4a1e_d717_23df_d73b_dd349e716a3b
  06ed9408_12cf_7ddd_a435_8cdd942de1d4["add()"]
  39ea4a1e_d717_23df_d73b_dd349e716a3b -->|calls| 06ed9408_12cf_7ddd_a435_8cdd942de1d4
  style 39ea4a1e_d717_23df_d73b_dd349e716a3b fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/tailwindcss/src/canonicalize-candidates.ts lines 2506–2565

function temporarilyDisableThemeInline<T>(designSystem: DesignSystem, cb: () => T): T {
  // Turn off `@theme inline` feature such that `@theme` and `@theme inline` are
  // considered the same. The biggest motivation for this is referencing
  // variables in another namespace that happen to contain the same value as the
  // utility's own namespaces it is reading from.
  //
  // E.g.:
  //
  // The `max-w-*` utility doesn't read from the `--breakpoint-*` namespace.
  // But it does read from the `--container-*` namespace. It also happens to
  // be the case that `--breakpoint-md` and `--container-3xl` are the exact
  // same value.
  //
  // If you then use the `max-w-(--breakpoint-md)` utility, inlining the
  // variable would mean:
  //  - `max-w-(--breakpoint-md)` → `max-width: 48rem;` → `max-w-3xl`
  //  - `max-w-(--contianer-3xl)` → `max-width: 48rem;` → `max-w-3xl`
  //
  // Not inlining the variable would mean:
  // - `max-w-(--breakpoint-md)` → `max-width: var(--breakpoint-md);` → `max-w-(--breakpoint-md)`
  // - `max-w-(--container-3xl)` → `max-width: var(--container-3xl);` → `max-w-3xl`

  // @ts-expect-error We are monkey-patching a method that's considered private
  // in TypeScript
  let originalGet = designSystem.theme.values.get

  // Track all values with the inline option set, so we can restore them later.
  let restorableInlineOptions = new Set<{ options: ThemeOptions }>()

  // @ts-expect-error We are monkey-patching a method that's considered private
  // in TypeScript
  designSystem.theme.values.get = (key: string) => {
    // @ts-expect-error We are monkey-patching a method that's considered private
    // in TypeScript
    let value = originalGet.call(designSystem.theme.values, key)
    if (value === undefined) return value

    // Remove `inline` if it was set
    if (value.options & ThemeOptions.INLINE) {
      restorableInlineOptions.add(value)
      value.options &= ~ThemeOptions.INLINE
    }

    return value
  }

  try {
    // Run the callback with the `@theme inline` feature disabled
    return cb()
  } finally {
    // Restore the `@theme inline` to the original value
    // @ts-expect-error We are monkey-patching a method that's private
    designSystem.theme.values.get = originalGet

    // Re-add the `inline` option, in case future lookups are done
    for (let value of restorableInlineOptions) {
      value.options |= ThemeOptions.INLINE
    }
  }
}