@modern-js/main-doc 2.69.7 → 3.0.0-alpha.1

package/docs/zh/guides/upgrade/tailwindcss.mdx

@@ -0,0 +1,130 @@
+# Tailwind 插件变更
+
+Modern.js 3.0 推荐通过 Rsbuild 原生方式接入 Tailwind CSS，不再依赖 `@modern-js/plugin-tailwindcss` 插件，从而充分利用 Rsbuild 提供的更灵活的配置能力和更优的构建体验。
+
+## 迁移步骤
+
+本小节中的迁移操作都是仅当项目中实际使用了 `@modern-js/plugin-tailwindcss` 插件时才需要执行。
+
+### 1. 移除旧插件
+
+移除 `@modern-js/plugin-tailwindcss` 依赖和配置。
+
+**2.0 版本：**
+
+```ts title="modern.config.ts"
+import { defineConfig } from '@modern-js/app-tools';
+import tailwindcssPlugin from '@modern-js/plugin-tailwindcss';
+
+export default defineConfig({
+  plugins: [tailwindcssPlugin()],
+});
+```
+
+**3.0 版本：**
+
+```ts title="modern.config.ts"
+import { defineConfig } from '@modern-js/app-tools';
+
+export default defineConfig({
+  plugins: [],
+});
+```
+
+同时移除 `package.json` 中的 `@modern-js/plugin-tailwindcss` 依赖。
+
+### 2. 配置 PostCSS
+
+创建或更新 `postcss.config.cjs` 文件。
+
+```js title="postcss.config.cjs"
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+```
+
+### 3. Tailwind CSS 配置迁移
+
+**单一配置情况**：
+
+- 若仅在 `tailwind.config.{ts,js}` 中配置，则无需额外处理
+- 若仅在 `modern.config.ts` 中配置，需将 Tailwind 相关配置移植到 `tailwind.config.{ts,js}` 中
+
+**双重配置情况**：
+
+若在 `tailwind.config.{ts,js}` 与 `modern.config.ts` 中都有配置，需要合并两者的配置内容，并将合并后的配置移植到 `tailwind.config.{ts,js}`。
+
+**特殊目录处理**：
+
+若项目中存在 storybook 或 config/html 目录，需在 `tailwind.config.{ts,js}` 的 `content` 中补充：
+
+```ts title="tailwind.config.ts"
+export default {
+  content: [
+    './src/**/*.{js,jsx,ts,tsx}',
+    './storybook/**/*', // 如果存在 storybook 目录
+    './config/html/**/*.{html,ejs,hbs}', // 如果存在 config/html 目录
+  ],
+};
+```
+
+### 4. CSS 样式引入
+
+将 CSS 导入方式变更为 `@tailwind` 指令方式。
+
+**2.0 版本：**
+
+```css
+@import 'tailwindcss/base.css';
+@import 'tailwindcss/components.css';
+@import 'tailwindcss/utilities.css';
+```
+
+**3.0 版本：**
+
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+### 5. Twin.macro 集成
+
+若项目中有使用 twin.macro，需要手动配置。未使用则可忽略此步骤。
+
+**处理步骤**：
+
+1. 手动安装依赖：`pnpm add twin.macro styled-components babel-plugin-macros -D`
+2. 在 `modern.config.ts` 中配置 `babel-plugin-macros` 插件：
+
+```ts title="modern.config.ts"
+export default defineConfig({
+  plugins: [appTools()],
+  tools: {
+    babel: {
+      plugins: [
+        [
+          'babel-plugin-macros',
+          {
+            twin: {
+              preset: 'styled-components',
+              config: './tailwind.config.ts',
+            },
+          },
+        ],
+      ],
+    },
+  },
+});
+```
+
+## Tailwind CSS V2 版本迁移
+
+如果你的项目仍使用 Tailwind CSS v2，我们推荐你升级到 v3 以支持 JIT 等能力。关于 Tailwind CSS v2 与 v3 版本之间的差异，请参考：
+
+- [Tailwind CSS v3.0](https://tailwindcss.com/blog/tailwindcss-v3)
+- [Upgrade Guide](https://v3.tailwindcss.com/docs/upgrade-guide)
+
+Tailwind CSS v2 迁移同样参考上述步骤，但需要注意的是，原插件自动适配 Tailwind v2（`purge` 配置）与 v3（`content` 配置）的差异。移除插件后，如果使用 v2，需在 `tailwind.config.{ts,js}` 中使用 `purge` 配置项来指定需要保留的 CSS 类名。

package/docs/zh/guides/upgrade/web-server.md

@@ -0,0 +1,93 @@
+# 自定义 Web Server 变化
+
+本章节覆盖两类旧版自定义 Server API 的升级
+
+- **unstableMiddleware**
+- **Hook**
+
+这两种写法在旧版中互斥，迁移时请根据项目实际使用的能力选择对应路径。
+
+
+## unstableMiddleware
+
+### 核心差异
+
+- **文件结构**：`server/index.ts` → `server/modern.server.ts`
+- **导出方式**：`unstableMiddleware` 数组 → `defineServerConfig`
+- **Context API**：Modern.js Server Context → Hono Context（`c.req`/`c.res`）
+- **中间件执行**：旧版可不调用 `next()`，新版必须调用后续链路才会执行
+- **响应方式**：`c.response.raw()` → `c.text()` / `c.json()`
+
+### 文件与导出
+
+```typescript
+// 旧版 - server/index.ts
+export const unstableMiddleware: UnstableMiddleware[] = [middleware1, middleware2];
+
+// 新版 - server/modern.server.ts
+import { defineServerConfig } from '@modern-js/server-runtime';
+
+export default defineServerConfig({
+  middlewares: [
+    { name: 'middleware1', handler: middleware1 },
+    { name: 'middleware2', handler: middleware2 },
+  ],
+});
+```
+
+### 类型与 next 调用
+
+```typescript
+// 旧版
+import type { UnstableMiddleware, UnstableMiddlewareContext } from '@modern-js/server-runtime';
+const middleware: UnstableMiddleware = async (c: UnstableMiddlewareContext, next) => {
+  return c.response.raw('response'); // 不调用 next 也会继续渲染
+};
+
+// 新版
+import { defineServerConfig, type MiddlewareHandler } from '@modern-js/server-runtime';
+const middleware: MiddlewareHandler = async (c, next) => {
+  await next(); // 必须调用
+  return c.text('response');
+};
+```
+
+### Context API 对照
+
+| 旧版 API               | 新版 API                 | 说明            |
+| -------------------- | ---------------------- | ------------- |
+| `c.request.cookie`   | `getCookie(c, 'key')`  | Cookie 读取      |
+| `c.req.cookie()`     | `getCookie(c, 'key')`  | Hono v4 已废弃    |
+| `c.request.pathname` | `c.req.path`           | 请求路径          |
+| `c.request.host`     | `c.req.header('Host')` | 请求主机          |
+| `c.request.query`    | `c.req.query()`        | 查询参数          |
+| `c.request.headers`  | `c.req.header()`       | 请求头           |
+| `c.response.status`  | `c.status()`           | 响应状态码         |
+| `c.response.set`     | `c.res.headers.set`    | 设置响应头         |
+| `c.response.raw`     | `c.text` / `c.json`    | 响应体           |
+
+
+## afterRender Hook
+
+`afterRender` 仅用于页面渲染完成后的 HTML 处理。
+
+```typescript
+import { defineServerConfig, type MiddlewareHandler } from '@modern-js/server-runtime';
+
+const renderMiddleware: MiddlewareHandler = async (c, next) => {
+  await next(); // 先等待页面渲染
+  const { res } = c;
+  const html = await res.text();
+
+  const modified = html
+    .replace('<head>', '<head><meta name="author" content="ByteDance">')
+    .replace('<body>', '<body><div id="loading">Loading...</div>')
+    .replace('</body>', '<script>console.log("Page loaded")</script></body>');
+
+  c.res = c.body(modified, { status: res.status, headers: res.headers });
+};
+
+export default defineServerConfig({
+  renderMiddlewares: [{ name: 'custom-content-injection', handler: renderMiddleware }],
+});
+```

package/docs/zh/plugin/_meta.json

@@ -11,6 +11,11 @@
     "name": "runtime-plugins",
     "label": "runtime-plugins"
   },
+  {
+    "type": "dir",
+    "name": "server-plugins",
+    "label": "server-plugins"
+  },
   {
     "type": "dir",
     "name": "official",

package/docs/zh/plugin/cli-plugins/_meta.json

@@ -1 +1 @@
-["api", "life-cycle", "migration"]
+["api", "life-cycle"]

package/docs/zh/plugin/cli-plugins/api.mdx

@@ -1,6 +1,6 @@
 # 插件 API
 
-本文档详细介绍了 Modern.js CLI 插件的 API。CLI 插件允许您在 Modern.js 项目的构建和开发过程中扩展和定制功能。
+Modern.js 的 CLI 插件允许您在 Modern.js 项目的构建和开发过程中扩展和定制功能。
 
 :::info
 
@@ -13,9 +13,9 @@ CLI 插件需要通过 `modern.config.ts` 中的 [`plugins`](/configure/app/plug
 一个典型的 CLI 插件结构如下：
 
 ```typescript
-import type { CliPluginFuture, AppTools } from '@modern-js/app-tools';
+import type { CliPlugin, AppTools } from '@modern-js/app-tools';
 
-const myCliPlugin = (): CliPluginFuture<AppTools<'shared'>> => ({
+const myCliPlugin = (): CliPlugin<AppTools> => ({
   name: '@my-org/my-plugin', // 插件名称，确保唯一性
   setup: api => {
     // 在这里使用 API 注册钩子、添加命令等
@@ -28,7 +28,8 @@ const myCliPlugin = (): CliPluginFuture<AppTools<'shared'>> => ({
 export default myCliPlugin;
 ```
 
-`setup` 函数接收一个 `api` 对象，该对象提供了所有可用的 CLI 插件 API。
+- `name`： 插件的唯一标识符。
+- `setup` 函数接收一个 `api` 对象，该对象提供了所有可用的 CLI 插件 API。
 
 ## 信息获取
 
@@ -54,12 +55,11 @@ export default myCliPlugin;
 | `plugins`              | `object[]`          | 当前已注册的插件列表                               | -                           |
 | `entrypoints`          | `object[]`          | 页面入口信息                                       | -                           |
 | `serverRoutes`         | `object[]`          | 服务端路由信息                                     | -                           |
-| `bundlerType`          | `webpack \| rspack` | 当前使用的打包工具类型 (`webpack` 或 `rspack`)     | `onPrepare` 之后            |
+| `bundlerType`          | `rspack`            | 当前使用的打包工具类型                             | `onPrepare` 之后            |
 | `metaName`             | `string`            | 框架内部名称                                       | -                           |
 | `apiDirectory`         | `string`            | API 模块目录的绝对路径 (BFF 使用)                  | -                           |
 | `lambdaDirectory`      | `string`            | Lambda 模块目录的绝对路径 (BFF 使用)               | -                           |
 | `runtimeConfigFile`    | `string`            | 运行时配置文件的名称                               | -                           |
-| `serverConfigFile`     | `string`            | 服务器配置文件的名称                               | -                           |
 | `checkedEntries`       | `string[]`          | 指定的入口信息                                     | -                           |
 | `apiOnly`              | `boolean`           | 是否为 `apiOnly` 模式                              | -                           |
 
@@ -129,8 +129,8 @@ api.onBeforeBuild(() => {
 - **示例：**
 
 ```typescript
-if (api.isPluginExists('@modern-js/plugin-tailwind')) {
-  console.log('Tailwind CSS 插件已启用');
+if (api.isPluginExists('@modern-js/plugin-bff')) {
+  console.log('BFF 插件已启用');
 }
 ```
 
@@ -187,12 +187,12 @@ api.config(() => {
 
 #### `api.modifyBundlerChain`
 
-使用 chain API 修改 webpack 或者 Rspack 配置。
+使用 chain API 修改 Rspack 配置。
 
-- **类型：** `api.modifyBundlerChain(modifyFn: (chain: WebpackChain | RspackChain, utils: WebpackUtils | RspackUtils) => void | Promise<void>)`
+- **类型：** `api.modifyBundlerChain(modifyFn: (chain: RspackChain, utils: RspackUtils) => void | Promise<void>)`
 - **参数：**
-  - `modifyFn`： 修改函数，接收 `webpack-chain` 或 `RspackChain` 实例和实用工具作为参数。
-- **执行阶段：** 在生成最终的 Webpack 或 Rspack 配置时。
+  - `modifyFn`： 修改函数，接收 `RspackChain` 实例和实用工具作为参数。
+- **执行阶段：** 在生成最终的 Rspack 配置时。
 - **对应 Rsbuild Hook**： [modifybundlerchain](https://rsbuild.rs/zh/plugins/dev/hooks#modifybundlerchain)
 - **示例：**
 
@@ -237,7 +237,7 @@ api.modifyRsbuildConfig((config, utils) => {
 - **示例：**
 
 ```typescript
-api.modifyRspackConfig((config， utils) => {
+api.modifyRspackConfig((config, utils) => {
   config.builtins.minify = {
     enable: true,
     implementation: utils.rspack.SwcJsMinimizerRspackPlugin,
@@ -247,66 +247,16 @@ api.modifyRspackConfig((config， utils) => {
 
 ---
 
-#### `api.modifyWebpackChain`
-
-使用 [webpack-chain](https://github.com/neutrinojs/webpack-chain) 修改 Webpack 配置。(当使用 Webpack 作为打包工具时)
-
-- **类型：** `api.modifyWebpackChain(modifyFn: (chain: WebpackChain, utils: WebpackUtils) => void | Promise<void>)`
-- **参数：**
-  - `modifyFn`： 修改函数，接收 `webpack-chain` 实例和实用工具作为参数。
-- **执行阶段：** 在生成最终的 Webpack 配置时。
-- **示例：**
+**构建配置修改顺序**
 
-```typescript
-api.modifyWebpackChain((chain, utils) => {
-  // 添加一个自定义的 Webpack loader
-  chain.module
-    .rule('my-loader')
-    .test(/\.my-ext$/)
-    .use('my-loader')
-    .loader(require.resolve('./my-loader'));
-});
 ```
-
----
-
-#### `api.modifyWebpackConfig`
-
-直接修改 Webpack 配置对象。(当使用 Webpack 作为打包工具时)
-
-- **类型：** `api.modifyWebpackConfig(modifyFn: (config: WebpackConfig, utils: WebpackUtils) => WebpackConfig | Promise<WebpackConfig> | void)`
-- **参数：**
-  - `modifyFn`： 修改函数，接收 Webpack 配置对象和实用工具作为参数，可以返回修改后的配置对象、Promise 或不返回（直接修改原对象）。
-- **执行阶段：** 在生成最终的 Webpack 配置时。
-- **示例：**
-
-```typescript
-api.modifyWebpackConfig((config, utils) => {
-  // 禁用 source map
-  config.devtool = false;
-});
+modifyRsbuildConfig
+modifyBundlerChain
+tools.bundlerChain
+modifyRspackConfig
+tools.rspack
 ```
 
-**构建配置修改顺序**
-
-- **使用 Rspack 构建**：
-  ```
-  modifyRsbuildConfig
-  modifyBundlerChain
-  tools.bundlerChain
-  modifyRspackConfig
-  tools.rspack
-  ```
-- **使用 Webpack 构建**：
-  ```
-  modifyBundlerChain
-  tools.bundlerChain
-  modifyWebpackChain
-  tools.webpackChain
-  modifyWebpackConfig
-  tools.webpack
-  ```
-
 ---
 
 #### `api.modifyServerRoutes`
@@ -622,4 +572,3 @@ api.onBeforePrintInstructions(({ instructions }) => {
 ## 其他说明
 
 - 可以参考 [CLI 插件生命周期](./life-cycle.mdx) 了解插件钩子的执行顺序。
-- 可以参考 [CLI 插件迁移指南](./migration.mdx) 了解如何从旧版插件迁移到新版。

package/docs/zh/plugin/cli-plugins/life-cycle.mdx

@@ -36,8 +36,6 @@ flowchart TD
     modifyBundlerChain(modifyBundlerChain)
     modifyRsbuildConfig(modifyRsbuildConfig)
     modifyRspackConfig(modifyRspackConfig)
-    modifyWebpackChain(modifyWebpackChain)
-    modifyWebpackConfig(modifyWebpackConfig)
 
     onBeforeBuild_rsbuild(onBeforeBuild)
     onAfterBuild_rsbuild(onAfterBuild)
@@ -63,8 +61,6 @@ flowchart TD
     registry_rsbuild_hooks --> modifyBundlerChain
     modifyBundlerChain --> modifyRsbuildConfig
     modifyRsbuildConfig --> modifyRspackConfig
-    modifyRspackConfig --> modifyWebpackChain
-    modifyWebpackChain --> modifyWebpackConfig
     registry_rsbuild_hooks --> onBeforeBuild_rsbuild
     onBeforeBuild_rsbuild --> onAfterBuild_rsbuild
     onAfterBuild_rsbuild --> onDevCompileDone

package/docs/zh/plugin/introduction.mdx

@@ -18,20 +18,20 @@ Modern.js 提供了一套强大的插件体系，允许开发者通过编写插
 
 Modern.js 提供了两种主要的插件类型：Modern.js 框架插件和 Rsbuild 构建插件。选择哪种插件取决于你的具体需求：
 
-- **Rsbuild 构建插件：** 如果你的需求与构建过程密切相关，特别是涉及到 Webpack 或 Rspack 配置的修改，那么你应该选择 Rsbuild 插件。例如：
+- **Rsbuild 构建插件：** 如果你的需求与构建过程密切相关，特别是涉及到 Rspack 配置的修改，那么你应该选择 Rsbuild 插件。例如：
 
-  - 修改 Webpack/Rspack 的 `loader` 或 `plugin` 配置。
+  - 修改 Rspack 的 `loader` 或 `plugin` 配置。
   - 处理新的文件类型。
   - 修改或编译文件内容。
   - 对构建产物进行优化或处理。
 
 - **Modern.js 框架插件：** 如果你的需求与 Modern.js 框架本身的功能扩展、运行时行为或服务端逻辑相关，那么你应该选择 Modern.js 插件。例如：
   - 添加自定义的命令行命令。
-  - 修改应用的路由配置。
+  - 修改运行时信息。
   - 定制化应用的渲染过程（如 SSR）。
   - 添加服务端中间件或处理函数。
 
-简单来说，需要修改 Webpack/Rspack 配置时，使用 Rsbuild 插件；其他与框架相关的功能扩展，使用 Modern.js 插件。
+简单来说，需要修改 Rspack 配置时，使用 Rsbuild 插件；其他与框架相关的功能扩展，使用 Modern.js 插件。
 
 ## Modern.js 框架插件
 
@@ -70,27 +70,36 @@ export default defineRuntimeConfig({
 });
 ```
 
-{/* prettier-ignore */}
-{/* #### Server 插件
+#### Server 插件
 
 Server 插件用于在应用接受请求时提供额外功能，例如添加中间件、修改请求响应等。
 
 Server 插件通过 `server/modern.server.ts` 中的 `plugins` 字段进行配置。
 
-````ts title="src/modern.server.ts"
-import { defineConfig } from '@modern-js/app-tools/server';
-import bffPlugin from '@modern-js/plugin-bff/server';
-
-export default defineConfig({
-  plugins: [bffPlugin()],
+```ts title="server/modern.server.ts"
+import { defineServerConfig } from '@modern-js/server-runtime';
+
+export default defineServerConfig({
+  plugins: [
+    {
+      name: 'custom-plugin-in-config',
+      setup: api => {
+        api.onPrepare(() => {
+          const { middlewares } = api.getServerContext();
+
+          middlewares?.push({
+            name: 'server-plugin-middleware',
+            handler: async (c, next) => {
+              c.res.headers.set('x-render-middleware-plugin', 'ok');
+              await next();
+            },
+          });
+        });
+      },
+    },
+  ],
 });
-``` */}
-
-:::tip
-Modern.js 从 `MAJOR_VERSION.66.0` 起正式对外使用新的插件机制。
-
-如果你的当前版本低于 MAJOR_VERSION.66.0，可通过执行 `npx modern upgrade` 进行升级。
-:::
+```
 
 ### 开发插件
 
@@ -107,12 +116,6 @@ Rsbuild 是 Modern.js 底层的构建工具，通过添加 Rsbuild 插件可修
 
 你可以在 `modern.config.ts` 中通过 `builderPlugins` 选项注册 Rsbuild 插件，详见 [builderPlugins 构建插件](/configure/app/builder-plugins.html)。
 
-:::tip
-Modern.js 从 `MAJOR_VERSION.46.0` 起，底层构建工具升级为 [Rsbuild](https://rsbuild.rs/)。
-
-如果你的当前版本低于 MAJOR_VERSION.46.0，可通过执行 `npx modern upgrade` 进行升级。
-:::
-
 :::info
 可以阅读 [Rsbuild 官网 - 插件](https://rsbuild.rs/plugins/list/index) 了解更多 Rsbuild 插件体系内容。
 :::
@@ -123,21 +126,16 @@ Modern.js 从 `MAJOR_VERSION.46.0` 起，底层构建工具升级为 [Rsbuild](h
 
 以下为已在 Modern.js 中内置的 Rsbuild 官方插件，无需安装，即可启用：
 
-| 插件                                                                                         | 介绍                                                                                     | Modern.js 链接                                                                                                                        |
-| -------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
-| [React 插件](https://rsbuild.rs/zh/plugins/list/plugin-react)                               | 提供对 React 的支持                                                                      | -                                                                                                                                     |
-| [SVGR 插件](https://rsbuild.rs/zh/plugins/list/plugin-svgr)                                 | 支持将 SVG 图片转换为一个 React 组件                                                     | [output.disableSvgr](/configure/app/output/disable-svgr)<br />[output.svgDefaultExport](/configure/app/output/svg-default-export)     |
-| [Styled Components 插件](https://github.com/rspack-contrib/rsbuild-plugin-styled-components) | 提供对 styled-components 的编译时支持                                                    | [tools.styledComponents](/configure/app/tools/styled-components.html)                                                                 |
-| [Assets Retry 插件](https://rsbuild.rs/zh/plugins/list/plugin-assets-retry)                 | 用于在静态资源加载失败时自动发起重试请求                                                 | [output.assetsRetry](/configure/app/output/assets-retry.html)                                                                         |
-| [Type Check 插件](https://github.com/rspack-contrib/rsbuild-plugin-type-check)               | 用于在单独的进程中运行 TypeScript 类型检查                                               | [output.disableTsChecker](/configure/app/output/disable-ts-checker.html)<br />[tools.tsChecker](/configure/app/tools/ts-checker.html) |
-| [Node Polyfill 插件](https://github.com/rspack-contrib/rsbuild-plugin-node-polyfill)         | 用于注入 Node 核心模块在浏览器端的 polyfills                                             | [output.disableNodePolyfill](/configure/app/output/disable-node-polyfill.html)                                                        |
-| [Source Build 插件](https://github.com/rspack-contrib/rsbuild-plugin-source-build)           | 用于 monorepo 场景，支持引用其他子目录的源代码，并完成构建和热更新                       | [experiments.sourceBuild](/configure/app/experiments/source-build.html)                                                               |
-| [Check Syntax 插件](https://github.com/rspack-contrib/rsbuild-plugin-check-syntax)           | 用于分析产物的语法兼容性，判断是否存在导致兼容性问题的高级语法                           | [security.checkSyntax](/configure/app/security/check-syntax.html)                                                                     |
-| [CSS Minimizer 插件](https://github.com/rspack-contrib/rsbuild-plugin-css-minimizer)         | 用于自定义 CSS 压缩工具，切换到 [cssnano](https://cssnano.co/) 或其他工具进行 CSS 压缩   | [tools.minifyCss](/configure/app/tools/minify-css.html)                                                                               |
-| [Pug 插件](https://github.com/rspack-contrib/rsbuild-plugin-pug)                             | 提供对 Pug 模板引擎的支持                                                                | [tools.pug](/configure/app/tools/pug.html)                                                                                            |
-| [Rem 插件](https://github.com/rspack-contrib/rsbuild-plugin-rem)                             | 用于实现移动端页面的 rem 自适应布局                                                      | [output.convertToRem](/configure/app/output/convert-to-rem.html)                                                                      |
-| [YAML 插件](https://github.com/rspack-contrib/rsbuild-plugin-yaml)                           | 用于引用 YAML 文件，并将其转换为 JavaScript 对象                                         | [YAML 文件](/guides/basic-features/static-assets/json-files.html#yaml-文件)                                                                         |
-| [TOML 插件](https://github.com/rspack-contrib/rsbuild-plugin-toml)                           | 用于引用 TOML 文件，并将其转换为 JavaScript 对象                                         | [TOML 文件](/guides/basic-features/static-assets/json-files.html#toml-文件)                                                                       |
+| 插件                                                                                 | 介绍                                                                                   | Modern.js 链接                                                                                                                        |
+| ------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
+| [React 插件](https://rsbuild.rs/zh/plugins/list/plugin-react)                        | 提供对 React 的支持                                                                    | -                                                                                                                                     |
+| [SVGR 插件](https://rsbuild.rs/zh/plugins/list/plugin-svgr)                          | 支持将 SVG 图片转换为一个 React 组件                                                   | [output.disableSvgr](/configure/app/output/disable-svgr)<br />[output.svgDefaultExport](/configure/app/output/svg-default-export)     |
+| [Assets Retry 插件](https://rsbuild.rs/zh/plugins/list/plugin-assets-retry)          | 用于在静态资源加载失败时自动发起重试请求                                               | [output.assetsRetry](/configure/app/output/assets-retry.html)                                                                         |
+| [Type Check 插件](https://github.com/rspack-contrib/rsbuild-plugin-type-check)       | 用于在单独的进程中运行 TypeScript 类型检查                                             | [output.disableTsChecker](/configure/app/output/disable-ts-checker.html)<br />[tools.tsChecker](/configure/app/tools/ts-checker.html) |
+| [Source Build 插件](https://github.com/rspack-contrib/rsbuild-plugin-source-build)   | 用于 monorepo 场景，支持引用其他子目录的源代码，并完成构建和热更新                     | [experiments.sourceBuild](/configure/app/experiments/source-build.html)                                                               |
+| [Check Syntax 插件](https://github.com/rspack-contrib/rsbuild-plugin-check-syntax)   | 用于分析产物的语法兼容性，判断是否存在导致兼容性问题的高级语法                         | [security.checkSyntax](/configure/app/security/check-syntax.html)                                                                     |
+| [CSS Minimizer 插件](https://github.com/rspack-contrib/rsbuild-plugin-css-minimizer) | 用于自定义 CSS 压缩工具，切换到 [cssnano](https://cssnano.co/) 或其他工具进行 CSS 压缩 | [tools.minifyCss](/configure/app/tools/minify-css.html)                                                                               |
+| [Rem 插件](https://github.com/rspack-contrib/rsbuild-plugin-rem)                     | 用于实现移动端页面的 rem 自适应布局                                                    | [output.convertToRem](/configure/app/output/convert-to-rem.html)                                                                      |
 
 #### 未内置的插件
 
@@ -146,6 +144,8 @@ Modern.js 从 `MAJOR_VERSION.46.0` 起，底层构建工具升级为 [Rsbuild](h
 - [Image Compress 插件](https://github.com/rspack-contrib/rsbuild-plugin-image-compress)：将项目中用到的图片资源进行压缩处理。
 - [Stylus 插件](https://rsbuild.rs/zh/plugins/list/plugin-stylus)：使用 Stylus 作为 CSS 预处理器。
 - [UMD 插件](https://github.com/rspack-contrib/rsbuild-plugin-umd)：用于构建 UMD 格式的产物。
+- [YAML 插件](https://github.com/rspack-contrib/rsbuild-plugin-yaml)：用于引用 YAML 文件，并将其转换为 JavaScript 对象。
+- [TOML 插件](https://github.com/rspack-contrib/rsbuild-plugin-toml)：用于引用 TOML 文件，并将其转换为 JavaScript 对象。
 
 import OtherPlugins from '@site-docs/components/other-plugins.mdx';
 

package/docs/zh/plugin/official/_meta.json

@@ -3,10 +3,5 @@
     "type": "dir",
     "name": "cli-plugins",
     "label": "cli-plugins"
-  },
-  {
-    "type": "dir",
-    "name": "rsbuild-plugins",
-    "label": "rsbuild-plugins"
   }
 ]

package/docs/zh/plugin/official/cli-plugins/_meta.json

@@ -1 +1 @@
-["plugin-tailwind", "plugin-bff", "plugin-ssg", "plugin-swc"]
+["plugin-bff", "plugin-ssg", "plugin-styled-components"]

package/docs/zh/plugin/official/cli-plugins/plugin-styled-components.mdx

@@ -0,0 +1,5 @@
+# styled-components 插件
+
+在 Modern.js 应用中，通过 styled-components 插件，开发者可以在应用中使用 styled-components 库，实现 CSS-in-JS 的功能。
+
+详细内容可以参考 [使用 CSS-in-JS](/guides/basic-features/css/css-in-js)。

package/docs/zh/plugin/official/cli-plugins.mdx

@@ -1,6 +1,4 @@
 # 概览
 
-- [@modern-js/plugin-tailwindcss](/plugin/official/cli-plugins/plugin-tailwind)：提供使用 Tailwind CSS 样式的能力。
 - [@modern-js/plugin-bff](/plugin/official/cli-plugins/plugin-bff)：提供 BFF 服务，一体化调用的能力。
 - [@modern-js/plugin-ssg](/plugin/official/cli-plugins/plugin-bff)：提供静态站点生成的能力。
-- [@modern-js/plugin-swc](/plugin/official/cli-plugins/plugin-swc)：提供 SWC 编译支持。