readFromCss() — tailwindcss Function Reference

Architecture documentation for the readFromCss() function in plugin-functions.ts from the tailwindcss codebase.

Function typescript OxideEngine Extractor calls 6 called by 1

Entity Profile

OxideEngine→ Extractor→ readFromCss() — tailwindcss Function Reference

Dependency Diagram

graph TD
  00a6c74c_0751_dcea_d32a_e486a30355a4["readFromCss()"]
  20b59de8_11c6_2432_2a83_24f6f6e741a7["plugin-functions.ts"]
  00a6c74c_0751_dcea_d32a_e486a30355a4 -->|defined in| 20b59de8_11c6_2432_2a83_24f6f6e741a7
  d30151e4_eee8_a868_f516_c653088f4a03["createThemeFn()"]
  d30151e4_eee8_a868_f516_c653088f4a03 -->|calls| 00a6c74c_0751_dcea_d32a_e486a30355a4
  760be792_5eb1_da6f_e22b_2c4b123c6248["get()"]
  00a6c74c_0751_dcea_d32a_e486a30355a4 -->|calls| 760be792_5eb1_da6f_e22b_2c4b123c6248
  dbf6b411_7522_4e41_ab49_f4e9c07a4751["getOptions()"]
  00a6c74c_0751_dcea_d32a_e486a30355a4 -->|calls| dbf6b411_7522_4e41_ab49_f4e9c07a4751
  ae20c4fb_29d7_ca79_3c49_ca02c45d5369["keyPathToCssProperty()"]
  00a6c74c_0751_dcea_d32a_e486a30355a4 -->|calls| ae20c4fb_29d7_ca79_3c49_ca02c45d5369
  1bd7a916_17c6_2bac_c425_cb1e63497cc9["namespace()"]
  00a6c74c_0751_dcea_d32a_e486a30355a4 -->|calls| 1bd7a916_17c6_2bac_c425_cb1e63497cc9
  6afca5f6_d5cb_1ed2_d972_255cb64bdcea["set()"]
  00a6c74c_0751_dcea_d32a_e486a30355a4 -->|calls| 6afca5f6_d5cb_1ed2_d972_255cb64bdcea
  0dfe396e_290f_02ff_5c72_321290ae550b["keys()"]
  00a6c74c_0751_dcea_d32a_e486a30355a4 -->|calls| 0dfe396e_290f_02ff_5c72_321290ae550b
  style 00a6c74c_0751_dcea_d32a_e486a30355a4 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/tailwindcss/src/compat/plugin-functions.ts lines 116–220

function readFromCss(
  theme: Theme,
  path: string[],
):
  | [value: string | null | Record<string, unknown>, options: number]
  | [value: Record<string, unknown>, options: Record<string, number>] {
  // `--color-red-500` should resolve to the theme variable directly, no look up
  // and handling of nested objects is required.
  if (path.length === 1 && path[0].startsWith('--')) {
    return [theme.get([path[0] as ThemeKey]), theme.getOptions(path[0])] as const
  }

  type ThemeValue =
    // A normal string value
    | string

    // A nested tuple with additional data
    | [main: string, extra: Record<string, string>]

  let themeKey = keyPathToCssProperty(path)

  let map = new Map<string | null, ThemeValue>()
  let nested = new DefaultMap<string | null, Map<string, [value: string, options: number]>>(
    () => new Map(),
  )

  let ns = theme.namespace(`--${themeKey}`)
  if (ns.size === 0) {
    return [null, ThemeOptions.NONE]
  }

  let options = new Map()

  for (let [key, value] of ns) {
    // Non-nested values can be set directly
    if (!key || !key.includes('--')) {
      map.set(key, value)
      options.set(key, theme.getOptions(!key ? `--${themeKey}` : `--${themeKey}-${key}`))
      continue
    }

    // Nested values are stored separately
    let nestedIndex = key.indexOf('--')

    let mainKey = key.slice(0, nestedIndex)
    let nestedKey = key.slice(nestedIndex + 2)

    // Make `nestedKey` camel case:
    nestedKey = nestedKey.replace(/-([a-z])/g, (_, a) => a.toUpperCase())

    nested
      .get(mainKey === '' ? null : mainKey)
      .set(nestedKey, [value, theme.getOptions(`--${themeKey}${key}`)])
  }

  let baseOptions = theme.getOptions(`--${themeKey}`)
  for (let [key, extra] of nested) {
    let value = map.get(key)
    if (typeof value !== 'string') continue

    let extraObj: Record<string, string> = {}
    let extraOptionsObj: Record<string, number> = {}

    for (let [nestedKey, [nestedValue, nestedOptions]] of extra) {
      extraObj[nestedKey] = nestedValue
      extraOptionsObj[nestedKey] = nestedOptions
    }

    map.set(key, [value, extraObj])
    options.set(key, [baseOptions, extraOptionsObj])
  }

  // We have to turn the map into object-like structure for v3 compatibility
  let obj: Record<string, unknown> = {}
  let optionsObj: Record<string, number> = {}

  for (let [key, value] of map) {
    set(obj, [key ?? 'DEFAULT'], value)
  }

  for (let [key, value] of options) {