Diagnostics

LUM3019: Unit separated from a $ reference

A unit is written after a numeric $ reference with whitespace in between, so it does not attach to the number.

Severity: warning · Category: styles (3xxx)

Reported by: the CSS compiler (lumiose_css), in @lumiose/vite, lumiose check and the language server. A warning; the CSS is emitted unchanged.

#What it means

A $ reference ends at the end of its name, so the unit must be separated from it: with const gap = 8, margin: $gap px becomes margin: 8 px, a number followed by the keyword px. CSS units must follow their number without whitespace, so browsers ignore the declaration. ($gappx would read a constant named gappx.)

#Example

stsx

const gap = 8;

<style>
  .card {
    margin: $gap px;
    padding: calc($gap px + 1px);
  }
</style>

#How to fix it

Multiply the constant by the unit: margin: calc($gap * 1px) ships as margin: 8px. Inside a math function, multiply in place: calc($gap * 1px + 1px). Or keep the unit in the constant: const gap = "8px".

LUM3018: a unitless number where a length, angle or time is required
Styles

#What it means

#Example

#How to fix it

#Related