LUM3018: Unitless number from a $ reference

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

Numbers are inserted without a unit: with const gap = 8, gap: $gap becomes gap: 8. CSS requires a unit on every non-zero length, angle and time.

• Lengths: Lightning CSS happens to read the bare number as pixels and ships gap: 8px, but that is not CSS, and the same constant stays a bare number where a number is allowed (custom properties, line-height), so the output depends on where it is used.
• Angles and times: there is no conversion; browsers ignore rotate: 45 and transition: opacity 200.
• Math functions: calc($gap + 1px) and min(100%, $max) mix a number with a length, which is invalid, so browsers ignore the declaration.

Zero is fine (margin: $none with const none = 0), and so are properties that take numbers (line-height, z-index, flex-grow) or unitless SVG lengths (stroke-width).

#Example

const gap = 8;
const angle = 45;
const duration = 200;

<style>
  .card {
    gap: $gap;
    rotate: $angle;
    transition: opacity $duration;
    max-width: min(100%, $gap);
  }
</style>

#How to fix it

Multiply the constant by the unit, which folds at build time: gap: calc($gap * 1px) ships as gap: 8px, and rotate: calc($angle * 1deg) as rotate: 45deg. Inside a math function, multiply in place: min(100%, $max * 1px). For times, choose the unit: calc($duration * 1ms) or calc($duration * 1s); the warning has no automatic fix for them.

Or keep the unit in the constant: const gap = "8px", or `${space}px` from a number.

#Related

• LUM3019: a unit written after the reference with a space
• Styles