@rsbuild/plugin-typed-css-modules

An Rsbuild plugin to generate TypeScript declaration files for CSS Modules.

Usage

Install:

npm add @rsbuild/plugin-typed-css-modules -D

Add plugin to your rsbuild.config.ts:

// rsbuild.config.ts
import { pluginTypedCSSModules } from "@rsbuild/plugin-typed-css-modules";

export default {
  plugins: [pluginTypedCSSModules()],
};

Example

By adding the Typed CSS Modules plugin, Rsbuild will generate TypeScript declaration files for all CSS Modules in the project.

For example, create two files named src/index.ts and src/index.module.css:

import styles from "./index.module.css";

console.log(styles.pageHeader);

.page-header {
  color: black;
}

After building, Rsbuild will generate a src/index.module.css.d.ts type declaration file:

interface CssExports {
  "page-header": string;
  pageHeader: string;
}
declare const cssExports: CssExports;
export default cssExports;

Now when you open the src/index.ts file, you can see that the styles object already has an accurate type.

Named Export

If output.cssModules.namedExport is enabled, the generated type declaration file will only include named exports.

For example:

.page {
  color: black;
}
.header {
  color: white;
}

The generated types would be:

export const page: string;
export const header: string;

Configure Git

In the above example, src/index.module.css.d.ts is generated by compilation, you can choose to commit them to the Git repository, or you can choose to ignore them in the .gitignore file:

# Ignore auto generated CSS declarations
*.module.css.d.ts
*.module.sass.d.ts
*.module.scss.d.ts
*.module.less.d.ts
*.module.styl.d.ts
*.module.stylus.d.ts

In addition, if the generated code causes ESLint to report errors, you can also add the above configuration to the .eslintignore file.

Options

looseTyping

• Type: boolean
• Default: false

When enabled, the generated type definition will include an index signature ([key: string]: string).

This allows you to reference any class name without TypeScript errors, while still keeping autocomplete and type hints for existing class names.

It's useful if you only need editor IntelliSense and don't require strict type checking for CSS module exports.

pluginTypedCSSModules({
  looseTyping: true,
});

Credits

The loader was forked from seek-oss/css-modules-typescript-loader.

License

MIT.