noUndeclaredClasses (JavaScript)

Summary

Rule available since: v2.5.0
Diagnostic Category: lint/nursery/noUndeclaredClasses
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
        "noUndeclaredClasses": "error"
6
      }
7
    }
8
  }
9
}

Description

Reports CSS class names in JSX className or class attributes that are not defined in any imported CSS file.

When a JSX file imports CSS files, every class name used in className= or class= attributes is checked against the available class definitions. Classes that are not defined are reported.

This rule checks string literals, variable references (resolved through the semantic model), call expressions like clsx(...) / classnames(...), object expression keys, and array expressions. Dynamic class names that cannot be statically resolved are silently skipped.

In Astro files, class:list={...} directives and class={...} attribute expressions are also checked. CSS files imported in the frontmatter (import "./styles.css") are included in the class resolution.

Examples

Invalid

1
import "./styles.css";
2
export default () => <div className="missing" />;

Valid

1
import "./styles.css";
2
export default () => <div className="header" />;