Diagnostics

LUM3020: Unknown CSS property

A declaration's property is not a CSS property, so browsers ignore the 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

Lightning CSS keeps a declaration with an unknown property name as it is, and browsers skip it, so a typo such as colr: red silently does nothing. A property is known when it is in MDN's list of CSS properties (standard, experimental, non-standard and obsolete ones) or Lightning CSS knows it. When a known property is one or two edits away, the help names it and the fix replaces it.

Not checked: custom properties (--brand), vendor-prefixed properties (-webkit-line-clamp, -moz-…), at-rule descriptors (@font-face, @page, @property) and names that are not plain identifiers.

#Example

stsx
<style>
  .card {
    colr: navy;
    backgrund-color: white;
  }
</style>

#How to fix it

Correct the name (color, background-color): the fix does it for close matches. For a value you read with var(), name it as a custom property (--card-color). If the property is real but newer than Lumiose's list, the warning is safe to ignore; report it so the list can be updated.