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 UpgradeToolkit Codemods calls 3 called by 17

Entity Profile

Dependency Diagram

graph TD
  2d6c8361_96d8_df0d_ca51_c62f179fdc73["parse()"]
  1d3f1613_f144_938f_08f7_49039a46ad49["value-parser.ts"]
  2d6c8361_96d8_df0d_ca51_c62f179fdc73 -->|defined in| 1d3f1613_f144_938f_08f7_49039a46ad49
  e26bfad3_530e_6523_7463_161205321110["migrateTheme()"]
  e26bfad3_530e_6523_7463_161205321110 -->|calls| 2d6c8361_96d8_df0d_ca51_c62f179fdc73
  d0429f7e_c0b8_e2df_15f9_96e807ee2d3a["migrateImport()"]
  d0429f7e_c0b8_e2df_15f9_96e807ee2d3a -->|calls| 2d6c8361_96d8_df0d_ca51_c62f179fdc73
  904b969f_df9e_eb9f_fedd_18eea0cfe028["migratePreflight()"]
  904b969f_df9e_eb9f_fedd_18eea0cfe028 -->|calls| 2d6c8361_96d8_df0d_ca51_c62f179fdc73
  ef07d6e3_0c3a_4722_5511_8d4759b3f570["substituteFunctionsInValue()"]
  ef07d6e3_0c3a_4722_5511_8d4759b3f570 -->|calls| 2d6c8361_96d8_df0d_ca51_c62f179fdc73
  343db49c_7d28_8ddb_aab2_f4cb835639a7["injectVar()"]
  343db49c_7d28_8ddb_aab2_f4cb835639a7 -->|calls| 2d6c8361_96d8_df0d_ca51_c62f179fdc73
  dc9585e4_0c18_e5de_1302_9b707f3ab6ed["createConverter()"]
  dc9585e4_0c18_e5de_1302_9b707f3ab6ed -->|calls| 2d6c8361_96d8_df0d_ca51_c62f179fdc73
  3c91d7fd_a929_4393_fc7e_e8d30dedc179["substituteFunctionsInValue()"]
  3c91d7fd_a929_4393_fc7e_e8d30dedc179 -->|calls| 2d6c8361_96d8_df0d_ca51_c62f179fdc73
  f9a17feb_4681_8aa1_f2b8_21e3641747be["printArbitraryValueCache()"]
  f9a17feb_4681_8aa1_f2b8_21e3641747be -->|calls| 2d6c8361_96d8_df0d_ca51_c62f179fdc73
  1292c198_0f78_7986_6bab_1db0d75c2a12["simplifyArbitraryVariantCache()"]
  1292c198_0f78_7986_6bab_1db0d75c2a12 -->|calls| 2d6c8361_96d8_df0d_ca51_c62f179fdc73
  de903dbd_53b9_4289_41c7_f25e881687c6["isVarCache()"]
  de903dbd_53b9_4289_41c7_f25e881687c6 -->|calls| 2d6c8361_96d8_df0d_ca51_c62f179fdc73
  9ab273b1_6701_5494_7f88_e2e72f74ddf7["constantFoldDeclaration()"]
  9ab273b1_6701_5494_7f88_e2e72f74ddf7 -->|calls| 2d6c8361_96d8_df0d_ca51_c62f179fdc73
  a14450c0_b6d2_d918_cff3_c3396641b12d["theme()"]
  a14450c0_b6d2_d918_cff3_c3396641b12d -->|calls| 2d6c8361_96d8_df0d_ca51_c62f179fdc73
  26722ca1_f17b_fc55_26cf_d5385e7dcf3e["substituteFunctionsInValue()"]
  26722ca1_f17b_fc55_26cf_d5385e7dcf3e -->|calls| 2d6c8361_96d8_df0d_ca51_c62f179fdc73
  style 2d6c8361_96d8_df0d_ca51_c62f179fdc73 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