docs: move typed CSS modules content to separate file (#1611)

packages/document/docs/en/guide/basic/css-modules.md

@@ -6,9 +6,12 @@ Rsbuild supports CSS Modules by default, you don't need to add additional config
 
 The following style files are considered CSS Modules:
 
-- `*.module.scss`
-- `*.module.less`
 - `*.module.css`
+- `*.module.less`
+- `*.module.sass`
+- `*.module.scss`
+- `*.module.styl`
+- `*.module.stylus`
 
 ## Example
 
@@ -124,55 +127,6 @@ 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 enable the [output.enableCssModuleTSDeclaration](/config/output/enablecssmodulesdeclaration) config, and then execute the build, Rsbuild will generate type declaration files for all CSS Modules.
-
-```ts
-export default {
-  output: {
-    enableCssModuleTSDeclaration: true,
-  },
-};
-``` -->
-
-### 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:

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

@@ -0,0 +1,52 @@
+# Typed CSS Modules Plugin
+
+{/* this plugin is still WIP */}
+
+## 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 enable the [output.enableCssModuleTSDeclaration](/config/output/enablecssmodulesdeclaration) config, and then execute the build, Rsbuild will generate type declaration files for all CSS Modules.
+
+```ts
+export default {
+  output: {
+    enableCssModuleTSDeclaration: true,
+  },
+};
+```
+
+### 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.

packages/document/docs/zh/guide/basic/css-modules.md

@@ -6,9 +6,12 @@ Rsbuild 默认支持使用 CSS Modules，无需添加额外的配置。我们约
 
 以下样式文件会被视为 CSS Modules：
 
-- `*.module.scss`
-- `*.module.less`
 - `*.module.css`
+- `*.module.less`
+- `*.module.sass`
+- `*.module.scss`
+- `*.module.styl`
+- `*.module.stylus`
 
 ## 示例
 
@@ -124,57 +127,6 @@ declare module '*.module.stylus' {
 
 添加类型声明后，如果依然存在上述错误提示，请尝试重启当前 IDE，或者调整 `env.d.ts` 所在的目录，使 TypeScript 能够正确识别类型定义。
 
-<!--
-## 生成准确的类型定义
-
-上述方法虽然可以解决 CSS Modules 在 TypeScript 中的类型问题，但是无法准确地提示出某个 CSS 文件导出了哪些类名。
-
-Rsbuild 支持为 CSS Modules 生成准确的类型声明，你只需要开启 [output.enableCssModuleTSDeclaration](/config/output/enablecssmoduletsdeclaration) 配置项，再执行构建命令，Rsbuild 就会为项目中所有的 CSS Modules 文件生成相应的类型声明文件。
-
-```ts
-export default {
-  output: {
-    enableCssModuleTSDeclaration: true,
-  },
-};
-``` -->
-
-### 示例
-
-例如某个文件夹下面有 `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` 文件中忽略它们：

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

@@ -0,0 +1,53 @@
+# Typed CSS Modules 插件
+
+{/* this plugin is still WIP */}
+
+## 生成准确的类型定义
+
+上述方法虽然可以解决 CSS Modules 在 TypeScript 中的类型问题，但是无法准确地提示出某个 CSS 文件导出了哪些类名。
+
+Rsbuild 支持为 CSS Modules 生成准确的类型声明，你只需要开启 [output.enableCssModuleTSDeclaration](/config/output/enablecssmoduletsdeclaration) 配置项，再执行构建命令，Rsbuild 就会为项目中所有的 CSS Modules 文件生成相应的类型声明文件。
+
+```ts
+export default {
+  output: {
+    enableCssModuleTSDeclaration: true,
+  },
+};
+```
+
+### 示例
+
+例如某个文件夹下面有 `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` 对象已经具备了准确的类型。