temporarilyDisableThemeInline() — tailwindcss Function Reference

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

Function typescript CompilerEngine AstTransformation calls 1 called by 1

Entity Profile

CompilerEngine→ AstTransformation→ temporarilyDisableThemeInline() — tailwindcss Function Reference

Dependency Diagram

graph TD
  ff3b791b_69bb_dfca_8d4b_f92bd97ab054["temporarilyDisableThemeInline()"]
  00f82a70_37cd_d9d2_64c8_29c748c197c6["createUtilitySignatureCache()"]
  00f82a70_37cd_d9d2_64c8_29c748c197c6 -->|calls| ff3b791b_69bb_dfca_8d4b_f92bd97ab054
  3ba19013_498f_3c9b_5c44_0eb24efc4394["add()"]
  ff3b791b_69bb_dfca_8d4b_f92bd97ab054 -->|calls| 3ba19013_498f_3c9b_5c44_0eb24efc4394
  style ff3b791b_69bb_dfca_8d4b_f92bd97ab054 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
    }
  }
}