noUnusedClasses (CSS)

Language CSS

Summary

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

Description

Reports CSS class selectors that are never referenced in any JSX or HTML file.

This rule checks all CSS class selectors (.foo) in a CSS file and verifies that each class name is referenced somewhere in a class= or className= attribute in an HTML or JSX file that imports (directly or transitively) the CSS file.

Classes inside :global(.foo) are excluded from this check, as they are intended to be used by external consumers without explicit imports.

SCSS limitations

This rule does not evaluate SCSS. Interpolated class names are ignored, and @extend references are not treated as class references. Statically named classes inside mixin bodies are checked as authored even when the mixin is not included.

Examples

Invalid

1
.unused { color: red; }  /* Class "unused" is never referenced */
2
.used { color: blue; }

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

Valid

1
.button { color: blue; }
2
.container { padding: 1rem; }

1
import "./styles.css";
2
export default () => (
3
    <div className="container">
4
        <button className="button">Click</button>
5
    </div>
6
);