ESLint plugin for tss-react unused classes

1.0.3 verified Sat Apr 25 auth: no javascript

An ESLint plugin that detects unused styling classes created with tss-react (the CSS-in-JS library for Material-UI). Current stable version is 1.0.3. The plugin is actively maintained by the tss-react author. It works by analyzing calls to makeStyles and checking if returned class names are referenced in JSX. Unlike general unused class linters, this one is tightly integrated with tss-react's API, reducing false positives. It has no runtime dependencies and supports ESLint 7/8/9.

Common errors

error ESLint: Rule 'tss-unused-classes/unused-classes' was not found. ↓

cause Plugin not installed or not listed in plugins array.

fix

Run 'yarn add --dev eslint-plugin-tss-unused-classes' and add 'tss-unused-classes' to plugins array in .eslintrc.

error Parsing error: The keyword 'import' is reserved ↓

cause ESLint is not configured for ES modules.

fix

Set 'sourceType': 'module' in parserOptions, or use a babel parser for JSX.

error Warning: Rule 'tss-unused-classes/unused-classes' has been deprecated (note: not actually deprecated, but may appear if using old config format). ↓

cause Using legacy format with @ prefix in older versions.

fix

Use 'tss-unused-classes/unused-classes' without @.

Warnings

gotcha The plugin only works with the object syntax of makeStyles (not with the callback returning CSSProperties directly if used without object wrapper). ↓

fix Ensure makeStyles()() call returns an object with class names as keys.

gotcha False positives may occur if classes are used via string interpolation or dynamic access (e.g., classes[`${name}`]). ↓

fix Disable the rule on that line with eslint-disable-next-line comment.

deprecated ESLint 7 is no longer supported as of version 1.0.0; check your ESLint version. ↓

fix Upgrade to ESLint 8 or 9.

breaking v1.0.0 dropped support for ESLint 6 and below, and changed rule prefix from @tss-unused-classes to tss-unused-classes. ↓

fix Update eslint config to use 'tss-unused-classes' instead of '@tss-unused-classes'.

Install

npm install eslint-plugin-tss-unused-classes

yarn add eslint-plugin-tss-unused-classes

pnpm add eslint-plugin-tss-unused-classes

Imports

plugin

wrong

// Do not import as a module in JS; it's an ESLint plugin

correct

// In .eslintrc.js: plugins: ['tss-unused-classes'], rules: { 'tss-unused-classes/unused-classes': 'warn' }

This is an ESLint plugin, not a module. Configure via eslint config.

unused-classes rule
wrong
```
'tss-unused-classes': 'warn'
```
correct
```
'tss-unused-classes/unused-classes': 'warn'
```
The rule is namespaced under the plugin name; prefix with 'tss-unused-classes/'.

// eslint-disable-next-line

wrong

// eslint-disable-next-line unused-classes

correct

// eslint-disable-next-line tss-unused-classes/unused-classes

Disable comments must use the full rule name with plugin prefix.

Quickstart

Setup and example of detecting unused tss-react classes with ESLint.

// 1. Install: yarn add --dev eslint-plugin-tss-unused-classes
// 2. Configure .eslintrc.js:
module.exports = {
  plugins: ['tss-unused-classes'],
  rules: {
    'tss-unused-classes/unused-classes': 'warn'
  }
};
// 3. In a React component using tss-react:
import { makeStyles } from 'tss-react/mui';

const useStyles = makeStyles()((theme) => ({
  root: { color: 'red' },
  unusedRoot: { color: 'blue' }
}));

export function MyComponent() {
  const { classes } = useStyles();
  // Want to use classes.root but forgot? Plugin will warn about classes.unusedRoot
  return <div className={classes.root}>Hello</div>;
}