@modern-js/main-doc 2.63.1 → 2.63.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/docs/en/configure/app/server/ssr.mdx +0 -2
  2. package/docs/en/configure/app/tools/lightningcss-loader.mdx +41 -0
  3. package/docs/en/configure/app/tools/postcss.mdx +5 -3
  4. package/docs/en/guides/basic-features/css/css.mdx +6 -0
  5. package/docs/en/guides/get-started/tech-stack.mdx +2 -0
  6. package/docs/zh/configure/app/server/ssr.mdx +0 -2
  7. package/docs/zh/configure/app/tools/lightningcss-loader.mdx +41 -0
  8. package/docs/zh/configure/app/tools/postcss.mdx +2 -0
  9. package/docs/zh/guides/basic-features/css/css.mdx +6 -0
  10. package/docs/zh/guides/get-started/tech-stack.mdx +2 -0
  11. package/package.json +2 -2
package/docs/en/configure/app/server/ssr.mdx CHANGED
@@ -29,7 +29,6 @@ When the value type is `Object`, the following properties can be configured:
29
29
  | ---------------- | ------------------------------------------------------------- | -------------------------------------- | ---------------------------------------------------------------------------- |
30
30
  | mode | `string` | `string` | which defaults to using `renderToString` for rendering. Configure `stream` to enable streaming rendering |
31
31
  | 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 |
32
- | 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 |
33
32
  | 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` |
34
33
  | 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 |
35
34
  | 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({
42
41
  ssr: {
43
42
  forceCSR: true,
44
43
  mode: 'stream',
45
- inlineScript: false,
46
44
  unsafeHeaders: ['User-Agent'],
47
45
  scriptLoading: 'async',
48
46
  },
package/docs/en/configure/app/tools/lightningcss-loader.mdx ADDED
@@ -0,0 +1,41 @@
1
+ ---
2
+ title: lightningcssLoader
3
+ configName: tools.lightningcssLoader
4
+ ---
5
+
6
+ # tools.lightningcssLoader
7
+
8
+ - **Type:** `Rspack.LightningcssLoaderOptions | Function | boolean`
9
+ - **Default:** `Rspack.LightningcssLoaderOptions | Function | boolean`
10
+ - **Bundler:** `only support rspack`
11
+
12
+ You can configure [builtin:lightningcss-loader](https://rspack.dev/guide/features/builtin-lightningcss-loader) through `tools.lightningcssLoader`.
13
+
14
+ ## Enable loader
15
+
16
+ Set `tools.lightningcssLoader` to `true` to enable Rsbuild's built-in `lightningcss-loader`:
17
+
18
+ ```js
19
+ export default {
20
+ tools: {
21
+ lightningcssLoader: true,
22
+ },
23
+ };
24
+ ```
25
+
26
+ At this time, the default configuration is as follows:
27
+
28
+ ```js
29
+ const defaultOptions = {
30
+ // use current browserslist config
31
+ targets: browserslist,
32
+ // minify is enabled when output.injectStyles is true and in production mode
33
+ minify: config.mode === 'production' && config.output.injectStyles,
34
+ };
35
+ ```
36
+
37
+ It should be noted that when `lightningcss-loader` is turned on, `postcss-loader` will be turned off by default.
38
+
39
+ import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
40
+
41
+ <RsbuildConig />
package/docs/en/configure/app/tools/postcss.mdx CHANGED
@@ -12,26 +12,28 @@ configName: tools.postcss
12
12
  const defaultOptions = {
13
13
  postcssOptions: {
14
14
  plugins: [
15
- // 以下插件默认启用
15
+ // The following plugins are enabled by default
16
16
  require('postcss-nesting'),
17
17
  require('postcss-media-minmax'),
18
18
  require('postcss-flexbugs-fixes'),
19
19
  require('autoprefixer')({
20
20
  flexbox: 'no-2009',
21
21
  }),
22
- // 以下插件仅在需要兼容低版本浏览器时启用
22
+ // The following plugins are only enabled when compatible with legacy browsers
23
23
  require('postcss-custom-properties'),
24
24
  require('postcss-initial'),
25
25
  require('postcss-page-break'),
26
26
  require('postcss-font-variant'),
27
27
  ],
28
- // 默认在开发环境下启用 CSS 的 Source Map
29
28
  sourceMap: isDev,
30
29
  },
31
30
  };
32
31
  ```
