tailwindcss Architecture Docs
Home / Function/ parse() — tailwindcss Function Reference

parse() — tailwindcss Function Reference

Architecture documentation for the parse() function in value-parser.ts from the tailwindcss codebase.

Function typescript Oxide Extractor calls 3 called by 17

Entity Profile

Dependency Diagram

graph TD
  49a8c506_c50e_ed4b_5a0e_0393edae2b6f["parse()"]
  d9175aea_5971_a6c1_773d_004ce3789372["value-parser.ts"]
  49a8c506_c50e_ed4b_5a0e_0393edae2b6f -->|defined in| d9175aea_5971_a6c1_773d_004ce3789372
  253815a9_405f_ff30_32b6_577fe2d91fb2["migrateTheme()"]
  253815a9_405f_ff30_32b6_577fe2d91fb2 -->|calls| 49a8c506_c50e_ed4b_5a0e_0393edae2b6f
  3c115506_d301_3ffd_6d4a_a58dbd7aaed5["migrateImport()"]
  3c115506_d301_3ffd_6d4a_a58dbd7aaed5 -->|calls| 49a8c506_c50e_ed4b_5a0e_0393edae2b6f
  0838eb2e_5580_246c_b5a8_b68fb91edccc["migratePreflight()"]
  0838eb2e_5580_246c_b5a8_b68fb91edccc -->|calls| 49a8c506_c50e_ed4b_5a0e_0393edae2b6f
  07598cf4_0f8c_95f8_901c_b2052b7d14f6["substituteFunctionsInValue()"]
  07598cf4_0f8c_95f8_901c_b2052b7d14f6 -->|calls| 49a8c506_c50e_ed4b_5a0e_0393edae2b6f
  0f7313a5_adb3_4061_aabb_d87ca01352a1["injectVar()"]
  0f7313a5_adb3_4061_aabb_d87ca01352a1 -->|calls| 49a8c506_c50e_ed4b_5a0e_0393edae2b6f
  f1c7fb37_4a69_f6f5_b7f4_9f3d8b534c40["createConverter()"]
  f1c7fb37_4a69_f6f5_b7f4_9f3d8b534c40 -->|calls| 49a8c506_c50e_ed4b_5a0e_0393edae2b6f
  91c97086_ce94_1ef6_775d_f4471bc2ca0e["substituteFunctionsInValue()"]
  91c97086_ce94_1ef6_775d_f4471bc2ca0e -->|calls| 49a8c506_c50e_ed4b_5a0e_0393edae2b6f
  fa7106d0_b629_ab06_9635_b04e9e0c20f0["printArbitraryValueCache()"]
  fa7106d0_b629_ab06_9635_b04e9e0c20f0 -->|calls| 49a8c506_c50e_ed4b_5a0e_0393edae2b6f
  ecaa7071_cd5c_d234_37d2_aeb48f44454e["simplifyArbitraryVariantCache()"]
  ecaa7071_cd5c_d234_37d2_aeb48f44454e -->|calls| 49a8c506_c50e_ed4b_5a0e_0393edae2b6f
  3ce8cfdb_f0c9_d1f2_c8ab_9ebeb385544e["isVarCache()"]
  3ce8cfdb_f0c9_d1f2_c8ab_9ebeb385544e -->|calls| 49a8c506_c50e_ed4b_5a0e_0393edae2b6f
  f875e425_9644_1071_3601_45e7c7f789d3["constantFoldDeclaration()"]
  f875e425_9644_1071_3601_45e7c7f789d3 -->|calls| 49a8c506_c50e_ed4b_5a0e_0393edae2b6f
  afa623bf_4f68_b25f_8bd7_1d00a4fcfe48["theme()"]
  afa623bf_4f68_b25f_8bd7_1d00a4fcfe48 -->|calls| 49a8c506_c50e_ed4b_5a0e_0393edae2b6f
  3c4ab5c3_3962_aeae_cc7c_5edb9e72bc85["substituteFunctionsInValue()"]
  3c4ab5c3_3962_aeae_cc7c_5edb9e72bc85 -->|calls| 49a8c506_c50e_ed4b_5a0e_0393edae2b6f
  style 49a8c506_c50e_ed4b_5a0e_0393edae2b6f fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/tailwindcss/src/value-parser.ts lines 73–279

export function parse(input: string) {
  input = input.replaceAll('\r\n', '\n')

  let ast: ValueAstNode[] = []

  let stack: (ValueFunctionNode | null)[] = []

  let parent = null as ValueFunctionNode | null

  let buffer = ''

  let peekChar

  for (let i = 0; i < input.length; i++) {
    let currentChar = input.charCodeAt(i)

    switch (currentChar) {
      // Current character is a `\` therefore the next character is escaped,
      // consume it together with the next character and continue.
      case BACKSLASH: {
        buffer += input[i] + input[i + 1]
        i++
        break
      }

      // Typically for math operators, they have to have spaces around them. But
      // there are situations in `theme(colors.red.500/10)` where we use `/`
      // without spaces. Let's make sure this is a separate word as well.
      case SLASH: {
        // 1. Handle everything before the separator as a word
        // Handle everything before the closing paren as a word
        if (buffer.length > 0) {
          let node = word(buffer)
          if (parent) {
            parent.nodes.push(node)
          } else {
            ast.push(node)
          }
          buffer = ''
        }

        // 2. Track the `/` as a word on its own
        let node = word(input[i])
        if (parent) {
          parent.nodes.push(node)
        } else {
          ast.push(node)
        }

        break
      }

      // Space and commas are bundled into separators
      //
      // E.g.:
      //
      // ```css
      // foo(bar, baz)
      //        ^^
      // ```
      case COLON:
      case COMMA:
      case EQUALS:
      case GREATER_THAN:
      case LESS_THAN:
      case NEWLINE:
      case SPACE:
      case TAB: {
        // 1. Handle everything before the separator as a word
        // Handle everything before the closing paren as a word
        if (buffer.length > 0) {
          let node = word(buffer)
          if (parent) {
            parent.nodes.push(node)
          } else {
            ast.push(node)
          }
          buffer = ''
        }

        // 2. Look ahead and find the end of the separator

Domain

Subdomains

Defined In

Calls

Called By

Source

Frequently Asked Questions

What does parse() do?
parse() is a function in the tailwindcss codebase, defined in packages/tailwindcss/src/value-parser.ts.
Where is parse() defined?
parse() is defined in packages/tailwindcss/src/value-parser.ts at line 73.
What does parse() call?
parse() calls 3 function(s): fun, separator, word.
What calls parse()?
parse() is called by 17 function(s): constantFoldDeclaration, createConverter, createCssUtility, decodeArbitraryValue, extractUsedVariables, injectVar, isVarCache, migrateImport, and 9 more.

Analyze Your Own Codebase

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

Try Supermodel Free