Skip to content

bug(resolver): resolve hyphenated aliases and preserve var() fallback syntax #24

Description

@Hebilicious

Problem

resolveValue() in lib.ts at 94bf4d8 uses:

/var\(--(\w+)\)/g

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

  • Declared hyphenated aliases resolve correctly.
  • Aliases with fallbacks, nested fallbacks, and permitted whitespace resolve without losing fallback content.
  • Multiple references inside values such as gradients and calc() work.
  • Text resembling var(...) inside quoted strings is not rewritten as a function.
  • Unmapped external variables remain unchanged, preserving the existing native-CSS escape hatch.
  • Unit tests cover the table above and an end-to-end primitive/gradient example.
  • The supported alias-name contract is documented and aligned with token-name validation.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions