noUndeclaredCustomProperties (HTML)

Summary

Rule available since: v2.5.11
Diagnostic Category: lint/nursery/noUndeclaredCustomProperties
This rule doesn’t have a fix.
The default severity of this rule is information.
This rule belongs to the following domains:
- project

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noUndeclaredCustomProperties": "error"
6
      }
7
    }
8
  }
9
}

Description

Disallow undeclared CSS custom properties in inline styles.

A custom property has a name beginning with -- and is read with var(--name). The rule checks static style attributes and looks for a matching declaration on the same element, an ancestor element, or a stylesheet available to the file. An unresolved name usually means the declaration is missing or misspelled.

Examples

Invalid

1
<div style="color: var(--text-color)"></div>

code-block.html:1:24 lint/nursery/noUndeclaredCustomProperties ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ The custom property --text-color is not defined.
  
  > 1 │ <div style="color: var(--text-color)"></div>
      │                        ^^^^^^^^^^^^
    2 │ 
  
  ℹ An undeclared custom property can indicate a misspelled name or a missing declaration.
  
  ℹ Define the custom property in an available stylesheet, rename it or remove it.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

Valid

1
<div style="--text-color: blue; color: var(--text-color)"></div>