@modern-js/main-doc 2.3.0 → 2.5.0

package/zh/configure/app/tools/less.mdx

@@ -5,7 +5,7 @@ sidebar_label: less
 # tools.less
 
 :::tip
-该配置由 Modern.js Builder 提供，更多信息可参考 [tools.less](https://modernjs.dev/builder/api/config-tools.html#tools-less)。
+该配置由 Modern.js Builder 提供，更多信息可参考 [tools.less](https://modernjs.dev/builder/api/config-tools.html#toolsless)。
 :::
 
 import Main from '@modern-js/builder-doc/docs/zh/config/tools/less.md'

package/zh/configure/app/tools/minify-css.mdx

@@ -5,7 +5,7 @@ sidebar_label: minifyCss
 # tools.minifyCss
 
 :::tip
-该配置由 Modern.js Builder 提供，更多信息可参考 [tools.minifyCss](https://modernjs.dev/builder/api/config-tools.html#tools-minifycss)。
+该配置由 Modern.js Builder 提供，更多信息可参考 [tools.minifyCss](https://modernjs.dev/builder/api/config-tools.html#toolsminifycss)。
 :::
 
 import Main from '@modern-js/builder-doc/docs/zh/config/tools/minifyCss.md'

package/zh/configure/app/tools/postcss.mdx

@@ -5,7 +5,7 @@ sidebar_label: postcss
 # tools.postcss
 
 :::tip
-该配置由 Modern.js Builder 提供，更多信息可参考 [tools.postcss](https://modernjs.dev/builder/api/config-tools.html#tools-postcss)。
+该配置由 Modern.js Builder 提供，更多信息可参考 [tools.postcss](https://modernjs.dev/builder/api/config-tools.html#toolspostcss)。
 :::
 
 import Main from '@modern-js/builder-doc/docs/zh/config/tools/postcss.md'

package/zh/configure/app/tools/pug.mdx

@@ -5,7 +5,7 @@ sidebar_label: pug
 # tools.pug
 
 :::tip
-该配置由 Modern.js Builder 提供，更多信息可参考 [tools.pug](https://modernjs.dev/builder/api/config-tools.html#tools-pug)。
+该配置由 Modern.js Builder 提供，更多信息可参考 [tools.pug](https://modernjs.dev/builder/api/config-tools.html#toolspug)。
 :::
 
 import Main from '@modern-js/builder-doc/docs/zh/config/tools/pug.md'

package/zh/configure/app/tools/rspack.mdx

@@ -0,0 +1,13 @@
+---
+sidebar_label: rspack
+---
+
+# tools.rspack
+
+:::tip
+该配置由 Modern.js Builder 提供，更多信息可参考 [tools.rspack](https://modernjs.dev/builder/api/config-tools.html#toolsrspack)。
+:::
+
+import Main from '@modern-js/builder-doc/docs/zh/config/tools/rspack.md'
+
+<Main />

package/zh/configure/app/tools/sass.mdx

@@ -5,7 +5,7 @@ sidebar_label: sass
 # tools.sass
 
 :::tip
-该配置由 Modern.js Builder 提供，更多信息可参考 [tools.sass](https://modernjs.dev/builder/api/config-tools.html#tools-sass)。
+该配置由 Modern.js Builder 提供，更多信息可参考 [tools.sass](https://modernjs.dev/builder/api/config-tools.html#toolssass)。
 :::
 
 import Main from '@modern-js/builder-doc/docs/zh/config/tools/sass.md'

package/zh/configure/app/tools/style-loader.mdx

@@ -5,7 +5,7 @@ sidebar_label: styleLoader
 # tools.styleLoader
 
 :::tip
-该配置由 Modern.js Builder 提供，更多信息可参考 [tools.styleLoader](https://modernjs.dev/builder/api/config-tools.html#tools-styleloader)。
+该配置由 Modern.js Builder 提供，更多信息可参考 [tools.styleLoader](https://modernjs.dev/builder/api/config-tools.html#toolsstyleloader)。
 :::
 
 import Main from '@modern-js/builder-doc/docs/zh/config/tools/styleLoader.md'

package/zh/configure/app/tools/styled-components.mdx

@@ -5,7 +5,7 @@ sidebar_label: styledComponents
 # tools.styledComponents
 
 :::tip
-该配置由 Modern.js Builder 提供，更多信息可参考 [tools.styledComponents](https://modernjs.dev/builder/api/config-tools.html#tools-styledcomponents)。
+该配置由 Modern.js Builder 提供，更多信息可参考 [tools.styledComponents](https://modernjs.dev/builder/api/config-tools.html#toolsstyledcomponents)。
 :::
 
 import Main from '@modern-js/builder-doc/docs/zh/config/tools/styledComponents.md'

package/zh/configure/app/tools/terser.mdx

@@ -5,7 +5,7 @@ sidebar_label: terser
 # tools.terser
 
 :::tip
-该配置由 Modern.js Builder 提供，更多信息可参考 [tools.terser](https://modernjs.dev/builder/api/config-tools.html#tools-terser)。
+该配置由 Modern.js Builder 提供，更多信息可参考 [tools.terser](https://modernjs.dev/builder/api/config-tools.html#toolsterser)。
 :::
 
 import Main from '@modern-js/builder-doc/docs/zh/config/tools/terser.md'

package/zh/configure/app/tools/ts-checker.mdx

@@ -5,7 +5,7 @@ sidebar_label: tsChecker
 # tools.tsChecker
 
 :::tip
-该配置由 Modern.js Builder 提供，更多信息可参考 [tools.tsChecker](https://modernjs.dev/builder/api/config-tools.html#tools-tschecker)。
+该配置由 Modern.js Builder 提供，更多信息可参考 [tools.tsChecker](https://modernjs.dev/builder/api/config-tools.html#toolstschecker)。
 :::
 
 import Main from '@modern-js/builder-doc/docs/zh/config/tools/tsChecker.md'

package/zh/configure/app/tools/ts-loader.mdx

@@ -5,7 +5,7 @@ sidebar_label: tsLoader
 # tools.tsLoader
 
 :::tip
-该配置由 Modern.js Builder 提供，更多信息可参考 [tools.tsLoader](https://modernjs.dev/builder/api/config-tools.html#tools-tsloader)。
+该配置由 Modern.js Builder 提供，更多信息可参考 [tools.tsLoader](https://modernjs.dev/builder/api/config-tools.html#toolstsloader)。
 :::
 
 import Main from '@modern-js/builder-doc/docs/zh/config/tools/tsLoader.md'

package/zh/configure/app/tools/webpack-chain.mdx

@@ -5,7 +5,7 @@ sidebar_label: webpackChain
 # tools.webpackChain
 
 :::tip
-该配置由 Modern.js Builder 提供，更多信息可参考 [tools.webpackChain](https://modernjs.dev/builder/api/config-tools.html#tools-webpackchain)。
+该配置由 Modern.js Builder 提供，更多信息可参考 [tools.webpackChain](https://modernjs.dev/builder/api/config-tools.html#toolswebpackchain)。
 :::
 
 import Main from '@modern-js/builder-doc/docs/zh/config/tools/webpackChain.md'

package/zh/configure/app/tools/webpack.mdx

@@ -5,7 +5,7 @@ sidebar_label: webpack
 # tools.webpack
 
 :::tip
-该配置由 Modern.js Builder 提供，更多信息可参考 [tools.webpack](https://modernjs.dev/builder/api/config-tools.html#tools-webpack)。
+该配置由 Modern.js Builder 提供，更多信息可参考 [tools.webpack](https://modernjs.dev/builder/api/config-tools.html#toolswebpack)。
 :::
 
 import Main from '@modern-js/builder-doc/docs/zh/config/tools/webpack.md'

package/zh/configure/app/usage.mdx

@@ -12,7 +12,7 @@ Modern.js 中有两种配置，一个是编译时配置，一个是服务端运
 - `package.json` 文件
 
 :::info
-不支持同时在 package.json 中和 modern.config.ts 中配置同一个配置项，推荐优先在 modern.config.ts 中进行配置。如果 Modern.js 检测到重复配置导致的冲突，将会抛出警告。
+Modern.js 不支持同时在 package.json 中和 modern.config.ts 中配置同一个配置项，推荐优先在 modern.config.ts 中进行配置。如果 Modern.js 检测到重复配置导致的冲突，将会抛出警告。
 :::
 
 服务端运行时配置可以在根路径下的 `modern.server-runtime.config.(ts|js|mjs)` 中自定义配置选项。
@@ -69,6 +69,69 @@ export default defineConfig({
 });
 ```
 
+### 导出配置函数
+
+Modern.js 支持在配置文件中导出一个函数，你可以在函数中动态计算配置，并返回给 Modern.js。
+
+```js title="modern.config.js"
+import { defineConfig } from '@modern-js/app-tools';
+
+export default defineConfig(({ env, command }) => ({
+  source: {
+    alias: {
+      '@foo': env === 'development' ? './src/foo.dev.ts' : './src/foo.prod.ts',
+    },
+  },
+}));
+```
+
+该函数接受以下入参：
+
+- `env`：对应 `process.env.NODE_ENV` 的值。
+  - 当运行 `modern dev` 或 `modern start` 时，`env` 的值为 `development`。
+  - 当运行 `modern build` 或 `modern serve` 时，`env` 的值为 `production`。
+  - 当运行 `modern test` 时，`env` 的值为 `test`。
+- `command`: 对应当前运行的命令，如 `dev`、`start`、`build`、`serve`。
+
+### 导出异步函数
+
+Modern.js 也支持在配置文件中导出一个异步函数，你可以在函数中进行一些异步操作：
+
+```js title="modern.config.js"
+import { defineConfig } from '@modern-js/app-tools';
+
+export default defineConfig(async ({ env, command }) => {
+  const result = await someAsyncFunction();
+
+  return {
+    html: {
+      title: result,
+    },
+  };
+});
+```
+
+### 指定配置文件
+
+Modern.js 命令行支持通过 `--config` 选项来指定配置文件的名称。
+
+例如，你需要在执行 build 命令时使用 `modern.prod.config.ts` 文件，可以在 `package.json` 中添加如下配置：
+
+```json title="package.json"
+{
+  "scripts": {
+    "dev": "modern modern",
+    "build": "modern build --config modern.prod.config.ts"
+  }
+}
+```
+
+你也可以将 `--config` 选项缩写为 `-c`：
+
+```bash
+$ modern build -c modern.prod.config.js
+```
+
 ## 在 package.json 中配置（不推荐）
 
 除了配置文件外，也可以在 `package.json` 中的 `modernConfig` 字段下设置配置选项，如：

package/zh/guides/advanced-features/_category_.json

@@ -1,9 +1,5 @@
 {
   "label": "进阶功能",
-  "position": 4,
-  "collapsed": true,
-  "link": {
-    "type": "doc",
-    "id": "guides/advanced-features/index"
-  }
+  "position": 6,
+  "collapsed": false
 }

package/zh/guides/advanced-features/compatibility.mdx

@@ -55,7 +55,6 @@ Modern.js 中还提供了基于浏览器 [UA](https://developer.mozilla.org/zh-C
 ```ts title="modern.config.ts"
 import polyfillPlugin from '@modern-js/plugin-polyfill';
 
-// https://modernjs.dev/docs/apis/app/config
 export default defineConfig({
   plugins: [..., polyfillPlugin()],
 });

package/zh/guides/advanced-features/ssg.mdx

@@ -18,7 +18,6 @@ SSG（Static Site Generation）是一种基于数据与模板，在构建时渲
 ```ts title="modern.config.ts"
 import ssgPlugin from '@modern-js/plugin-ssg';
 
-// https://modernjs.dev/docs/apis/app/config
 export default defineConfig({
   output: {
     ssg: true,

package/zh/guides/advanced-features/ssr.mdx

@@ -242,11 +242,11 @@ if (process.env.MODERN_TARGET === 'browser') {
 例如在代码中引入了 `fs-extra`，这时候直接引用到组件中，会造成 CSR 加载报错。可以创建同名的 `.ts` 和 `.node.ts` 文件做一层代理：
 
 ```ts title="compat.ts"
-export { readFileSync } from 'fs-extra';
+export const readFileSync: any = () => {};
 ```
 
 ```ts title="compat.node.ts"
-export const readFileSync: any = () => {};
+export { readFileSync } from 'fs-extra';
 ```
 
 在文件中直接引入 `./compat`，此时 SSR 环境下会优先使用 `.node.ts` 后缀的文件，CSR 环境下会使用 `.ts` 后缀的文件。

package/zh/guides/advanced-features/testing.mdx

@@ -20,7 +20,6 @@ Modern.js 默认继承了 [Jest](https://jestjs.io/) 的测试能力。
 ```ts title="modern.config.ts"
 import testPlugin from '@modern-js/plugin-testing';
 
-// https://modernjs.dev/docs/apis/app/config
 export default defineConfig({
   ...,
   plugins: [..., testPlugin()],

package/zh/guides/advanced-features/web-server.mdx

@@ -22,7 +22,6 @@ Modern.js 作为以客户端为中心的开发框架，对服务端的定制能
 ```ts title="modern.config.ts"
 import serverPlugin from '@modern-js/plugin-server';
 
-// https://modernjs.dev/docs/apis/app/config
 export default defineConfig({
   plugins: [..., serverPlugin()],
 });

package/zh/guides/basic-features/_category_.json

@@ -1,9 +1,5 @@
 {
   "label": "基础功能",
   "position": 3,
-  "collapsed": false,
-  "link": {
-    "type": "doc",
-    "id": "guides/basic-features/index"
-  }
+  "collapsed": false
 }

package/zh/guides/basic-features/alias.mdx

@@ -62,4 +62,4 @@ export default defineConfig({
 });
 ```
 
-具体别名配置可以参考 【[API 资料 - source.alias](/configure/app/source/alias)】。
+对于别名配置的具体用法，请参考 [source.alias 文档](/configure/app/source/alias)。

package/zh/guides/basic-features/data-fetch.mdx

@@ -2,6 +2,7 @@
 title: 数据获取
 sidebar_position: 3
 ---
+
 # 数据获取
 
 Modern.js 中提供了开箱即用的数据获取能力，开发者可以通过这些 API，在 CSR 和 SSR 环境同构的进行开发。
@@ -220,38 +221,46 @@ export default function UserLayout() {
 
 :::
 
+创建 `user/layout.loader.ts`，并添加以下代码：
+
+```ts title="routes/user/layout.loader.ts"
+import { defer } from "@edenx/runtime/router"
+
+const loader = () =>
+defer({
+  userInfo: new Promise((resolve) => {
+      setTimeout(() => {
+        resolve({
+          age: 1,
+          name: 'user layout'
+        })
+      }, 1000)
+    })
+  })
+
+export default loader;
+```
+
 在 `user/layout.tsx` 中添加以下代码：
 
 ```tsx title="routes/user/layout.tsx"
-import {
-  Await,
-  defer,
-  useLoaderData,
-  Outlet
-} from '@modern-js/runtime/router';
-
-export const loader = () => {
-  return defer({
-    // fetchUserInfo 是一个异步函数，返回用户信息
-    userInfo: fetchUserInfo(),
-  })
-}
+import { Await, defer, useLoaderData, Outlet } from '@modern-js/runtime/router';
 
 export default function UserLayout() {
-  const { userInfo } = useLoaderData() as {userInfo: Promise<UserInfo>};
+  const { userInfo } = useLoaderData() as { userInfo: Promise<UserInfo> };
   return (
     <div>
-      <React.Suspense
-        fallback={<p>Loading...</p>}
-      >
-        <Await resolve={userInfo} children={userInfo => (
-          <div>
-            <span>{userInfo.name}</span>
-            <span>{userInfo.age}</span>
-            <Outlet>
-          </div>
-        )}>
-        </Await>
+      <React.Suspense fallback={<p>Loading...</p>}>
+        <Await
+          resolve={userInfo}
+          children={userInfo => (
+            <div>
+              <span>{userInfo.name}</span>
+              <span>{userInfo.age}</span>
+              <Outlet />
+            </div>
+          )}
+        ></Await>
       </React.Suspense>
     </div>
   );
@@ -265,7 +274,7 @@ defer 的具体用法请查看 [defer](https://reactrouter.com/en/main/guides/de
 
 :::
 
-{/* TODO 缓存相关  */}
+{/* TODO 缓存相关 */}
 
 ### 错误用法
 

package/zh/guides/basic-features/html.mdx

@@ -2,9 +2,10 @@
 title: HTML 模板
 sidebar_position: 9
 ---
+
 # HTML 模板
 
-Modern.js 提供了 **JSX 语法**和**HTML(Ejs) 语法**两种方式用于自定义 HTML 模板。
+Modern.js 提供了 **JSX 语法**和 **HTML(EJS) 语法**两种方式用于自定义 HTML 模板。
 
 ## JSX 语法
 
@@ -14,14 +15,14 @@ Modern.js 约定，在 `src/` 目录下，或在入口目录下，可以创建 `
 
 ```bash
 .
-├── src
-│   ├── Document.tsx
-│   ├── entry-a
-│   │   ├── Document.tsx
-│   │   └── routes
-│   ├── entry-b
-│   │   └── routes
-│   └── modern-app-env.d.ts
+└── src
+    ├── Document.tsx
+    ├── entry-a
+    │   ├── Document.tsx
+    │   └── routes
+    ├── entry-b
+    │    └── routes
+    └── modern-app-env.d.ts
 ```
 
 `entry-a` 会优先使用当前入口下的 `Docoument.[jt]sx` 文件。如果当前入口没有 `Document.[jt]sx` 文件，例如 `entry-b`，则会查找根目录下的 `Document.[jt]sx` 文件。

package/zh/guides/basic-features/mock.mdx

@@ -77,3 +77,23 @@ module.exports = {
   },
 };
 ```
+
+## 按需使用 Mock 服务
+
+`config/mock/index.ts` 下还可以到处 `config` 对象，更精细的控制 Mock 服务。
+
+```ts
+type MockConfig = {
+  enable: ((req: IncomingMessage, res: ServerResponse) => boolean) | boolean;
+};
+
+export const config = {
+  enable: false
+}
+```
+
+目前仅支持 `enable` 配置，开发者可以通过该配置控制是否执行 Mock。
+
+:::note
+修改 `config` 后无需重启服务，即刻生效。
+:::

package/zh/guides/basic-features/routes.mdx

@@ -4,7 +4,7 @@ sidebar_position: 1
 ---
 # 路由
 
-Modern.js 内置了对 [React Router 6](https://reactrouter.com/en/main) 的**部分**支持，并提供了多种类型的路由模式。根据不同[入口](/guides/concept/entries)类型，将路由分为三种模式，分别是**约定式路由**，**自控式路由**和**其他路由方案**。
+Modern.js 的路由基于 [React Router 6](https://reactrouter.com/en/main)，并提供了多种类型的路由模式。根据不同 [入口](/guides/concept/entries) 类型，将路由分为三种模式，分别是**约定式路由**，**自控式路由**和**其他路由方案**。
 
 :::note
 本小节提到的路由，都是客户端路由，即 SPA 路由。
@@ -164,10 +164,37 @@ export default () => {
 
 `routes/[id]/page.tsx` 文件会转为 `/:id` 路由。除了可以确切匹配的 `/blog` 路由，其他所有 `/xxx` 都会匹配到该路由。
 
-在组件中，可以通过 [useParams](/apis/app/runtime/router/#useparams) 获取对应命名的参数。
+在组件中，可以通过 [useParams](/apis/app/runtime/router/router#useparams) 获取对应命名的参数。
 
 在 loader 中，params 会作为 [loader](/guides/basic-features/data-fetch#loader-函数) 的入参，通过 `params.xxx` 可以获取。
 
+### 通配路由
+
+如果在 routes 目录下创建 `$.tsx` 文件，该文件会作为通配路由组件，当没有匹配的路由时，会渲染该路由组件。
+
+:::note
+`$.tsx` 可以认为是一种特殊的 `page` 路由组件，当前目录下有 `layout` 组件时，`$.tsx`，会作为 `layout` 的子组件渲染。
+:::
+
+例如以下目录结构：
+```
+└── routes
+    ├── $.tsx
+    ├── blog
+    │   └── page.tsx
+    └── page.tsx
+```
+
+当访问任何匹配不到的路径时，都会渲染 `routes/$.tsx` 组件，同样，`$.tsx` 中可以使用 [useParams](/apis/app/runtime/router/router#useparams) 捕获 url 的剩余部分。
+```ts title="$.tsx"
+import { useParams } from '@modern-js/runtime/router';
+// 当 path 是 `/aaa/bbb` 时
+const params = useParams();
+params['*']  // => 'aaa/bbb'
+```
+
+`$.tsx` 可以加入到 `routes` 目录下的任意目录中，一个常见的使用示例是添加 `routes/$.tsx` 文件去定制任意层级的 404 页面。
+
 ### 无路径布局
 
 当目录名以 \_\_ 开头时，对应的目录名不会转换为实际的路由路径，例如以下文件目录：
@@ -275,7 +302,7 @@ Modern.js 建议必须有根 layout 和根 loading。
 
 {/* Todo API 路由 */}
 
-在 `<ErrorBoundary>` 组件内，可以使用 [useRouteError](/apis/app/runtime/router/#useparams) 获取的错误的具体信息：
+在 `<ErrorBoundary>` 组件内，可以使用 [useRouteError](/apis/app/runtime/router/router#useparams) 获取的错误的具体信息：
 
 ```tsx
 import { useRouteError } from '@modern-js/runtime/router';
@@ -302,8 +329,15 @@ import type { AppConfig } from '@modern-js/runtime';
 export const config = (): AppConfig => {
   return {
     router: {
-      supportHtml5History: false
-    }
+      createRoutes() {
+        return [
+          {
+            path: 'edenx',
+            element: <div>edenx</div>,
+          },
+        ];
+      },
+    },
   }
 };
 ```
@@ -353,12 +387,10 @@ export default () => {
 配合 SSR 功能时，浏览器端可以获取到 SSR 时 `init` 返回的数据，开发者可以自行判断是否要在浏览器端重新获取数据来覆盖 SSR 数据，例如：
 
 ```tsx title="src/routes/layout.tsx"
-import {
-  RuntimeContext,
-} from '@modern-js/runtime';
+import { RuntimeContext } from '@modern-js/runtime';
 
 export const init = (context: RuntimeContext) => {
-  if (process.env.JUPITER_TARGET === 'node') {
+  if (process.env.MODERN_TARGET === 'node') {
     return {
       message: 'Hello World By Server',
     }

package/zh/guides/{basic-features → concept}/builder.mdx

@@ -1,8 +1,8 @@
 ---
-title: 构建能力
 sidebar_position: 2
 ---
-# 构建能力
+
+# 构建引擎
 
 **Modern.js 的构建能力由 [Modern.js Builder](https://modernjs.dev/builder) 提供。**
 

package/zh/guides/concept/entries.mdx

@@ -1,7 +1,7 @@
 ---
-title: 入口
-sidebar_position: 2
+sidebar_position: 1
 ---
+
 # 入口
 
 入口是 Modern.js 默认的文件约定，项目的每一个入口是一张独立的页面，对应一条**服务端路由**。
@@ -15,11 +15,11 @@ Modern.js 初始化的项目是单入口的，项目结构如下：
 ```
 .
 ├── src
-│   ├── modern-app-env.d.ts
-│   └── routes
-│       ├── index.css
-│       ├── layout.tsx
-│       └── page.tsx
+│   ├── modern-app-env.d.ts
+│   └── routes
+│       ├── index.css
+│       ├── layout.tsx
+│       └── page.tsx
 ├── package.json
 ├── modern.config.ts
 ├── pnpm-lock.yaml
@@ -41,10 +41,10 @@ Modern.js 可以很方便的将单入口切换成多入口。可以在项目下
 .
 ├── modern-app-env.d.ts
 ├── myapp
-│   └── routes
-│       ├── index.css
-│       ├── layout.tsx
-│       └── page.tsx
+│   └── routes
+│       ├── index.css
+│       ├── layout.tsx
+│       └── page.tsx
 └── new-entry
     └── routes
         ├── index.css

package/zh/guides/css/_category_.json

@@ -0,0 +1,5 @@
+{
+  "label": "CSS 开发方案",
+  "position": 5,
+  "collapsed": false
+}

package/zh/guides/{basic-features/css → css}/less-sass.mdx

@@ -12,6 +12,6 @@ sidebar_position: 4
 - 如果需要自定义 [sass-loader](https://github.com/webpack-contrib/sass-loader) 的配置，请参考 [tools.less](/configure/app/tools/sass) 配置项。
 
 :::tip 提示
-经过 Less 和 Sass 预编译后的 CSS 文件，仍然会经过 Modern.js 内置的 [PostCSS](https://postcss.org/) 的转换，具备良好的浏览器兼容性。相关内容请参考【[PostCSS](/guides/basic-features/css/postcss)】。
+经过 Less 和 Sass 预编译后的 CSS 文件，仍然会经过 Modern.js 内置的 [PostCSS](https://postcss.org/) 的转换，具备良好的浏览器兼容性。相关内容请参考【[PostCSS](/guides/css/postcss)】。
 
 :::

package/zh/guides/{basic-features/css → css}/postcss.mdx

@@ -10,10 +10,11 @@ sidebar_position: 3
 
 1. [Autoprefixer](https://github.com/postcss/autoprefixer) 根据需要支持的浏览器范围，会自动为 CSS 规则添加需要的浏览器厂商前缀。Modern.js 默认支持的浏览器范围为：`['> 0.01%', 'not dead', 'not op_mini all']`。
 
-:::info意
-  - 【支持的浏览器范围为：`> 0.01%`】是指浏览器市场份额大于 0.01%。
-  - `not dead` 是指不包含官方不再支持的浏览器和过去24个月没有更新的浏览器。
-  - `not op_mini all` 是指不包含 Opera Mini。
+:::info 注意
+
+- 【支持的浏览器范围为：`> 0.01%`】是指浏览器市场份额大于 0.01%。
+- `not dead` 是指不包含官方不再支持的浏览器和过去 24 个月没有更新的浏览器。
+- `not op_mini all` 是指不包含 Opera Mini。
 
 :::
 

package/zh/guides/{basic-features/css → css}/tailwindcss.mdx

@@ -18,7 +18,6 @@ sidebar_position: 2
 ```ts title="modern.config.ts"
 import tailwindcssPlugin from '@modern-js/plugin-tailwindcss';
 
-// https://modernjs.dev/docs/apis/app/config
 export default defineConfig({
   plugins: [..., tailwindcssPlugin()],
 });