docs: CSS modules named imports example

e2e/cases/css/css-modules-named-export/index.test.ts

@@ -0,0 +1,27 @@
+import { build, gotoPage, rspackOnlyTest } from '@e2e/helper';
+import { expect } from '@playwright/test';
+
+rspackOnlyTest(
+  'should compile CSS modules with named exports correctly',
+  async ({ page }) => {
+    const rsbuild = await build({
+      cwd: __dirname,
+      runServer: true,
+    });
+    const files = await rsbuild.unwrapOutputJSON();
+
+    const content =
+      files[Object.keys(files).find((file) => file.endsWith('.css'))!];
+
+    expect(content).toMatch(
+      /\.classA-\w{6}{color:red}\.classB-\w{6}{color:blue}\.classC-\w{6}{color:yellow}/,
+    );
+
+    await gotoPage(page, rsbuild);
+    const root = page.locator('#root');
+    const text = await root.innerHTML();
+
+    expect(text).toMatch(/classA-\w{6} classB-\w{6} classC-\w{6}/);
+    await rsbuild.close();
+  },
+);

e2e/cases/css/css-modules-named-export/src/a.module.css

@@ -0,0 +1,3 @@
+.classA {
+  color: red;
+}

e2e/cases/css/css-modules-named-export/src/b.module.scss

@@ -0,0 +1,3 @@
+.classB {
+  color: blue;
+}

e2e/cases/css/css-modules-named-export/src/c.module.less

@@ -0,0 +1,3 @@
+.classC {
+  color: yellow;
+}

e2e/cases/css/css-modules-named-export/src/index.js

@@ -0,0 +1,9 @@
+import { classA } from './a.module.css';
+import { classB } from './b.module.scss';
+import { classC } from './c.module.less';
+
+const root = document.querySelector('#root');
+
+if (root) {
+  root.innerHTML = `${classA} ${classB} ${classC}`;
+}

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

@@ -17,23 +17,29 @@ The following style files are considered CSS Modules:
 
 - Write style:
 
-```css
-/* button.module.css */
-.error {
+```css title="button.module.css"
+.red {
   background: red;
 }
 ```
 
 - Using styles:
 
-```tsx
-// Button.tsx
-import React, { Component } from 'react';
-// import style file
+```tsx title="Button.tsx"
 import styles from './button.module.css';
 
 export default () => {
-  return <button className={styles.error}>Error Button</button>;
+  return <button className={styles.red}>Button</button>;
+};
+```
+
+- You can also reference class names through named imports:
+
+```tsx title="Button.tsx"
+import { red } from './button.module.css';
+
+export default () => {
+  return <button className={red}>Button</button>;
 };
 ```
 

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

@@ -17,23 +17,29 @@ Rsbuild 默认支持使用 CSS Modules，无需添加额外的配置。我们约
 
 - 编写样式：
 
-```css
-/* button.module.css */
-.error {
+```css title="button.module.css"
+.red {
   background: red;
 }
 ```
 
 - 使用样式：
 
-```tsx
-// Button.tsx
-import React, { Component } from 'react';
-// 引入样式文件
+```tsx title="Button.tsx"
 import styles from './button.module.css';
 
 export default () => {
-  return <button className={styles.error}>Error Button</button>;
+  return <button className={styles.red}>Button</button>;
+};
+```
+
+- 你也可以通过具名导入来引用类名：
+
+```tsx title="Button.tsx"
+import { red } from './button.module.css';
+
+export default () => {
+  return <button className={red}>Button</button>;
 };
 ```