namespace() — tailwindcss Function Reference

Architecture documentation for the namespace() function in theme.ts from the tailwindcss codebase.

Function typescript Oxide PreProcessors called by 2

Entity Profile

Oxide→ PreProcessors→ namespace() — tailwindcss Function Reference

Dependency Diagram

graph TD
  c7866e06_1e4e_0568_c3b7_9934e976548a["namespace()"]
  e7a2e966_188e_28f5_d9d6_e54e27e0d0f2["Theme"]
  c7866e06_1e4e_0568_c3b7_9934e976548a -->|defined in| e7a2e966_188e_28f5_d9d6_e54e27e0d0f2
  bdec5541_c088_b3c7_4457_73a4592c6631["readFromCss()"]
  bdec5541_c088_b3c7_4457_73a4592c6631 -->|calls| c7866e06_1e4e_0568_c3b7_9934e976548a
  876035d0_94a8_cf2f_314a_d520aaae6e4b["createVariants()"]
  876035d0_94a8_cf2f_314a_d520aaae6e4b -->|calls| c7866e06_1e4e_0568_c3b7_9934e976548a
  style c7866e06_1e4e_0568_c3b7_9934e976548a fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/tailwindcss/src/theme.ts lines 276–293

  namespace(namespace: string) {
    let values = new Map<string | null, string>()
    let prefix = `${namespace}-`

    for (let [key, value] of this.values) {
      if (key === namespace) {
        values.set(null, value.value)
      } else if (key.startsWith(`${prefix}-`)) {
        // Preserve `--` prefix for sub-variables
        // e.g. `--font-size-sm--line-height`
        values.set(key.slice(namespace.length), value.value)
      } else if (key.startsWith(prefix)) {
        values.set(key.slice(prefix.length), value.value)
      }
    }

    return values
  }