Home / Function/ parse() — tailwindcss Function Reference

parse() — tailwindcss Function Reference

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

Entity Profile

Dependency Diagram

graph TD
  b9517e77_a36f_4751_899c_27d813f3dbb3["parse()"]
  73e07df9_b6bc_e7d7_b7c1_3151a7ee5c27["attribute-selector-parser.ts"]
  b9517e77_a36f_4751_899c_27d813f3dbb3 -->|defined in| 73e07df9_b6bc_e7d7_b7c1_3151a7ee5c27
  77acef4a_feff_6e9f_7c6b_2b6942c9ad63["createConverterCache()"]
  77acef4a_feff_6e9f_7c6b_2b6942c9ad63 -->|calls| b9517e77_a36f_4751_899c_27d813f3dbb3
  80648867_f6ce_78f3_6e5a_59822ca19561["substituteFunctionsInValue()"]
  80648867_f6ce_78f3_6e5a_59822ca19561 -->|calls| b9517e77_a36f_4751_899c_27d813f3dbb3
  ae4aae64_c516_49b5_ec89_bc7918645ee4["allVariablesAreUsed()"]
  ae4aae64_c516_49b5_ec89_bc7918645ee4 -->|calls| b9517e77_a36f_4751_899c_27d813f3dbb3
  8097972e_4628_663f_72e8_08883183690d["modernizeArbitraryValuesVariant()"]
  8097972e_4628_663f_72e8_08883183690d -->|calls| b9517e77_a36f_4751_899c_27d813f3dbb3
  d7ab7b92_b8e0_123d_80fe_77ddad589042["resolveVariablesInValue()"]
  d7ab7b92_b8e0_123d_80fe_77ddad589042 -->|calls| b9517e77_a36f_4751_899c_27d813f3dbb3
  5db4b61f_a5d4_16b1_b2ec_707bde46324a["createVariantSignatureCache()"]
  5db4b61f_a5d4_16b1_b2ec_707bde46324a -->|calls| b9517e77_a36f_4751_899c_27d813f3dbb3
  a1ddaa6d_54da_4d64_795f_32d3bae41556["isAsciiWhitespace()"]
  b9517e77_a36f_4751_899c_27d813f3dbb3 -->|calls| a1ddaa6d_54da_4d64_795f_32d3bae41556
  style b9517e77_a36f_4751_899c_27d813f3dbb3 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/tailwindcss/src/attribute-selector-parser.ts lines 35–216

export function parse(input: string): AttributeSelector | null {
  // Must start with `[` and end with `]`
  if (input[0] !== '[' || input[input.length - 1] !== ']') {
    return null
  }

  let i = 1
  let start = i
  let end = input.length - 1

  // Skip whitespace, e.g.: [   data-foo]
  //                         ^^^
  while (isAsciiWhitespace(input.charCodeAt(i))) i++

  // Attribute name, e.g.: [data-foo]
  //                        ^^^^^^^^
  {
    start = i
    for (; i < end; i++) {
      let currentChar = input.charCodeAt(i)
      // Skip escaped character
      if (currentChar === BACKSLASH) {
        i++
        continue
      }
      if (currentChar >= UPPER_A && currentChar <= UPPER_Z) continue
      if (currentChar >= LOWER_A && currentChar <= LOWER_Z) continue
      if (currentChar >= ZERO && currentChar <= NINE) continue
      if (currentChar === DASH || currentChar === UNDERSCORE) continue
      break
    }

    // Must have at least one character in the attribute name
    if (start === i) {
      return null
    }
  }
  let attribute = input.slice(start, i)

  // Skip whitespace, e.g.: [data-foo   =value]
  //                                 ^^^
  while (isAsciiWhitespace(input.charCodeAt(i))) i++

  // At the end, e.g.: `[data-foo]`
  if (i === end) {
    return {
      attribute,
      operator: null,
      quote: null,
      value: null,
      sensitivity: null,
    }
  }

  // Operator, e.g.: [data-foo*=value]
  //                          ^^
  let operator = null
  let currentChar = input.charCodeAt(i)
  if (currentChar === EQUALS) {
    operator = '='
    i++
  } else if (
    (currentChar === TILDE ||
      currentChar === PIPE ||
      currentChar === CARET ||
      currentChar === DOLLAR ||
      currentChar === ASTERISK) &&
    input.charCodeAt(i + 1) === EQUALS
  ) {
    operator = input[i] + '='
    i += 2
  } else {
    return null // Invalid operator
  }

  // Skip whitespace, e.g.: [data-foo*=   value]
  //                                   ^^^
  while (isAsciiWhitespace(input.charCodeAt(i))) i++

  // At the end, that means that we have an operator but no valid, which is
  // invalid, e.g.: `[data-foo*=]`

Domain

Subdomains

Frequently Asked Questions

What does parse() do?
parse() is a function in the tailwindcss codebase, defined in packages/tailwindcss/src/attribute-selector-parser.ts.
Where is parse() defined?
parse() is defined in packages/tailwindcss/src/attribute-selector-parser.ts at line 35.
What does parse() call?
parse() calls 1 function(s): isAsciiWhitespace.
What calls parse()?
parse() is called by 6 function(s): allVariablesAreUsed, createConverterCache, createVariantSignatureCache, modernizeArbitraryValuesVariant, resolveVariablesInValue, substituteFunctionsInValue.

Analyze Your Own Codebase

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

Try Supermodel Free