# eslint-plugin-css-modules

> Checks that you are using the existent css/scss/less classes, no more no less

Latest version **2.12.0** (published 2023-10-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install eslint-plugin-css-modules
pnpm add eslint-plugin-css-modules
yarn add eslint-plugin-css-modules
bun add eslint-plugin-css-modules
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 2.12.0 |
| Published | 2023-10-19 |
| First published | 2016-12-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=4.0.0 |
| Dependencies | 2 |
| Unpacked size | 90.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 157 |
| Author | Atif Afzal |
| Maintainers | atfzl, yuhsianw |
| Keywords | eslint, eslintplugin, eslint-plugin, css-modules |

## Links

- npm: https://www.npmjs.com/package/eslint-plugin-css-modules
- Repository: https://github.com/atfzl/eslint-plugin-css-modules
- npm.io page: https://npm.io/package/eslint-plugin-css-modules

## Dependencies (2)

- [lodash](https://npm.io/package/lodash.md) ^4.17.2
- [gonzales-pe](https://npm.io/package/gonzales-pe.md) ^4.3.0

## Alternatives

- [eslint-plugin-sonarjs](https://npm.io/package/eslint-plugin-sonarjs.md) — 2.9M weekly downloads
- [eslint-config-expo](https://npm.io/package/eslint-config-expo.md) — 1.5M weekly downloads
- [@matter/protocol](https://npm.io/package/@matter/protocol.md) — 63.5K weekly downloads
- [@eventcatalog/linter](https://npm.io/package/@eventcatalog/linter.md) — 24.8K weekly downloads
- [@inrupt/eslint-config-base](https://npm.io/package/@inrupt/eslint-config-base.md) — 4.5K weekly downloads

## Recent versions

- 2.12.0 (latest) — 2023-10-19
- 2.11.4 — 2023-09-19
- 2.11.3 — 2023-09-19
- 2.11.2 — 2023-09-19
- 2.11.1 — 2023-09-19
- 2.11.0 — 2019-01-07
- 2.10.0 — 2018-10-18
- 2.9.1 — 2018-09-07
- 2.9.0 — 2018-09-07
- 2.8.1 — 2018-08-29
- 2.8.0 — 2018-08-29
- 2.7.5 — 2017-08-22
- 2.7.4 — 2017-08-21
- 2.7.3 — 2017-07-23
- 2.7.2 — 2017-06-26
- … 21 more at https://npm.io/package/eslint-plugin-css-modules/versions

## README

# eslint-plugin-css-modules

[![Build Status](https://travis-ci.org/atfzl/eslint-plugin-css-modules.svg?branch=master)](https://travis-ci.org/atfzl/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
```js
/* 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
```js
/* 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](https://github.com/css-modules/icss#export).

>If you use the `camelCase` option of `css-loader`, you must also enabled it for this plugin
```js
/* eslint css-modules/no-undef-class: [2, { camelCase: true }] */
```

## Installation

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

## Usage:

.eslintrc
```json
{
  "plugins": [
    "css-modules"
  ],
  "extends": [
    "plugin:css-modules/recommended"
  ]
}
```

You may also tweak the rules individually. For instance, if you use the [camelCase](https://github.com/webpack-contrib/css-loader#camelcase) option of webpack's css-loader:

```json
{
  "plugins": [
    "css-modules"
  ],
  "extends": [
    "plugin:css-modules/recommended"
  ],
  "rules": {
    "css-modules/no-unused-class": [2, { "camelCase": true }],
    "css-modules/no-undef-class": [2, { "camelCase": true }]
  }
}
```

The camelCase option has 4 possible values, see [css-loader#camelCase](https://github.com/webpack-contrib/css-loader#camelcase) for description:
```js
true | "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:

```json
{
  "settings": {
    "css-modules": {
      "basePath": "app/scripts/..."
    }
  }
}
```

## Screen Shot

![ScreenShot](https://raw.githubusercontent.com/atfzl/eslint-plugin-css-modules/master/screenshots/screenshot3.png)

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

```scss
/* .head is global, will not be used in js */
:global(.head) {
  color: green;
}

.container {
  width: 116px;

  i {
    font-size: 2.2rem;
  }

  .button {
    padding: 7px 0 0 5px;
  }
}

.footer {
  color: cyan;
}
```

---
_Source: https://npm.io/package/eslint-plugin-css-modules · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._