docs: update postcss doc

web-infra-dev · Dec 9, 2024 · 94465c4 · 94465c4
1 parent 4d537df
commit 94465c4
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 46 deletions.
diff --git a/packages/document/main-doc/docs/en/configure/app/tools/postcss.mdx b/packages/document/main-doc/docs/en/configure/app/tools/postcss.mdx
@@ -9,33 +9,31 @@ configName: tools.postcss
 - **Default:**
 
 ```js
-const defaultOptions =
-  tools.lightningcssLoader === false
-    ? {
-        postcssOptions: {
-          plugins: [
-            // 以下插件默认启用
-            require('postcss-nesting'),
-            require('postcss-media-minmax'),
-            require('postcss-flexbugs-fixes'),
-            require('autoprefixer')({
-              flexbox: 'no-2009',
-            }),
-            // 以下插件仅在需要兼容低版本浏览器时启用
-            require('postcss-custom-properties'),
-            require('postcss-initial'),
-            require('postcss-page-break'),
-            require('postcss-font-variant'),
-          ],
-          // 默认在开发环境下启用 CSS 的 Source Map
-          sourceMap: isDev,
-        },
-      }
-    : {};
+const defaultOptions = {
+  postcssOptions: {
+    plugins: [
+      // The following plugins are enabled by default
+      require('postcss-nesting'),
+      require('postcss-media-minmax'),
+      require('postcss-flexbugs-fixes'),
+      require('autoprefixer')({
+        flexbox: 'no-2009',
+      }),
+      // The following plugins are only enabled when compatible with legacy browsers
+      require('postcss-custom-properties'),
+      require('postcss-initial'),
+      require('postcss-page-break'),
+      require('postcss-font-variant'),
+    ],
+    sourceMap: isDev,
+  },
+};
 ```
 
 Modern.js integrates PostCSS by default, you can configure [postcss-loader](https://github.com/webpack-contrib/postcss-loader) through `tools.postcss`.
 
+It should be noted that when you enable the `tools.lightningcss` configuration, PostCSS will be disabled by default, including `postcss-loader` and its default plugins.
+
 import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
 
 <RsbuildConig />
diff --git a/packages/document/main-doc/docs/zh/configure/app/tools/postcss.mdx b/packages/document/main-doc/docs/zh/configure/app/tools/postcss.mdx
@@ -9,33 +9,32 @@ configName: tools.postcss
 - **默认值：**
 
 ```js
-const defaultOptions =
-  tools.lightningcssLoader === false
-    ? {
-        postcssOptions: {
-          plugins: [
-            // 以下插件默认启用
-            require('postcss-nesting'),
-            require('postcss-media-minmax'),
-            require('postcss-flexbugs-fixes'),
-            require('autoprefixer')({
-              flexbox: 'no-2009',
-            }),
-            // 以下插件仅在需要兼容低版本浏览器时启用
-            require('postcss-custom-properties'),
-            require('postcss-initial'),
-            require('postcss-page-break'),
-            require('postcss-font-variant'),
-          ],
-          // 默认在开发环境下启用 CSS 的 Source Map
-          sourceMap: isDev,
-        },
-      }
-    : {};
+const defaultOptions = {
+  postcssOptions: {
+    plugins: [
+      // 以下插件默认启用
+      require('postcss-nesting'),
+      require('postcss-media-minmax'),
+      require('postcss-flexbugs-fixes'),
+      require('autoprefixer')({
+        flexbox: 'no-2009',
+      }),
+      // 以下插件仅在需要兼容低版本浏览器时启用
+      require('postcss-custom-properties'),
+      require('postcss-initial'),
+      require('postcss-page-break'),
+      require('postcss-font-variant'),
+    ],
+    // 默认在开发环境下启用 CSS 的 Source Map
+    sourceMap: isDev,
+  },
+};
 ```
 
 Modern.js 默认集成 PostCSS，你可以通过 `tools.postcss` 对 [postcss-loader](https://github.com/webpack-contrib/postcss-loader) 进行配置。
 
+需要注意的是，当你开启 `tools.lightningcss` 配置时，PostCSS 将会被默认禁用，包括 `postcss-loader` 及其默认插件。
+
 import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
 
 <RsbuildConig />