[alexgrozav]

What

Validate variable references inside compound @-shorthand values. resolvePropertyValue in engine/core/src/tokens/resolve.ts already threw for a single exact ref (padding: "@0.5"), but the embedded/compound branch (padding: "@0.25 @0.5", border: "1px solid @undefined") only recorded usage and skipped validateReference — so a compound ref to an undefined variable silently emitted a dead var(--…). The embedded branch now calls validateReference for each ref part, mirroring the single-ref path.

Why

A compound @-shorthand referencing an undefined variable produced invalid CSS (e.g. padding: var(--0--25) var(--0--5)) with no error, while the single-ref form correctly threw. This closes that gap so both paths validate identically. Implements SF-13 (split out from SF-12).

Output diff (silent → throw)

The only behavior change is for compound refs to undefined variables:

// padding: "@0.25 @0.5"   (no 0.25 / 0.5 variables defined)
- before:  .x { padding: var(--0--25) var(--0--5); }   // silent dead vars
+ after:   throws  [styleframe] Variable "0.25" is not defined.

Compound refs whose variables are all defined are unchanged — byte-for-byte identical output:

// padding: "@spacing.sm @spacing.md"   (both defined)
  before === after:  .x { padding: var(--spacing-sm) var(--spacing-md); }

How verified

pnpm --filter @styleframe/core test
# ✓ Test Files 21 passed (21) · Tests 710 passed (710)

pnpm --filter @styleframe/theme test
# ✓ Test Files 303 passed (303) · Tests 3320 passed (3320)

pnpm typecheck
# ✓ Tasks 15 successful, 15 total

pnpm exec oxlint engine/core/src
# ✓ no findings in changed files

Repo-wide audit for compound @-shorthand refs to undefined variables: theme (3320 tests, incl. calc(@tooltip.arrow.size * -1) etc.) is clean; apps/storybook compound refs (calc(@spacing * N), 1px solid @color.primary, 1px solid @border-color, @spacing.sm @spacing, *.arrow.size) all resolve to defined variables. One known undefined compound ref remains — the chat-message story padding @0.25 @0.5 — tracked separately under SF-12; not touched here.

Notes

• Changeset added (@styleframe/core + styleframe, patch).
• Existing resolve / css / declarations embedded-ref tests referenced undefined variables as fixtures; they now define the variables first, since the compound path validates. New tests cover: compound undefined ref throws, one-of-several undefined throws, all-defined compiles.
• Separate engine finding surfaced by this change: parseAtReferences treats @ inside a larger token as a reference, so url("image@2x.png") (a retina filename) is parsed as ref 2x.png — silently var(--2x--png) on main, and now a throw. Neutralized the one incidental core-test fixture that hit it; recommend a follow-up to boundary-guard the parser. Not fixed here to keep this change scoped.
• Build is fully clean once the SF-12 chat-message story fix lands.

[changeset-bot]

🦋 Changeset detected

Latest commit: 506969e

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@styleframe/core	Patch
styleframe	Patch
@styleframe/playground	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
styleframe-dev	Ready	Preview, Comment	Jul 15, 2026 7:10am
styleframe-dev-storybook	Ready	Preview, Comment	Jul 15, 2026 7:10am

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!