docs(css-modules): add generate exact type definitions guide (#2388)

Author: 9aoy

website/docs/en/guide/basic/css-modules.mdx

@@ -144,6 +144,55 @@ declare module '*.module.stylus';
 
 After adding the type declaration, if the type error still exists, you can try to restart the current IDE, or adjust the directory where `env.d.ts` is located, making sure the TypeScript can correctly identify the type definition.
 
+## Generate exact type definitions
+
+Although the above method can provide the type of CSS Modules, it cannot accurately prompt which classNames are exported by a certain CSS file.
+
+Rsbuild supports generating accurate type declarations for CSS Modules, you only need to register the [Typed CSS Modules Plugin](/plugins/list/plugin-typed-css-modules), and then execute the build, Rsbuild will generate type declaration files for all CSS Modules.
+
+```ts file=rsbuild.config.ts
+import { pluginTypedCSSModules } from '@rsbuild/plugin-typed-css-modules';
+
+export default {
+  plugins: [pluginTypedCSSModules()],
+};
+```
+
+### Example
+
+For example, there are two files `src/index.ts` and `src/index.module.scss` under a certain folder:
+
+```tsx title="src/index.ts"
+import styles from './index.module.scss';
+
+export default () => {
+  <div>
+    <div className={styles.pageHeader}>Page Header</div>
+  </div>;
+};
+```
+
+```scss title="src/index.module.scss"
+.page-header {
+  color: black;
+}
+```
+
+After executing the build, the `src/index.module.scss.d.ts` type declaration file will be automatically generated:
+
+```ts title="src/index.module.scss.d.ts"
+// 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.
+
 ### Related configuration
 
 In the above example, `src/index.module.scss.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:

website/docs/zh/guide/basic/css-modules.mdx

@@ -144,6 +144,56 @@ declare module '*.module.stylus';
 
 添加类型声明后，如果依然存在类型错误，请尝试重启当前 IDE，或者调整 `env.d.ts` 所在的目录，使 TypeScript 能够正确识别类型定义。
 
+## 生成准确的类型定义
+
+上述方法虽然可以解决 CSS Modules 在 TypeScript 中的类型问题，但是无法准确地提示出某个 CSS 文件导出了哪些类名。
+
+Rsbuild 支持为 CSS Modules 生成准确的类型声明，你只需要开启 [Typed CSS Modules 插件](/plugins/list/plugin-typed-css-modules)，再执行构建命令，Rsbuild 就会为项目中所有的 CSS Modules 文件生成相应的类型声明文件。
+
+```ts title="rsbuild.config.ts"
+import { pluginTypedCSSModules } from '@rsbuild/plugin-typed-css-modules';
+
+export default {
+  plugins: [pluginTypedCSSModules()],
+};
+```
+
+### 示例
+
+例如某个文件夹下面有 `src/index.ts` 和 `src/index.module.scss` 两个文件：
+
+```tsx title="src/index.ts"
+import styles from './index.module.scss';
+
+export default () => {
+  <div>
+    <div className={styles.pageHeader}>Page Header</div>
+  </div>;
+};
+```
+
+```scss
+// index.module.scss
+.page-header {
+  color: black;
+}
+```
+
+执行构建命令后，会自动生成 `src/index.module.scss.d.ts` 类型声明文件：
+
+```ts title="src/index.module.scss.d.ts"
+// 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;
+```
+
+此时再打开 `src/index.ts` 文件，可以看到 `styles` 对象已经具备了准确的类型。
+
 ### 相关配置
 
 在上述例子中，`src/index.module.scss.d.ts` 是编译生成的代码，你可以选择将它们提交到 Git 仓库里，也可以选择在 `.gitignore` 文件中忽略它们：