eslint-plugin-css-modules

This plugin intends to help you in tracking down problems when you are using css-modules. It tells if you are using a non-existent css/scss/less class in js or if you forgot to use some classes which you declared in css/scss/less.

Rules

• css-modules/no-unused-class: You must use all the classes defined in css/scss/less file.

If you still want to mark a class as used, then use this comment on top of your file

1/* eslint css-modules/no-unused-class: [2, { markAsUsed: ['container'] }] */

where container is the css class that you want to mark as used. Add all such classes in the array.

If you use the camelCase option of css-loader, you must also enabled it for this plugin

1/* eslint css-modules/no-unused-class: [2, { camelCase: true }] */

• css-modules/no-undef-class: You must not use a non existing class, or a property that hasn't been exported using the :export keyword.

If you use the camelCase option of css-loader, you must also enabled it for this plugin

1/* eslint css-modules/no-undef-class: [2, { camelCase: true }] */

Installation

npm i --save-dev eslint-plugin-css-modules

Usage:

.eslintrc

1{
2  "plugins": [
3    "css-modules"
4  ],
5  "extends": [
6    "plugin:css-modules/recommended"
7  ]
8}

You may also tweak the rules individually. For instance, if you use the camelCase option of webpack's css-loader:

1{
2  "plugins": [
3    "css-modules"
4  ],
5  "extends": [
6    "plugin:css-modules/recommended"
7  ],
8  "rules": {
9    "css-modules/no-unused-class": [2, { "camelCase": true }],
10    "css-modules/no-undef-class": [2, { "camelCase": true }]
11  }
12}

The camelCase option has 4 possible values, see css-loader#camelCase for description:

1true | "dashes" | "only" | "dashes-only"

Specifying base path

You can specify path for the base directory via plugin settings in .eslintrc. This is used by the plugin to resolve absolute (S)CSS paths:

1{
2  "settings": {
3    "css-modules": {
4      "basePath": "app/scripts/..."
5    }
6  }
7}

Screen Shot

   1:8   error  Unused classes found: container  css-modules/no-unused-class
   5:17  error  Class 'containr' not found       css-modules/no-undef-class
  10:26  error  Class 'foo' not found            css-modules/no-undef-class

scss:

1/* .head is global, will not be used in js */
2:global(.head) {
3  color: green;
4}
5
6.container {
7  width: 116px;
8
9  i {
10    font-size: 2.2rem;
11  }
12
13  .button {
14    padding: 7px 0 0 5px;
15  }
16}
17
18.footer {
19  color: cyan;
20}