noUndeclaredCustomProperties (CSS)

Summary

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

Reports custom properties used with var() that have no visible declaration.

This rule checks custom properties defined by declarations such as --theme: blue, registrations such as @property --theme, imported stylesheets, linked stylesheets, and <style> blocks in HTML-like files. Files that aren’t imported by the project aren’t analyzed.

Locally scoped styles in Vue, Svelte, and Astro are visible only within their component. Global styles can provide custom properties to imported child components.

Examples

Invalid

1
a {
2
  color: var(--link-color);
3
}

Valid

1
:root {
2
  --link-color: blue;
3
}
4

5
a {
6
  color: var(--link-color);
7
}