# css-modules-typescript-loader

> Webpack loader to create TypeScript declarations for CSS Modules

Latest version **4.0.1** (published 2020-09-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install css-modules-typescript-loader
pnpm add css-modules-typescript-loader
yarn add css-modules-typescript-loader
bun add css-modules-typescript-loader
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 4.0.1 |
| Published | 2020-09-22 |
| First published | 2018-10-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 15.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 198 |
| Author | SEEK |
| Maintainers | seek-oss-ci |

## Links

- npm: https://www.npmjs.com/package/css-modules-typescript-loader
- Repository: https://github.com/seek-oss/css-modules-typescript-loader
- Homepage: https://github.com/seek-oss/css-modules-typescript-loader#readme
- Issues: https://github.com/seek-oss/css-modules-typescript-loader/issues
- npm.io page: https://npm.io/package/css-modules-typescript-loader

## Dependencies (2)

- [line-diff](https://npm.io/package/line-diff.md) ^2.0.1
- [loader-utils](https://npm.io/package/loader-utils.md) ^1.2.3

## Recent versions

- 4.0.1 (latest) — 2020-09-22
- 4.0.0 — 2019-10-30
- 3.0.1 — 2019-09-20
- 3.0.0 — 2019-08-21
- 2.0.4 — 2019-06-23
- 2.0.3 — 2019-05-29
- 2.0.2 — 2019-05-07
- 2.0.1 — 2019-04-30
- 2.0.0 — 2019-04-09
- 1.1.1 — 2019-01-10
- 1.1.0 — 2019-01-08
- 1.0.1 — 2019-01-08
- 1.0.0 — 2018-10-18

## README

[![Build Status](https://img.shields.io/travis/seek-oss/css-modules-typescript-loader/master.svg?style=flat-square)](http://travis-ci.org/seek-oss/css-modules-typescript-loader) [![npm](https://img.shields.io/npm/v/css-modules-typescript-loader.svg?style=flat-square)](https://www.npmjs.com/package/css-modules-typescript-loader) [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg?style=flat-square)](https://github.com/semantic-release/semantic-release) [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square)](http://commitizen.github.io/cz-cli/)

# css-modules-typescript-loader

[Webpack](https://webpack.js.org/) loader to create [TypeScript](https://www.typescriptlang.org/) declarations for [CSS Modules](https://github.com/css-modules/css-modules).

Emits TypeScript declaration files matching your CSS Modules in the same location as your source files, e.g. `src/Component.css` will generate `src/Component.css.d.ts`.

## Why?

There are currently a lot of [solutions to this problem](https://www.npmjs.com/search?q=css%20modules%20typescript%20loader). However, this package differs in the following ways:

- Encourages generated TypeScript declarations to be checked into source control, which allows `webpack` and `tsc` commands to be run in parallel in CI.

- Ensures committed TypeScript declarations are in sync with the code that generated them via the [`verify` mode](#verify-mode).

## Usage

Place `css-modules-typescript-loader` directly after `css-loader` in your webpack config.

```js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'css-modules-typescript-loader',
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          }
        ]
      }
    ]
  }
};
```

### Verify Mode

Since the TypeScript declarations are generated by `webpack`, they may potentially be out of date by the time you run `tsc`. To ensure your types are up to date, you can run the loader in `verify` mode, which is particularly useful in CI.

For example:

```js
{
  loader: 'css-modules-typescript-loader',
  options: {
    mode: process.env.CI ? 'verify' : 'emit'
  }
}
```

Instead of emitting new TypeScript declarations, this will throw an error if a generated declaration doesn't match the committed one. This allows `tsc` and `webpack` to run in parallel in CI, if desired.

This workflow is similar to using the [Prettier](https://github.com/prettier/prettier) [`--list-different` option](https://prettier.io/docs/en/cli.html#list-different).

## With Thanks

This package borrows heavily from [typings-for-css-modules-loader](https://github.com/Jimdo/typings-for-css-modules-loader).

## License

MIT.

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