@modern-js/main-doc 2.6.0 → 2.8.0

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

@@ -1,23 +1,35 @@
 ---
 title: 自定义 Web Server
-sidebar_position: 2
+sidebar_position: 3
 ---
 # 自定义 Web Server
 
 Modern.js 作为以客户端为中心的开发框架，对服务端的定制能力较弱。而在有些开发场景下，需要定制特殊的服务端逻辑，例如用户鉴权、请求预处理、添加页面渲染骨架等。
 
-因此 Modern.js 提供了一种功能，让项目可以在给定的范围内扩展 Modern.js 内置的 Web Server，来实现相应的需求。
+一些开发者可能会有疑惑，Modern.js 已经提供了 [BFF 能力](/guides/advanced-features/bff/function.html)，为什么还需要**自定义 Web Server**。
 
-## 创建自定义 Web Server
+因为在默认情况下，页面路由并不会经过 BFF，它没有办法为页面访问提供服务端的定制逻辑。之所以这样设计，是因为我们不希望控制页面的服务与 BFF 服务绑定在一起，避免 BFF 的框架限制页面的部署方式。例如将页面与 BFF 分开托管、将页面服务部署到非 Node 的环境上，或是针对部署平台做定制等。
 
-在项目根目录执行 `pnpm run new` 命令，按照如下选择，开启「自定义 Web Serve」功能：
+出于上述原因，Modern.js 提供了三种方式，让项目可以在根据需求，渐进式的定制服务端能力。
+
+:::warning
+三种扩展方式无法同时工作，开发者需要根据场景选择合适的方式。
+:::
+
+## 使用 API 扩展 Web Server
+
+第一种方式是通过 Modern.js 提供的服务端运行时 API，在特定的生命周期对服务端进行定制。提供这种方式的目的是在部分情况下，开发者并不需要控制完整的 Web Server，只需要添加服务端逻辑即可。
+
+这种方式无法控制完整的 Web Server，并且扩展逻辑**只在请求页面时生效**。因此，它适用于服务端逻辑相对简单，不希望额外创建 BFF 或者 BFF 和页面无需公用服务端逻辑场景。
+
+可以在项目根目录执行 `pnpm run new` 命令，开启「自定义 Web Serve」功能：
 
 ```bash
 ? 请选择你想要的操作 创建工程元素
 ? 创建工程元素 新建「自定义 Web Server」源码目录
 ```
 
-执行命令后，在 `modern.config.ts` 中注册 Server 插件:
+执行命令后，在 `modern.config.ts` 中注册 `@modern-js/plugin-server` 插件:
 
 ```ts title="modern.config.ts"
 import serverPlugin from '@modern-js/plugin-server';
@@ -27,31 +39,84 @@ export default defineConfig({
 });
 ```
 
-项目目录下会新建 `server/index.ts` 文件，自定义逻辑在这个文件中编写。
+开启功能后，项目目录下会自动创建 `server/index.ts` 文件，可以在这个文件中编写自定义逻辑。Modern.js 提供了 **Hook** 与 **Middleware** 两类 API 来扩展 Web Server。
 
-## 使用 API 扩展 Web Server
+### Hook
 
-Modern.js 提供了 **Hook** 与 **Middleware** 两类 API 来扩展 Web Server。
+Modern.js 提供的 Hook 用于控制 Web Server 中的内置逻辑，所有的页面请求都会经过 Hook。
 
-### Hook
+目前提供了两种 Hook，分别是 `AfterMatch` 和 `AfterRender`，可以用于修改渲染结果。可以在 `server/index.ts` 中这样写：
+
+```ts
+import type { AfterMatchHook, AfterRenderHook } from '@modern-js/runtime/server';
+
+export const afterMatch: AfterMatchHook = (ctx, next) => {
+  next();
+}
+
+export const afterRender: AfterRenderHook = (ctx, next) => {
+  next();
+}
+```
 
