canonicalizeAst() — tailwindcss Function Reference
Architecture documentation for the canonicalizeAst() function in canonicalize-candidates.ts from the tailwindcss codebase.
Entity Profile
Dependency Diagram
graph TD b634c4e7_2242_e72b_2b52_bbbae37fc41b["canonicalizeAst()"] 7d350d81_5de1_f9f3_5b2c_19ec8fd3c37e["canonicalize-candidates.ts"] b634c4e7_2242_e72b_2b52_bbbae37fc41b -->|defined in| 7d350d81_5de1_f9f3_5b2c_19ec8fd3c37e 3f0c9850_42a7_e7cb_36cc_12b1cb9274dd["createUtilitySignatureCache()"] 3f0c9850_42a7_e7cb_36cc_12b1cb9274dd -->|calls| b634c4e7_2242_e72b_2b52_bbbae37fc41b 80a88206_fcce_6e85_32d2_3f5ca73e8b39["createUtilityPropertiesCache()"] 80a88206_fcce_6e85_32d2_3f5ca73e8b39 -->|calls| b634c4e7_2242_e72b_2b52_bbbae37fc41b 8e1f22b2_13b1_c4b5_7edd_423453055d39["expandDeclaration()"] b634c4e7_2242_e72b_2b52_bbbae37fc41b -->|calls| 8e1f22b2_13b1_c4b5_7edd_423453055d39 d7ab7b92_b8e0_123d_80fe_77ddad589042["resolveVariablesInValue()"] b634c4e7_2242_e72b_2b52_bbbae37fc41b -->|calls| d7ab7b92_b8e0_123d_80fe_77ddad589042 9ab273b1_6701_5494_7f88_e2e72f74ddf7["constantFoldDeclaration()"] b634c4e7_2242_e72b_2b52_bbbae37fc41b -->|calls| 9ab273b1_6701_5494_7f88_e2e72f74ddf7 dcb78b18_ea9f_1a7d_ae16_22caeb338381["printArbitraryValue()"] b634c4e7_2242_e72b_2b52_bbbae37fc41b -->|calls| dcb78b18_ea9f_1a7d_ae16_22caeb338381 06ed9408_12cf_7ddd_a435_8cdd942de1d4["add()"] b634c4e7_2242_e72b_2b52_bbbae37fc41b -->|calls| 06ed9408_12cf_7ddd_a435_8cdd942de1d4 ed78da58_8727_ad98_120c_61f35cea357a["walk()"] b634c4e7_2242_e72b_2b52_bbbae37fc41b -->|calls| ed78da58_8727_ad98_120c_61f35cea357a style b634c4e7_2242_e72b_2b52_bbbae37fc41b fill:#6366f1,stroke:#818cf8,color:#fff
Relationship Graph
Source Code
packages/tailwindcss/src/canonicalize-candidates.ts lines 2070–2171
function canonicalizeAst(designSystem: DesignSystem, ast: AstNode[], options: SignatureOptions) {
let { rem } = options
walk(ast, {
enter(node, ctx) {
// Optimize declarations
if (node.kind === 'declaration') {
if (node.value === undefined || node.property === '--tw-sort') {
return WalkAction.Replace([])
}
// Ignore `--tw-{property}` if `{property}` exists with the same value
if (node.property.startsWith('--tw-')) {
if (
(ctx.parent?.nodes ?? []).some(
(sibling) =>
sibling.kind === 'declaration' &&
node.value === sibling.value &&
node.important === sibling.important &&
!sibling.property.startsWith('--tw-'),
)
) {
return WalkAction.Replace([])
}
}
if (options.features & SignatureFeatures.ExpandProperties) {
let replacement = expandDeclaration(node, options.features)
if (replacement) return WalkAction.Replace(replacement)
}
// Resolve theme values to their inlined value.
if (node.value.includes('var(')) {
node.value = resolveVariablesInValue(node.value, designSystem)
}
// Very basic `calc(…)` constant folding to handle the spacing scale
// multiplier:
//
// Input: `--spacing(4)`
// → `calc(var(--spacing, 0.25rem) * 4)`
// → `calc(0.25rem * 4)` ← this is the case we will see
// after inlining the variable
// → `1rem`
node.value = constantFoldDeclaration(node.value, rem)
// We will normalize the `node.value`, this is the same kind of logic
// we use when printing arbitrary values. It will remove unnecessary
// whitespace.
//
// Essentially normalizing the `node.value` to a canonical form.
node.value = printArbitraryValue(node.value)
}
// Replace special nodes with its children
else if (node.kind === 'context' || node.kind === 'at-root') {
return WalkAction.Replace(node.nodes)
}
// Remove comments
else if (node.kind === 'comment') {
return WalkAction.Replace([])
}
// Remove at-rules that are not needed for the signature
else if (node.kind === 'at-rule' && node.name === '@property') {
return WalkAction.Replace([])
}
},
exit(node) {
if (node.kind === 'rule' || node.kind === 'at-rule') {
// Remove declarations that are re-defined again later.
//
// This could maybe result in unwanted behavior (because similar
// properties typically exist for backwards compatibility), but for
// signature purposes we can assume that the last declaration wins.
if (node.nodes.length > 1) {
let seen = new Set<string>()
for (let i = node.nodes.length - 1; i >= 0; i--) {
let child = node.nodes[i]
if (child.kind !== 'declaration') continue
Domain
Subdomains
Calls
Source
Frequently Asked Questions
What does canonicalizeAst() do?
canonicalizeAst() is a function in the tailwindcss codebase, defined in packages/tailwindcss/src/canonicalize-candidates.ts.
Where is canonicalizeAst() defined?
canonicalizeAst() is defined in packages/tailwindcss/src/canonicalize-candidates.ts at line 2070.
What does canonicalizeAst() call?
canonicalizeAst() calls 6 function(s): add, constantFoldDeclaration, expandDeclaration, printArbitraryValue, resolveVariablesInValue, walk.
What calls canonicalizeAst()?
canonicalizeAst() is called by 2 function(s): createUtilityPropertiesCache, createUtilitySignatureCache.
Analyze Your Own Codebase
Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.
Try Supermodel Free