# css-modules-types-loader

<!-- prettier-ignore -->
> A webpack loader that dynamically generates TypeScript typings for CSS modules from css-loader.
>
> [![NPM Version][npm-image]][npm-url]
> [![Download Status][download-image]][npm-url]
> [![Languages Status][languages-image]][github-url]
> [![Tree Shakeable][tree-shakeable-image]][bundle-phobia-url]
> [![Side Effect][side-effect-image]][bundle-phobia-url]
> [![License][license-image]][license-url]

## Features

- Generate `*.d.ts` files for CSS Modules automatically.
- Supports both **webpack** and **Rspack**.
- Removes stale `*.d.ts` files when the module no longer exports class names.
- Optional banner and line-ending (`eol`) customization.

## Install

```bash
pnpm add -D css-modules-types-loader
# or
npm i -D css-modules-types-loader
# or
yarn add -D css-modules-types-loader
```

## Usage

### Webpack

```js
// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.module\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-modules-types-loader',
            options: {
              banner: '// This file is automatically generated.',
              eol: '\n'
            }
          },
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          }
        ]
      }
    ]
  }
};
```

### Rspack

```js
// rspack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.module\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-modules-types-loader/rspack',
            options: {
              banner: '// This file is automatically generated.',
              eol: '\n'
            }
          },
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          }
        ]
      }
    ]
  }
};
```

## Options

| Option   | Type     | Default     | Description                                              |
| -------- | -------- | ----------- | -------------------------------------------------------- |
| `banner` | `string` | `undefined` | Adds a banner prefix to each generated `*.d.ts` file.    |
| `eol`    | `string` | `"\\n"`     | Controls newline characters in generated `*.d.ts` files. |

## How it works

- The loader reads css-loader's JavaScript module output.
- It parses exported class names and generates matching TypeScript declarations.
- If no styles are exported, the corresponding `*.d.ts` file is removed.

## License

MIT

[npm-image]: https://img.shields.io/npm/v/css-modules-types-loader?style=flat-square
[npm-url]: https://www.npmjs.org/package/css-modules-types-loader
[download-image]: https://img.shields.io/npm/dm/css-modules-types-loader?style=flat-square
[languages-image]: https://img.shields.io/github/languages/top/nuintun/css-modules-types-loader?style=flat-square
[github-url]: https://github.com/nuintun/css-modules-types-loader
[tree-shakeable-image]: https://img.shields.io/badge/tree--shakeable-true-brightgreen?style=flat-square
[side-effect-image]: https://img.shields.io/badge/side--effect-free-brightgreen?style=flat-square
[bundle-phobia-url]: https://bundlephobia.com/result?p=css-modules-types-loader
[license-image]: https://img.shields.io/github/license/nuintun/css-modules-types-loader?style=flat-square
[license-url]: https://github.com/nuintun/css-modules-types-loader/blob/main/LICENSE