-Hook 可以控制 Web Server 对请求处理的内置逻辑，非 BFF 请求会经过 Hook 的处理。
+项目在使用 Hook 时，应该有以下最佳实践：
 
-Hook 不可以使用运行时框架拓展。
+1. 在 afterMatch 中做权限校验。
+2. 在 afterMatch 做 Rewrite 和 Redirect。
+3. 在 afterRender 中做 HTML 内容注入。
 
-详细 API 可以查看 [Hook](/apis/app/runtime/web-server/hook)。
+:::note
+详细 API 和更多用法可以查看 [Hook](/apis/app/runtime/web-server/hook)。
+:::
 
 ### Middleware
 
-Middleware 可以为 Web Server 添加前置中间件，只有 SSR 请求会经过 Middleware 的处理。
+对于某些项目，可能在服务端有更多的需求，Modern.js 提供了 Middleware 为 Web Server 添加前置中间件。它只能运行在 Node 环境下，因此如果项目被部署到其他环境中，如 Worker 环境，则不可以使用 Middleware。
+
+Modern.js 默认提供了一套 API 供项目使用：
 
-Middleware 可以使用运行时框架拓展。
+```ts
+import { Middlewre } from '@modern-js/runtime/server';
 
-详细 API 可以查看 [Hook](/apis/app/runtime/web-server/middleware)。
+export const middleware = (context, next) => {
+  const { source: { req, res } } = context;
+  console.log(req.url);
+  next();
+};
+```
+
+:::note
+详细 API 和更多用法可以查看 [Middleware](/apis/app/runtime/web-server/middleware)。
+:::
+
+项目在使用 Middleware 时，应该有以下最佳实践：
+
+1. 在 Middleware 中可以直接操作原生的请求、响应对象，做数据打点、注入 SSR 渲染可能用到的 Node 服务（数据库、Redis 等）。
+2. 在 Middleware 里可以做类似功能打标、爬虫优化等功能。
+3. 在 Middleware 里可以无视后续默认渲染，自定义渲染流程。
+
+**总的来说，CSR 项目中，使用 Hook 基本能满足简单场景的所有需求。SSR 项目中，可以使用 Middleware 做更复杂的 Node 扩展。**
+
+## 通过 BFF 托管页面请求
+
+第二种方式，是利用 BFF 来托管页面渲染，这种方式下，所有的请求都会先打到 BFF 的服务。
+
+因为这种方式可以通过 BFF 统一控制所有请求的服务端逻辑。因此，它适用于服务端逻辑复杂，BFF 和页面需要公用服务端逻辑的场景。但它整体还是依托于 Modern.js 的 Web Server 运行，无法将逻辑运行在已有的服务上。
+
+使用这种方式，我们需要先通过 `pnpm new` 开启「BFF」功能。然后在配置文件中添加 [`bff.enableHandleWeb`](/configure/app/bff/enable-handle-web.html) 配置：
+
+```ts
+export default defineConfig({
+  bff: {
+    enableHandleWeb: true,
+  },
+});
+```
+
+当该值设置为 `true` 时，页面请求流量也会经过 BFF，并且 Modern.js 内置的页面渲染的逻辑默认会作为 BFF 服务的最后一个中间件运行。
 
 ## 完全自定义的 Web Server
 
 :::note
 敬请期待
-
 :::

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

@@ -2,7 +2,64 @@
 sidebar_position: 2
 ---
 
