@modern-js/main-doc 2.63.1 → 2.63.2

Sign up to get free protection for your applications and to get access to all the features.
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",