css-modules-typescript-loader
Webpack loader to create TypeScript declarations for 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. However, this package differs in the following ways:
-
Encourages generated TypeScript declarations to be checked into source control, which allows
webpack
andtsc
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.
Usage
Place css-modules-typescript-loader
directly after css-loader
in your webpack config.
moduleexports = 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:
loader: 'css-modules-typescript-loader' options: mode: processenvCI ? '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 --list-different
option.
With Thanks
This package borrows heavily from typings-for-css-modules-loader.
License
MIT.