[jonthomp]

Problem

parseUnparsed rejects auto for every property outside allowAutoProperties, and custom properties are not in it. --my-var: auto compiles to a warning and no declaration, so a var() reading it falls through to the inherited value, the :root value or its fallback. On main, .auto { --my-var: auto } .fixed { --my-var: 10px } .test { width: var(--my-var, 5px) } renders width: 5 on test auto, where browsers compute width: auto.

Solution

parseUnparsed allows auto for custom properties. A custom property's value is any token list (css-variables-1 §2), so var() substitutes auto as written and the reading property receives it.

A property that cannot take auto, such as opacity: var(--my-var), now receives "auto", where a browser treats the declaration as invalid at computed-value time. Neither main nor this change matches that case, and #503 is where substituted values are validated.

Tests

• src/__tests__/native/variables.test.tsx covers a custom property declared as auto and read by width through var() with a fallback. It fails on main.

Verification

On macOS with Node 24:

• yarn lint clean
• yarn typecheck clean
• yarn test: 87 suites, 1390 tests pass

[Copilot]

🟢 Approval recommended

There are no active review issues for the change preserving auto values in custom properties.

No open issues 🎉

What changed in this PR

This PR fixes the compiler dropping custom properties declared as auto, allowing var() reads to use the declared value rather than an inherited value or fallback.

Changes:

• Allow auto when parsing custom properties while retaining existing restrictions for other properties.
• Add a regression test confirming a non-inlined custom property produces width: "auto" instead of the fallback.

File	Description
src/​compiler/​declarations.ts	Accepts auto for properties whose names begin with --.
src/​__tests__/​native/​variables.test.tsx	Tests preservation of auto through a runtime var() read with a fallback.

_{Review effort: Balanced}