8000 Collapse multiple utilities by RobinMalfait · Pull Request #19147 · tailwindlabs/tailwindcss · GitHub
Skip to content

Collapse multiple utilities #19147

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
RobinMalfait merged 16 commits into from
Oct 20, 2025
Merged

Collapse multiple utilities #19147

Changes from 1 commit
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
f0b68ff
add `features` to the canonicalization options
RobinMalfait Oct 11, 2025
6573318
add expand-declaration
RobinMalfait Oct 16, 2025
4438411
add canonicalize tests for going from multiple to one class
RobinMalfait Oct 17, 2025
b84ec47
share options
RobinMalfait Oct 17, 2025
271696b
add canonicalizeAst function
RobinMalfait Oct 17, 2025
ecbcb8c
move `resolveVariablesInValue` to its own function
RobinMalfait Oct 17, 2025
88180de
combine walks into single walk
RobinMalfait Oct 17, 2025
21faf2c
convert function to `enter` object
RobinMalfait Oct 17, 2025
da84979
sort declarations
RobinMalfait Oct 17, 2025
0bd45f9
passthrough features to `signature` generation step
RobinMalfait Oct 17, 2025
7526411
expand declarations during signature generation
RobinMalfait Oct 17, 2025
15d2792
cache properties and values per utility
RobinMalfait Oct 17, 2025
2822138
collapse properties
RobinMalfait Oct 18, 2025
8da361e
Merge branch 'main' into feat/canonicalize-multiple-to-one
RobinMalfait Oct 20, 2025
8f84633
add link to Gosper's hack
RobinMalfait Oct 20, 2025
1466cf7
Merge branch 'main' into feat/canonicalize-multiple-to-one
RobinMalfait Oct 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
move resolveVariablesInValue to its own function
  • Loading branch information
@RobinMalfait
RobinMalfait committed Oct 18, 2025
commit ecbcb8ccf094fa5fcea638161968df357c62cb60
208 changes: 107 additions & 101 deletions packages/tailwindcss/src/signatures.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,111 +123,12 @@ function canonicalizeAst(ast: AstNode[], options: SignatureOptions) {
}
})

