Typed CSS Modules Plugin#

The Typed CSS Modules plugin provides the ability to generate TypeScript declaration files for CSS Modules files 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 corresponding TypeScript declaration files for all CSS Modules files in the project.

For example, there are two files src/index.ts and src/index.module.scss under a certain folder:

import styles from './index.module.scss';

export default () => {
  <div>
    <div className={styles.pageHeader}>Page Header</div>
  </div>;
};

.page-header {
  color: black;
}

After executing the build, the src/index.module.scss.d.ts type declaration file will be automatically generated:

// This file is automatically generated.
// Please do not change this file!
interface CssExports {
  'page-header': string;
  pageHeader: string;
}
export const cssExports: CssExports;
export default cssExports;

Then open the src/index.ts file again, you will see that the styles object already has a exact type.