@modern-js/main-doc 0.0.0-nightly-20241207170715 → 0.0.0-nightly-20241209170723

package/docs/en/configure/app/tools/lightningcss-loader.mdx

@@ -0,0 +1,41 @@
+---
+title: lightningcssLoader
+configName: tools.lightningcssLoader
+---
+
+# tools.lightningcssLoader
+
+- **Type:** `Rspack.LightningcssLoaderOptions | Function | boolean`
+- **Default:** `Rspack.LightningcssLoaderOptions | Function | boolean`
+- **Bundler:** `only support rspack`
+
+You can configure [builtin:lightningcss-loader](https://rspack.dev/guide/features/builtin-lightningcss-loader) through `tools.lightningcssLoader`.
+
+## Enable loader
+
+Set `tools.lightningcssLoader` to `true` to enable Rsbuild's built-in `lightningcss-loader`:
+
+```js
+export default {
+  tools: {
+    lightningcssLoader: true,
+  },
+};
+```
+
+At this time, the default configuration is as follows:
+
+```js
+const defaultOptions = {
+  // use current browserslist config
+  targets: browserslist,
+  // minify is enabled when output.injectStyles is true and in production mode
+  minify: config.mode === 'production' && config.output.injectStyles,
+};
+```
+
+It should be noted that when `lightningcss-loader` is turned on, `postcss-loader` will be turned off by default.
+
+import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+
+<RsbuildConig />

package/docs/en/configure/app/tools/postcss.mdx

@@ -12,26 +12,28 @@ configName: tools.postcss
 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'),
     ],
-    // 默认在开发环境下启用 CSS 的 Source Map
     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 />

package/docs/en/guides/basic-features/css/css.mdx

@@ -20,6 +20,12 @@ Modern.js has built-in [PostCSS](https://postcss.org/) to transform CSS code.
 
 Please refer to [Rsbuild - Using PostCSS](https://rsbuild.dev/guide/basic/css-usage#using-postcss) for detailed usage.
 
+## Using Lightning CSS
+
+Modern.js supports using [Lightning CSS](https://lightningcss.dev/) to convert CSS code. This feature can be turned on by configuring [tools.lightningcssLoader](/configure/app/tools/lightningcss-loader).
+
+Please refer to [Rsbuild - Using Lightning CSS](https://rsbuild.dev/guide/basic/css-usage#lightning-css) for detailed usage.
+
 ## Using Uno CSS
 
 Please read the [Rsbuild - Using UnoCSS](https://rsbuild.dev/zh/guide/basic/unocss) for detailed usage.

package/docs/en/guides/get-started/tech-stack.mdx

@@ -60,6 +60,8 @@ During production builds, Modern.js uses [Terser](https://github.com/terser/ters
 
 Modern.js uses [PostCSS](https://postcss.org/) to transform CSS code and enables [autoprefixer](https://github.com/postcss/autoprefixer) by default to add CSS prefixes.
 
+Modern.js supports enabling ["Lightning CSS"](/configure/app/tools/lightningcss-loader), which uses Lightning CSS to downgrade CSS syntax.
+
 Modern.js supports enabling ["Tailwind CSS"](/guides/basic-features/css/tailwindcss) and is compatible with both Tailwind CSS v2 and v3.
 
 ## CSS Preprocessors

package/docs/zh/configure/app/tools/lightningcss-loader.mdx

@@ -0,0 +1,41 @@
+---
+title: lightningcssLoader
+configName: tools.lightningcssLoader
+---
+
+# tools.lightningcssLoader
+
+- **类型：** `Rspack.LightningcssLoaderOptions | Function | boolean`
+- **默认值：** `false`
+- **打包工具：** `仅支持 rspack`
+
+通过 `tools.lightningcssLoader` 可以设置 [builtin:lightningcss-loader](https://rspack.dev/guide/features/builtin-lightningcss-loader) 的选项。
+
+## 开启 loader
+
+将 `tools.lightningcssLoader` 设置为 `true`，可以开启 Rsbuild 内置的 `lightningcss-loader`：
+
+```js
+export default {
+  tools: {
+    lightningcssLoader: true,
+  },
+};
+```
+
+此时，默认生效的配置如下：
+
+```js
+const defaultOptions = {
+  // use current browserslist config
+  targets: browserslist,
+  // minify is enabled when output.injectStyles is true and in production mode
+  minify: config.mode === 'production' && config.output.injectStyles,
+};
+```
+
+需要注意的是，开启 `lightningcss-loader` 时，将会默认关闭 `postcss-loader`。
+
+import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+
+<RsbuildConig />

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

@@ -33,6 +33,8 @@ const defaultOptions = {
 
 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 />

package/docs/zh/guides/basic-features/css/css.mdx

@@ -20,6 +20,12 @@ Modern.js 内置了 [PostCSS](https://postcss.org/) 来转换 CSS 代码。
 
 请阅读 [Rsbuild - 使用 PostCSS](https://rsbuild.dev/zh/guide/basic/css-usage#%E4%BD%BF%E7%94%A8-postcss) 了解更多用法。
 
+## 使用 Lightning CSS
+
+Modern.js 支持使用 [Lightning CSS](https://lightningcss.dev/) 来转换 CSS 代码，可以通过配置 [tools.lightningcssLoader](/configure/app/tools/lightningcss-loader) 来开启此功能。
+
+请阅读 [Rsbuild - 使用 Lightning CSS](https://rsbuild.dev/zh/guide/basic/css-usage#lightning-css) 了解更多用法。
+
 ## 使用 Uno CSS
 
 请阅读 [Rsbuild - 使用 UnoCSS](https://rsbuild.dev/zh/guide/basic/unocss) 了解更多用法。

package/docs/zh/guides/get-started/tech-stack.mdx

@@ -60,6 +60,8 @@ Modern.js 使用 [Babel](https://babeljs.io/)、[SWC](https://swc.rs/) 或 [esbu
 
 Modern.js 使用 [PostCSS](https://postcss.org/) 来转换 CSS 代码，并默认开启 [autoprefixer](https://github.com/postcss/autoprefixer) 来补全 CSS 前缀。
 
+Modern.js 支持 [启用 Lightning CSS](/configure/app/tools/lightningcss-loader)，使用 Lightning CSS 降级 CSS 语法。
+
 Modern.js 支持 [启用 Tailwind CSS](/guides/basic-features/css/tailwindcss)，并同时兼容 Tailwind CSS v2 和 v3 版本。
 
 ## CSS 预处理器

package/package.json

@@ -15,14 +15,14 @@
     "modern",
     "modern.js"
   ],
-  "version": "0.0.0-nightly-20241207170715",
+  "version": "0.0.0-nightly-20241209170723",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public",
     "provenance": true
   },
   "dependencies": {
-    "@modern-js/sandpack-react": "0.0.0-nightly-20241207170715"
+    "@modern-js/sandpack-react": "0.0.0-nightly-20241209170723"
   },
   "devDependencies": {
     "@rspress/shared": "1.35.4",