README.md

eslint-plugin-deprecate-classnames

This plugin helps you refactor your codebase by identifying and replacing deprecated CSS class names.

Installation

First, you'll need to install ESLint:

npm install eslint --save-dev

Next, install eslint-plugin-deprecate-classnames:

npm install eslint-plugin-deprecate-classnames --save-dev

Usage

Add deprecate-classnames to the plugins section of your .eslintrc configuration file. You can omit the eslint-plugin- prefix:

{
  "plugins": [
    "deprecate-classnames"
  ]
}

v9 Flat config

import eslintPluginDeprecateClassnames from "eslint-plugin-deprecate-classname";

export default [
    {
        plugins: {
            "deprecate-classnames": eslintPluginDeprecateClassnames,
        },
    }
]

Then configure the rules you want to use under the rules section.

Rules

classnames

This rule identifies the use of deprecated class names in your JSX/TSX files and suggests alternatives.

Example:

Specific classnames:

{
  "rules": {
    "deprecate-classnames/classnames": [
      "error",
      { "name": "test-classname", "use": "new-classname" }
    ]
  }
}

Multiple classnames:

{
  "rules": {
    "deprecate-classnames/classnames": [
      "error",
      {
        "names": ["test-classname", "test-classname-2"],
        "use": "new-classname"
      }
    ]
  }
}

Regular expression for classnames:

{
  "rules": {
    "deprecate-classnames/classnames": [
      "error",
      { "nameRegExp": "^test-", "use": "new-classname" }
    ]
  }
}

Multiple rules:

{
  "rules": {
    "deprecate-classnames/classnames": [
      "error",
      { "name": "old-classname1", "use": "new-classname1" },
      { "name": "old-classname2", "use": "new-classname2" },
      { "nameRegExp": "^deprecated-", "use": "new-class" }
    ]
  }
}

classes

This rule identifies the use of deprecated class names within the classes prop used in Material-UI components and suggests alternatives.

Example:

Specific classnames:

{
  "rules": {
    "deprecate-classnames/classes": [
      "error",
      { "name": "test-classname", "use": "new-classname" }
    ]
  }
}

Multiple classnames:

{
  "rules": {
    "deprecate-classnames/classes": [
      "error",
      {
        "names": ["test-classname", "test-classname-2"],
        "use": "new-classname"
      }
    ]
  }
}

Regular expression for classnames:

{
  "rules": {
    "deprecate-classnames/classes": [
      "error",
      { "nameRegExp": "^test-", "use": "new-classname" }
    ]
  }
}

Multiple rules:

{
  "rules": {
    "deprecate-classnames/classes": [
      "error",
      { "name": "old-classname1", "use": "new-classname1" },
      { "name": "old-classname2", "use": "new-classname2" },
      { "nameRegExp": "^deprecated-", "use": "new-class" }
    ]
  }
}

Summary

eslint-plugin-deprecate-classnames is a powerful tool for maintaining a clean and up-to-date codebase by ensuring deprecated class names are systematically identified and replaced. This is especially useful for large teams and during major refactoring efforts. By integrating this plugin, you can automate the enforcement of class name conventions and improve code quality.

For more information, visit the npm package page.

Credits

This plugin is an extension of the eslint-plugin-deprecate by AlexMost. The original plugin provides a flexible way to deprecate functions and variables, and this extension builds on that foundation to specifically target and manage deprecated class names in JSX and TSX files, with a special focus on the classes prop used in Material-UI components.