noUnusedClasses

Summary

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.

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
);