docs: update README

Author: chenjiahan

README.md

@@ -1,10 +1,10 @@
-# rsbuild-plugin-example
+# @rsbuild/plugin-typed-css-modules
 
-rsbuild-plugin-example is a Rsbuild plugin to do something.
+An Rsbuild plugin to generate TypeScript declaration files for CSS Modules.
 
 <p>
-  <a href="https://npmjs.com/package/rsbuild-plugin-example">
-   <img src="https://img.shields.io/npm/v/rsbuild-plugin-example?style=flat-square&colorA=564341&colorB=EDED91" alt="npm version" />
+  <a href="https://npmjs.com/package/@rsbuild/plugin-typed-css-modules">
+   <img src="https://img.shields.io/npm/v/@rsbuild/plugin-typed-css-modules?style=flat-square&colorA=564341&colorB=EDED91" alt="npm version" />
   </a>
   <img src="https://img.shields.io/badge/License-MIT-blue.svg?style=flat-square&colorA=564341&colorB=EDED91" alt="license" />
 </p>
@@ -14,36 +14,89 @@ rsbuild-plugin-example is a Rsbuild plugin to do something.
 Install:
 
 ```bash
-npm add rsbuild-plugin-example -D
+npm add @rsbuild/plugin-typed-css-modules -D
 ```
 
 Add plugin to your `rsbuild.config.ts`:
 
 ```ts
 // rsbuild.config.ts
-import { pluginExample } from "rsbuild-plugin-example";
+import { pluginTypedCSSModules } from "@rsbuild/plugin-typed-css-modules";
 
 export default {
-  plugins: [pluginExample()],
+  plugins: [pluginTypedCSSModules()],
 };
 ```
 
-## Options
+## Example
 
-### foo
+By adding the Typed CSS Modules plugin, Rsbuild will generate TypeScript declaration files for all CSS Modules in the project.
 
-Some description.
+For example, create two files named `src/index.ts` and `src/index.module.css`:
 
-- Type: `string`
-- Default: `undefined`
-- Example:
+```tsx title="src/index.ts"
+import styles from "./index.module.css";
 
-```js
-pluginExample({
-  foo: "bar",
-});
+console.log(styles.pageHeader);
 ```
 
+```css title="src/index.module.css"
+.page-header {
+  color: black;
+}
+```
+
+After building, Rsbuild will generate a `src/index.module.css.d.ts` type declaration file:
+
+```ts title="src/index.module.css.d.ts"
+interface CssExports {
+  "page-header": string;
+  pageHeader: string;
+}
+declare const cssExports: CssExports;
+export default cssExports;
+```
+
+Now when you open the `src/index.ts` file, you can see that the `styles` object already has an accurate type.
+
+## Named Export
+
+If [output.cssModules.namedExport](/config/output/css-modules#cssmodulesnamedexport) is enabled, the generated type declaration file will only include named exports.
+
+For example:
+
+```css title="index.module.css"
+.page {
+  color: black;
+}
+.header {
+  color: white;
+}
+```
+
+The generated types would be:
+
+```ts title="src/index.module.css.d.ts"
+export const page: string;
+export const header: string;
+```
+
+## Configure Git
+
+In the above example, `src/index.module.css.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:
+
+```bash
+# Ignore auto generated CSS declarations
+*.module.css.d.ts
+*.module.sass.d.ts
+*.module.scss.d.ts
+*.module.less.d.ts
+*.module.styl.d.ts
+*.module.stylus.d.ts
+```
+
+In addition, if the generated code causes ESLint to report errors, you can also add the above configuration to the `.eslintignore` file.
+
 ## License
 
 [MIT](./LICENSE).

package.json

@@ -1,7 +1,7 @@
 {
-  "name": "rsbuild-plugin-example",
+  "name": "@rsbuild/plugin-typed-css-modules",
   "version": "0.0.0",
-  "repository": "https://github.com/rspack-contrib/rsbuild-plugin-template",
+  "repository": "https://github.com/rspack-contrib/rsbuild-plugin-typed-css-modules",
   "license": "MIT",
   "type": "module",
   "exports": {
@@ -43,14 +43,14 @@
     "typescript": "^5.5.2"
   },
   "peerDependencies": {
-    "@rsbuild/core": "0.x || 1.x"
+    "@rsbuild/core": "1.x"
   },
   "peerDependenciesMeta": {
     "@rsbuild/core": {
       "optional": true
     }
   },
-  "packageManager": "pnpm@9.2.0",
+  "packageManager": "pnpm@9.5.0",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"

playground/rsbuild.config.ts

@@ -1,6 +1,6 @@
 import { defineConfig } from '@rsbuild/core';
-import { pluginExample } from '../src';
+import { pluginTypedCSSModules } from '../src';
 
 export default defineConfig({
-  plugins: [pluginExample()],
+  plugins: [pluginTypedCSSModules()],
 });

src/index.ts

@@ -1,12 +1,12 @@
 import type { RsbuildPlugin } from '@rsbuild/core';
 
-export type PluginExampleOptions = {
+export type pluginTypedCSSModulesOptions = {
   foo?: string;
   bar?: boolean;
 };
 
-export const pluginExample = (
-  options: PluginExampleOptions = {},
+export const pluginTypedCSSModules = (
+  options: pluginTypedCSSModulesOptions = {},
 ): RsbuildPlugin => ({
   name: 'plugin-example',
 

test/basic/index.test.ts

@@ -2,7 +2,7 @@ import { dirname } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { expect, test } from '@playwright/test';
 import { createRsbuild } from '@rsbuild/core';
-import { pluginExample } from '../../src';
+import { pluginTypedCSSModules } from '../../src';
 import { getRandomPort } from '../helper';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
@@ -11,7 +11,7 @@ test('should render page as expected', async ({ page }) => {
   const rsbuild = await createRsbuild({
     cwd: __dirname,
     rsbuildConfig: {
-      plugins: [pluginExample()],
+      plugins: [pluginTypedCSSModules()],
       server: {
         port: getRandomPort(),
       },
@@ -30,7 +30,7 @@ test('should build succeed', async ({ page }) => {
   const rsbuild = await createRsbuild({
     cwd: __dirname,
     rsbuildConfig: {
-      plugins: [pluginExample()],
+      plugins: [pluginTypedCSSModules()],
     },
   });