docs: update PostCSS guide (#4364)

Author: chenjiahan

website/docs/en/guide/basic/_meta.json

@@ -1,8 +1,8 @@
 [
   "cli",
+  "css-usage",
   "server",
   "output-files",
-  "css-usage",
   "static-assets",
   "json-files",
   "wasm-assets",

website/docs/en/guide/basic/css-usage.mdx

@@ -1,4 +1,4 @@
-# Import CSS files
+# CSS
 
 Rsbuild provides out-of-the-box support for CSS, including PostCSS, CSS Modules, CSS preprocessors, CSS inlining, and CSS compression.
 
@@ -55,19 +55,31 @@ When building for production, Rsbuild enables Rspack's built-in [LightningCssMin
 
 Rsbuild supports transforming CSS code through [PostCSS](https://postcss.org/). You can configure PostCSS in the following ways:
 
-1. Rsbuild uses [postcss-load-config](https://github.com/postcss/postcss-load-config) to load the PostCSS configuration file in the root directory of the current project, such as `postcss.config.js`:
+### Configuration file
 
-```js
+Rsbuild uses [postcss-load-config](https://github.com/postcss/postcss-load-config) to load the PostCSS configuration file in the root directory of the current project, such as `postcss.config.js`:
+
+```js title="postcss.config.cjs"
 module.exports = {
   'postcss-px-to-viewport': {
     viewportWidth: 375,
   },
 };
 ```
 
-2. Configure the postcss-loader through Rsbuild's [tools.postcss](/config/tools/postcss) option, which supports modifying the built-in configuration through a function, for example:
+`postcss-load-config` supports multiple file formats, including but not limited to the following file names:
 
-```ts
+- postcss.config.js
+- postcss.config.mjs
+- postcss.config.cjs
+- postcss.config.ts
+- ...
+
+### tools.postcss
+
+You can also configure the postcss-loader through Rsbuild's [tools.postcss](/config/tools/postcss) option, which supports modifying the built-in configuration through a function, for example:
+
+```ts title="rsbuild.config.ts"
 export default {
   tools: {
     postcss: (opts) => {
@@ -80,6 +92,8 @@ export default {
 };
 ```
 
+### Configuration priority
+
 - When you configure both the `postcss.config.js` file and the `tools.postcss` option, both will take effect, and the `tools.postcss` option will take precedence.
 - If there is no `postcss.config.js` file in the project and the `tools.postcss` option is not configured, Rsbuild will not register `postcss-loader`.
 

website/docs/zh/guide/basic/_meta.json

@@ -1,8 +1,8 @@
 [
   "cli",
+  "css-usage",
   "server",
   "output-files",
-  "css-usage",
   "static-assets",
   "json-files",
   "wasm-assets",

website/docs/zh/guide/basic/css-usage.mdx

@@ -1,4 +1,4 @@
-# 引用 CSS 文件
+# CSS
 
 Rsbuild 对 CSS 提供开箱即用的支持，包括 Lightning CSS、PostCSS、CSS Modules、CSS 预处理器、CSS 内联和 CSS 压缩。
 
@@ -55,17 +55,29 @@ export default {
 
 Rsbuild 支持通过 [PostCSS](https://postcss.org/) 来转换 CSS 代码。你可以通过以下方式来配置 PostCSS：
 
-1. Rsbuild 使用 [postcss-load-config](https://github.com/postcss/postcss-load-config) 来加载当前项目根目录下的 PostCSS 配置文件，比如 `postcss.config.js`：
+### 配置文件
 
-```js title="postcss.config.js"
+Rsbuild 使用 [postcss-load-config](https://github.com/postcss/postcss-load-config) 来加载当前项目根目录下的 PostCSS 配置文件，比如 `postcss.config.js`：
+
+```js title="postcss.config.cjs"
 module.exports = {
   'postcss-px-to-viewport': {
     viewportWidth: 375,
   },
 };
 ```
 
-2. 通过 Rsbuild 的 [tools.postcss](/config/tools/postcss) 选项来配置 postcss-loader，该选项支持通过函数来修改内置配置，比如：
+`postcss-load-config` 支持多种文件格式，包括但不限于以下文件名：
+
+- postcss.config.js
+- postcss.config.mjs
+- postcss.config.cjs
+- postcss.config.ts
+- ...
+
+### tools.postcss
+
+你也可以通过 Rsbuild 的 [tools.postcss](/config/tools/postcss) 选项来配置 postcss-loader，该选项支持通过函数来修改内置配置，比如：
 
 ```ts title="rsbuild.config.ts"
 export default {
@@ -80,6 +92,8 @@ export default {
 };
 ```
 
+### 配置优先级
+
 - 当你同时配置 `postcss.config.js` 文件和 `tools.postcss` 选项时，两者都会生效，并且 `tools.postcss` 的优先级更高。
 - 如果项目中没有 `postcss.config.js` 文件，也没有配置 `tools.postcss` 选项，Rsbuild 将不会注册 `postcss-loader`。