tailwindcss Architecture Docs
Home / File/ theme.ts — tailwindcss Source File

theme.ts — tailwindcss Source File

Architecture documentation for theme.ts, a typescript file in the tailwindcss codebase. 4 imports, 19 dependents.

File typescript OxideEngine Scanner 4 imports 19 dependents 1 functions 1 classes

Entity Profile

Dependency Diagram

graph LR
  80295787_127f_69e6_91b3_4bea3a484544["theme.ts"]
  42640952_ea63_55f1_1ff1_00816e2980ae["ast.ts"]
  80295787_127f_69e6_91b3_4bea3a484544 --> 42640952_ea63_55f1_1ff1_00816e2980ae
  e28f6b6c_be9a_6950_8075_180c1b66f0ea["escape.ts"]
  80295787_127f_69e6_91b3_4bea3a484544 --> e28f6b6c_be9a_6950_8075_180c1b66f0ea
  433dc479_0296_0a89_fd12_79fc4ea2b8bd["escape"]
  80295787_127f_69e6_91b3_4bea3a484544 --> 433dc479_0296_0a89_fd12_79fc4ea2b8bd
  dfc91ad5_bcf3_d363_efd7_01a5223f7b74["unescape"]
  80295787_127f_69e6_91b3_4bea3a484544 --> dfc91ad5_bcf3_d363_efd7_01a5223f7b74
  e1775747_ac0a_9408_d4ff_3677e8085ed9["ast.test.ts"]
  e1775747_ac0a_9408_d4ff_3677e8085ed9 --> 80295787_127f_69e6_91b3_4bea3a484544
  42640952_ea63_55f1_1ff1_00816e2980ae["ast.ts"]
  42640952_ea63_55f1_1ff1_00816e2980ae --> 80295787_127f_69e6_91b3_4bea3a484544
  41ad7065_a22a_6fa4_2918_dd0363176574["candidate.bench.ts"]
  41ad7065_a22a_6fa4_2918_dd0363176574 --> 80295787_127f_69e6_91b3_4bea3a484544
  48bf53e3_51d1_ff10_48bb_0da6cdf73c69["candidate.test.ts"]
  48bf53e3_51d1_ff10_48bb_0da6cdf73c69 --> 80295787_127f_69e6_91b3_4bea3a484544
  7d350d81_5de1_f9f3_5b2c_19ec8fd3c37e["canonicalize-candidates.ts"]
  7d350d81_5de1_f9f3_5b2c_19ec8fd3c37e --> 80295787_127f_69e6_91b3_4bea3a484544
  15f6e0f9_47e6_d527_cc67_b512886528af["apply-config-to-theme.test.ts"]
  15f6e0f9_47e6_d527_cc67_b512886528af --> 80295787_127f_69e6_91b3_4bea3a484544
  245c850a_c551_a2cf_854e_bba95b5a1339["apply-config-to-theme.ts"]
  245c850a_c551_a2cf_854e_bba95b5a1339 --> 80295787_127f_69e6_91b3_4bea3a484544
  5db58d87_3ee6_4def_7cfe_374d0849ecb5["apply-keyframes-to-theme.test.ts"]
  5db58d87_3ee6_4def_7cfe_374d0849ecb5 --> 80295787_127f_69e6_91b3_4bea3a484544
  834afcdc_4770_404f_cd35_c37419fcda33["create-compat-config.ts"]
  834afcdc_4770_404f_cd35_c37419fcda33 --> 80295787_127f_69e6_91b3_4bea3a484544
  c3ba3507_ecf6_1cd3_ca8b_28c9363824b8["resolve-config.test.ts"]
  c3ba3507_ecf6_1cd3_ca8b_28c9363824b8 --> 80295787_127f_69e6_91b3_4bea3a484544
  7ea5d6e8_c93c_0fe9_ee45_7db80046a7c5["flatten-color-palette.ts"]
  7ea5d6e8_c93c_0fe9_ee45_7db80046a7c5 --> 80295787_127f_69e6_91b3_4bea3a484544
  style 80295787_127f_69e6_91b3_4bea3a484544 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import { type AtRule, type Declaration } from './ast'
import { escape, unescape } from './utils/escape'

export const enum ThemeOptions {
  NONE = 0,
  INLINE = 1 << 0,
  REFERENCE = 1 << 1,
  DEFAULT = 1 << 2,

  STATIC = 1 << 3,
  USED = 1 << 4,
}

// In the future we may want to replace this with just a `Set` of known theme
// keys and let the computer sort out which keys should ignored which other keys
// based on overlapping prefixes.
const ignoredThemeKeyMap = new Map([
  ['--font', ['--font-weight', '--font-size']],
  ['--inset', ['--inset-shadow', '--inset-ring']],
  [
    '--text',
    [
      '--text-color',
      '--text-decoration-color',
      '--text-decoration-thickness',
      '--text-indent',
      '--text-shadow',
      '--text-underline-offset',
    ],
  ],
  ['--grid-column', ['--grid-column-start', '--grid-column-end']],
  ['--grid-row', ['--grid-row-start', '--grid-row-end']],
])

function isIgnoredThemeKey(themeKey: ThemeKey, namespace: ThemeKey) {
  return (ignoredThemeKeyMap.get(namespace) ?? []).some(
    (ignoredThemeKey) => themeKey === ignoredThemeKey || themeKey.startsWith(`${ignoredThemeKey}-`),
  )
}

export class Theme {
  public prefix: string | null = null

  constructor(
    private values = new Map<
      string,
      {
        value: string
        options: ThemeOptions
        src: Declaration['src']
      }
    >(),
    private keyframes = new Set<AtRule>([]),
  ) {}

  get size() {
    return this.values.size
  }

  add(key: string, value: string, options = ThemeOptions.NONE, src?: Declaration['src']): void {
// ... (245 more lines)

Domain

Subdomains

Functions

Classes

Types

Dependencies

Imported By

Source

Frequently Asked Questions

What does theme.ts do?
theme.ts is a source file in the tailwindcss codebase, written in typescript. It belongs to the OxideEngine domain, Scanner subdomain.
What functions are defined in theme.ts?
theme.ts defines 1 function(s): isIgnoredThemeKey.
What does theme.ts depend on?
theme.ts imports 4 module(s): ast.ts, escape, escape.ts, unescape.
What files import theme.ts?
theme.ts is imported by 19 file(s): apply-config-to-theme.test.ts, apply-config-to-theme.ts, apply-keyframes-to-theme.test.ts, ast.test.ts, ast.ts, candidate.bench.ts, candidate.test.ts, canonicalize-candidates.ts, and 11 more.
Where is theme.ts in the architecture?
theme.ts is located at packages/tailwindcss/src/theme.ts (domain: OxideEngine, subdomain: Scanner, directory: packages/tailwindcss/src).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free