`@()` colado em texto adjacente do valor CSS

Why this fires¶

@(expr) compiles to var(--…), and CSS has no string concatenation in plain values: var(--w)px is not "the number plus a unit", it is a syntax error the browser silently drops. Gluing an interpolation directly against adjacent value text can therefore never work, and the compiler says so instead of shipping a dead declaration.

fn Bar(w: int = 50) -> View {
    <div class="bar">
        <style>.bar { width: @(w)px; }</style>
    </div>
}
// error[TE733]: `@()` must form a complete CSS value; write `calc(@(x) * 1px)` or interpolate the full string

Fix it¶

Two idiomatic shapes:

// 1. Let calc() do the unit math — var() composes fine inside calc:
<style>.bar { width: calc(@(w) * 1px); }</style>

// 2. Interpolate the FULL value — inside @() you are back in Zolo,
//    so an f-string with `{}` is normal:
<style>.bar { width: @(f"{w}px"); }</style>

!important, / (as in 16px/1.5) and * inside calc() are legal no-space neighbors and never trip this error.

See also¶

• TE730 — @() outside a declaration value.
• TE732 — non-serializable interpolation type.