Problem
resolveValue() in lib.ts at 94bf4d8 uses:
This only recognizes a narrow var(--word) form. A declared alias containing a hyphen is silently left unresolved. Even a simple alias stops resolving when used with a fallback or permitted whitespace.
Reproduction
Given:
const map = new Map([
["--surface-muted", "--palette-gray-100"],
["--bg", "--palette-gray-100"],
]);
The current replacement expression produces:
| Input |
Actual |
Expected reference |
var(--bg) |
var(--palette-gray-100) |
Already correct |
var(--surface-muted) |
var(--surface-muted) |
var(--palette-gray-100) |
var(--bg, red) |
var(--bg, red) |
var(--palette-gray-100, red) |
var( --bg ) |
var( --bg ) |
The alias is replaced; harmless whitespace may be preserved |
These outputs were reproduced by executing the exact replacement expression in isolation. This is not a claim that the full repository suite was run.
A consumer-facing case is a primitive with variables: { "surface-muted": "palette.gray.100" } and a value of var(--surface-muted).
Proposed fix
Resolve the custom-property name inside actual CSS var() functions without treating fallback text or quoted text as a flat regular-expression match. A small value parser/tokenizer is preferable to extending \w and accidentally mishandling nested fallbacks.
Preserve CSS references: substitute alias names, not token values. Unmapped/external custom properties must continue to pass through unchanged.
Acceptance criteria
Problem
resolveValue() in lib.ts at 94bf4d8 uses:
/var\(--(\w+)\)/gThis only recognizes a narrow
var(--word)form. A declared alias containing a hyphen is silently left unresolved. Even a simple alias stops resolving when used with a fallback or permitted whitespace.Reproduction
Given:
The current replacement expression produces:
var(--bg)var(--palette-gray-100)var(--surface-muted)var(--surface-muted)var(--palette-gray-100)var(--bg, red)var(--bg, red)var(--palette-gray-100, red)var( --bg )var( --bg )These outputs were reproduced by executing the exact replacement expression in isolation. This is not a claim that the full repository suite was run.
A consumer-facing case is a primitive with
variables: { "surface-muted": "palette.gray.100" }and a value ofvar(--surface-muted).Proposed fix
Resolve the custom-property name inside actual CSS
var()functions without treating fallback text or quoted text as a flat regular-expression match. A small value parser/tokenizer is preferable to extending\wand accidentally mishandling nested fallbacks.Preserve CSS references: substitute alias names, not token values. Unmapped/external custom properties must continue to pass through unchanged.
Acceptance criteria
calc()work.var(...)inside quoted strings is not rewritten as a function.