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
Defined In
Source
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