LUM3008: Non-constant $ reference

Severity: error · Category: styles (3xxx)

Reported by: the compiler, in @lumiose/vite, lumiose check and the language server. The reference is left in the CSS as written, which browsers ignore.

#What it means

$name is inlined into the CSS at build time, so the value must be statically evaluable: a top-level const, a const of the enclosing component (blocks inside it only), or an export const of an imported module, made of literals, template literals, arithmetic, other constants and members of as const objects. The message says why a reference is not:

• a let or var binding, a parameter or a prop ($props.pct);
• computed by a call at runtime: a function call ($space(2)), Date.now(), a signal;
• an array ($sizes.0 is not valid JS);
• not declared in the block's scope (a component's const read from a file-level block);
• an import whose module does not export the name, or could not be resolved.

#Example

export function Bar(props: { pct: number }) {
  return (
    <div class="bar">
      <style>
        .bar { inline-size: $props.pct; }
      </style>
    </div>
  );
}

#How to fix it

Pass runtime values through a custom property:

<div class="bar" style={{ "--pct": `${props.pct}%` }}>
  <style>
    .bar { inline-size: var(--pct); }
  </style>
</div>

For a build-time value, make it a constant: const instead of let, an as const object with named keys instead of an array ($sizes.sm), and constant math instead of a call (calc($space * 2px) with const space = 4 ships as 8px).

#Related

• Styles: JS values in styles