eslint-plugin-deprecate-classnames-many

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-many:

npm install eslint-plugin-deprecate-classnames-many --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-many"
    ]
}

v9 Flat config

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

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

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

Rule: classnames

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

Examples

Given the following JSX code:

<div className="test-classname test-classname-2" />

Specific classnames

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

Multiple classnames

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

Regular expression for classnames

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

Multiple rules

{
    "rules": {
        "deprecate-classnames-many/classnames": ["error", {
            "disAllow": [
                {"nameRegExp": "^test-foo-", "use": "new-foo-"}
                {"nameRegExp": "^test-bar-", "use": "new-bar-"}
            ]
        }]
    }
}

note: this is not supported yet for the classes rule

Rule: classes

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

Class Examples

Given the following JSX code:

<div classes={{ root: "test-classname test-classname-2" }} />

Specific classes

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

Multiple classes

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

Regular expression for classes

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

Summary

eslint-plugin-deprecate-classnames-many is a powerful tool for maintaining a clean and up-to-date code base 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 fork is an extension of eslint-plugin-deprecate-classnames. The package ended up not proving very helpful for its intended purpose as it only allowed a single option.