@modern-js/main-doc 2.63.0 → 2.63.2

package/docs/en/configure/app/server/ssr.mdx

@@ -29,7 +29,6 @@ When the value type is `Object`, the following properties can be configured:
 | ---------------- | ------------------------------------------------------------- | -------------------------------------- | ---------------------------------------------------------------------------- |
 | mode             | `string`                                  | `string`          | which defaults to using `renderToString` for rendering. Configure `stream` to enable streaming rendering       |
 | forceCSR         | `boolean`                                 | `false`           | which is off by default for forcing CSR rendering. Configure `true` to force CSR by adding `?csr=true` or adding `x-modern-ssr-fallback` header when accessing the page |
-| inlineScript     | `boolean`                                 | `true`            | By default, SSR data is injected into HTML as inline scripts and assigned directly to global variables. Configure `false` to distribute JSON instead of assigning to global variables, this configuration doesn't work in Streaming SSR |
 | disablePrerender | `boolean`                                 | `fasle`           | To ensure compatibility with the old data request method (`useLoader`), by default, Modern.js performs pre-rendering of components.However, if developers want to reduce one rendering when there is no use of the useLoader API in your project, you can set the configuration `disablePrerender=true` |
 | unsafeHeaders    | `string[]`                                | `[]`              | For safety reasons, Modern.js does not add excessive content to SSR_DATA. Developers can use this configuration to specify the headers that need to be injected      |
 | scriptLoading    | `defer \| blocking \| module \| async`    | `defer`           | The configuration is the same as [html.scriptLoading](/configure/app/html/script-loading), supporting SSR injected script set to `async` loading. The priority is `ssr.scriptLoading` > `html.scriptLoading`  |
@@ -42,7 +41,6 @@ export default defineConfig({
     ssr: {
       forceCSR: true,
       mode: 'stream',
-      inlineScript: false,
       unsafeHeaders: ['User-Agent'],
       scriptLoading: 'async',
     },

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/advanced-features/bff/function.mdx

@@ -258,4 +258,8 @@ export default () => {
 
 import ExtendBFF from "@site-docs-en/components/extend-bff-function"
 
-<ExtendBFF/>
+<ExtendBFF/>
+
+## Code Sharing
+
+Besides the BFF functions in the `api/` directory, which can be referenced in the `src/` directory through an integrated calling method, the `src/` and `api/` directories cannot directly reference each other's code by default. To achieve code sharing, a [`shared`](/en/apis/app/hooks/shared.html) directory can be created at the root of the project for both `src/` and `api/` to use commonly.

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/server/ssr.mdx

@@ -29,7 +29,6 @@ export default defineConfig({
 | ---------------- | ------------------------------------------------------------- | -------------------------------------- | ---------------------------------------------------------------------------- |
 | mode             | `string`                                  | `string`          | 默认为使用 `renderToString` 渲染。配置为 `stream` 开启流式渲染       |
 | forceCSR         | `boolean`                                 | `false`           | 默认关闭强制 CSR 渲染。配置为 `true` 后，在页面访问时添加 `?csr=true` 或添加请求头 `x-modern-ssr-fallback` 即可强制 CSR |
-| inlineScript     | `boolean`                                 | `true`            | 默认情况下，SSR 的数据会以内联脚本的方式注入到 HTML 中，并且直接赋值给全局变量。配置为 `false` 后，会下发 JSON，而不是赋值给全局变量，Streaming SSR 下，该配置不会生效 |
 | disablePrerender | `boolean`                                 | `fasle`           | 为了兼容旧数据请求方式 - `useLoader`, 默认情况下 Modern.js 会对组件进行一次预渲染即有两次渲染 |
 | unsafeHeaders    | `string[]`                                | `[]`              | 为了安全考虑，Modern.js 不会往 SSR_DATA 添加过多的内容。开发者可以通过该配置，对需要注入的 headers 进行配置       |
 | scriptLoading    | `defer \| blocking \| module \| async`    | `defer`           | 配置同 [html.scriptLoading](/configure/app/html/script-loading)，支持 ssr 注入的 script 设置为 async 加载方式。优先级为 `ssr.scriptLoading` > `html.scriptLoading`  |
@@ -42,7 +41,6 @@ export default defineConfig({
     ssr: {
       forceCSR: true,
       mode: 'stream',
-      inlineScript: false,
       disablePrerender: true,
       unsafeHeaders: ['User-Agent'],
       scriptLoading: 'async',

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/advanced-features/bff/function.mdx

@@ -260,4 +260,8 @@ export default () => {
 
 import ExtendBFF from "@site-docs/components/extend-bff-function"
 
-<ExtendBFF/>
+<ExtendBFF/>
+
+## 代码共享
+
+除 `api/` 目录下的 BFF 函数可在 `src/` 中通过一体化调用方式引用，项目中 `src/` 和 `api/` 目录默认不能直接引用对方代码。为实现代码共享，可在项目根目录创建 [`shared`](/apis/app/hooks/shared.html) 目录，供 `src/` 和 `api/` 共同引用。

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": "2.63.0",
+  "version": "2.63.2",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public",
     "provenance": true
   },
   "dependencies": {
-    "@modern-js/sandpack-react": "2.63.0"
+    "@modern-js/sandpack-react": "2.63.2"
   },
   "devDependencies": {
     "@rspress/shared": "1.35.4",