resolveValueFunction() — tailwindcss Function Reference

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

Function typescript OxideEngine Extractor calls 8 called by 1

Entity Profile

OxideEngine→ Extractor→ resolveValueFunction() — tailwindcss Function Reference

Dependency Diagram

graph TD
  3df007ff_869c_dbfa_d21c_be64d5ce3eec["resolveValueFunction()"]
  2bc6f8eb_6339_d09c_79df_e9025a479c97["utilities.ts"]
  3df007ff_869c_dbfa_d21c_be64d5ce3eec -->|defined in| 2bc6f8eb_6339_d09c_79df_e9025a479c97
  75cdf0b0_3569_52fd_7186_577645fd4872["createCssUtility()"]
  75cdf0b0_3569_52fd_7186_577645fd4872 -->|calls| 3df007ff_869c_dbfa_d21c_be64d5ce3eec
  2d6c8361_96d8_df0d_ca51_c62f179fdc73["parse()"]
  3df007ff_869c_dbfa_d21c_be64d5ce3eec -->|calls| 2d6c8361_96d8_df0d_ca51_c62f179fdc73
  be813be6_4d88_f498_92f9_713a0891c048["value()"]
  3df007ff_869c_dbfa_d21c_be64d5ce3eec -->|calls| be813be6_4d88_f498_92f9_713a0891c048
  71290460_1a88_ed12_99a9_992d30e78865["resolve()"]
  3df007ff_869c_dbfa_d21c_be64d5ce3eec -->|calls| 71290460_1a88_ed12_99a9_992d30e78865
  ce5a227d_e817_af18_3503_3cfcf78ea325["resolveWith()"]
  3df007ff_869c_dbfa_d21c_be64d5ce3eec -->|calls| ce5a227d_e817_af18_3503_3cfcf78ea325
  e9f456b9_ea98_fa9b_1202_d2c13bcee0d8["inferDataType()"]
  3df007ff_869c_dbfa_d21c_be64d5ce3eec -->|calls| e9f456b9_ea98_fa9b_1202_d2c13bcee0d8
  f712ed47_45d4_4e5a_dd73_fdefa1da71da["segment()"]
  3df007ff_869c_dbfa_d21c_be64d5ce3eec -->|calls| f712ed47_45d4_4e5a_dd73_fdefa1da71da
  4e39f1e7_ebcb_7f62_4a59_b645e71d50fd["isPositiveInteger()"]
  3df007ff_869c_dbfa_d21c_be64d5ce3eec -->|calls| 4e39f1e7_ebcb_7f62_4a59_b645e71d50fd
  a15b3c4a_76ff_0090_fc86_bac24f0a4135["isValidSpacingMultiplier()"]
  3df007ff_869c_dbfa_d21c_be64d5ce3eec -->|calls| a15b3c4a_76ff_0090_fc86_bac24f0a4135
  style 3df007ff_869c_dbfa_d21c_be64d5ce3eec 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
      }