32
+
33
33
  Modern.js integrates PostCSS by default, you can configure [postcss-loader](https://github.com/webpack-contrib/postcss-loader) through `tools.postcss`.
34
34
 
35
+ 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.
36
+
35
37
  import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
36
38
 
37
39
  <RsbuildConig />
package/docs/en/guides/basic-features/css/css.mdx CHANGED
@@ -20,6 +20,12 @@ Modern.js has built-in [PostCSS](https://postcss.org/) to transform CSS code.
20
20
 
21
21
  Please refer to [Rsbuild - Using PostCSS](https://rsbuild.dev/guide/basic/css-usage#using-postcss) for detailed usage.
22
22
 
23
+ ## Using Lightning CSS
24
+
25
+ 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).
26
+
27
+ Please refer to [Rsbuild - Using Lightning CSS](https://rsbuild.dev/guide/basic/css-usage#lightning-css) for detailed usage.
28
+
23
29
  ## Using Uno CSS
24
30
 
25
31
  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 CHANGED
@@ -60,6 +60,8 @@ During production builds, Modern.js uses [Terser](https://github.com/terser/ters
60
60
 
61
61
  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.
62
62
 
63
+ Modern.js supports enabling ["Lightning CSS"](/configure/app/tools/lightningcss-loader), which uses Lightning CSS to downgrade CSS syntax.
64
+
63
65
  Modern.js supports enabling ["Tailwind CSS"](/guides/basic-features/css/tailwindcss) and is compatible with both Tailwind CSS v2 and v3.
64
66
 
65
67
  ## CSS Preprocessors
package/docs/zh/configure/app/server/ssr.mdx CHANGED
@@ -29,7 +29,6 @@ export default defineConfig({
29
29
  | ---------------- | ------------------------------------------------------------- | -------------------------------------- | ---------------------------------------------------------------------------- |
30
30
  | mode | `string` | `string` | 默认为使用 `renderToString` 渲染。配置为 `stream` 开启流式渲染 |
31
31
  | forceCSR | `boolean` | `false` | 默认关闭强制 CSR 渲染。配置为 `true` 后，在页面访问时添加 `?csr=true` 或添加请求头 `x-modern-ssr-fallback` 即可强制 CSR |
32
- | inlineScript | `boolean` | `true` | 默认情况下，SSR 的数据会以内联脚本的方式注入到 HTML 中，并且直接赋值给全局变量。配置为 `false` 后，会下发 JSON，而不是赋值给全局变量，Streaming SSR 下，该配置不会生效 |
33
32
  | disablePrerender | `boolean` | `fasle` | 为了兼容旧数据请求方式 - `useLoader`, 默认情况下 Modern.js 会对组件进行一次预渲染即有两次渲染 |
34
33
  | unsafeHeaders | `string[]` | `[]` | 为了安全考虑，Modern.js 不会往 SSR_DATA 添加过多的内容。开发者可以通过该配置，对需要注入的 headers 进行配置 |
35
34
  | 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({
42
41
  ssr: {
43
42
  forceCSR: true,
44
43
  mode: 'stream',
45
- inlineScript: false,
46
44
  disablePrerender: true,
47
45
  unsafeHeaders: ['User-Agent'],
48
46
  scriptLoading: 'async',
package/docs/zh/configure/app/tools/lightningcss-loader.mdx ADDED
@@ -0,0 +1,41 @@
1
+ ---
2
+ title: lightningcssLoader
3
+ configName: tools.lightningcssLoader
4
+ ---
5
+
6
+ # tools.lightningcssLoader
7
+
8
+ - **类型：** `Rspack.LightningcssLoaderOptions | Function | boolean`
9
+ - **默认值：** `false`
10
+ - **打包工具：** `仅支持 rspack`
11
+
12
+ 通过 `tools.lightningcssLoader` 可以设置 [builtin:lightningcss-loader](https://rspack.dev/guide/features/builtin-lightningcss-loader) 的选项。
13
+
14
+ ## 开启 loader
15
+
16
+ 将 `tools.lightningcssLoader` 设置为 `true`，可以开启 Rsbuild 内置的 `lightningcss-loader`：
17
+
18
+ ```js
19
+ export default {
20
+ tools: {
21
+ lightningcssLoader: true,
22
+ },
23
+ };
24
+ ```
25
+
26
+ 此时，默认生效的配置如下：
27
+
28
+ ```js
29
+ const defaultOptions = {
30
+ // use current browserslist config
31
+ targets: browserslist,
32
+ // minify is enabled when output.injectStyles is true and in production mode
33
+ minify: config.mode === 'production' && config.output.injectStyles,
34
+ };
35
+ ```
36
+
37
+ 需要注意的是，开启 `lightningcss-loader` 时，将会默认关闭 `postcss-loader`。
38
+
39
+ import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
40
+
41
+ <RsbuildConig />
package/docs/zh/configure/app/tools/postcss.mdx CHANGED
@@ -33,6 +33,8 @@ const defaultOptions = {
33
33
 
34
34
  Modern.js 默认集成 PostCSS，你可以通过 `tools.postcss` 对 [postcss-loader](https://github.com/webpack-contrib/postcss-loader) 进行配置。
35
35
 
36
+ 需要注意的是，当你开启 `tools.lightningcss` 配置时，PostCSS 将会被默认禁用，包括 `postcss-loader` 及其默认插件。
37
+
36
38
  import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
37
39
 
38
40
  <RsbuildConig />
package/docs/zh/guides/basic-features/css/css.mdx CHANGED
@@ -20,6 +20,12 @@ Modern.js 内置了 [PostCSS](https://postcss.org/) 来转换 CSS 代码。
20
20
 
21
21
  请阅读 [Rsbuild - 使用 PostCSS](https://rsbuild.dev/zh/guide/basic/css-usage#%E4%BD%BF%E7%94%A8-postcss) 了解更多用法。
22
22
 
23
+ ## 使用 Lightning CSS
24
+
25
+ Modern.js 支持使用 [Lightning CSS](https://lightningcss.dev/) 来转换 CSS 代码，可以通过配置 [tools.lightningcssLoader](/configure/app/tools/lightningcss-loader) 来开启此功能。
26
+
27
+ 请阅读 [Rsbuild - 使用 Lightning CSS](https://rsbuild.dev/zh/guide/basic/css-usage#lightning-css) 了解更多用法。
28
+
23
29
  ## 使用 Uno CSS
24
30
 
25
31
  请阅读 [Rsbuild - 使用 UnoCSS](https://rsbuild.dev/zh/guide/basic/unocss) 了解更多用法。
package/docs/zh/guides/get-started/tech-stack.mdx CHANGED
@@ -60,6 +60,8 @@ Modern.js 使用 [Babel](https://babeljs.io/)、[SWC](https://swc.rs/) 或 [esbu
60
60
 
61
61
  Modern.js 使用 [PostCSS](https://postcss.org/) 来转换 CSS 代码，并默认开启 [autoprefixer](https://github.com/postcss/autoprefixer) 来补全 CSS 前缀。
62
62
 
63
+ Modern.js 支持 [启用 Lightning CSS](/configure/app/tools/lightningcss-loader)，使用 Lightning CSS 降级 CSS 语法。
64
+
63
65
  Modern.js 支持 [启用 Tailwind CSS](/guides/basic-features/css/tailwindcss)，并同时兼容 Tailwind CSS v2 和 v3 版本。
64
66
 
65
67
  ## CSS 预处理器
package/package.json CHANGED
@@ -15,14 +15,14 @@
15
15
  "modern",
16
16
  "modern.js"
17
17
  ],
18
- "version": "2.63.1",
18
+ "version": "2.63.2",
19
19
  "publishConfig": {
20
20
  "registry": "https://registry.npmjs.org/",
21
21
  "access": "public",
22
22
  "provenance": true
23
23
  },
24
24
  "dependencies": {
25
- "@modern-js/sandpack-react": "2.63.1"
25
+ "@modern-js/sandpack-react": "2.63.2"
26
26
  },
27
27
  "devDependencies": {
28
28
  "@rspress/shared": "1.35.4",