From b87b956e4b985bed8bcb2a04bed9702d267ccbad Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?= =?UTF-8?q?=E5=8D=9C?= Date: Mon, 21 Nov 2022 22:33:47 +0800 Subject: [PATCH] docs: Update v5 res & adjust cssinjs doc (#38799) * docs: update res * docs: more * docs: update * Update docs/react/customize-theme.zh-CN.md Co-authored-by: afc163 * docs: more mig Co-authored-by: afc163 --- docs/react/customize-theme.en-US.md | 4 +++- docs/react/customize-theme.zh-CN.md | 4 +++- docs/react/migration-v5.en-US.md | 21 ++++++++++++++++++ docs/react/migration-v5.zh-CN.md | 34 ++++++++++++++++++++--------- docs/resources.en-US.md | 7 +----- docs/resources.zh-CN.md | 7 +----- 6 files changed, 53 insertions(+), 24 deletions(-) diff --git a/docs/react/customize-theme.en-US.md b/docs/react/customize-theme.en-US.md index 96d403f8a4..765aadd14c 100644 --- a/docs/react/customize-theme.en-US.md +++ b/docs/react/customize-theme.en-US.md @@ -217,7 +217,7 @@ const theme = { ### Compatible adjustment -Ant Design default using CSS-in-JS with `:where` Selector to reduce priority. If you want to support old browser, you can use `@ant-design/cssinjs` to adjust this behavior (Please note keep version align with antd): +Ant Design default using CSS-in-JS with `:where` Selector to reduce priority to avoid user additional adjust style cost when updating to v5. If you want to support old browser, you can use `@ant-design/cssinjs` to adjust this behavior (Please note keep version align with antd): ```tsx import React from 'react'; @@ -239,6 +239,8 @@ It will turn `:where` to class selector: } ``` +Note: After turning off the `:where` downgrade, you may need to manually adjust the priority of some styles. + ### Server Side Render (SSR) Use `@ant-design/cssinjs` to extract style: diff --git a/docs/react/customize-theme.zh-CN.md b/docs/react/customize-theme.zh-CN.md index ab51415c9a..451ac9ecc3 100644 --- a/docs/react/customize-theme.zh-CN.md +++ b/docs/react/customize-theme.zh-CN.md @@ -217,7 +217,7 @@ const theme = { ### 兼容性调整 -Ant Design 的 CSS-in-JS 默认通过 `:where` 选择器降低 CSS Selector 优先级。在某些场景下你如果需要支持的旧版游览器，你可以使用 `@ant-design/cssinjs` 取消默认的降权操作（请注意版本保持与 antd 一致）： +Ant Design 的 CSS-in-JS 默认通过 `:where` 选择器降低 CSS Selector 优先级，以减少用户升级 v5 时额外调整自定义样式成本。在某些场景下你如果需要支持的旧版浏览器，你可以使用 `@ant-design/cssinjs` 取消默认的降权操作（请注意版本保持与 antd 一致）： ```tsx import React from 'react'; @@ -239,6 +239,8 @@ export default () => ( } ``` +注意：关闭 `:where` 降权后，你可能需要手动调整一些样式的优先级。 + ### 服务端渲染 使用 `@ant-design/cssinjs` 将所需样式抽离： diff --git a/docs/react/migration-v5.en-US.md b/docs/react/migration-v5.en-US.md index 9d0afa2802..8fc7697f5b 100644 --- a/docs/react/migration-v5.en-US.md +++ b/docs/react/migration-v5.en-US.md @@ -185,6 +185,27 @@ const v4Token = convertLegacyToken(mapToken); } ``` +### Remove babel-plugin-import + +Remove `babel-plugin-import` from package.json and modify `.babelrc`: + +```diff +"plugins": [ +- ["import", { "libraryName": "antd", "libraryDirectory": "lib"}, "antd"], +] +``` + +Umi user can disable by config： + +```diff +// config/config.ts or .umirc +export default { + antd: { +- import: true, + }, +}; +``` + ## Encounter problems If you encounter problems during the upgrade, please go to [GitHub issues](https://new-issue.ant.design/) for feedback. We will respond and improve this document as soon as possible. diff --git a/docs/react/migration-v5.zh-CN.md b/docs/react/migration-v5.zh-CN.md index 6f71de5dcd..c2a1d7d7d1 100644 --- a/docs/react/migration-v5.zh-CN.md +++ b/docs/react/migration-v5.zh-CN.md @@ -27,16 +27,7 @@ title: 从 v4 到 v5 - 移除 css variables 以及在此之上构筑的动态主题方案。 - 移除 `lib` 产物，只提供 `dist` 和 `es` 产物，原本的 `antd/es/locale` 目录也已经移除，语言包可到 `antd/locale` 目录下寻找。 - 内置的时间库使用 Dayjs 替代 Moment.js，具体请查看 [使用自定义日期库](/docs/react/use-custom-date-library-cn/)。 -- 不再支持 `babel-plugin-import`，CSS-in-JS 本身具有按需加载的能力，不再需要插件支持。Umi 用户可以移除相关配置。 - - ```diff - // config/config.ts - export default { - antd: { - - import: true, - }, - }; - ``` +- 不再支持 `babel-plugin-import`，CSS-in-JS 本身具有按需加载的能力，不再需要插件支持。 ### 兼容性调整 @@ -164,6 +155,8 @@ title: 从 v4 到 v5 npm install --save antd@5.x ``` +### less 迁移 + 如果你使用到了 antd 的 less 变量，通过兼容包将 v5 变量转译成 v4 版本，并通过 less-loader 注入： ```jsx @@ -186,6 +179,27 @@ const v4Token = convertLegacyToken(mapToken); } ``` +### 移除 babel-plugin-import + +从 package.json 中移除 `babel-plugin-import`，并从 `.babelrc` 移除该插件： + +```diff +"plugins": [ +- ["import", { "libraryName": "antd", "libraryDirectory": "lib"}, "antd"], +] +``` + +Umi 用户可以在配置文件中关闭： + +```diff +// config/config.ts or .umirc +export default { + antd: { +- import: true, + }, +}; +``` + ## 遇到问题 如果您在升级过程中遇到了问题，请到 [GitHub issues](https://new-issue.ant.design/) 进行反馈。我们会尽快响应和相应改进这篇文档。 diff --git a/docs/resources.en-US.md b/docs/resources.en-US.md index 453f73016b..7adb73bb08 100644 --- a/docs/resources.en-US.md +++ b/docs/resources.en-US.md @@ -15,12 +15,7 @@ Please find below some of the design resources and tools about Ant Design that w - Sketch Symbols - https://gw.alipayobjects.com/zos/basement_prod/048ee28f-2c80-4d15-9aa3-4f5ddac50465.svg - Sketch Symbols for Desktop - - https://gw.alipayobjects.com/os/bmw-prod/a5ff1d86-44cd-4b86-92f8-daab59cba5b7.sketch - - Official -- Sketch Symbols (Dark) - - https://gw.alipayobjects.com/zos/basement_prod/048ee28f-2c80-4d15-9aa3-4f5ddac50465.svg - - Sketch Symbols for Desktop with dark theme - - https://gw.alipayobjects.com/os/bmw-prod/6b670a1c-26e3-4379-9c86-7a2b95e170e5.sketch + - https://gw.alipayobjects.com/os/hitu-asset/5217de80-7a3e-413f-809e-20ecede4f3f3/hitu-1669000735416-5000001.sketch - Official - Mobile Components - https://gw.alipayobjects.com/zos/basement_prod/c0c3852c-d245-4330-886b-cb02ef49eb6d.svg diff --git a/docs/resources.zh-CN.md b/docs/resources.zh-CN.md index 0d350dd6bb..62cd00f11f 100644 --- a/docs/resources.zh-CN.md +++ b/docs/resources.zh-CN.md @@ -15,12 +15,7 @@ toc: false - Sketch 组件包 - https://gw.alipayobjects.com/zos/basement_prod/048ee28f-2c80-4d15-9aa3-4f5ddac50465.svg - 桌面组件 Sketch 模板包 - - https://gw.alipayobjects.com/os/bmw-prod/82c08c51-9993-4568-90c1-249c8301c0af.sketch - - 官方 -- Sketch 组件包 (暗色) - - https://gw.alipayobjects.com/zos/basement_prod/048ee28f-2c80-4d15-9aa3-4f5ddac50465.svg - - 桌面组件 Sketch 模板包，内含暗色版本的 antd 组件 - - https://gw.alipayobjects.com/os/bmw-prod/f002145c-33d9-408e-ba75-a1a68896dfa3.sketch + - https://gw.alipayobjects.com/os/hitu-asset/5217de80-7a3e-413f-809e-20ecede4f3f3/hitu-1669000735416-5000001.sketch - 官方 - Mobile Components - https://gw.alipayobjects.com/zos/basement_prod/c0c3852c-d245-4330-886b-cb02ef49eb6d.svg