parse() — tailwindcss Function Reference

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

Function typescript Oxide Extractor calls 5

Entity Profile

Oxide→ Extractor→ parse() — tailwindcss Function Reference

Dependency Diagram

graph TD
  de3fcfd2_5ef8_b401_5628_afca528d4073["parse()"]
  44cf1398_18e8_9bac_e42c_f3766b1fa98f["selector-parser.ts"]
  de3fcfd2_5ef8_b401_5628_afca528d4073 -->|defined in| 44cf1398_18e8_9bac_e42c_f3766b1fa98f
  ac5460b2_b2bd_a183_380b_ab78b5beefb4["selector()"]
  de3fcfd2_5ef8_b401_5628_afca528d4073 -->|calls| ac5460b2_b2bd_a183_380b_ab78b5beefb4
  a6b53ebf_7105_85b3_18b7_83b10e071caf["separator()"]
  de3fcfd2_5ef8_b401_5628_afca528d4073 -->|calls| a6b53ebf_7105_85b3_18b7_83b10e071caf
  4a3dc37d_cf54_a6b1_ef1d_ab3c2ab6e852["combinator()"]
  de3fcfd2_5ef8_b401_5628_afca528d4073 -->|calls| 4a3dc37d_cf54_a6b1_ef1d_ab3c2ab6e852
  d22c124a_2f65_a006_26fc_7c6eeb28d777["fun()"]
  de3fcfd2_5ef8_b401_5628_afca528d4073 -->|calls| d22c124a_2f65_a006_26fc_7c6eeb28d777
  7c5dd759_78f4_a2c1_c183_6822af0137d4["value()"]
  de3fcfd2_5ef8_b401_5628_afca528d4073 -->|calls| 7c5dd759_78f4_a2c1_c183_6822af0137d4
  style de3fcfd2_5ef8_b401_5628_afca528d4073 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/tailwindcss/src/selector-parser.ts lines 109–421

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

  let ast: SelectorAstNode[] = []

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

  let parent = null as SelectorFunctionNode | null

  let buffer = ''

  let peekChar

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

    switch (currentChar) {
      // E.g.:
      //
      // ```css
      // .foo .bar
      //     ^
      //
      // .foo > .bar
      //     ^^^
      // ```
      case COMMA:
      case GREATER_THAN:
      case NEWLINE:
      case SPACE:
      case PLUS:
      case TAB:
      case TILDE: {
        // 1. Handle everything before the combinator as a selector
        if (buffer.length > 0) {
          let node = selector(buffer)
          if (parent) {
            parent.nodes.push(node)
          } else {
            ast.push(node)
          }
          buffer = ''
        }

        // 2. Look ahead and find the end of the combinator
        let start = i
        let end = i + 1
        for (; end < input.length; end++) {
          peekChar = input.charCodeAt(end)
          if (
            peekChar !== COMMA &&
            peekChar !== GREATER_THAN &&
            peekChar !== NEWLINE &&
            peekChar !== SPACE &&
            peekChar !== PLUS &&
            peekChar !== TAB &&
            peekChar !== TILDE
          ) {
            break
          }
        }
        i = end - 1

        let contents = input.slice(start, end)
        let node = contents.trim() === ',' ? separator(contents) : combinator(contents)
        if (parent) {
          parent.nodes.push(node)
        } else {
          ast.push(node)
        }

        break
      }

      // Start of a function call.
      //
      // E.g.:
      //
      // ```css
      // .foo:not(.bar)
      //         ^