Interpolação `@()` fora de valor de declaração

Why this fires¶

@(expr) compiles to a CSS custom-property bridge: the sheet keeps a constant var(--zc-<hash>-eN) and the computed value rides the component's root element. That machinery only exists in declaration values — after the :, before the ;. In a selector, a property name, or an at-rule prelude there is no var() for the bridge to compile to, so the interpolation is rejected instead of spliced (splicing user text into selectors is exactly the anti-feature the design rules out).

fn Card(cls: str = "card") -> View {
    <div class="card">
        <style>@(cls) { color: red }</style>
    </div>
}
// error[TE730]: `@()` interpolation is only allowed in declaration values

Fix it¶

Move the dynamic part out of the selector. Select a static class and vary the value instead:

fn Card(accent: str = "red") -> View {
    <div class="card">
        <style>.card { color: @(accent); }</style>
    </div>
}

If you really need a different selector per state, toggle classes in the markup (class={...}) and write one static rule per class.

See also¶

• TE733 — @() glued to adjacent value text.
• TE737 — @() with no root element to carry its value.