🧹Detecting unused classes

There is an ESLint plugin that detects unused classes for makeStyles and the Modern API:

Usage

1. Add the dependency:

yarn add --dev eslint-plugin-tss-unused-classes

1. Enable it in you ESLint config

Case 1: You have installed ESLint manually: Edit your eslint.config.js file:

eslint.config.js

import tssUnusedClasses from 'eslint-plugin-tss-unused-classes'

export default tseslint.config(
  { ignores: ['dist'] },
  {
    plugins: {
      // ...
      'tss-unused-classes': tssUnusedClasses,
    },
    rules: {
      // ...
      'tss-unused-classes/unused-classes': 'warn',
    },
  },
)

Example project

Case 2: You are (still) in a create-react-app project: Edit your package.json:

package.json

{
  //...
  "eslintConfig": {
    "plugins": [
      //...
      "tss-unused-classes"
    ],
    "rules": {
      "tss-unused-classes/unused-classes": "warn"
    }
  },
  //...
}

Example projet

Disabling warnings

In case of false positive, disabling the warning:

• For a line: // eslint-disable-next-line tss-unused-classes/unused-classes

• For the entire file: // eslint-disable-next-line tss-unused-classes/unused-classes