resolveValueFunction() — tailwindcss Function Reference

Architecture documentation for the resolveValueFunction() function in utilities.ts from the tailwindcss codebase.

Function typescript Oxide Scanner calls 8 called by 1

Entity Profile

Oxide→ Scanner→ resolveValueFunction() — tailwindcss Function Reference

Dependency Diagram

graph TD
  b1961b55_1394_8973_5694_152fd6b3140a["resolveValueFunction()"]
  ffde8eb7_7def_91ee_918c_be4f250f76a2["utilities.ts"]
  b1961b55_1394_8973_5694_152fd6b3140a -->|defined in| ffde8eb7_7def_91ee_918c_be4f250f76a2
  1b775438_02d9_5178_6806_405c3c0b5328["createCssUtility()"]
  1b775438_02d9_5178_6806_405c3c0b5328 -->|calls| b1961b55_1394_8973_5694_152fd6b3140a
  49a8c506_c50e_ed4b_5a0e_0393edae2b6f["parse()"]
  b1961b55_1394_8973_5694_152fd6b3140a -->|calls| 49a8c506_c50e_ed4b_5a0e_0393edae2b6f
  f359e052_6bcd_b19f_188c_5faf6e0d8021["value()"]
  b1961b55_1394_8973_5694_152fd6b3140a -->|calls| f359e052_6bcd_b19f_188c_5faf6e0d8021
  08526c9b_2b40_0b09_3dbc_69449eef6643["resolve()"]
  b1961b55_1394_8973_5694_152fd6b3140a -->|calls| 08526c9b_2b40_0b09_3dbc_69449eef6643
  4e726f50_1e91_dbf7_ae25_7c2d717736b7["resolveWith()"]
  b1961b55_1394_8973_5694_152fd6b3140a -->|calls| 4e726f50_1e91_dbf7_ae25_7c2d717736b7
  6f422594_e782_07e7_7b41_29a3f93e32b9["inferDataType()"]
  b1961b55_1394_8973_5694_152fd6b3140a -->|calls| 6f422594_e782_07e7_7b41_29a3f93e32b9
  c58cbb33_f3cc_0b4f_844a_15bf66a1dc61["segment()"]
  b1961b55_1394_8973_5694_152fd6b3140a -->|calls| c58cbb33_f3cc_0b4f_844a_15bf66a1dc61
  2b202e81_c79a_bf7e_74f9_fe9a98bbea87["isPositiveInteger()"]
  b1961b55_1394_8973_5694_152fd6b3140a -->|calls| 2b202e81_c79a_bf7e_74f9_fe9a98bbea87
  09df19e7_0346_145d_40c4_e93ff14a2ff9["isValidSpacingMultiplier()"]
  b1961b55_1394_8973_5694_152fd6b3140a -->|calls| 09df19e7_0346_145d_40c4_e93ff14a2ff9
  style b1961b55_1394_8973_5694_152fd6b3140a fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/tailwindcss/src/utilities.ts lines 6303–6445

function resolveValueFunction(
  value: NonNullable<
    | Extract<Candidate, { kind: 'functional' }>['value']
    | Extract<Candidate, { kind: 'functional' }>['modifier']
  >,
  fn: ValueParser.ValueFunctionNode,
  designSystem: DesignSystem,
): { nodes: ValueParser.ValueAstNode[]; ratio?: boolean } | undefined {
  for (let arg of fn.nodes) {
    // Resolve literal value, e.g.: `--modifier('closest-side')`
    if (
      value.kind === 'named' &&
      arg.kind === 'word' &&
      // Should be wreapped in quotes
      (arg.value[0] === "'" || arg.value[0] === '"') &&
      arg.value[arg.value.length - 1] === arg.value[0] &&
      // Values should match
      arg.value.slice(1, -1) === value.value
    ) {
      return { nodes: ValueParser.parse(value.value) }
    }

    // Resolving theme value, e.g.: `--value(--color)`
    else if (
      value.kind === 'named' &&
      arg.kind === 'word' &&
      arg.value[0] === '-' &&
      arg.value[1] === '-'
    ) {
      let themeKey = arg.value as `--${string}`

      // Resolve the theme value, e.g.: `--value(--color)`
      if (themeKey.endsWith('-*')) {
        // Without `-*` postfix
        themeKey = themeKey.slice(0, -2) as `--${string}`

        let resolved = designSystem.theme.resolve(value.value, [themeKey])
        if (resolved) return { nodes: ValueParser.parse(resolved) }
      }

      // Split `--text-*--line-height` into `--text` and `--line-height`
      else {
        let nestedKeys = themeKey.split('-*') as `--${string}`[]
        if (nestedKeys.length <= 1) continue

        // Resolve theme values with nested keys, e.g.: `--value(--text-*--line-height)`
        let themeKeys = [nestedKeys.shift()!]
        let resolved = designSystem.theme.resolveWith(value.value, themeKeys, nestedKeys)
        if (resolved) {
          let [, options = {}] = resolved

          // Resolve the value from the `options`
          {
            let resolved = options[nestedKeys.pop()!]
            if (resolved) return { nodes: ValueParser.parse(resolved) }
          }
        }
      }
    }

    // Bare value, e.g.: `--value(integer)`
    else if (value.kind === 'named' && arg.kind === 'word') {
      // Limit the bare value types, to prevent new syntax that we
      // don't want to support. E.g.: `text-#000` is something we
      // don't want to support, but could be built this way.
      if (!BARE_VALUE_DATA_TYPES.includes(arg.value)) {
        continue
      }

      let resolved = arg.value === 'ratio' && 'fraction' in value ? value.fraction : value.value
      if (!resolved) continue

      let type = inferDataType(resolved, [arg.value as any])
      if (type === null) continue

      // Ratio must be a valid fraction, e.g.: <integer>/<integer>
      if (type === 'ratio') {
        let [lhs, rhs] = segment(resolved, '/').map(Number)
        if (!isPositiveInteger(lhs) || !isPositiveInteger(rhs)) continue
      }