Diagnostics
LUM3017: Invalid CSS value
A declaration's value does not parse for its property, so browsers ignore the whole declaration.
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 declaration without a value (color: ;, color: !important) is reported too: browsers drop
it. An empty custom property (--x: ;) is valid and is not reported.
Lightning CSS keeps a value it cannot parse for its property as written, and browsers then drop the
declaration: color: notacolor, width: 10 px (a space before the unit), display: flexbox. The
check runs after $ references are substituted, so a constant that holds an invalid value is
reported at the reference, with the substituted value in the message.
It also covers grid track lists that browsers reject although each part is valid: with
repeat(auto-fill, …) or repeat(auto-fit, …), every other track must have a fixed size (a length
or percentage, or a minmax() with one), so 2fr repeat(auto-fit, minmax(9rem, 1fr)) is invalid.
The check is conservative: values Lightning CSS does not understand yet but browsers may (var(),
env(), attr(), anchor(), if(), color-mix(), subgrid, newer keywords, vendor-prefixed
values, CSS-wide keywords such as inherit) are never reported, and neither are custom properties
or at-rule descriptors. Unknown properties are LUM3020. A value it does not report can still be invalid.
#Example
const brand = "notacolor";
<style>
.card {
color: notacolor;
background-color: $brand;
grid-template-columns: 2fr repeat(auto-fit, minmax(9rem, 1fr));
}
</style>#How to fix it
Correct the value against the property's syntax (color: navy, width: 10px, display: flex).
For an auto-repeat grid, give the other tracks a fixed size (12rem repeat(auto-fit, minmax(9rem, 1fr)))
or move the flexible track into the minmax(). If the value is valid newer CSS that is still
reported, check the configured browser targets.