-# Tailwind CSS
+# CSS 开发方案
+
+Modern.js 内置多种常用的 CSS 开发方案，包括 Less / Sass / Stylus 预处理器、PostCSS、CSS Modules、CSS-in-JS 和 Tailwind CSS。
+
+## 使用 Less、Sass 和 Stylus
+
+Modern.js 内置了社区流行的 CSS 预处理器，包括 Less 和 Sass。
+
+默认情况下，你不需要对 Less 和 Sass 进行任何配置。如果你有自定义 loader 配置的需求，可以通过配置 [tools.less](/configure/app/tools/less)、[tools.sass](/configure/app/tools/sass) 来进行设置。
+
+你也可以在 Modern.js 中使用 Stylus，只需要安装 Modern.js Builder 提供的 Stylus 插件即可，使用方式请参考 [Stylus 插件](https://modernjs.dev/builder/plugins/plugin-stylus.html)。
+
+## 使用 PostCSS
+
+Modern.js 内置了 [PostCSS](https://postcss.org/) 来转换 CSS 代码。
+
+请阅读 [Modern.js Builder - 使用 PostCSS](https://modernjs.dev/builder/guide/basic/css-usage.html#%E4%BD%BF%E7%94%A8-postcss) 了解更多用法。
+
+## 使用 CSS Modules
+
+请阅读 [使用 CSS Modules](https://modernjs.dev/builder/guide/basic/css-modules.html) 章节来了解 CSS Modules 的完整用法。
+
+## 使用 CSS-in-JS
+
+CSS-in-JS 是一种可以将 CSS 样式写在 JS 文件里的技术。
+
+Modern.js 集成了社区常用的 CSS-in-JS 实现库 [styled-components](https://styled-components.com/)，它使用 JavaScript 的新特性 [Tagged template](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#tagged_templates) 编写组件的 CSS 样式。可以直接从 `@modern-js/runtime/styled` 引入 [styled-components](https://styled-components.com/) 的 API 进行使用。
+
+当需要编写一个内部字体为红色的 `div` 组件时，可以如下实现：
+
+```js
+import styled from '@modern-js/runtime/styled';
+
+const RedDiv = styled.div`
+  color: red;
+`;
+```
+
+当需要根据组件的 `props` 动态设置组件样式时，例如 `props` 的属性 `primary` 为 `true` 时，按钮的颜色为白色，其他情况为红色，实现代码如下：
+
+```js
+import styled from '@modern-js/runtime/styled';
+
+const Button = styled.button`
+  color: ${props => (props.primary ? 'white' : 'red')};
+  font-size: 1em;
+`;
+```
+
+关于 styled-components 的更多用法，请参考 [styled-components 官网](https://styled-components.com/)。
+
+Modern.js 内部集成了 Babel 的 [babel-plugin-styled-components](https://github.com/styled-components/babel-plugin-styled-components) 插件，你可以通过 [tools.styledComponents](/configure/app/tools/styled-components) 对插件进行配置。
+
+:::tip 提示
+如果需要使用 [styled-jsx](https://www.npmjs.com/package/styled-jsx)、[Emotion](https://emotion.sh/) 等其他 CSS-in-JS 库，需要先安装对应库的依赖。具体使用方式请参考对应库的官网。
+:::
+
+## 使用 Tailwind CSS
 
 [Tailwind CSS](https://tailwindcss.com/) 是一个以 Utility Class 为基础的 CSS 框架和设计系统，可以快速地为组件添加常用样式，同时支持主题样式的灵活扩展。在 Modern.js 中使用 [Tailwind CSS](https://tailwindcss.com/)，只需要在项目根目录下执行 `pnpm run new` 并开启。
 
@@ -46,7 +103,7 @@ const App = () => (
 
 :::
 
-## Tailwind CSS 版本
+### Tailwind CSS 版本
 
 Modern.js 同时支持 Tailwind CSS v2 和 v3 版本，框架会识别项目 `package.json` 中的 `tailwindcss` 依赖版本，并启用相应的配置。默认情况下，我们会为你安装 Tailwind CSS v3 版本。
 
@@ -64,7 +121,7 @@ Tailwind CSS v2 和 v3 均不支持 IE 11 浏览器，相关背景请参考：
 
 如果你在 IE 11 浏览器上使用 Tailwind CSS，可能会出现部分样式不可用的现象，请谨慎使用。
 
-## Theme 配置
+### Theme 配置
 
 当需要自定义 Tailwind CSS 的 [theme](https://tailwindcss.com/docs/theme) 配置的时候，可以在配置 [`source.designSystem`](/configure/app/source/design-system) 中修改，例如，颜色主题中增加一个 `primary`：
 

package/zh/guides/basic-features/env-vars.mdx

@@ -8,6 +8,10 @@ Modern.js 提供了对环境变量的支持，包含内置的环境变量和自
 
 ## 内置的环境变量
 
+### ASSET_PREFIX
+
+表示当前资源文件的路径前缀，是**只读的**的环境变量。
+
 ### NODE_ENV
 
 表示当前的执行环境，是**只读的**的环境变量，其值在不同的执行命令下具有不同的值：

package/zh/guides/concept/builder.mdx

@@ -6,7 +6,7 @@ sidebar_position: 2
 
 **Modern.js 的构建能力由 [Modern.js Builder](https://modernjs.dev/builder) 提供。**
 
-Modern.js Builder 是 Modern.js 体系的核心组件之一，它是一个面向 Web 开发场景的构建引擎，可以脱离 Modern.js 被独立使用。Modern.js Builder 同时支持 webpack 和 rspack 等多种打包工具，默认情况下使用最成熟的 webpack 进行打包。
+Modern.js Builder 是 Modern.js 体系的核心组件之一，它是一个面向 Web 开发场景的构建引擎，可以脱离 Modern.js 被独立使用。Modern.js Builder 同时支持 webpack 和 Rspack 等多种打包工具，默认情况下使用最成熟的 webpack 进行打包。
 
 ## 构建架构
 

package/zh/guides/topic-detail/changesets/github.mdx

@@ -72,7 +72,7 @@ jobs:
           fetch-depth: 100
 
       - name: Create Release Pull Request
-        uses: modern-js-dev/actions@main
+        uses: web-infra-dev/actions@main
         with:
           # this expects you to have a script called release which does a build for your packages and calls changeset publish
           versionNumber: ${{ github.event.inputs.version }}
@@ -136,7 +136,7 @@ jobs:
           fetch-depth: 1
 
       - name: Release
-        uses: modern-js-dev/actions@main
+        uses: web-infra-dev/actions@main
         with:
           # this expects you to have a script called release which does a build for your packages and calls changeset publish
           version: ${{ github.event.inputs.version }}

package/zh/guides/topic-detail/changesets/release-note.mdx

@@ -9,7 +9,7 @@ Modern.js 提供了 `modern gen-release-note` 命令，支持通过当前存在
 默认生成的 Release Note 格式为：
 
 ```markdown
-[[#1220](https://github.com/modern-js-dev/modern.js/pull/1220)] feat: support bff operators -- Ming
+[[#1220](https://github.com/web-infra-dev/modern.js/pull/1220)] feat: support bff operators -- Ming
 ```
 
 根据 commit 信息获取 changeset 的 Pull Request ID，并生成 Github 的链接，内容为 changeset 的 changelog 信息和作者信息。

package/zh/guides/topic-detail/framework-plugin/plugin-api.mdx

@@ -45,7 +45,7 @@ interface UserConfig {
 }
 ```
 
-具体配置字段的意义请参考【[配置](/configure/app/source/alias)】。
+具体配置字段的意义请参考【[配置](/configure/app/usage)】。
 
 ### useAppContext
 
@@ -96,7 +96,7 @@ interface NormalizedConfig {
 }
 ```
 
-具体配置字段的意义请参考【[配置](/configure/app/source/alias)】。
+具体配置字段的意义请参考【[配置](/configure/app/usage)】。
 
 ### useHookRunners
 

package/zh/guides/topic-detail/generator/plugin/develop.mdx

@@ -43,7 +43,7 @@ npx @modern-js/create plugin --plugin @modern-js/generator-plugin-plugin
 创建项目命令执行完成后，会对应的生成一个开发生成器插件的项目，`package.json` 中也会根据你的选择对应的生成 `meta` 信息。
 
 :::info
-生成器插件开发可参考 `@modern-js/generator-plugin-plugin` [源码地址](https://github.com/modern-js-dev/modern.js/tree/main/packages/generator/plugins/generator-plugin)
+生成器插件开发可参考 `@modern-js/generator-plugin-plugin` [源码地址](https://github.com/web-infra-dev/modern.js/tree/main/packages/generator/plugins/generator-plugin)
 
 :::
 

package/zh/guides/topic-detail/model/faq.mdx

@@ -10,7 +10,7 @@ title: 常见问题
 Reduck 的编译构建产物默认使用 ES6 语法，如果你需要支持更低版本的浏览器，请将 `@modern-js-reduck` 命名空间下的所有包加入到应用的编译过程。
 
 :::info 补充信息
-Reduck 使用的 [`@babel/preset-env`](https://babeljs.io/docs/en/babel-preset-env) 的详细[配置](https://github.com/modern-js-dev/reduck/blob/main/common/config.js#L10~L17)。
+Reduck 使用的 [`@babel/preset-env`](https://babeljs.io/docs/en/babel-preset-env) 的详细[配置](https://github.com/web-infra-dev/reduck/blob/main/common/config.js#L10~L17)。
 
 :::
 

package/zh/guides/topic-detail/model/manage-effects.mdx

@@ -255,6 +255,6 @@ const handleClick = async () => {
 ```
 
 :::info 补充信息
-[示例代码](https://github.com/modern-js-dev/modern-js-examples/tree/main/series/tutorials/runtime-api/model/effects)
+[示例代码](https://github.com/web-infra-dev/modern-js-examples/tree/main/series/tutorials/runtime-api/model/effects)
 
 :::

package/zh/guides/topic-detail/model/model-communicate.mdx

@@ -100,7 +100,7 @@ Modern.js 默认开启 [自动生成 actions](./auto-actions.mdx)，所以 `step
 ![communicate-models](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/models-communicate.gif)
 
 :::info 补充信息
-- 本节完整的[示例代码](https://github.com/modern-js-dev/modern-js-examples/tree/main/series/tutorials/runtime-api/model/models-communication)。
+- 本节完整的[示例代码](https://github.com/web-infra-dev/modern-js-examples/tree/main/series/tutorials/runtime-api/model/models-communication)。
 - 相关 API 的更多介绍，请参考：[model](/apis/app/runtime/model/model_#函数类型)。
 
 :::

package/zh/guides/topic-detail/model/performance.mdx

@@ -166,6 +166,6 @@ const barModel = model("bar").define({
 我们创建缓存函数 `createSelector`，仅当 `barModel` 的状态发生改变或 `fooModel` 的 `a` 状态发生改变时，才会重新计算 `combineA` 的值。
 
 :::info 补充信息
-本节完整的[示例代码](https://github.com/modern-js-dev/modern-js-examples/tree/main/series/tutorials/runtime-api/model/performance-optimization)
+本节完整的[示例代码](https://github.com/web-infra-dev/modern-js-examples/tree/main/series/tutorials/runtime-api/model/performance-optimization)
 
 :::

package/zh/guides/topic-detail/model/quick-start.mdx

@@ -8,7 +8,7 @@ import ReduckMigration from "@site-docs/components/reduck-migration"
 
 <ReduckMigration />
 
-[Reduck](https://github.com/modern-js-dev/reduck) 是 Modern.js 团队开发的遵循 MVC 模式的状态管理库，底层状态存储基于 [Redux](https://redux.js.org/) 实现，同时提供更高层级的抽象，并完全兼容 Redux 生态。
+[Reduck](https://github.com/web-infra-dev/reduck) 是 Modern.js 团队开发的遵循 MVC 模式的状态管理库，底层状态存储基于 [Redux](https://redux.js.org/) 实现，同时提供更高层级的抽象，并完全兼容 Redux 生态。
 
 Reduck 的目标是以 MVC 模式组织 React 应用开发结构，将业务逻辑维护在 Model 层，业务逻辑与 UI 解耦，让开发业务逻辑更集中、更简单，同时通过更高层级的抽象，减少重复工作（样板代码）。
 
@@ -110,4 +110,4 @@ function Counter() {
 
 ![countModel](https://lf3-static.bytednsdoc.com/obj/eden-cn/eueh7vhojuh/modern/simple-count-model.gif)
 
-这样，我们就完了一个简单的计数器应用。本节完整的示例代码可以在[这里](https://github.com/modern-js-dev/modern-js-examples/tree/main/series/tutorials/runtime-api/model/counter-model)查看。
+这样，我们就完了一个简单的计数器应用。本节完整的示例代码可以在[这里](https://github.com/web-infra-dev/modern-js-examples/tree/main/series/tutorials/runtime-api/model/counter-model)查看。

package/zh/guides/topic-detail/model/use-model.mdx

@@ -163,7 +163,7 @@ function ThreeComponent() {
 
 使用 React 的 refs 也可以实现类似效果，其实 `useStaticModel` 内部也使用到了 refs。不过直接 `useStaticModel` 有助于将状态的管理逻辑从组件中解耦，统一收敛到 Model 层。
 
-完整的示例代码可以在[这里](https://github.com/modern-js-dev/modern-js-examples/tree/main/series/tutorials/runtime-api/model/static-model)查看。
+完整的示例代码可以在[这里](https://github.com/web-infra-dev/modern-js-examples/tree/main/series/tutorials/runtime-api/model/static-model)查看。
 
 ### 作为局部状态使用
 
@@ -195,7 +195,7 @@ function LocalCounter() {
 
 ![local-model](https://lf3-static.bytednsdoc.com/obj/eden-cn/eueh7vhojuh/modern/local-model.gif)
 
-完整的示例代码可以在[这里](https://github.com/modern-js-dev/modern-js-examples/tree/main/series/tutorials/runtime-api/model/local-model)查看。
+完整的示例代码可以在[这里](https://github.com/web-infra-dev/modern-js-examples/tree/main/series/tutorials/runtime-api/model/local-model)查看。
 
 ## 在组件外使用
 
@@ -239,7 +239,7 @@ setInterval(() => {
 }, 1000);
 ```
 
-完整的示例代码可以在[这里](https://github.com/modern-js-dev/modern-js-examples/tree/main/series/tutorials/runtime-api/model/counter-model-outof-react)查看。
+完整的示例代码可以在[这里](https://github.com/web-infra-dev/modern-js-examples/tree/main/series/tutorials/runtime-api/model/counter-model-outof-react)查看。
 
 :::info
 如果是通过 [`createStore`](/apis/app/runtime/model/create-store) 手动创建的 Store 对象，无需通过 `useStore` 在组件内获取，即可直接使用。

package/zh/tutorials/first-app/c03-css.mdx

@@ -293,7 +293,7 @@ import '../styles/utils.css';
 ```
 
 :::info
-Modern.js 集成了 [PostCSS](/guides/css/postcss)，支持现代 CSS 语法特性，比如 [custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)。
+Modern.js 集成了 [PostCSS](/guides/basic-features/css)，支持现代 CSS 语法特性，比如 [custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)。
 
 :::
 

package/en/guides/css/_category_.json

@@ -1,5 +0,0 @@
-{
-  "label": "CSS Solutions",
-  "position": 4,
-  "collapsed": false
-}

package/en/guides/css/css-in-js.mdx

@@ -1,40 +0,0 @@
----
-sidebar_position: 1
----
-
-# CSS-in-JS
-
-CSS-in-JS is a technology that can write CSS styles in JS files. Modern.js integrates the CSS-in-JS library [styled-components](https://styled-components.com/) commonly used in the community, which uses the new feature of JavaScript [Tagged template](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#tagged_templates) to write CSS styles for components. You can use the [styled-components](https://styled-components.com/) API directly from `@modern-js/runtime/styled`.
-
-When you need to write a `div` component with an internal font in red, you can do the following implementation:
-
-```js
-import styled from '@modern-js/runtime/styled';
-
-const RedDiv = styled.div`
-  color: red;
-`;
-```
-
-When you need to dynamically set the component style according to the `props` of the component, for example, when the attribute `primary` of `props` is `true`, the color of the button is white, and otherwise it is red. The implementation code is as follows:
-
-```js
-import styled from '@modern-js/runtime/styled';
-
-const Button = styled.button`
-  color: ${props => (props.primary ? 'white' : 'red')};
-  font-size: 1em;
-`;
-```
-
-For more usage of styled-components, please refer to [[styled-components official website](https://styled-components.com/) ].
-
-:::info Additional
-Modern.js uses the Babel plugin [babel-plugin-styled-components](https://github.com/styled-components/babel-plugin-styled-components) internally, and the plugin can be configured through [`tools.styled Components`](/configure/app/tools/styled-components).
-
-:::
-
-:::tip
-If you need to use [styled-jsx](https://www.npmjs.com/package/styled-jsx), [Emotion](https://emotion.sh/) and other CSS-in-JS libraries, you need to install the dependency of the corresponding library first. For specific usage, please refer to the official website of the corresponding library.
-
-:::

package/en/guides/css/css-modules.mdx

@@ -1,87 +0,0 @@
----
-sidebar_position: 5
----
-
-# CSS Modules
-
-Modern.js out of the box support for [CSS Modules](https://github.com/css-modules/css-modules).
-
-## File Suffix Form CSS Modules
-
-By default, files ending in `.module.(css|scss|sass|less)` are treated as CSS Modules files, for example:
-
-```css title="button.module.css"
-.redColor {
-  color: red;
-}
-```
-
-```js title="Button.jsx"
-import styles from './button.module.css';
-
-export default function Button() {
-  return (
-    <button type="button" className={styles.redColor}>
-      red button
-    </button>
-  );
-}
-```
-
-Will eventually be compiled as:
-
-```js
-<button type="button" className="button_redColor__1-RBg">
-  red button
-</button>
-```
-
-## Global CSS Modules
-
-If you want to remove the `.module` suffix from the filename, you can set [`output.disable CssModuleExtension`](/configure/app/output/disable-css-module-extension).
-
-After setting, all style files except the style files in the `node_modules/` directory and the file name format of `[name].global.(css|scss|sass|less)` will be processed as CSS Modules.
-
-If you need global styles at this point, you can solve it by creating a style file with the filename format `[name].global.(css|scss|sass|less)`, for example:
-
-```css title="app.global.css"
-.bg-blue {
-  background-color: blue;
-}
-```
-
-```css title="button.css"
-.redColor {
-  color: red;
-}
-```
-
-```js title="App.jsx"
-import './app.global.css';
-import styles from './button.css';
-
-export default function Button() {
-  return (
-    <button type="button" className={`${styles.redColor} bg-blue`}>
-      button
-    </button>
-  );
-}
-```
-
-Will eventually be compiled as:
-
-```js
-<button type="button" className="button__redColor--JsFYl bg-blue">
-  button
-</button>
-```
-
-The final effect is as follows:
-
-![](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/more-css-modules.png)
-
-:::tip
-When using [babel-plugin-react-css-modules](https://github.com/gajus/babel-plugin-react-css-modules), it is important to note that the configuration option `generateScopedName` of this plugin needs to be the same as [`output.css ModuleLocalIdentName`](/configure/app/output/css-module-local-ident-name).
-
-:::

package/en/guides/css/less-sass.mdx

@@ -1,17 +0,0 @@
----
-sidebar_position: 4
----
-
-# Less and Sass
-
-[Less](https://lesscss.org/) and [Sass](https://sass-lang.com/) are two commonly used CSS preprocessors that Modern.js built-in support for the Less and Sass compile capabilities.
-
-## Customized Configuration
-
-- If you need to customize the configuration of [less-loader](https://github.com/webpack-contrib/less-loader), please refer to the [tools.less](/configure/app/tools/less).
-- If you need to customize the configuration of [sass-loader](https://github.com/webpack-contrib/sass-loader), please refer to the [tools.less](/configure/app/tools/sass).
-
-:::tip
-CSS files pre-compiled by Less and Sass will still undergo Modern.js build-in [PostCSS](https://postcss.org/) conversion, which has good browser compatibility. For related content, please refer to [[PostCSS](/guides/css/postcss)].
-
-:::

package/en/guides/css/postcss.mdx

@@ -1,79 +0,0 @@
----
-sidebar_position: 3
----
-
-# PostCSS
-
-[PostCSS](https://postcss.org/) is a tool for converting CSS code with JavaScript tools and plugins. Modern.js built-in PostCSS and integrates common PostCSS plugins such as [Autoprefixer](https://github.com/postcss/autoprefixer) to meet the style development needs of most projects.
-
-By default, Modern.js compile and transform CSS as follows:
-
-1. [Autoprefixer](https://github.com/postcss/autoprefixer) Automatically add the required browser vendor prefix to CSS rules according to the required browser range. Modern.js default supported browser ranges are: `['> 0.01%', 'not dead', 'not op_mini all']`.
-
-:::info Note
-  - [Supported browser range: `> 0.01%`] means that the browser market share is greater than 0.01%.
-  - `Not dead` means excluding browsers that are no longer officially supported and browsers that have not been updated in the past 24 months.
-  - `not op_mini all` means exclude Opera Mini.
-
-:::
-
-:::info Additional
-If you need to modify the default browser support range, you can configure `browserslist` in the project's `package.json` file, and set the rule to refer to the use of [Browserslist](https://github.com/browserslist/browserslist). The following is an example:
-`json title ="package.json" { "Browserslist": [ "The last 1 versions", "> 1%", "IE 10" ] } `
-
-:::
-
-2. Provide [CSS custom properties](https://www.w3.org/TR/css-variables-1/) support, you can define and use custom variables in CSS, such as:
-
-```css
-:root {
-  --main-bg-color: pink;
-}
-
-body {
-  background-color: var(--main-bg-color);
-}
-```
-
-3. Provide [CSS Nesting](https://drafts.csswg.org/css-nesting-1/) support, you can use nested writing in CSS, such as:
-
-```css
-table.colortable td {
-  text-align: center;
-}
-table.colortable td.c {
-  text-transform: uppercase;
-}
-```
-
-It can also be rewritten as CSS nested:
-
-```css
-table.colortable {
-  & td {
-    text-align: center;
-    &.c {
-      text-transform: uppercase;
-    }
-  }
-}
-```
-
-4. Fix known [Flexbugs](https://github.com/philipwalton/flexbugs).
-5. Provide compatibility with the following CSS features:
-   - [`initial` attribute value](https://developer.mozilla.org/en-US/docs/Web/CSS/initial_value)
-   - [`break-` attribute](https://developer.mozilla.org/en-US/docs/Web/CSS/break-after)
-   - [`font-variant`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant)
-   - [Media Query Ranges](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#syntax_improvements_in_level_4)
-
-When you need to modify the PostCSS configuration, you can implement it through the underlying configuration [`tools.postcss`](/configure/app/tools/postcss), here is an example:
-
-```ts title="modern.config.ts"
-export default defineConfig({
-  tools: {
-    postcss: {
-      plugins: ['autoprefixer', ('postcss-flexbugs-fixes': {})],
-    },
-  },
-});
-```

package/zh/guides/css/_category_.json

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