Typed CSS Modules Plugin#

The Typed CSS Modules plugin provides the ability to generate TypeScript declaration files for CSS Modules in the project.

Quick Start#

Install Plugin#

You can install the plugin using the following command:

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

Register Plugin#

You can register the plugin in the rsbuild.config.ts file:

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.