Home / Function/ parse() — tailwindcss Function Reference

parse() — tailwindcss Function Reference

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

Entity Profile

Dependency Diagram

graph TD
  42cc068a_55e9_a05d_7ba4_ce2742661765["parse()"]
  8f1d0c03_e255_b7cc_896f_c8432ac0535a["selector-parser.ts"]
  42cc068a_55e9_a05d_7ba4_ce2742661765 -->|defined in| 8f1d0c03_e255_b7cc_896f_c8432ac0535a
  480ed885_b811_7ff5_c9fc_c17b9da8d505["selector()"]
  42cc068a_55e9_a05d_7ba4_ce2742661765 -->|calls| 480ed885_b811_7ff5_c9fc_c17b9da8d505
  afd70949_775a_7a29_c758_12e7675ada46["separator()"]
  42cc068a_55e9_a05d_7ba4_ce2742661765 -->|calls| afd70949_775a_7a29_c758_12e7675ada46
  d9cd1d03_8214_9c7d_59b0_c2a74253dec8["combinator()"]
  42cc068a_55e9_a05d_7ba4_ce2742661765 -->|calls| d9cd1d03_8214_9c7d_59b0_c2a74253dec8
  54318b08_8820_ad6d_7285_79f9fc1da09f["fun()"]
  42cc068a_55e9_a05d_7ba4_ce2742661765 -->|calls| 54318b08_8820_ad6d_7285_79f9fc1da09f
  c257a1e5_c647_5382_3398_6423af5f2c65["value()"]
  42cc068a_55e9_a05d_7ba4_ce2742661765 -->|calls| c257a1e5_c647_5382_3398_6423af5f2c65
  style 42cc068a_55e9_a05d_7ba4_ce2742661765 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)
      //         ^

Domain

Subdomains

Frequently Asked Questions

What does parse() do?
parse() is a function in the tailwindcss codebase, defined in packages/tailwindcss/src/selector-parser.ts.
Where is parse() defined?
parse() is defined in packages/tailwindcss/src/selector-parser.ts at line 109.
What does parse() call?
parse() calls 5 function(s): combinator, fun, selector, separator, value.

Analyze Your Own Codebase

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

Try Supermodel Free