CSS Variable Fallback Chain Resolution
Resolve caller-declared bounded single-var-reference/literal fallback graph with cycle detection, not arbitrary CSS token parsing, registered-property types or property-specific invalid-value fallback. Explicit supplied computed/layout context only; not a browser cascade/layout engine or cross-browser guarantee.
Description
A custom-property reference can resolve through other variables and a missing-reference fallback.
A custom-property reference can resolve through other variables and a missing-reference fallback.1
A simplified reference graph differs from a complete stylesheet cascade and CSS token parser. Use CSS Variable Fallback Chain Resolution to evaluate the supplied inputs under the specific model below.
When to use CSS Variable Fallback Chain Resolution
Use CSS Variable Fallback Chain Resolution to evaluate the supplied inputs under the specific model below. Define the supplied layout, token or rendering scenario and establish the relevant units and browser context independently.
How to use CSS Variable Fallback Chain Resolution and understand its results
- Define the supplied layout, token or rendering scenario and establish the relevant units and browser context independently.
- Enter Variable names, Literal tokens, Referenced variables, Fallback tokens, Query variable using the field table and validation rules below, then run the tool.
- Read Resolved token, Visited variables and interpret units, signs, ordering and placeholders as explained below.
- If the tool reports an input error, correct that field and rerun. A successful false result, empty match list or unknown-evidence placeholder has the specific meaning described here; check the limitations before applying the result.
| Input field | Meaning | Value type | Requirement |
|---|---|---|---|
| variableNames | Variable names | array of string | Required; constraints below |
| literalTokens | Literal tokens | array of string | Required; constraints below |
| referencedVariables | Referenced variables | array of string | Required; constraints below |
| fallbackTokens | Fallback tokens | array of string | Required; constraints below |
| queryVariable | Query variable | string | Required; constraints below |
Enter unique custom-property names matching -- followed by ASCII letters, digits, underscores or hyphens, with aligned literal, reference and fallback strings and an exact query name. Follow its single-reference chain, recording visited variables. A visited node cannot contain both a literal and a reference; terminals need a nonempty literal. Missing referenced names require a nonempty fallback on the referring node. Revisited names are a cycle error even when a fallback exists. The queried name must exist; unvisited nodes are not traversed. This bounded graph is not a CSS token parser or complete computed-value cascade.
resolve(name) = literal, recursive referenced value, or local fallback for a missing reference; revisiting a name fails Field order, units and branch conditions follow the implementation explanation above.
| Output field | Meaning | Value type |
|---|---|---|
| resolvedToken | Resolved token | string |
| visitedVariables | Visited variables | array of string |
{
"input": {
"variableNames": [
"--a",
"--b"
],
"literalTokens": [
"",
"red"
],
"referencedVariables": [
"--b",
""
],
"fallbackTokens": [
"blue",
""
],
"queryVariable": "--a"
},
"output": {
"resolvedToken": "red",
"visitedVariables": [
"--a",
"--b"
]
}
}Limitations and assumptions
CSS variables can be invalid because of dependency cycles. This implementation represents one reference per node; real computed-value resolution requires the complete stylesheet context.2
A simplified reference graph differs from a complete stylesheet cascade and CSS token parser. Apply the exact scope and assumptions described above.
All listed fields require explicit values. Unexpected fields, incorrect types, nonfinite numbers and sparse arrays fail validation. Domain-specific bounds, alignments and supported tokens are stated above; extremely large inputs or outputs can also be rejected. These errors differ from successful results such as false, no matches or unknown evidence.
Alternative or Complementary methods
Use inherit/initial/unset/revert Resolution Table for a related task: CSS-wide keywords choose parent, initial or rollback values under defined rules.
Use @layer revert-layer Cascade Order Lookup for a related task: Cascade layers have ordering rules that differ for normal and important declarations.
References
Similar or alternative tools
- inherit/initial/unset/revert Resolution Table
CSS-wide keywords choose parent, initial or rollback values under defined rules.
- @layer revert-layer Cascade Order Lookup
Cascade layers have ordering rules that differ for normal and important declarations.