@siteone/eslint-plugin-bem-css-modules

ESLint plugin to enforce BEM kebab-case syntax in CSS modules

Installation

You'll need ESLint as a prerequisite:

npm install eslint --save-dev

Next, install @siteone/eslint-plugin-bem-css-modules:

npm install @siteone/eslint-plugin-bem-css-modules --save-dev

Usage

Add @siteone/bem-css-modules to the plugins section of your .eslintrc configuration file:

{
  "plugins": ["@siteone/bem-css-modules"]
}

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

{
  "rules": {
    "@siteone/bem-css-modules/enforce-bem-css-modules": "error"
  }
}

Or use the recommended configuration:

{
  "extends": ["plugin:@siteone/bem-css-modules/recommended"]
}

Rules

enforce-bem-css-modules

This rule ensures that CSS modules are accessed using bracket notation with BEM kebab-case syntax.

Options

The rule accepts an options object with the following properties:

{
  "bem-css-modules/enforce-bem-css-modules": ["error", {
    "importPatterns": [".css", ".scss", ".module.css", ".module.scss", ""]
  }]
}

• importPatterns: An array of string patterns that identify CSS module imports. Default: ['.css', '.scss', '.module.css', '.module.scss', '']

Examples

Examples of incorrect code for this rule:

import styles from './styles.module.css';

// Using dot notation (wrong)
<div className={styles.header}></div>

// Using camelCase (wrong BEM format)
<div className={styles['headerTitle']}></div>

Examples of correct code for this rule:

import styles from './styles.module.css';

// Using bracket notation with BEM syntax
<div className={styles['header']}></div>
<div className={styles['header__title']}></div>
<div className={styles['button--primary']}></div>
<div className={styles['card__button--disabled']}></div>

License

MIT