// Resolve theme values to their inlined value.
//
// E.g.:
//
// `[color:var(--color-red-500)]` → `[color:oklch(63.7%_0.237_25.331)]`
// `[color:oklch(63.7%_0.237_25.331)]` → `[color:oklch(63.7%_0.237_25.331)]`
//
// Due to the `@apply` from above, this will become:
//
// ```css
// .example {
// color: oklch(63.7% 0.237 25.331);
// }
// ```
//
// Which conveniently will be equivalent to: `text-red-500` when we inline
// the value.
//
// Without inlining:
// ```css
// .example {
// color: var(--color-red-500, oklch(63.7% 0.237 25.331));
// }
// ```
//
// Inlined:
// ```css
// .example {
// color: oklch(63.7% 0.237 25.331);
// }
// ```
//
// Recently we made sure that utilities like `text-red-500` also generate
// the fallback value for usage in `@reference` mode.
//
// The second assumption is that if you use `var(--key, fallback)` that
// happens to match a known variable _and_ its inlined value. Then we can
// replace it with the inlined variable. This allows us to handle custom
// `@theme` and `@theme inline` definitions.
walk(ast, (node) => {
// Handle declarations
if (node.kind === 'declaration' && node.value !== undefined) {
// Resolve theme values to their inlined value.
if (node.value.includes('var(')) {
let changed = false
let valueAst = ValueParser.parse(node.value)

let seen = new Set<string>()
walk(valueAst, (valueNode) => {
if (valueNode.kind !== 'function') return
if (valueNode.value !== 'var') return

// Resolve the underlying value of the variable
if (valueNode.nodes.length !== 1 && valueNode.nodes.length < 3) {
return
}

let variable = valueNode.nodes[0].value

// Drop the prefix from the variable name if it is present. The
// internal variable doesn't have the prefix.
if (designSystem.theme.prefix && variable.startsWith(`--${designSystem.theme.prefix}-`)) {
variable = variable.slice(`--${designSystem.theme.prefix}-`.length)
}
let variableValue = designSystem.resolveThemeValue(variable)
// Prevent infinite recursion when the variable value contains the
// variable itself.
if (seen.has(variable)) return
seen.add(variable)
if (variableValue === undefined) return // Couldn't resolve the variable

// Inject variable fallbacks when no fallback is present yet.
//
// A fallback could consist of multiple values.
//
// E.g.:
//
// ```
// var(--font-sans, ui-sans-serif, system-ui, sans-serif, …)
// ```
{
// More than 1 argument means that a fallback is already present
if (valueNode.nodes.length === 1) {
// Inject the fallback value into the variable lookup
changed = true
valueNode.nodes.push(...ValueParser.parse(`,${variableValue}`))
}
}

// Replace known variable + inlined fallback value with the value
// itself again
{
// We need at least 3 arguments. The variable, the separator and a fallback value.
if (valueNode.nodes.length >= 3) {
let nodeAsString = ValueParser.toCss(valueNode.nodes) // This could include more than just the variable
let constructedValue = `${valueNode.nodes[0].value},${variableValue}`
if (nodeAsString === constructedValue) {
changed = true
return WalkAction.Replace(ValueParser.parse(variableValue))
}
}
}
})

// Replace the value with the new value
if (changed) node.value = ValueParser.toCss(valueAst)
node.value = resolveVariablesInValue(node.value, designSystem)
}

// Very basic `calc(…)` constant folding to handle the spacing scale
Expand All @@ -250,6 +151,111 @@ function canonicalizeAst(ast: AstNode[], options: SignatureOptions) {
})
}

// Resolve theme values to their inlined value.
//
// E.g.:
//
// `[color:var(--color-red-500)]` → `[color:oklch(63.7%_0.237_25.331)]`
// `[color:oklch(63.7%_0.237_25.331)]` → `[color:oklch(63.7%_0.237_25.331)]`
//
// Due to the `@apply` from above, this will become:
//
// ```css
// .example {
// color: oklch(63.7% 0.237 25.331);
// }
// ```
//
// Which conveniently will be equivalent to: `text-red-500` when we inline
// the value.
//
// Without inlining:
// ```css
// .example {
// color: var(--color-red-500, oklch(63.7% 0.237 25.331));
// }
// ```
//
// Inlined:
// ```css
// .example {
// color: oklch(63.7% 0.237 25.331);
// }
// ```
//
// Recently we made sure that utilities like `text-red-500` also generate
// the fallback value for usage in `@reference` mode.
//
// The second assumption is that if you use `var(--key, fallback)` that
// happens to match a known variable _and_ its inlined value. Then we can
// replace it with the inlined variable. This allows us to handle custom
// `@theme` and `@theme inline` definitions.
function resolveVariablesInValue(value: string, designSystem: DesignSystem): string {
let changed = false
let valueAst = ValueParser.parse(value)

let seen = new Set<string>()
walk(valueAst, (valueNode) => {
if (valueNode.kind !== 'function') return
if (valueNode.value !== 'var') return

// Resolve the underlying value of the variable
if (valueNode.nodes.length !== 1 && valueNode.nodes.length < 3) {
return
}

let variable = valueNode.nodes[0].value

// Drop the prefix from the variable name if it is present. The
// internal variable doesn't have the prefix.
if (designSystem.theme.prefix && variable.startsWith(`--${designSystem.theme.prefix}-`)) {
variable = variable.slice(`--${designSystem.theme.prefix}-`.length)
}
let variableValue = designSystem.resolveThemeValue(variable)
// Prevent infinite recursion when the variable value contains the
// variable itself.
if (seen.has(variable)) return
seen.add(variable)
if (variableValue === undefined) return // Couldn't resolve the variable

// Inject variable fallbacks when no fallback is present yet.
//
// A fallback could consist of multiple values.
//
// E.g.:
//
// ```
// var(--font-sans, ui-sans-serif, system-ui, sans-serif, …)
// ```
{
// More than 1 argument means that a fallback is already present
if (valueNode.nodes.length === 1) {
// Inject the fallback value into the variable lookup
changed = true
valueNode.nodes.push(...ValueParser.parse(`,${variableValue}`))
}
}

// Replace known variable + inlined fallback value with the value
// itself again
{
// We need at least 3 arguments. The variable, the separator and a fallback value.
if (valueNode.nodes.length >= 3) {
let nodeAsString = ValueParser.toCss(valueNode.nodes) // This could include more than just the variable
let constructedValue = `${valueNode.nodes[0].value},${variableValue}`
if (nodeAsString === constructedValue) {
changed = true
return WalkAction.Replace(ValueParser.parse(variableValue))
}
}
}
})

// Replace the value with the new value
if (changed) return ValueParser.toCss(valueAst)
return value
}

// For all static utilities in the system, compute a lookup table that maps the
// utility signature to the utility name. This is used to find the utility name
// for a given utility signature.
Expand Down