LUM3012: Custom property set but never read

Severity: warning · Category: styles (3xxx)

Reported by: lumiose build (@lumiose/vite), once every module is compiled, lumiose check and the language server: another file's CSS may read the property, so the check is project-wide. Not reported in dev. A warning. lumiose check and the editor count the style blocks of the project's modules, the stylesheets under src/ and the stylesheets and Lumiose modules that the project's modules import.

#What it means

Runtime values reach CSS through custom properties: style={{ "--progress": pct() }} plus var(--progress) in a block. A property that is set but never read with var() by any stylesheet of the project does nothing: usually a typo or leftover code.

The check collects the properties set in style props (object keys such as "--fill" and --fill: declarations of style strings, on elements and components) and the var() reads of every stylesheet in the build: the style blocks of every Lumiose module, imported .css files (also Sass, Less, …) and those of dependencies.

#Example

export function Bar(props: { pct: number }) {
  return (
    <div class="bar" style={{ "--progres": `${props.pct}%` }}>
      <style>
        .bar { inline-size: var(--progress); }
      </style>
    </div>
  );
}

#How to fix it

Make the names match, or remove the unused property. Properties consumed by another component's blocks or an imported stylesheet are not reported. A property read only by CSS outside the build (a stylesheet in public/, or a var() built at runtime) is still reported: read it in a block, or ignore the warning.

#Related

• Styles: runtime values