eslint-plugin-classname-cn

ESLint plugin that enforces using a cn() utility for dynamic className values in JSX.

Why

This rule helps keep class composition consistent by preventing ad-hoc conditional patterns in className, such as:

• ternary expressions
• logical expressions
• template literals with interpolations

Installation

npm i -D eslint-plugin-classname-cn

Usage

Flat config (eslint.config.js)

import classnameCn from "eslint-plugin-classname-cn";

export default [
  ...classnameCn.configs["flat/recommended"]
];

Legacy config (.eslintrc.cjs)

module.exports = {
  plugins: ["classname-cn"],
  extends: ["plugin:classname-cn/recommended"]
};

Manual rule setup

module.exports = {
  plugins: ["classname-cn"],
  rules: {
    "classname-cn/use-cn-for-classname": "error"
  }
};

Rule

classname-cn/use-cn-for-classname

Disallows these dynamic patterns in className:

• <div className={isOpen ? "open" : "closed"} />
• <div className={isOpen && "open"} />
• <div className={btn ${variant}} />

Use your cn(...) helper instead.

Development

npm run build
npm run test