constantFoldDeclaration() — tailwindcss Function Reference
Architecture documentation for the constantFoldDeclaration() function in constant-fold-declaration.ts from the tailwindcss codebase.
Entity Profile
Dependency Diagram
graph TD 9ab273b1_6701_5494_7f88_e2e72f74ddf7["constantFoldDeclaration()"] b567fa55_8905_40fc_b0c8_f7b1041653f6["constant-fold-declaration.ts"] 9ab273b1_6701_5494_7f88_e2e72f74ddf7 -->|defined in| b567fa55_8905_40fc_b0c8_f7b1041653f6 6f581ee0_818b_dbd1_5d05_0b64a3da62bd["createSpacingCache()"] 6f581ee0_818b_dbd1_5d05_0b64a3da62bd -->|calls| 9ab273b1_6701_5494_7f88_e2e72f74ddf7 b634c4e7_2242_e72b_2b52_bbbae37fc41b["canonicalizeAst()"] b634c4e7_2242_e72b_2b52_bbbae37fc41b -->|calls| 9ab273b1_6701_5494_7f88_e2e72f74ddf7 2d6c8361_96d8_df0d_ca51_c62f179fdc73["parse()"] 9ab273b1_6701_5494_7f88_e2e72f74ddf7 -->|calls| 2d6c8361_96d8_df0d_ca51_c62f179fdc73 ed78da58_8727_ad98_120c_61f35cea357a["walk()"] 9ab273b1_6701_5494_7f88_e2e72f74ddf7 -->|calls| ed78da58_8727_ad98_120c_61f35cea357a 8da43da0_6459_abf1_120f_6b4af193f3cf["canonicalizeDimension()"] 9ab273b1_6701_5494_7f88_e2e72f74ddf7 -->|calls| 8da43da0_6459_abf1_120f_6b4af193f3cf 5f0dbabe_cc7a_4db8_5589_a25d16f17de4["word()"] 9ab273b1_6701_5494_7f88_e2e72f74ddf7 -->|calls| 5f0dbabe_cc7a_4db8_5589_a25d16f17de4 e79308d2_473f_b6d6_3b04_e4e55c2708d3["toCss()"] 9ab273b1_6701_5494_7f88_e2e72f74ddf7 -->|calls| e79308d2_473f_b6d6_3b04_e4e55c2708d3 style 9ab273b1_6701_5494_7f88_e2e72f74ddf7 fill:#6366f1,stroke:#818cf8,color:#fff
Relationship Graph
Source Code
packages/tailwindcss/src/constant-fold-declaration.ts lines 8–115
export function constantFoldDeclaration(input: string, rem: number | null = null): string {
let folded = false
let valueAst = ValueParser.parse(input)
walk(valueAst, {
exit(valueNode) {
// Canonicalize dimensions to their simplest form. This includes:
// - Convert `-0`, `+0`, `0.0`, … to `0`
// - Convert `-0px`, `+0em`, `0.0rem`, … to `0`
// - Convert units to an equivalent unit
if (
valueNode.kind === 'word' &&
valueNode.value !== '0' // Already `0`, nothing to do
) {
let canonical = canonicalizeDimension(valueNode.value, rem)
if (canonical === null) return // Couldn't be canonicalized, nothing to do
if (canonical === valueNode.value) return // Already in canonical form, nothing to do
folded = true
return WalkAction.ReplaceSkip(ValueParser.word(canonical))
}
// Constant fold `calc()` expressions with two operands and one operator
else if (
valueNode.kind === 'function' &&
(valueNode.value === 'calc' || valueNode.value === '')
) {
// [
// { kind: 'word', value: '0.25rem' }, 0
// { kind: 'separator', value: ' ' }, 1
// { kind: 'word', value: '*' }, 2
// { kind: 'separator', value: ' ' }, 3
// { kind: 'word', value: '256' } 4
// ]
if (valueNode.nodes.length !== 5) return
let lhs = dimensions.get(valueNode.nodes[0].value)
let operator = valueNode.nodes[2].value
let rhs = dimensions.get(valueNode.nodes[4].value)
// Nullify entire expression when multiplying by `0`, e.g.: `calc(0 * 100vw)` -> `0`
//
// TODO: Ensure it's safe to do so based on the data types?
if (
operator === '*' &&
((lhs?.[0] === 0 && lhs?.[1] === null) || // 0 * something
(rhs?.[0] === 0 && rhs?.[1] === null)) // something * 0
) {
folded = true
return WalkAction.ReplaceSkip(ValueParser.word('0'))
}
// We're not dealing with dimensions, so we can't fold this
if (lhs === null || rhs === null) {
return
}
switch (operator) {
case '*': {
if (
lhs[1] === rhs[1] || // Same Units, e.g.: `1rem * 2rem`, `8 * 6`
(lhs[1] === null && rhs[1] !== null) || // Unitless * Unit, e.g.: `2 * 1rem`
(lhs[1] !== null && rhs[1] === null) // Unit * Unitless, e.g.: `1rem * 2`
) {
folded = true
return WalkAction.ReplaceSkip(ValueParser.word(`${lhs[0] * rhs[0]}${lhs[1] ?? ''}`))
}
break
}
case '+': {
if (
lhs[1] === rhs[1] // Same unit or unitless, e.g.: `1rem + 2rem`, `8 + 6`
) {
folded = true
return WalkAction.ReplaceSkip(ValueParser.word(`${lhs[0] + rhs[0]}${lhs[1] ?? ''}`))
}
break
}
case '-': {
Domain
Subdomains
Called By
Source
Frequently Asked Questions
What does constantFoldDeclaration() do?
constantFoldDeclaration() is a function in the tailwindcss codebase, defined in packages/tailwindcss/src/constant-fold-declaration.ts.
Where is constantFoldDeclaration() defined?
constantFoldDeclaration() is defined in packages/tailwindcss/src/constant-fold-declaration.ts at line 8.
What does constantFoldDeclaration() call?
constantFoldDeclaration() calls 5 function(s): canonicalizeDimension, parse, toCss, walk, word.
What calls constantFoldDeclaration()?
constantFoldDeclaration() is called by 2 function(s): canonicalizeAst, createSpacingCache.
Analyze Your Own Codebase
Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.
Try Supermodel Free