docs: introduce typed-css-modules plugin

website/docs/en/plugins/list/_meta.json

@@ -23,6 +23,7 @@
   "plugin-styled-components",
   "plugin-check-syntax",
   "plugin-css-minimizer",
+  "plugin-typed-css-modules",
   "plugin-pug",
   "plugin-rem",
   "plugin-umd",

website/docs/en/plugins/list/index.mdx

@@ -66,6 +66,7 @@ The following are common framework-agnostic plugins:
 - [Stylus Plugin](/plugins/list/plugin-stylus): Use Stylus as the CSS preprocessor.
 - [Check Syntax Plugin](/plugins/list/plugin-check-syntax): Used to analyze the syntax compatibility of artifacts, to see if there are any advanced syntaxes that may cause compatibility issues.
 - [CSS Minimizer Plugin](/plugins/list/plugin-css-minimizer): Used to customize CSS minimizer, switch to [cssnano](https://cssnano.co/) or other tools for CSS compression.
+- [Typed CSS Modules Plugin](/plugins/list/plugin-typed-css-modules): Used to generate TypeScript declaration file for CSS Modules.
 - [Pug Plugin](/plugins/list/plugin-pug): Provides support for the Pug template engine.
 - [Rem Plugin](/plugins/list/plugin-rem): Implements the rem adaptive layout for mobile pages.
 - [UMD Plugin](/plugins/list/plugin-umd): Used to build outputs in UMD format.

website/docs/en/plugins/list/plugin-typed-css-modules.mdx

@@ -4,24 +4,34 @@ import { SourceCode } from 'rspress/theme';
 
 <SourceCode href="https://github.com/web-infra-dev/rsbuild/tree/main/packages/plugin-typed-css-modules" />
 
-{/* this plugin is still WIP */}
+The Typed CSS Modules plugin provides the ability to generate corresponding TypeScript declaration files for CSS Modules files in the project.
 
-## Generate exact type definitions
+## Quick Start
 
-Although the above method can provide the type of CSS Modules, it cannot accurately prompt which classNames are exported by a certain CSS file.
+### Install Plugin
 
-Rsbuild supports generating accurate type declarations for CSS Modules, you only need to enable the output.enableCssModuleTSDeclaration config, and then execute the build, Rsbuild will generate type declaration files for all CSS Modules.
+You can install the plugin using the following command:
+
+import { PackageManagerTabs } from '@theme';
+
+<PackageManagerTabs command="add @rsbuild/plugin-typed-css-modules -D" />
+
+### Register Plugin
+
+You can register the plugin in the `rsbuild.config.ts` file:
+
+```ts title="rsbuild.config.ts"
+import { pluginTypedCSSModules } from '@rsbuild/plugin-typed-css-modules';
 
-```ts
 export default {
-  output: {
-    enableCssModuleTSDeclaration: true,
-  },
+  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:
 
 ```tsx title="src/index.ts"

website/docs/zh/plugins/list/_meta.json

@@ -23,6 +23,7 @@
   "plugin-styled-components",
   "plugin-check-syntax",
   "plugin-css-minimizer",
+  "plugin-typed-css-modules",
   "plugin-pug",
   "plugin-rem",
   "plugin-umd",

website/docs/zh/plugins/list/index.mdx

@@ -66,6 +66,7 @@
 - [Stylus 插件](/plugins/list/plugin-stylus)：使用 Stylus 作为 CSS 预处理器。
 - [Check Syntax 插件](/plugins/list/plugin-check-syntax)：用于分析产物的语法兼容性，判断是否存在导致兼容性问题的高级语法。
 - [CSS Minimizer 插件](/plugins/list/plugin-css-minimizer)：用于自定义 CSS 压缩工具，切换到 [cssnano](https://cssnano.co/) 或其他工具进行 CSS 压缩。
+- [Typed CSS Modules 插件](/plugins/list/plugin-typed-css-modules)：用于为项目中的 CSS Modules 文件生成相应的类型声明文件。
 - [Pug 插件](/plugins/list/plugin-pug)：提供对 Pug 模板引擎的支持。
 - [Rem 插件](/plugins/list/plugin-rem)：用于实现移动端页面的 rem 自适应布局。
 - [UMD 插件](/plugins/list/plugin-umd)：用于构建 UMD 格式的产物。

website/docs/zh/plugins/list/plugin-typed-css-modules.mdx

@@ -4,24 +4,34 @@ import { SourceCode } from 'rspress/theme';
 
 <SourceCode href="https://github.com/web-infra-dev/rsbuild/tree/main/packages/plugin-typed-css-modules" />
 
-{/* this plugin is still WIP */}
+Typed CSS Modules 插件用于为项目中的 CSS Modules 文件生成相应的类型声明文件。
 
-## 生成准确的类型定义
+## 快速开始
 
-上述方法虽然可以解决 CSS Modules 在 TypeScript 中的类型问题，但是无法准确地提示出某个 CSS 文件导出了哪些类名。
+### 安装插件
 
-Rsbuild 支持为 CSS Modules 生成准确的类型声明，你只需要开启 output.enableCssModuleTSDeclaration 配置项，再执行构建命令，Rsbuild 就会为项目中所有的 CSS Modules 文件生成相应的类型声明文件。
+你可以通过如下的命令安装插件:
+
+import { PackageManagerTabs } from '@theme';
+
+<PackageManagerTabs command="add @rsbuild/plugin-typed-css-modules -D" />
+
+### 注册插件
+
+你可以在 `rsbuild.config.ts` 文件中注册插件：
+
+```ts title="rsbuild.config.ts"
+import { pluginTypedCSSModules } from '@rsbuild/plugin-typed-css-modules';
 
-```ts
 export default {
-  output: {
-    enableCssModuleTSDeclaration: true,
-  },
+  plugins: [pluginTypedCSSModules()],
 };
 ```
 
 ### 示例
 
+通过添加 Typed CSS Modules 插件，Rsbuild 会为项目中所有的 CSS Modules 文件生成相应的类型声明文件。
+
 例如某个文件夹下面有 `src/index.ts` 和 `src/index.module.scss` 两个文件：
 
 ```tsx title="src/index.ts"