Skip to content

Diagnostics

LUM3009: Hyphenated $ reference

A $ reference is followed by a hyphen, as if the name contained one.

Severity: error · Category: styles (3xxx)

Reported by: the CSS compiler (lumiose_css), in @lumiose/vite, lumiose check and the language server. The $brand part is not substituted either.

#What it means

References are JS expressions: $brand-primary reads $brand followed by -primary, which is almost never intended (design-token names often contain hyphens).

#Example

stsx

const brand = { primary: "#4f46e5" } as const;

<style>
  a { color: $brand-primary; }
</style>

#How to fix it

Use an object member: $brand.primary. Name constants in camelCase or nest them in an as const object.

Styles