From 06a34ca23536bdc7f41f12efa3c0286b8bb773c1 Mon Sep 17 00:00:00 2001
From: Peach <scdzwyxst@gmail.com>
Date: Mon, 11 Oct 2021 15:13:28 +0800
Subject: [PATCH 1/9] docs: 4.17.0-alpha.6 changelog (#32428)

* docs: 4.17.0-alpha.6 changelog

* chore: bump version

* docs: update CHANGELOG.zh-CN.md

Co-authored-by: afc163 <afc163@gmail.com>

* docs: sort changelog by type

* Update CHANGELOG.en-US.md

* Update CHANGELOG.zh-CN.md

Co-authored-by: afc163 <afc163@gmail.com>
Co-authored-by: xrkffgg <xrkffgg@gmail.com>
---
 CHANGELOG.en-US.md | 12 ++++++++++++
 CHANGELOG.zh-CN.md | 12 ++++++++++++
 package.json       |  2 +-
 3 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
index 261c95e0b6..d644c0e164 100644
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -15,6 +15,18 @@ timeline: true
 
 ---
 
+## 4.17.0-alpha.6
+
+`2021-10-11`
+
+- 🐞 Fix InputNumber handler arrow not align center. [#32409](https://github.com/ant-design/ant-design/pull/32409)
+- 🐞 Fix `closeIcon` overwriting bug when Notification is called multiple times. [#32359](https://github.com/ant-design/ant-design/pull/32359) [@KAROTT7](https://github.com/KAROTT7)
+- 🐞 Fix Button align issue with `icon` and `href`. [#32373](https://github.com/ant-design/ant-design/pull/32373)
+- 💄 Optimize Drawer open animation. [#32342](https://github.com/ant-design/ant-design/pull/32342)
+- 💄 Fix Mentions error style in Form. [#32385](https://github.com/ant-design/ant-design/pull/32385)
+- TypeScript
+  - 🤖 Fix args type for `getPopupContainer` in ConfigProvider. [#32406](https://github.com/ant-design/ant-design/pull/32406) [@mtadams007](https://github.com/mtadams007)
+
 ## 4.17.0-alpha.5
 
 `2021-09-30`
diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
index eaf9d7cbc3..2c73305957 100644
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@@ -15,6 +15,18 @@ timeline: true
 
 ---
 
+## 4.17.0-alpha.6
+
+`2021-10-11`
+
+- 🐞 修复 InputNumber 操作杆箭头未居中对齐的问题。[#32409](https://github.com/ant-design/ant-design/pull/32409)
+- 🐞 修复多次调用 Notification 时 `closeIcon` 配置会被覆盖的问题。[#32359](https://github.com/ant-design/ant-design/pull/32359) [@KAROTT7](https://github.com/KAROTT7)
+- 🐞 修复 Button 有 `icon` 和 `href` 时的对齐问题。[#32373](https://github.com/ant-design/ant-design/pull/32373)
+- 💄 优化 Drawer 弹出动画。[#32342](https://github.com/ant-design/ant-design/pull/32342)
+- 💄 修复 Mentions 在 Form 下错误样式丢失的问题。[#32385](https://github.com/ant-design/ant-design/pull/32385)
+- TypeScript
+  - 🤖 修复 ConfigProvider 中 `getPopupContainer` 的参数类型。[#32406](https://github.com/ant-design/ant-design/pull/32406) [@mtadams007](https://github.com/mtadams007)
+
 ## 4.17.0-alpha.5
 
 `2021-09-30`
diff --git a/package.json b/package.json
index b5ca33c1d1..270004e1f2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "antd",
-  "version": "4.17.0-alpha.5",
+  "version": "4.17.0-alpha.6",
   "description": "An enterprise-class UI design language and React components implementation",
   "title": "Ant Design",
   "keywords": [

From 08fabf9ff957e251bf57297c5ba6439eb23b693d Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Mon, 11 Oct 2021 19:45:44 +0800
Subject: [PATCH 2/9] chore(deps-dev): bump jsdom from 17.0.0 to 18.0.0
 (#32436)

Bumps [jsdom](https://github.com/jsdom/jsdom) from 17.0.0 to 18.0.0.
- [Release notes](https://github.com/jsdom/jsdom/releases)
- [Changelog](https://github.com/jsdom/jsdom/blob/master/Changelog.md)
- [Commits](https://github.com/jsdom/jsdom/compare/17.0.0...18.0.0)

---
updated-dependencies:
- dependency-name: jsdom
  dependency-type: direct:development
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 270004e1f2..28ed85798e 100644
--- a/package.json
+++ b/package.json
@@ -227,7 +227,7 @@
     "jest-image-snapshot": "^4.5.1",
     "jest-puppeteer": "^6.0.0",
     "jquery": "^3.4.1",
-    "jsdom": "^17.0.0",
+    "jsdom": "^18.0.0",
     "jsonml.js": "^0.1.0",
     "less-vars-to-js": "^1.3.0",
     "lz-string": "^1.4.4",

From 6d3973fb9528861d935ebd88add93582412b016a Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Tue, 12 Oct 2021 13:14:26 +0800
Subject: [PATCH 3/9] chore(deps-dev): bump eslint-plugin-jest from 24.7.0 to
 25.0.1 (#32444)

* chore(deps-dev): bump eslint-plugin-jest from 24.7.0 to 25.0.1

Bumps [eslint-plugin-jest](https://github.com/jest-community/eslint-plugin-jest) from 24.7.0 to 25.0.1.
- [Release notes](https://github.com/jest-community/eslint-plugin-jest/releases)
- [Changelog](https://github.com/jest-community/eslint-plugin-jest/blob/main/CHANGELOG.md)
- [Commits](https://github.com/jest-community/eslint-plugin-jest/compare/v24.7.0...v25.0.1)

---
updated-dependencies:
- dependency-name: eslint-plugin-jest
  dependency-type: direct:development
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>

* chore: fix eslint errors and warnings

* fix rc-slider version

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 components/alert/__tests__/index.test.tsx       |  1 +
 components/cascader/__tests__/index.test.js     | 17 +++++++++--------
 .../__tests__/components.test.js                |  1 -
 package.json                                    |  4 ++--
 scripts/css-variable-sync.js                    |  1 +
 tests/shared/excludeWarning.tsx                 |  1 +
 webpack.config.js                               |  1 +
 7 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/components/alert/__tests__/index.test.tsx b/components/alert/__tests__/index.test.tsx
index 11ee125e88..038985c21a 100644
--- a/components/alert/__tests__/index.test.tsx
+++ b/components/alert/__tests__/index.test.tsx
@@ -77,6 +77,7 @@ describe('Alert', () => {
 
   it('ErrorBoundary', () => {
     jest.spyOn(console, 'error').mockImplementation(() => undefined);
+    // eslint-disable-next-line no-console
     expect(console.error).toBeCalledTimes(0);
     // @ts-expect-error
     // eslint-disable-next-line react/jsx-no-undef
diff --git a/components/cascader/__tests__/index.test.js b/components/cascader/__tests__/index.test.js
index 479d654178..d953665a45 100644
--- a/components/cascader/__tests__/index.test.js
+++ b/components/cascader/__tests__/index.test.js
@@ -327,14 +327,15 @@ describe('Cascader', () => {
   });
 
   // FIXME: Move to `rc-tree-select` instead
-  // it('should warning if not find `value` in `options`', () => {
-  //   const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
-  //   mount(<Cascader options={[{ label: 'a', value: 'a', children: [{ label: 'b' }] }]} />);
-  //   expect(errorSpy).toHaveBeenCalledWith(
-  //     'Warning: [antd: Cascader] Not found `value` in `options`.',
-  //   );
-  //   errorSpy.mockRestore();
-  // });
+  // eslint-disable-next-line jest/no-disabled-tests
+  it.skip('should warning if not find `value` in `options`', () => {
+    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    mount(<Cascader options={[{ label: 'a', value: 'a', children: [{ label: 'b' }] }]} />);
+    expect(errorSpy).toHaveBeenCalledWith(
+      'Warning: [antd: Cascader] Not found `value` in `options`.',
+    );
+    errorSpy.mockRestore();
+  });
 
   // https://github.com/ant-design/ant-design/issues/17690
   it('should not breaks when children is null', () => {
diff --git a/components/config-provider/__tests__/components.test.js b/components/config-provider/__tests__/components.test.js
index 562f994568..85eb188909 100644
--- a/components/config-provider/__tests__/components.test.js
+++ b/components/config-provider/__tests__/components.test.js
@@ -60,7 +60,6 @@ jest.mock('rc-util/lib/Portal');
 describe('ConfigProvider', () => {
   describe('components', () => {
     function testPair(name, renderComponent) {
-      // eslint-disable-next-line jest/valid-describe
       describe(`${name}`, () => {
         // normal
         it('normal', () => {
diff --git a/package.json b/package.json
index 28ed85798e..963edc90bb 100644
--- a/package.json
+++ b/package.json
@@ -137,7 +137,7 @@
     "rc-rate": "~2.9.0",
     "rc-resize-observer": "^1.0.0",
     "rc-select": "~13.1.0-alpha.0",
-    "rc-slider": "~9.7.1",
+    "rc-slider": "~9.7.4",
     "rc-steps": "~4.1.0",
     "rc-switch": "~3.2.0",
     "rc-table": "~7.18.0",
@@ -204,7 +204,7 @@
     "eslint-plugin-babel": "^5.3.0",
     "eslint-plugin-compat": "^3.9.0",
     "eslint-plugin-import": "^2.21.1",
-    "eslint-plugin-jest": "^24.0.1",
+    "eslint-plugin-jest": "^25.0.1",
     "eslint-plugin-jsx-a11y": "^6.2.1",
     "eslint-plugin-markdown": "^2.0.0",
     "eslint-plugin-react": "^7.20.6",
diff --git a/scripts/css-variable-sync.js b/scripts/css-variable-sync.js
index c0749a56b2..f46cb13c16 100644
--- a/scripts/css-variable-sync.js
+++ b/scripts/css-variable-sync.js
@@ -218,4 +218,5 @@ replaceVariable('alert-error-bg-color', '@error-color-deprecated-bg');
 
 fse.writeFileSync(targetPath, variableContent, 'utf8');
 
+// eslint-disable-next-line no-console
 console.log(chalk.green('Success! Replaced path:'), targetPath);
diff --git a/tests/shared/excludeWarning.tsx b/tests/shared/excludeWarning.tsx
index 0aa24c5ee1..f619e50526 100644
--- a/tests/shared/excludeWarning.tsx
+++ b/tests/shared/excludeWarning.tsx
@@ -1,3 +1,4 @@
+// eslint-disable-next-line no-console
 const originError = console.error;
 
 /** This function will remove `useLayoutEffect` server side warning. Since it's useless. */
diff --git a/webpack.config.js b/webpack.config.js
index d7fda02373..31ee02bcc2 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -92,6 +92,7 @@ function processWebpackThemeConfig(themeConfig, theme, vars) {
       if (originPath.length === 1 && originPath[0] === './index') {
         replacedPath = ['./index-style-only'];
       } else {
+        // eslint-disable-next-line no-console
         console.log(chalk.red('🆘 Seems entry has changed! It should be `./index`'));
       }
 

From 3b27f47097fba516cace0762b1bf32789a7ea5ef Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Tue, 12 Oct 2021 17:18:59 +0800
Subject: [PATCH 4/9] fix: Typography ellipsis not working in Table  (#32447)

* chore: add reproduce demo

* fix: Typography ellipsis in Table

close #32432
---
 components/typography/Base.tsx |  8 ++++++--
 components/typography/util.tsx | 10 +++++++---
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/components/typography/Base.tsx b/components/typography/Base.tsx
index 26972388a4..07be17d2bb 100644
--- a/components/typography/Base.tsx
+++ b/components/typography/Base.tsx
@@ -314,10 +314,14 @@ class Base extends React.Component<InternalBlockProps, BaseState> {
     const { ellipsisText, isEllipsis, expanded } = this.state;
     const { rows, suffix, onEllipsis } = this.getEllipsis();
     const { children } = this.props;
-    if (!rows || rows < 0 || !this.contentRef.current || expanded) return;
+    if (!rows || rows < 0 || !this.contentRef.current || expanded) {
+      return;
+    }
 
     // Do not measure if css already support ellipsis
-    if (this.canUseCSSEllipsis()) return;
+    if (this.canUseCSSEllipsis()) {
+      return;
+    }
 
     devWarning(
       toArray(children).every((child: React.ReactNode) => typeof child === 'string'),
diff --git a/components/typography/util.tsx b/components/typography/util.tsx
index 52ce76f9e2..6ad6503bfe 100644
--- a/components/typography/util.tsx
+++ b/components/typography/util.tsx
@@ -106,8 +106,9 @@ export default (
   // Get origin style
   const originStyle = window.getComputedStyle(originElement);
   const lineHeight = getRealLineHeight(originElement);
-  const maxHeight =
-    Math.floor(lineHeight) * (rows + 1) +
+  const overflowRows = rows + 1;
+  const oneRowMaxHeight =
+    Math.floor(lineHeight) +
     pxToNumber(originStyle.paddingTop) +
     pxToNumber(originStyle.paddingBottom);
 
@@ -128,7 +129,9 @@ export default (
 
   // Check if ellipsis in measure div is height enough for content
   function inRange() {
-    return Math.ceil(ellipsisContainer.getBoundingClientRect().height) < maxHeight;
+    return (
+      Math.ceil(ellipsisContainer.getBoundingClientRect().height / overflowRows) < oneRowMaxHeight
+    );
   }
 
   // Skip ellipsis if already match
@@ -223,6 +226,7 @@ export default (
         reactNode: null,
       };
     }
+
     if (type === TEXT_NODE) {
       const fullText = childNode.textContent || '';
       const textNode = document.createTextNode(fullText);

From ee703c187efb0c69f62bc7bae30a9d3c2215b489 Mon Sep 17 00:00:00 2001
From: Mohammad Arsalan <a4arshi@yahoo.com>
Date: Wed, 13 Oct 2021 08:55:55 +0500
Subject: [PATCH 5/9] fix: TextArea missing maxLength attribute (#32448)

---
 components/input/TextArea.tsx                                  | 1 +
 components/input/__tests__/__snapshots__/demo.test.js.snap     | 1 +
 components/input/__tests__/__snapshots__/textarea.test.js.snap | 1 +
 3 files changed, 3 insertions(+)

diff --git a/components/input/TextArea.tsx b/components/input/TextArea.tsx
index 136b2dca8c..65c8c813f3 100644
--- a/components/input/TextArea.tsx
+++ b/components/input/TextArea.tsx
@@ -135,6 +135,7 @@ const TextArea = React.forwardRef<TextAreaRef, TextAreaProps>(
         onChange={handleChange}
         onCompositionEnd={onInternalCompositionEnd}
         ref={innerRef}
+        maxLength={maxLength}
       />
     );
 
diff --git a/components/input/__tests__/__snapshots__/demo.test.js.snap b/components/input/__tests__/__snapshots__/demo.test.js.snap
index c4883630c8..5644c061e0 100644
--- a/components/input/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/input/__tests__/__snapshots__/demo.test.js.snap
@@ -3317,6 +3317,7 @@ exports[`renders ./components/input/demo/textarea-show-count.md correctly 1`] =
 >
   <textarea
     class="ant-input"
+    maxlength="100"
   />
 </div>
 `;
diff --git a/components/input/__tests__/__snapshots__/textarea.test.js.snap b/components/input/__tests__/__snapshots__/textarea.test.js.snap
index cfc3205bc9..7d96e65f5b 100644
--- a/components/input/__tests__/__snapshots__/textarea.test.js.snap
+++ b/components/input/__tests__/__snapshots__/textarea.test.js.snap
@@ -245,6 +245,7 @@ exports[`TextArea allowClear should not show icon if value is undefined, null or
 exports[`TextArea maxLength should support maxLength 1`] = `
 <textarea
   class="ant-input"
+  maxlength="10"
 />
 `;
 

From a6bc104a4a9c60362cffb4cb0f4ee935779b4773 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Wed, 13 Oct 2021 12:18:55 +0800
Subject: [PATCH 6/9] chore(deps-dev): bump eslint-plugin-unicorn from 36.0.0
 to 37.0.1 (#32450)

Bumps [eslint-plugin-unicorn](https://github.com/sindresorhus/eslint-plugin-unicorn) from 36.0.0 to 37.0.1.
- [Release notes](https://github.com/sindresorhus/eslint-plugin-unicorn/releases)
- [Commits](https://github.com/sindresorhus/eslint-plugin-unicorn/compare/v36.0.0...v37.0.1)

---
updated-dependencies:
- dependency-name: eslint-plugin-unicorn
  dependency-type: direct:development
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 963edc90bb..af1d26c3f4 100644
--- a/package.json
+++ b/package.json
@@ -209,7 +209,7 @@
     "eslint-plugin-markdown": "^2.0.0",
     "eslint-plugin-react": "^7.20.6",
     "eslint-plugin-react-hooks": "^4.1.2",
-    "eslint-plugin-unicorn": "^36.0.0",
+    "eslint-plugin-unicorn": "^37.0.1",
     "fetch-jsonp": "^1.1.3",
     "fs-extra": "^10.0.0",
     "full-icu": "^1.3.0",

From b445baa001842f5df7c224ae3a6c13803cc3cdf1 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Wed, 13 Oct 2021 15:38:59 +0800
Subject: [PATCH 7/9] chore(deps-dev): bump stylelint-config-prettier from
 8.0.2 to 9.0.2 (#32451)

* chore(deps-dev): bump stylelint-config-prettier from 8.0.2 to 9.0.2

Bumps [stylelint-config-prettier](https://github.com/prettier/stylelint-config-prettier) from 8.0.2 to 9.0.2.
- [Release notes](https://github.com/prettier/stylelint-config-prettier/releases)
- [Commits](https://github.com/prettier/stylelint-config-prettier/compare/v8.0.2...v9.0.2)

---
updated-dependencies:
- dependency-name: stylelint-config-prettier
  dependency-type: direct:development
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>

* chore: autofix stylelint errors

* chore: autofix stylelint errors

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: afc163 <afc163@gmail.com>
---
 components/alert/style/index.less             |  3 ++
 components/anchor/style/index.less            |  3 ++
 components/badge/style/index.less             | 13 ++++++
 components/badge/style/rtl.less               |  2 +
 components/breadcrumb/style/index.less        |  2 +
 components/button/style/index.less            |  1 +
 components/button/style/mixin.less            | 28 ++++++++++++
 components/button/style/rtl.less              |  1 +
 components/card/style/index.less              |  2 +
 components/carousel/style/index.less          | 16 +++++++
 components/carousel/style/rtl.less            |  2 +
 components/cascader/style/index.less          |  1 +
 components/checkbox/style/index.less          |  1 +
 components/checkbox/style/mixin.less          |  4 ++
 components/checkbox/style/rtl.less            |  2 +
 components/comment/style/index.less           |  4 ++
 components/comment/style/rtl.less             |  1 +
 components/date-picker/style/panel.less       |  4 ++
 components/descriptions/style/index.less      |  5 +++
 components/divider/style/index.less           |  3 ++
 components/divider/style/rtl.less             |  2 +
 components/drawer/style/drawer.less           |  2 +
 components/dropdown/style/index.less          |  7 +++
 components/empty/style/index.less             | 16 +++++++
 components/form/style/components.less         |  1 +
 components/form/style/index.less              |  4 ++
 components/form/style/rtl.less                |  2 +
 components/form/style/status.less             |  6 +++
 components/image/style/index.less             |  9 ++++
 components/input-number/style/index.less      |  7 +++
 components/input/style/affix.less             |  1 -
 components/input/style/index.less             |  1 +
 components/input/style/rtl.less               |  1 +
 components/list/style/index.less              |  9 ++++
 components/list/style/responsive.less         |  3 ++
 components/menu/style/dark.less               |  7 +++
 components/menu/style/index.less              | 19 ++++++++
 components/menu/style/rtl.less                |  1 +
 components/menu/style/status.less             |  1 +
 components/message/style/index.less           |  1 +
 components/modal/style/modal.less             |  1 +
 components/modal/style/rtl.less               |  1 +
 components/notification/style/index.less      |  7 +++
 components/page-header/style/index.less       |  2 +
 components/page-header/style/rtl.less         |  1 +
 components/pagination/style/index.less        |  6 +++
 components/popover/style/index.less           |  5 +++
 components/progress/style/index.less          |  5 +++
 components/radio/style/index.less             |  9 ++++
 components/rate/style/index.less              |  1 +
 components/result/style/index.less            |  1 +
 components/select/style/index.less            |  3 +-
 components/skeleton/style/index.less          |  1 +
 components/skeleton/style/rtl.less            |  1 +
 components/slider/style/index.less            |  2 +
 components/space/style/index.less             |  4 ++
 components/spin/style/index.less              |  3 ++
 components/steps/style/index.less             |  9 ++++
 components/steps/style/label-placement.less   |  6 +++
 components/steps/style/nav.less               |  4 ++
 components/steps/style/progress-dot.less      |  3 ++
 components/steps/style/rtl.less               |  1 +
 components/steps/style/small.less             |  1 +
 components/style/core/global.less             |  1 +
 components/style/core/motion.less             |  1 +
 components/style/core/motion/fade.less        |  2 +
 components/style/core/motion/move.less        |  8 ++++
 components/style/core/motion/slide.less       |  8 ++++
 components/style/core/motion/zoom.less        | 12 +++++
 components/style/mixins/clearfix.less         |  1 +
 components/style/mixins/customize.less        |  3 ++
 components/switch/style/index.less            |  1 +
 components/table/style/bordered.less          |  1 -
 components/table/style/index.less             |  9 ++++
 components/tabs/style/position.less           |  2 +
 components/tabs/style/rtl.less                |  1 +
 components/tag/style/index.less               |  4 ++
 components/transfer/style/rtl.less            |  2 +
 components/tree/style/mixin.less              |  5 +++
 components/typography/style/index.less        |  5 +++
 components/upload/style/index.less            |  3 ++
 components/upload/style/rtl.less              |  2 +
 package.json                                  |  4 +-
 site/theme/static/colors.less                 | 27 +++++++++++
 site/theme/static/common.less                 |  9 ++++
 site/theme/static/dark.less                   | 18 ++++++++
 site/theme/static/demo.less                   | 11 +++++
 site/theme/static/docsearch.less              |  1 +
 site/theme/static/footer.less                 |  1 +
 site/theme/static/highlight.less              |  1 +
 site/theme/static/icon-pic-searcher.less      |  5 +++
 site/theme/static/icons.less                  |  6 +++
 site/theme/static/markdown.less               | 31 +++++++++++++
 site/theme/static/motion.less                 |  1 +
 site/theme/static/preview-img.less            |  6 +++
 site/theme/static/responsive.less             | 45 +++++++++++++++++++
 site/theme/static/rtl.less                    |  1 +
 site/theme/static/toc.less                    |  5 +++
 .../template/Content/ComponentOverview.less   |  3 ++
 site/theme/template/Home/Banner/Logo.less     |  3 ++
 site/theme/template/Home/Banner/index.less    |  1 +
 site/theme/template/Home/index.less           |  1 +
 .../template/Layout/Header/SearchBar.less     |  4 ++
 site/theme/template/Resources/AffixTabs.less  |  1 +
 site/theme/template/Resources/index.less      |  1 +
 105 files changed, 527 insertions(+), 5 deletions(-)

diff --git a/components/alert/style/index.less b/components/alert/style/index.less
index 7c9ffc69bb..7223850443 100644
--- a/components/alert/style/index.less
+++ b/components/alert/style/index.less
@@ -84,6 +84,7 @@
     .@{iconfont-css-prefix}-close {
       color: @alert-close-color;
       transition: color 0.3s;
+
       &:hover {
         color: @alert-close-hover-color;
       }
@@ -93,6 +94,7 @@
   &-close-text {
     color: @alert-close-color;
     transition: color 0.3s;
+
     &:hover {
       color: @alert-close-hover-color;
     }
@@ -111,6 +113,7 @@
     margin-right: @alert-with-description-padding-vertical;
     font-size: @alert-with-description-icon-size;
   }
+
   &-with-description &-message {
     display: block;
     margin-bottom: 4px;
diff --git a/components/anchor/style/index.less b/components/anchor/style/index.less
index 347bc91417..07b16a7647 100644
--- a/components/anchor/style/index.less
+++ b/components/anchor/style/index.less
@@ -21,6 +21,7 @@
     top: 0;
     left: 0;
     height: 100%;
+
     &::before {
       position: relative;
       display: block;
@@ -30,6 +31,7 @@
       background-color: @anchor-border-color;
       content: ' ';
     }
+
     &-ball {
       position: absolute;
       left: 50%;
@@ -41,6 +43,7 @@
       border-radius: 8px;
       transform: translateX(-50%);
       transition: top 0.3s ease-in-out;
+
       &.visible {
         display: inline-block;
       }
diff --git a/components/badge/style/index.less b/components/badge/style/index.less
index d515cb3de3..3746450be9 100644
--- a/components/badge/style/index.less
+++ b/components/badge/style/index.less
@@ -25,6 +25,7 @@
     background: @badge-color;
     border-radius: (@badge-height / 2);
     box-shadow: 0 0 0 1px @shadow-color-inverse;
+
     a,
     a:hover {
       color: @badge-text-color;
@@ -86,12 +87,15 @@
       vertical-align: middle;
       border-radius: 50%;
     }
+
     &-success {
       background-color: @success-color;
     }
+
     &-processing {
       position: relative;
       background-color: @processing-color;
+
       &::after {
         position: absolute;
         top: 0;
@@ -104,12 +108,15 @@
         content: '';
       }
     }
+
     &-default {
       background-color: @normal-color;
     }
+
     &-error {
       background-color: @error-color;
     }
+
     &-warning {
       background-color: @warning-color;
     }
@@ -177,6 +184,7 @@
     transform: scale(0.8);
     opacity: 0.5;
   }
+
   100% {
     transform: scale(2.4);
     opacity: 0;
@@ -192,6 +200,7 @@
 .@{number-prefix-cls} {
   overflow: hidden;
   direction: ltr;
+
   &-only {
     position: relative;
     display: inline-block;
@@ -216,6 +225,7 @@
     transform: scale(0) translate(50%, -50%);
     opacity: 0;
   }
+
   100% {
     transform: scale(1) translate(50%, -50%);
   }
@@ -225,6 +235,7 @@
   0% {
     transform: scale(1) translate(50%, -50%);
   }
+
   100% {
     transform: scale(0) translate(50%, -50%);
     opacity: 0;
@@ -236,6 +247,7 @@
     transform: scale(0);
     opacity: 0;
   }
+
   100% {
     transform: scale(1);
   }
@@ -245,6 +257,7 @@
   0% {
     transform: scale(1);
   }
+
   100% {
     transform: scale(0);
     opacity: 0;
diff --git a/components/badge/style/rtl.less b/components/badge/style/rtl.less
index 22514db75b..bcc7ce8b6f 100644
--- a/components/badge/style/rtl.less
+++ b/components/badge/style/rtl.less
@@ -43,6 +43,7 @@
       right: unset;
       left: 0;
       border-color: currentColor currentColor transparent transparent;
+
       &::after {
         border-color: currentColor currentColor transparent transparent;
       }
@@ -57,6 +58,7 @@
       right: 0;
       left: unset;
       border-color: currentColor transparent transparent currentColor;
+
       &::after {
         border-color: currentColor transparent transparent currentColor;
       }
diff --git a/components/breadcrumb/style/index.less b/components/breadcrumb/style/index.less
index 52bba12022..ca29afb3a9 100644
--- a/components/breadcrumb/style/index.less
+++ b/components/breadcrumb/style/index.less
@@ -16,6 +16,7 @@
   a {
     color: @breadcrumb-link-color;
     transition: color 0.3s;
+
     &:hover {
       color: @breadcrumb-link-color-hover;
     }
@@ -23,6 +24,7 @@
 
   & > span:last-child {
     color: @breadcrumb-last-item-color;
+
     a {
       color: @breadcrumb-last-item-color;
     }
diff --git a/components/button/style/index.less b/components/button/style/index.less
index 8d9ec23e45..8ed1b67a28 100644
--- a/components/button/style/index.less
+++ b/components/button/style/index.less
@@ -281,6 +281,7 @@ a.@{btn-prefix-cls} {
   &-lg {
     line-height: @btn-height-lg - 2px;
   }
+
   &-sm {
     line-height: @btn-height-sm - 2px;
   }
diff --git a/components/button/style/mixin.less b/components/button/style/mixin.less
index 5aa3322f37..edb8b5b0d2 100644
--- a/components/button/style/mixin.less
+++ b/components/button/style/mixin.less
@@ -20,6 +20,7 @@
   // http://stackoverflow.com/a/17253457
   > a:only-child {
     color: currentColor;
+
     &::after {
       position: absolute;
       top: 0;
@@ -106,6 +107,7 @@
       .button-color(@primary-color-hover; @background; @primary-color-hover);
     }
   }
+
   &:active {
     & when (@theme = dark) {
       .button-color(@primary-7; @background; @primary-7);
@@ -126,6 +128,7 @@
 .button-variant-ghost(@color; @border; @borderHover: yellow; @borderActive: yellow) {
   .button-color(@color; null; @border);
   text-shadow: none;
+
   &:hover,
   &:focus {
     & when (@border = transparent) {
@@ -155,6 +158,7 @@
       }
     }
   }
+
   &:active {
     & when (@border = transparent) {
       & when (@theme = dark) {
@@ -192,11 +196,13 @@
   > .@{btnClassName},
   > span > .@{btnClassName} {
     position: relative;
+
     &:hover,
     &:focus,
     &:active {
       z-index: 2;
     }
+
     &[disabled] {
       z-index: 0;
     }
@@ -248,29 +254,36 @@
   > .@{iconfont-css-prefix} {
     line-height: 1;
   }
+
   &,
   &:active,
   &:focus {
     outline: 0;
   }
+
   &:not([disabled]):hover {
     text-decoration: none;
   }
+
   &:not([disabled]):active {
     outline: 0;
     box-shadow: none;
   }
+
   &[disabled] {
     cursor: not-allowed;
+
     > * {
       pointer-events: none;
     }
   }
+
   &-lg {
     .button-size(
       @btn-height-lg; @btn-padding-horizontal-lg; @btn-font-size-lg; @btn-border-radius-base
     );
   }
+
   &-sm {
     .button-size(
       @btn-height-sm; @btn-padding-horizontal-sm; @btn-font-size-sm; @btn-border-radius-sm
@@ -284,6 +297,7 @@
 // default button style
 .btn-default() {
   .button-variant-other(@btn-default-color; @btn-default-bg; @btn-default-border; );
+
   &:hover,
   &:focus,
   &:active {
@@ -307,6 +321,7 @@
 // danger default button style
 .btn-danger-default() {
   .button-color(@error-color, @btn-default-bg, @error-color);
+
   &:hover,
   &:focus {
     & when (@theme = dark) {
@@ -325,6 +340,7 @@
       .button-color(@error-color-hover, @btn-default-bg, @error-color-hover);
     }
   }
+
   &:active {
     & when (@theme = dark) {
       .button-color(
@@ -348,6 +364,7 @@
 .btn-danger-link() {
   .button-variant-other(@error-color, transparent, transparent);
   box-shadow: none;
+
   &:hover,
   &:focus {
     & when (@theme = dark) {
@@ -360,6 +377,7 @@
       .button-color(@error-color-hover; transparent; transparent);
     }
   }
+
   &:active {
     & when (@theme = dark) {
       .button-color(~`colorPalette('@{error-color}', 5) `; transparent; transparent);
@@ -377,9 +395,11 @@
 .btn-link() {
   .button-variant-other(@link-color, transparent, transparent);
   box-shadow: none;
+
   &:hover {
     background: @btn-link-hover-bg;
   }
+
   &:hover,
   &:focus,
   &:active {
@@ -391,6 +411,7 @@
 .btn-text() {
   .button-variant-other(@text-color, transparent, transparent);
   box-shadow: none;
+
   &:hover,
   &:focus {
     color: @text-color;
@@ -409,6 +430,7 @@
 .btn-danger-text() {
   .button-variant-other(@error-color, transparent, transparent);
   box-shadow: none;
+
   &:hover,
   &:focus {
     & when (@theme = dark) {
@@ -453,12 +475,14 @@
 .btn-square(@btnClassName: btn) {
   .square(@btn-square-size);
   .button-size(@btn-square-size; 0; @btn-square-only-icon-size; @btn-border-radius-base);
+
   & > * {
     font-size: @btn-square-only-icon-size;
   }
   &.@{btnClassName}-lg {
     .square(@btn-square-size-lg);
     .button-size(@btn-square-size-lg; 0; @btn-square-only-icon-size-lg; @btn-border-radius-base);
+
     & > * {
       font-size: @btn-square-only-icon-size-lg;
     }
@@ -466,6 +490,7 @@
   &.@{btnClassName}-sm {
     .square(@btn-square-size-sm);
     .button-size(@btn-square-size-sm; 0; @btn-square-only-icon-size-sm; @btn-border-radius-base);
+
     & > * {
       font-size: @btn-square-only-icon-size-sm;
     }
@@ -526,6 +551,7 @@
     border-top-right-radius: @btn-border-radius-base;
     border-bottom-right-radius: @btn-border-radius-base;
   }
+
   &-sm {
     > .@{btnClassName}:only-child {
       border-radius: @btn-border-radius-sm;
@@ -544,12 +570,14 @@
       border-bottom-right-radius: @btn-border-radius-sm;
     }
   }
+
   & > & {
     float: left;
   }
   & > &:not(:first-child):not(:last-child) > .@{btnClassName} {
     border-radius: 0;
   }
+
   & > &:first-child:not(:last-child) {
     > .@{btnClassName}:last-child {
       padding-right: 8px;
diff --git a/components/button/style/rtl.less b/components/button/style/rtl.less
index 6cf8b6f963..332aa30fb6 100644
--- a/components/button/style/rtl.less
+++ b/components/button/style/rtl.less
@@ -10,6 +10,7 @@
         border-right-color: @btn-group-border;
         border-left-color: @btn-default-border;
       }
+
       &[disabled] {
         .@{btn-prefix-cls}-group-rtl& {
           border-right-color: @btn-default-border;
diff --git a/components/card/style/index.less b/components/card/style/index.less
index 8385e76a6f..102d100368 100644
--- a/components/card/style/index.less
+++ b/components/card/style/index.less
@@ -250,6 +250,7 @@
 
     &-detail {
       overflow: hidden;
+
       > div:not(:last-child) {
         margin-bottom: @margin-xs;
       }
@@ -298,6 +299,7 @@
   100% {
     background-position: 0 50%;
   }
+
   50% {
     background-position: 100% 50%;
   }
diff --git a/components/carousel/style/index.less b/components/carousel/style/index.less
index d60c05c960..1c3231a9be 100644
--- a/components/carousel/style/index.less
+++ b/components/carousel/style/index.less
@@ -116,6 +116,7 @@
     display: block;
     height: auto;
   }
+
   .slick-arrow.slick-hidden {
     display: none;
   }
@@ -137,15 +138,18 @@
     border: 0;
     outline: none;
     cursor: pointer;
+
     &:hover,
     &:focus {
       color: transparent;
       background: transparent;
       outline: none;
+
       &::before {
         opacity: 1;
       }
     }
+
     &.slick-disabled::before {
       opacity: 0.25;
     }
@@ -161,6 +165,7 @@
 
   .slick-next {
     right: -25px;
+
     &::before {
       content: '→';
     }
@@ -183,10 +188,12 @@
     &-bottom {
       bottom: 12px;
     }
+
     &-top {
       top: 12px;
       bottom: auto;
     }
+
     li {
       position: relative;
       display: inline-block;
@@ -202,6 +209,7 @@
       text-indent: -999px;
       vertical-align: top;
       transition: all 0.5s;
+
       button {
         display: block;
         width: 100%;
@@ -216,17 +224,21 @@
         cursor: pointer;
         opacity: 0.3;
         transition: all 0.5s;
+
         &:hover,
         &:focus {
           opacity: 0.75;
         }
       }
+
       &.slick-active {
         width: @carousel-dot-active-width;
+
         & button {
           background: @component-background;
           opacity: 1;
         }
+
         &:hover,
         &:focus {
           opacity: 1;
@@ -250,19 +262,23 @@
       right: auto;
       left: 12px;
     }
+
     &-right {
       right: 12px;
       left: auto;
     }
+
     li {
       width: @carousel-dot-height;
       height: @carousel-dot-width;
       margin: 4px 2px;
       vertical-align: baseline;
+
       button {
         width: @carousel-dot-height;
         height: @carousel-dot-width;
       }
+
       &.slick-active {
         width: @carousel-dot-height;
         height: @carousel-dot-active-width;
diff --git a/components/carousel/style/rtl.less b/components/carousel/style/rtl.less
index 3f2190bd52..c2853a2ac7 100644
--- a/components/carousel/style/rtl.less
+++ b/components/carousel/style/rtl.less
@@ -19,6 +19,7 @@
     .@{carousel-prefix-cls}-rtl & {
       right: -25px;
       left: auto;
+
       &::before {
         content: '→';
       }
@@ -29,6 +30,7 @@
     .@{carousel-prefix-cls}-rtl & {
       right: auto;
       left: -25px;
+
       &::before {
         content: '←';
       }
diff --git a/components/cascader/style/index.less b/components/cascader/style/index.less
index 7e8d93515d..8df1d85fc7 100644
--- a/components/cascader/style/index.less
+++ b/components/cascader/style/index.less
@@ -59,6 +59,7 @@
       &-disabled {
         color: @disabled-color;
         cursor: not-allowed;
+
         &:hover {
           background: transparent;
         }
diff --git a/components/checkbox/style/index.less b/components/checkbox/style/index.less
index 1ce3012cdc..cdb84297c9 100644
--- a/components/checkbox/style/index.less
+++ b/components/checkbox/style/index.less
@@ -2,4 +2,5 @@
 @import './mixin';
 
 .antCheckboxFn();
+
 @import './rtl';
diff --git a/components/checkbox/style/mixin.less b/components/checkbox/style/mixin.less
index 3270ce4d0d..60c8201a5e 100644
--- a/components/checkbox/style/mixin.less
+++ b/components/checkbox/style/mixin.less
@@ -127,6 +127,7 @@
     .@{checkbox-inner-prefix-cls} {
       background-color: @input-disabled-bg;
       border-color: @border-color-base !important;
+
       &::after {
         border-color: @input-disabled-bg;
         border-collapse: separate;
@@ -180,10 +181,12 @@
 
     &-item {
       margin-right: @checkbox-group-item-margin-right;
+
       &:last-child {
         margin-right: 0;
       }
     }
+
     &-item + &-item {
       margin-left: 0;
     }
@@ -222,6 +225,7 @@
     transform: scale(1);
     opacity: 0.5;
   }
+
   100% {
     transform: scale(1.6);
     opacity: 0;
diff --git a/components/checkbox/style/rtl.less b/components/checkbox/style/rtl.less
index 7c33a7f9e8..fa15b4df1a 100644
--- a/components/checkbox/style/rtl.less
+++ b/components/checkbox/style/rtl.less
@@ -11,12 +11,14 @@
         margin-right: 0;
         margin-left: @checkbox-group-item-margin-right;
       }
+
       &:last-child {
         .@{checkbox-prefix-cls}-group-rtl & {
           margin-left: 0 !important;
         }
       }
     }
+
     &-item + &-item {
       .@{checkbox-prefix-cls}-group-rtl & {
         margin-left: @checkbox-group-item-margin-right;
diff --git a/components/comment/style/index.less b/components/comment/style/index.less
index 73243c08a7..84da3a3a2a 100644
--- a/components/comment/style/index.less
+++ b/components/comment/style/index.less
@@ -38,6 +38,7 @@
       justify-content: flex-start;
       margin-bottom: @margin-xss;
       font-size: @comment-font-size-base;
+
       & > a,
       & > span {
         padding-right: @padding-xs;
@@ -49,8 +50,10 @@
         color: @comment-author-name-color;
         font-size: @comment-font-size-base;
         transition: color 0.3s;
+
         > * {
           color: @comment-author-name-color;
+
           &:hover {
             color: @comment-author-name-color;
           }
@@ -78,6 +81,7 @@
     > li {
       display: inline-block;
       color: @comment-action-color;
+
       > span {
         margin-right: 10px;
         color: @comment-action-color;
diff --git a/components/comment/style/rtl.less b/components/comment/style/rtl.less
index 27ad527066..a930d83846 100644
--- a/components/comment/style/rtl.less
+++ b/components/comment/style/rtl.less
@@ -31,6 +31,7 @@
     .@{comment-prefix-cls}-rtl & {
       padding-right: 0;
     }
+
     > li {
       > span {
         .@{comment-prefix-cls}-rtl & {
diff --git a/components/date-picker/style/panel.less b/components/date-picker/style/panel.less
index 9f0bc5f704..88ff6d8b7f 100644
--- a/components/date-picker/style/panel.less
+++ b/components/date-picker/style/panel.less
@@ -280,6 +280,7 @@
     &-in-view&-range-start:not(&-range-start-single):not(&-range-end) .@{cellClassName} {
       border-radius: @border-radius-base 0 0 @border-radius-base;
     }
+
     // range end border-radius
     &-in-view&-range-end:not(&-range-end-single):not(&-range-start) .@{cellClassName} {
       border-radius: 0 @border-radius-base @border-radius-base 0;
@@ -298,12 +299,14 @@
         content: '';
       }
     }
+
     .@{picker-prefix-cls}-date-panel
       &-in-view&-in-range&-range-hover-start
       .@{cellClassName}::after {
       right: -5px - @border-width-base;
       left: 0;
     }
+
     .@{picker-prefix-cls}-date-panel &-in-view&-in-range&-range-hover-end .@{cellClassName}::after {
       right: 0;
       left: -5px - @border-width-base;
@@ -313,6 +316,7 @@
     &-range-hover&-range-start::after {
       right: 50%;
     }
+
     &-range-hover&-range-end::after {
       left: 50%;
     }
diff --git a/components/descriptions/style/index.less b/components/descriptions/style/index.less
index e6ac396ab5..c51f2efad4 100644
--- a/components/descriptions/style/index.less
+++ b/components/descriptions/style/index.less
@@ -31,6 +31,7 @@
     width: 100%;
     overflow: hidden;
     border-radius: @border-radius-base;
+
     table {
       width: 100%;
       table-layout: fixed;
@@ -42,6 +43,7 @@
     > td {
       padding-bottom: @descriptions-item-padding-bottom;
     }
+
     &:last-child {
       border-bottom: none;
     }
@@ -126,6 +128,7 @@
   &-bordered {
     .@{descriptions-prefix-cls}-view {
       border: 1px solid @border-color-split;
+
       > table {
         table-layout: auto;
         border-collapse: collapse;
@@ -144,6 +147,7 @@
 
     .@{descriptions-prefix-cls}-item-label {
       background-color: @descriptions-bg;
+
       &::after {
         display: none;
       }
@@ -151,6 +155,7 @@
 
     .@{descriptions-prefix-cls}-row {
       border-bottom: 1px solid @border-color-split;
+
       &:last-child {
         border-bottom: none;
       }
diff --git a/components/divider/style/index.less b/components/divider/style/index.less
index 82377f7c91..78747a2e5b 100644
--- a/components/divider/style/index.less
+++ b/components/divider/style/index.less
@@ -57,6 +57,7 @@
       top: 50%;
       width: @divider-orientation-margin;
     }
+
     &::after {
       top: 50%;
       width: 100% - @divider-orientation-margin;
@@ -68,6 +69,7 @@
       top: 50%;
       width: 100% - @divider-orientation-margin;
     }
+
     &::after {
       top: 50%;
       width: @divider-orientation-margin;
@@ -88,6 +90,7 @@
 
   &-horizontal&-with-text&-dashed {
     border-top: 0;
+
     &::before,
     &::after {
       border-style: dashed none none;
diff --git a/components/divider/style/rtl.less b/components/divider/style/rtl.less
index 3b3bcf9f08..7cdc84f00b 100644
--- a/components/divider/style/rtl.less
+++ b/components/divider/style/rtl.less
@@ -14,6 +14,7 @@
         width: 100% - @divider-orientation-margin;
       }
     }
+
     &::after {
       .@{divider-prefix-cls}-rtl& {
         width: @divider-orientation-margin;
@@ -27,6 +28,7 @@
         width: @divider-orientation-margin;
       }
     }
+
     &::after {
       .@{divider-prefix-cls}-rtl& {
         width: 100% - @divider-orientation-margin;
diff --git a/components/drawer/style/drawer.less b/components/drawer/style/drawer.less
index e4c713cd7b..101c0b7180 100644
--- a/components/drawer/style/drawer.less
+++ b/components/drawer/style/drawer.less
@@ -112,6 +112,7 @@
       .@{drawer-prefix-cls}-content-wrapper {
         box-shadow: @shadow-1-up;
       }
+
       &.no-mask {
         bottom: 1px;
         transform: translateY(1px);
@@ -245,6 +246,7 @@
   0% {
     opacity: 0;
   }
+
   100% {
     opacity: 1;
   }
diff --git a/components/dropdown/style/index.less b/components/dropdown/style/index.less
index 7a241d83b2..47e71e7998 100644
--- a/components/dropdown/style/index.less
+++ b/components/dropdown/style/index.less
@@ -86,13 +86,16 @@
     border-left-color: transparent;
     box-shadow: 3px 3px 7px fade(@black, 7%);
   }
+
   &-placement-topCenter > &-arrow {
     left: 50%;
     transform: translateX(-50%) rotate(45deg);
   }
+
   &-placement-topLeft > &-arrow {
     left: 16px;
   }
+
   &-placement-topRight > &-arrow {
     right: 16px;
   }
@@ -107,13 +110,16 @@
     border-left-color: @popover-bg;
     box-shadow: -2px -2px 5px fade(@black, 6%);
   }
+
   &-placement-bottomCenter > &-arrow {
     left: 50%;
     transform: translateX(-50%) rotate(45deg);
   }
+
   &-placement-bottomLeft > &-arrow {
     left: 16px;
   }
+
   &-placement-bottomRight > &-arrow {
     right: 16px;
   }
@@ -362,6 +368,7 @@
     .@{dropdown-prefix-cls}-menu-submenu-arrow::after {
       color: @text-color-secondary-dark;
     }
+
     &:hover {
       color: @text-color-inverse;
       background: transparent;
diff --git a/components/empty/style/index.less b/components/empty/style/index.less
index 7259b9aadc..b57ece8b53 100644
--- a/components/empty/style/index.less
+++ b/components/empty/style/index.less
@@ -55,23 +55,29 @@
       fill: @white;
       fill-opacity: 0.08;
     }
+
     &-path {
       &-1 {
         fill: #262626;
       }
+
       &-2 {
         fill: url(#linearGradient-1);
       }
+
       &-3 {
         fill: #595959;
       }
+
       &-4 {
         fill: #434343;
       }
+
       &-5 {
         fill: #595959;
       }
     }
+
     &-g {
       fill: #434343;
     }
@@ -81,23 +87,29 @@
       fill: #f5f5f5;
       fill-opacity: 0.8;
     }
+
     &-path {
       &-1 {
         fill: #aeb8c2;
       }
+
       &-2 {
         fill: url(#linearGradient-1);
       }
+
       &-3 {
         fill: #f5f5f7;
       }
+
       &-4 {
         fill: #dce0e6;
       }
+
       &-5 {
         fill: #dce0e6;
       }
     }
+
     &-g {
       fill: @white;
     }
@@ -111,9 +123,11 @@
       fill: @white;
       fill-opacity: 0.08;
     }
+
     &-g {
       stroke: #434343;
     }
+
     &-path {
       fill: #262626;
       stroke: #434343;
@@ -123,9 +137,11 @@
     &-ellipse {
       fill: #f5f5f5;
     }
+
     &-g {
       stroke: #d9d9d9;
     }
+
     &-path {
       fill: #fafafa;
     }
diff --git a/components/form/style/components.less b/components/form/style/components.less
index c57e8b9c76..c65848a4f3 100644
--- a/components/form/style/components.less
+++ b/components/form/style/components.less
@@ -54,6 +54,7 @@
     + .@{form-prefix-cls}-text {
       margin-left: 8px;
     }
+
     &-handler-wrap {
       z-index: 2; // https://github.com/ant-design/ant-design/issues/6289
     }
diff --git a/components/form/style/index.less b/components/form/style/index.less
index 51ef6dba7b..a4a31c778c 100644
--- a/components/form/style/index.less
+++ b/components/form/style/index.less
@@ -39,6 +39,7 @@
   &-small {
     .formSize(@input-height-sm);
   }
+
   &-large {
     .formSize(@input-height-lg);
   }
@@ -263,6 +264,7 @@
     transform: scale(0);
     opacity: 0;
   }
+
   100% {
     transform: scale(1);
     opacity: 1;
@@ -274,6 +276,7 @@
     transform: scale(0);
     opacity: 0;
   }
+
   100% {
     transform: scale(1);
     opacity: 1;
@@ -285,6 +288,7 @@
     transform: scale(0);
     opacity: 0;
   }
+
   100% {
     transform: scale(1);
     opacity: 1;
diff --git a/components/form/style/rtl.less b/components/form/style/rtl.less
index c79db12fab..9fcbabad5b 100644
--- a/components/form/style/rtl.less
+++ b/components/form/style/rtl.less
@@ -32,6 +32,7 @@
           margin-left: 4px;
         }
       }
+
       &::after {
         .@{form-prefix-cls}-rtl & {
           margin: 0 @form-item-label-colon-margin-left 0 @form-item-label-colon-margin-right;
@@ -130,6 +131,7 @@
           margin-left: 19px;
         }
       }
+
       &-clear {
         .@{form-prefix-cls}-rtl & {
           right: auto;
diff --git a/components/form/style/status.less b/components/form/style/status.less
index 44a83d97be..db641be53c 100644
--- a/components/form/style/status.less
+++ b/components/form/style/status.less
@@ -75,6 +75,7 @@
       &-arrow {
         margin-right: 19px;
       }
+
       &-clear {
         right: 32px;
       }
@@ -154,10 +155,12 @@
     .@{ant-prefix}-picker {
       background-color: @form-warning-input-bg;
       border-color: @warning-color;
+
       &-focused,
       &:focus {
         .active(@warning-color, @warning-color-hover, @warning-color-outline);
       }
+
       &:not([disabled]):hover {
         background-color: @form-warning-input-bg;
         border-color: @warning-color;
@@ -214,10 +217,12 @@
     .@{ant-prefix}-picker {
       background-color: @form-error-input-bg;
       border-color: @error-color;
+
       &-focused,
       &:focus {
         .active(@error-color, @error-color-hover, @error-color-outline);
       }
+
       &:not([disabled]):hover {
         background-color: @form-error-input-bg;
         border-color: @error-color;
@@ -285,6 +290,7 @@
     // Mentions
     .@{ant-prefix}-mentions {
       border-color: @error-color !important;
+
       &-focused,
       &:focus {
         .active(@error-color, @error-color-hover, @error-color-outline);
diff --git a/components/image/style/index.less b/components/image/style/index.less
index 1332d9f1bf..70961d7ff5 100644
--- a/components/image/style/index.less
+++ b/components/image/style/index.less
@@ -7,10 +7,12 @@
 .@{image-prefix-cls} {
   position: relative;
   display: inline-block;
+
   &-img {
     display: block;
     width: 100%;
     height: auto;
+
     &-placeholder {
       background-color: @image-bg;
       background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTQuNSAyLjVoLTEzQS41LjUgMCAwIDAgMSAzdjEwYS41LjUgMCAwIDAgLjUuNWgxM2EuNS41IDAgMCAwIC41LS41VjNhLjUuNSAwIDAgMC0uNS0uNXpNNS4yODEgNC43NWExIDEgMCAwIDEgMCAyIDEgMSAwIDAgMSAwLTJ6bTguMDMgNi44M2EuMTI3LjEyNyAwIDAgMS0uMDgxLjAzSDIuNzY5YS4xMjUuMTI1IDAgMCAxLS4wOTYtLjIwN2wyLjY2MS0zLjE1NmEuMTI2LjEyNiAwIDAgMSAuMTc3LS4wMTZsLjAxNi4wMTZMNy4wOCAxMC4wOWwyLjQ3LTIuOTNhLjEyNi4xMjYgMCAwIDEgLjE3Ny0uMDE2bC4wMTUuMDE2IDMuNTg4IDQuMjQ0YS4xMjcuMTI3IDAgMCAxLS4wMi4xNzV6IiBmaWxsPSIjOEM4QzhDIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48L3N2Zz4=);
@@ -74,9 +76,11 @@
       transition: transform 0.3s @ease-out 0s;
       user-select: none;
       pointer-events: auto;
+
       &-wrapper {
         .box();
         transition: transform 0.3s @ease-out 0s;
+
         &::before {
           display: inline-block;
           width: 1px;
@@ -90,6 +94,7 @@
     &-moving {
       .@{image-prefix-cls}-preview-img {
         cursor: grabbing;
+
         &-wrapper {
           transition-duration: 0s;
         }
@@ -119,14 +124,17 @@
         margin-left: @control-padding-horizontal;
         padding: @control-padding-horizontal;
         cursor: pointer;
+
         &-disabled {
           color: @image-preview-operation-disabled-color;
           pointer-events: none;
         }
+
         &:last-of-type {
           margin-left: 0;
         }
       }
+
       &-icon {
         font-size: @image-preview-operation-size;
       }
@@ -149,6 +157,7 @@
       border-radius: 50%;
       cursor: pointer;
       pointer-events: auto;
+
       &-disabled {
         color: @image-preview-operation-disabled-color;
         cursor: not-allowed;
diff --git a/components/input-number/style/index.less b/components/input-number/style/index.less
index c43c96fc9d..a663c1a98d 100644
--- a/components/input-number/style/index.less
+++ b/components/input-number/style/index.less
@@ -13,6 +13,7 @@
   &-group {
     .reset-component();
     .input-group(~'@{input-number-prefix-cls}');
+
     &-wrapper {
       display: inline-block;
       text-align: start;
@@ -39,9 +40,11 @@
     text-align: center;
     border-left: @border-width-base @border-style-base @input-number-handler-border-color;
     transition: all 0.1s linear;
+
     &:active {
       background: @input-number-handler-active-bg;
     }
+
     &:hover &-up-inner,
     &:hover &-down-inner {
       color: @input-number-handler-hover-bg;
@@ -171,11 +174,13 @@
   &-handler-up {
     border-top-right-radius: @border-radius-base;
     cursor: pointer;
+
     &-inner {
       top: 50%;
       margin-top: -5px;
       text-align: center;
     }
+
     &:hover {
       height: 60% !important;
     }
@@ -186,11 +191,13 @@
     border-top: @border-width-base @border-style-base @border-color-base;
     border-bottom-right-radius: @border-radius-base;
     cursor: pointer;
+
     &-inner {
       top: 50%;
       text-align: center;
       transform: translateY(-50%);
     }
+
     &:hover {
       height: 60% !important;
     }
diff --git a/components/input/style/affix.less b/components/input/style/affix.less
index c7d55d9312..a7df19803c 100644
--- a/components/input/style/affix.less
+++ b/components/input/style/affix.less
@@ -1,5 +1,4 @@
 @import './mixin';
-
 @import (reference) '../../style/themes/index';
 @input-prefix-cls: ~'@{ant-prefix}-input';
 
diff --git a/components/input/style/index.less b/components/input/style/index.less
index 6ad23e282d..e749d368f7 100644
--- a/components/input/style/index.less
+++ b/components/input/style/index.less
@@ -15,6 +15,7 @@
   &-group {
     .reset-component();
     .input-group(~'@{input-prefix-cls}');
+
     &-wrapper {
       display: inline-block;
       width: 100%;
diff --git a/components/input/style/rtl.less b/components/input/style/rtl.less
index 1aa3a8c404..64799d9bbe 100644
--- a/components/input/style/rtl.less
+++ b/components/input/style/rtl.less
@@ -8,6 +8,7 @@
       direction: rtl;
     }
   }
+
   &-rtl {
     direction: rtl;
   }
diff --git a/components/list/style/index.less b/components/list/style/index.less
index 72e75eec4b..6804e24129 100644
--- a/components/list/style/index.less
+++ b/components/list/style/index.less
@@ -26,6 +26,7 @@
   &-more {
     margin-top: @margin-sm;
     text-align: center;
+
     button {
       padding-right: 32px;
       padding-left: 32px;
@@ -66,30 +67,36 @@
       &-avatar {
         margin-right: @list-item-meta-avatar-margin-right;
       }
+
       &-content {
         flex: 1 0;
         width: 0;
         color: @text-color;
       }
+
       &-title {
         margin-bottom: 4px;
         color: @text-color;
         font-size: @font-size-base;
         line-height: @line-height-base;
+
         > a {
           color: @text-color;
           transition: all 0.3s;
+
           &:hover {
             color: @primary-color;
           }
         }
       }
+
       &-description {
         color: @text-color-secondary;
         font-size: @list-item-meta-description-font-size;
         line-height: @line-height-base;
       }
     }
+
     &-action {
       flex: 0 0 auto;
       margin-left: 48px;
@@ -146,6 +153,7 @@
 
   &-split &-item {
     border-bottom: 1px solid @border-color-split;
+
     &:last-child {
       border-bottom: none;
     }
@@ -204,6 +212,7 @@
 
       > li {
         padding: 0 @padding-md;
+
         &:first-child {
           padding-left: 0;
         }
diff --git a/components/list/style/responsive.less b/components/list/style/responsive.less
index 151dec453d..db7a108a34 100644
--- a/components/list/style/responsive.less
+++ b/components/list/style/responsive.less
@@ -20,6 +20,7 @@
   .@{list-prefix-cls} {
     &-item {
       flex-wrap: wrap;
+
       &-action {
         margin-left: 12px;
       }
@@ -29,9 +30,11 @@
   .@{list-prefix-cls}-vertical {
     .@{list-prefix-cls}-item {
       flex-wrap: wrap-reverse;
+
       &-main {
         min-width: 220px;
       }
+
       &-extra {
         margin: auto auto 16px;
       }
diff --git a/components/menu/style/dark.less b/components/menu/style/dark.less
index ed8a853f1e..e69e9ad803 100644
--- a/components/menu/style/dark.less
+++ b/components/menu/style/dark.less
@@ -8,6 +8,7 @@
     .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow {
       opacity: 0.45;
       transition: all 0.3s;
+
       &::after,
       &::before {
         background: @menu-dark-arrow-color;
@@ -65,6 +66,7 @@
     left: 0;
     margin-left: 0;
     border-right: 0;
+
     &::after {
       border-right: 0;
     }
@@ -83,6 +85,7 @@
   &-dark &-submenu-title:hover {
     color: @menu-dark-highlight-color;
     background-color: transparent;
+
     > a,
     > span > a {
       color: @menu-dark-highlight-color;
@@ -90,6 +93,7 @@
     > .@{menu-prefix-cls}-submenu-title {
       > .@{menu-prefix-cls}-submenu-arrow {
         opacity: 1;
+
         &::after,
         &::before {
           background: @menu-dark-highlight-color;
@@ -97,6 +101,7 @@
       }
     }
   }
+
   &-dark &-item:hover {
     background-color: @menu-dark-item-hover-bg;
   }
@@ -108,9 +113,11 @@
   &-dark &-item-selected {
     color: @menu-dark-highlight-color;
     border-right: 0;
+
     &::after {
       border-right: 0;
     }
+
     > a,
     > span > a,
     > a:hover,
diff --git a/components/menu/style/index.less b/components/menu/style/index.less
index 5e65442c81..203354d973 100644
--- a/components/menu/style/index.less
+++ b/components/menu/style/index.less
@@ -67,6 +67,7 @@
     transition: border-color @animation-duration-slow @ease-in-out,
       background @animation-duration-slow @ease-in-out;
   }
+
   &-submenu,
   &-submenu-inline {
     transition: border-color @animation-duration-slow @ease-in-out,
@@ -95,9 +96,11 @@
 
   &-item a {
     color: @menu-item-color;
+
     &:hover {
       color: @menu-highlight-color;
     }
+
     &::before {
       position: absolute;
       top: 0;
@@ -112,6 +115,7 @@
   // https://github.com/ant-design/ant-design/issues/19809
   &-item > .@{ant-prefix}-badge a {
     color: @menu-item-color;
+
     &:hover {
       color: @menu-highlight-color;
     }
@@ -142,6 +146,7 @@
 
   &-item-selected {
     color: @menu-highlight-color;
+
     a,
     a:hover {
       color: @menu-highlight-color;
@@ -182,6 +187,7 @@
       left: 0;
       margin-left: 0;
       border-right: 0;
+
       &::after {
         border-right: 0;
       }
@@ -218,6 +224,7 @@
       font-size: @menu-icon-size;
       transition: font-size @menu-animation-duration-normal @ease-out,
         margin @animation-duration-slow @ease-in-out, color @animation-duration-slow;
+
       + span {
         margin-left: @menu-icon-margin-right;
         opacity: 1;
@@ -280,6 +287,7 @@
     > .@{menu-prefix-cls} {
       background-color: @menu-bg;
       border-radius: @border-radius-base;
+
       &-submenu-title::after {
         transition: transform @animation-duration-slow @ease-in-out;
       }
@@ -314,9 +322,11 @@
           color @animation-duration-slow @ease-in-out;
         content: '';
       }
+
       &::before {
         transform: rotate(45deg) translateY(-2.5px);
       }
+
       &::after {
         transform: rotate(-45deg) translateY(2.5px);
       }
@@ -333,6 +343,7 @@
       &::before {
         transform: rotate(-45deg) translateX(2.5px);
       }
+
       &::after {
         transform: rotate(45deg) translateX(-2.5px);
       }
@@ -345,9 +356,11 @@
     &-open&-inline > &-title > &-arrow {
       // ↑
       transform: translateY(-2px);
+
       &::after {
         transform: rotate(-45deg) translateX(-2.5px);
       }
+
       &::before {
         transform: rotate(45deg) translateX(2.5px);
       }
@@ -411,13 +424,16 @@
     > .@{menu-prefix-cls}-item {
       a {
         color: @menu-item-color;
+
         &:hover {
           color: @menu-highlight-color;
         }
+
         &::before {
           bottom: -2px;
         }
       }
+
       &-selected a {
         color: @menu-highlight-color;
       }
@@ -437,6 +453,7 @@
   &-inline {
     .@{menu-prefix-cls}-item {
       position: relative;
+
       &::after {
         position: absolute;
         top: 0;
@@ -555,6 +572,7 @@
         margin: 0;
         font-size: @menu-icon-size-lg;
         line-height: @menu-item-height;
+
         + span {
           display: inline-block;
           opacity: 0;
@@ -574,6 +592,7 @@
       .@{iconfont-css-prefix} {
         display: none;
       }
+
       a {
         color: @text-color-dark;
       }
diff --git a/components/menu/style/rtl.less b/components/menu/style/rtl.less
index a7edba5bbf..cc7a152af7 100644
--- a/components/menu/style/rtl.less
+++ b/components/menu/style/rtl.less
@@ -87,6 +87,7 @@
             transform: rotate(-45deg) translateY(-2px);
           }
         }
+
         &::after {
           .@{menu-prefix-cls}-rtl & {
             transform: rotate(45deg) translateY(2px);
diff --git a/components/menu/style/status.less b/components/menu/style/status.less
index 225f0e9c23..5e8a13438c 100644
--- a/components/menu/style/status.less
+++ b/components/menu/style/status.less
@@ -17,6 +17,7 @@
 
     &-selected {
       color: @menu-highlight-danger-color;
+
       > a,
       > a:hover {
         color: @menu-highlight-danger-color;
diff --git a/components/message/style/index.less b/components/message/style/index.less
index 3459ef650f..2594fff743 100644
--- a/components/message/style/index.less
+++ b/components/message/style/index.less
@@ -63,6 +63,7 @@
     padding: 8px;
     opacity: 1;
   }
+
   100% {
     max-height: 0;
     padding: 0;
diff --git a/components/modal/style/modal.less b/components/modal/style/modal.less
index d9470ef367..8d335d9c98 100644
--- a/components/modal/style/modal.less
+++ b/components/modal/style/modal.less
@@ -106,6 +106,7 @@
 
 .@{dialog-prefix-cls}-centered {
   text-align: center;
+
   &::before {
     display: inline-block;
     width: 0;
diff --git a/components/modal/style/rtl.less b/components/modal/style/rtl.less
index 1655806c7f..8a19025b6b 100644
--- a/components/modal/style/rtl.less
+++ b/components/modal/style/rtl.less
@@ -50,6 +50,7 @@
         }
       }
     }
+
     &-btns {
       .@{dialog-wrap-rtl-cls} & {
         float: left;
diff --git a/components/notification/style/index.less b/components/notification/style/index.less
index cc654760ae..b85b73f55f 100644
--- a/components/notification/style/index.less
+++ b/components/notification/style/index.less
@@ -69,6 +69,7 @@
         max-width: 4px;
         background-color: transparent;
         pointer-events: none;
+
         &::before {
           display: block;
           content: '';
@@ -109,12 +110,15 @@
       &-success {
         color: @success-color;
       }
+
       &-info {
         color: @info-color;
       }
+
       &-warning {
         color: @warning-color;
       }
+
       &-error {
         color: @error-color;
       }
@@ -181,6 +185,7 @@
     left: @notification-width;
     opacity: 0;
   }
+
   100% {
     left: 0;
     opacity: 1;
@@ -192,6 +197,7 @@
     right: @notification-width;
     opacity: 0;
   }
+
   100% {
     right: 0;
     opacity: 1;
@@ -204,6 +210,7 @@
     margin-bottom: @notification-margin-bottom;
     opacity: 1;
   }
+
   100% {
     max-height: 0;
     margin-bottom: 0;
diff --git a/components/page-header/style/index.less b/components/page-header/style/index.less
index 084d85e575..725ae2b450 100644
--- a/components/page-header/style/index.less
+++ b/components/page-header/style/index.less
@@ -90,6 +90,7 @@
         margin-left: @margin-sm;
         white-space: unset;
       }
+
       > *:first-child {
         margin-left: 0;
       }
@@ -105,6 +106,7 @@
     .@{ant-prefix}-tabs {
       > .@{ant-prefix}-tabs-nav {
         margin: 0;
+
         &::before {
           border: none;
         }
diff --git a/components/page-header/style/rtl.less b/components/page-header/style/rtl.less
index f7e9afdbe4..33e5c0d86b 100644
--- a/components/page-header/style/rtl.less
+++ b/components/page-header/style/rtl.less
@@ -56,6 +56,7 @@
           margin-left: 0;
         }
       }
+
       > *:first-child {
         .@{pageheader-prefix-cls}-rtl & {
           margin-right: 0;
diff --git a/components/pagination/style/index.less b/components/pagination/style/index.less
index 37c0861d04..1dda144f37 100644
--- a/components/pagination/style/index.less
+++ b/components/pagination/style/index.less
@@ -63,6 +63,7 @@
     &:hover {
       border-color: @primary-color;
       transition: all 0.3s;
+
       a {
         color: @primary-color;
       }
@@ -101,6 +102,7 @@
         letter-spacing: -1px;
         opacity: 0;
         transition: all 0.2s;
+
         &-svg {
           top: 0;
           right: 0;
@@ -144,6 +146,7 @@
   &-jump-next {
     margin-right: 8px;
   }
+
   &-prev,
   &-next,
   &-jump-prev,
@@ -259,6 +262,7 @@
       height: @pagination-item-size-sm;
       background-color: transparent;
       border: 0;
+
       &::after {
         height: @pagination-item-size-sm;
         line-height: @pagination-item-size-sm;
@@ -326,6 +330,7 @@
   &.mini &-next &-item-link {
     background: transparent;
     border-color: transparent;
+
     &::after {
       height: @pagination-item-size-sm;
       line-height: @pagination-item-size-sm;
@@ -377,6 +382,7 @@
 
       &-active {
         background: @pagination-item-disabled-bg-active;
+
         a {
           color: @pagination-item-disabled-color-active;
         }
diff --git a/components/popover/style/index.less b/components/popover/style/index.less
index 1d53bc3932..16c71fa266 100644
--- a/components/popover/style/index.less
+++ b/components/popover/style/index.less
@@ -99,6 +99,7 @@
       color: @warning-color;
       font-size: @font-size-base;
     }
+
     &-title {
       padding-left: @font-size-base + 8px;
     }
@@ -149,6 +150,7 @@
       transform: translateY((-@popover-arrow-rotate-width / 2)) rotate(45deg);
     }
   }
+
   &-placement-top &-arrow {
     left: 50%;
     transform: translateX(-50%);
@@ -172,13 +174,16 @@
       transform: translateX((@popover-arrow-rotate-width / 2)) rotate(45deg);
     }
   }
+
   &-placement-right &-arrow {
     top: 50%;
     transform: translateY(-50%);
   }
+
   &-placement-rightTop &-arrow {
     top: @popover-arrow-offset-vertical;
   }
+
   &-placement-rightBottom &-arrow {
     bottom: @popover-arrow-offset-vertical;
   }
diff --git a/components/progress/style/index.less b/components/progress/style/index.less
index dfde2fcbb0..9ba9914378 100644
--- a/components/progress/style/index.less
+++ b/components/progress/style/index.less
@@ -16,11 +16,13 @@
 
   &-steps {
     display: inline-block;
+
     &-outer {
       display: flex;
       flex-direction: row;
       align-items: center;
     }
+
     &-item {
       flex-shrink: 0;
       min-width: 2px;
@@ -180,6 +182,7 @@
       color: @error-color;
     }
   }
+
   &-circle&-status-success {
     .@{progress-prefix-cls}-text {
       color: @success-color;
@@ -192,10 +195,12 @@
     transform: translateX(-100%) scaleX(0);
     opacity: 0.1;
   }
+
   20% {
     transform: translateX(-100%) scaleX(0);
     opacity: 0.5;
   }
+
   100% {
     transform: translateX(0) scaleX(1);
     opacity: 0;
diff --git a/components/radio/style/index.less b/components/radio/style/index.less
index 288a64ec42..66356b3e80 100644
--- a/components/radio/style/index.less
+++ b/components/radio/style/index.less
@@ -126,6 +126,7 @@
 .@{radio-prefix-cls}-checked {
   .@{radio-inner-prefix-cls} {
     border-color: @radio-dot-color;
+
     &::after {
       transform: scale(1);
       opacity: 1;
@@ -141,6 +142,7 @@
     background-color: @input-disabled-bg;
     border-color: @border-color-base !important;
     cursor: not-allowed;
+
     &::after {
       background-color: @radio-dot-disabled-color;
     }
@@ -268,6 +270,7 @@ span.@{radio-prefix-cls} + * {
     &:hover {
       color: @radio-button-hover-color;
       border-color: @radio-button-hover-color;
+
       &::before {
         background-color: @radio-button-hover-color;
       }
@@ -276,6 +279,7 @@ span.@{radio-prefix-cls} + * {
     &:active {
       color: @radio-button-active-color;
       border-color: @radio-button-active-color;
+
       &::before {
         background-color: @radio-button-active-color;
       }
@@ -290,16 +294,19 @@ span.@{radio-prefix-cls} + * {
     color: @radio-solid-checked-color;
     background: @radio-dot-color;
     border-color: @radio-dot-color;
+
     &:hover {
       color: @radio-solid-checked-color;
       background: @radio-button-hover-color;
       border-color: @radio-button-hover-color;
     }
+
     &:active {
       color: @radio-solid-checked-color;
       background: @radio-button-active-color;
       border-color: @radio-button-active-color;
     }
+
     &:focus-within {
       box-shadow: @radio-button-focus-shadow;
     }
@@ -317,6 +324,7 @@ span.@{radio-prefix-cls} + * {
       background-color: @input-disabled-bg;
       border-color: @border-color-base;
     }
+
     &:first-child {
       border-left-color: @border-color-base;
     }
@@ -335,6 +343,7 @@ span.@{radio-prefix-cls} + * {
     transform: scale(1);
     opacity: 0.5;
   }
+
   100% {
     transform: scale(1.6);
     opacity: 0;
diff --git a/components/rate/style/index.less b/components/rate/style/index.less
index fe438ef3b4..10abfd7c6a 100644
--- a/components/rate/style/index.less
+++ b/components/rate/style/index.less
@@ -17,6 +17,7 @@
 
   &-disabled &-star {
     cursor: default;
+
     &:hover {
       transform: scale(1);
     }
diff --git a/components/result/style/index.less b/components/result/style/index.less
index 352c833010..78cb70b827 100644
--- a/components/result/style/index.less
+++ b/components/result/style/index.less
@@ -55,6 +55,7 @@
   &-extra {
     margin: @result-extra-margin;
     text-align: center;
+
     > * {
       margin-right: 8px;
 
diff --git a/components/select/style/index.less b/components/select/style/index.less
index ae998c7a16..d2d7560985 100644
--- a/components/select/style/index.less
+++ b/components/select/style/index.less
@@ -1,7 +1,6 @@
 @import '../../style/themes/index';
 @import '../../style/mixins/index';
 @import '../../input/style/mixin';
-
 @import './single';
 @import './multiple';
 
@@ -167,9 +166,11 @@
     opacity: 0;
     transition: color 0.3s ease, opacity 0.15s ease;
     text-rendering: auto;
+
     &::before {
       display: block;
     }
+
     &:hover {
       color: @text-color-secondary;
     }
diff --git a/components/skeleton/style/index.less b/components/skeleton/style/index.less
index 0eed9f5b15..226d84aadb 100644
--- a/components/skeleton/style/index.less
+++ b/components/skeleton/style/index.less
@@ -271,6 +271,7 @@
   0% {
     background-position: 100% 50%;
   }
+
   100% {
     background-position: 0 50%;
   }
diff --git a/components/skeleton/style/rtl.less b/components/skeleton/style/rtl.less
index dabe8b35d9..8ba4be3730 100644
--- a/components/skeleton/style/rtl.less
+++ b/components/skeleton/style/rtl.less
@@ -41,6 +41,7 @@
   0% {
     background-position: 0% 50%;
   }
+
   100% {
     background-position: 100% 50%;
   }
diff --git a/components/slider/style/index.less b/components/slider/style/index.less
index 13ea3a2cc4..e811f7142b 100644
--- a/components/slider/style/index.less
+++ b/components/slider/style/index.less
@@ -120,9 +120,11 @@
     &:first-child {
       margin-left: -4px;
     }
+
     &:last-child {
       margin-left: -4px;
     }
+
     &-active {
       border-color: @slider-dot-border-color-active;
     }
diff --git a/components/space/style/index.less b/components/space/style/index.less
index c73c669848..842554ca27 100644
--- a/components/space/style/index.less
+++ b/components/space/style/index.less
@@ -6,6 +6,7 @@
 
 .@{space-prefix-cls} {
   display: inline-flex;
+
   &-vertical {
     flex-direction: column;
   }
@@ -14,12 +15,15 @@
     &-center {
       align-items: center;
     }
+
     &-start {
       align-items: flex-start;
     }
+
     &-end {
       align-items: flex-end;
     }
+
     &-baseline {
       align-items: baseline;
     }
diff --git a/components/spin/style/index.less b/components/spin/style/index.less
index c64d29ea8c..e3bf920031 100644
--- a/components/spin/style/index.less
+++ b/components/spin/style/index.less
@@ -142,16 +142,19 @@
         top: 0;
         left: 0;
       }
+
       &:nth-child(2) {
         top: 0;
         right: 0;
         animation-delay: 0.4s;
       }
+
       &:nth-child(3) {
         right: 0;
         bottom: 0;
         animation-delay: 0.8s;
       }
+
       &:nth-child(4) {
         bottom: 0;
         left: 0;
diff --git a/components/steps/style/index.less b/components/steps/style/index.less
index c439b30f5d..a57ecd1117 100644
--- a/components/steps/style/index.less
+++ b/components/steps/style/index.less
@@ -74,6 +74,7 @@
       line-height: 1;
     }
   }
+
   &-tail {
     position: absolute;
     top: 12px;
@@ -91,6 +92,7 @@
       content: '';
     }
   }
+
   &-title {
     position: relative;
     display: inline-block;
@@ -110,6 +112,7 @@
       content: '';
     }
   }
+
   &-subtitle {
     display: inline;
     margin-left: 8px;
@@ -117,18 +120,21 @@
     font-weight: normal;
     font-size: @font-size-base;
   }
+
   &-description {
     color: @text-color-secondary;
     font-size: @font-size-base;
   }
   .step-item-status(wait);
   .step-item-status(process);
+
   &-process > &-container > &-icon {
     background: @process-icon-color;
     .@{steps-prefix-cls}-icon {
       color: @process-icon-text-color;
     }
   }
+
   &-process > &-container > &-title {
     font-weight: 500;
   }
@@ -197,9 +203,11 @@
     &:last-child .@{steps-prefix-cls}-item-title {
       padding-right: 0;
     }
+
     &-tail {
       display: none;
     }
+
     &-description {
       max-width: @steps-description-max-width;
       white-space: normal;
@@ -224,6 +232,7 @@
   }
   &-@{status} > &-container > &-content > &-title {
     color: @@title-color;
+
     &::after {
       background-color: @@tail-color;
     }
diff --git a/components/steps/style/label-placement.less b/components/steps/style/label-placement.less
index 606ba0880b..a1bfd9b26e 100644
--- a/components/steps/style/label-placement.less
+++ b/components/steps/style/label-placement.less
@@ -1,27 +1,33 @@
 .@{steps-prefix-cls}-label-vertical {
   .@{steps-prefix-cls}-item {
     overflow: visible;
+
     &-tail {
       margin-left: 58px;
       padding: 3.5px 24px;
     }
+
     &-content {
       display: block;
       width: ((@steps-icon-size / 2) + 42px) * 2;
       margin-top: 8px;
       text-align: center;
     }
+
     &-icon {
       display: inline-block;
       margin-left: 42px;
     }
+
     &-title {
       padding-right: 0;
       padding-left: 0;
+
       &::after {
         display: none;
       }
     }
+
     &-subtitle {
       display: block;
       margin-bottom: 4px;
diff --git a/components/steps/style/nav.less b/components/steps/style/nav.less
index d72039a680..be3f36fe9d 100644
--- a/components/steps/style/nav.less
+++ b/components/steps/style/nav.less
@@ -41,6 +41,7 @@
     &:not(.@{steps-prefix-cls}-item-active) {
       .@{steps-prefix-cls}-item-container[role='button'] {
         cursor: pointer;
+
         &:hover {
           opacity: 0.85;
         }
@@ -49,6 +50,7 @@
 
     &:last-child {
       flex: 1;
+
       &::after {
         display: none;
       }
@@ -93,6 +95,7 @@
 .@{steps-prefix-cls}-navigation.@{steps-prefix-cls}-vertical {
   > .@{steps-prefix-cls}-item {
     margin-right: 0 !important;
+
     &::before {
       display: none;
     }
@@ -104,6 +107,7 @@
       width: 3px;
       height: calc(100% - 24px);
     }
+
     &::after {
       position: relative;
       top: -2px;
diff --git a/components/steps/style/progress-dot.less b/components/steps/style/progress-dot.less
index 2c9dcb4056..49e13281af 100644
--- a/components/steps/style/progress-dot.less
+++ b/components/steps/style/progress-dot.less
@@ -4,6 +4,7 @@
     &-title {
       line-height: @line-height-base;
     }
+
     &-tail {
       top: @steps-dot-top;
       width: 100%;
@@ -19,6 +20,7 @@
     &:first-child .@{steps-prefix-cls}-icon-dot {
       left: 2px;
     }
+
     &-icon {
       width: @steps-dot-size;
       height: @steps-dot-size;
@@ -47,6 +49,7 @@
         }
       }
     }
+
     &-content {
       width: @steps-description-max-width;
     }
diff --git a/components/steps/style/rtl.less b/components/steps/style/rtl.less
index 47f9dfbc11..cd80dc2ba7 100644
--- a/components/steps/style/rtl.less
+++ b/components/steps/style/rtl.less
@@ -193,6 +193,7 @@
         left: auto;
       }
     }
+
     &-icon {
       .@{steps-prefix-cls}-rtl& {
         margin-right: 67px;
diff --git a/components/steps/style/small.less b/components/steps/style/small.less
index 344e37aed8..329e598437 100644
--- a/components/steps/style/small.less
+++ b/components/steps/style/small.less
@@ -20,6 +20,7 @@
     padding-right: 12px;
     font-size: @font-size-base;
     line-height: @steps-small-icon-size;
+
     &::after {
       top: (@steps-small-icon-size / 2);
     }
diff --git a/components/style/core/global.less b/components/style/core/global.less
index f1bbd8b08c..f451fb173a 100644
--- a/components/style/core/global.less
+++ b/components/style/core/global.less
@@ -199,6 +199,7 @@ sup {
 sub {
   bottom: -0.25em;
 }
+
 sup {
   top: -0.5em;
 }
diff --git a/components/style/core/motion.less b/components/style/core/motion.less
index 730c693687..ef8e2edcb1 100644
--- a/components/style/core/motion.less
+++ b/components/style/core/motion.less
@@ -8,6 +8,7 @@
 // For common/openAnimation
 .ant-motion-collapse-legacy {
   overflow: hidden;
+
   &-active {
     transition: height @animation-duration-base @ease-in-out,
       opacity @animation-duration-base @ease-in-out !important;
diff --git a/components/style/core/motion/fade.less b/components/style/core/motion/fade.less
index c703b5973a..f4a9513bcb 100644
--- a/components/style/core/motion/fade.less
+++ b/components/style/core/motion/fade.less
@@ -17,6 +17,7 @@
   0% {
     opacity: 0;
   }
+
   100% {
     opacity: 1;
   }
@@ -26,6 +27,7 @@
   0% {
     opacity: 1;
   }
+
   100% {
     opacity: 0;
   }
diff --git a/components/style/core/motion/move.less b/components/style/core/motion/move.less
index e7972d77af..733f26d701 100644
--- a/components/style/core/motion/move.less
+++ b/components/style/core/motion/move.less
@@ -22,6 +22,7 @@
     transform-origin: 0 0;
     opacity: 0;
   }
+
   100% {
     transform: translateY(0%);
     transform-origin: 0 0;
@@ -35,6 +36,7 @@
     transform-origin: 0 0;
     opacity: 1;
   }
+
   100% {
     transform: translateY(100%);
     transform-origin: 0 0;
@@ -48,6 +50,7 @@
     transform-origin: 0 0;
     opacity: 0;
   }
+
   100% {
     transform: translateX(0%);
     transform-origin: 0 0;
@@ -61,6 +64,7 @@
     transform-origin: 0 0;
     opacity: 1;
   }
+
   100% {
     transform: translateX(-100%);
     transform-origin: 0 0;
@@ -74,6 +78,7 @@
     transform-origin: 0 0;
     opacity: 0;
   }
+
   100% {
     transform: translateX(0%);
     transform-origin: 0 0;
@@ -87,6 +92,7 @@
     transform-origin: 0 0;
     opacity: 1;
   }
+
   100% {
     transform: translateX(100%);
     transform-origin: 0 0;
@@ -100,6 +106,7 @@
     transform-origin: 0 0;
     opacity: 0;
   }
+
   100% {
     transform: translateY(0%);
     transform-origin: 0 0;
@@ -113,6 +120,7 @@
     transform-origin: 0 0;
     opacity: 1;
   }
+
   100% {
     transform: translateY(-100%);
     transform-origin: 0 0;
diff --git a/components/style/core/motion/slide.less b/components/style/core/motion/slide.less
index f838c6e4ac..17de58c2c5 100644
--- a/components/style/core/motion/slide.less
+++ b/components/style/core/motion/slide.less
@@ -22,6 +22,7 @@
     transform-origin: 0% 0%;
     opacity: 0;
   }
+
   100% {
     transform: scaleY(1);
     transform-origin: 0% 0%;
@@ -35,6 +36,7 @@
     transform-origin: 0% 0%;
     opacity: 1;
   }
+
   100% {
     transform: scaleY(0.8);
     transform-origin: 0% 0%;
@@ -48,6 +50,7 @@
     transform-origin: 100% 100%;
     opacity: 0;
   }
+
   100% {
     transform: scaleY(1);
     transform-origin: 100% 100%;
@@ -61,6 +64,7 @@
     transform-origin: 100% 100%;
     opacity: 1;
   }
+
   100% {
     transform: scaleY(0.8);
     transform-origin: 100% 100%;
@@ -74,6 +78,7 @@
     transform-origin: 0% 0%;
     opacity: 0;
   }
+
   100% {
     transform: scaleX(1);
     transform-origin: 0% 0%;
@@ -87,6 +92,7 @@
     transform-origin: 0% 0%;
     opacity: 1;
   }
+
   100% {
     transform: scaleX(0.8);
     transform-origin: 0% 0%;
@@ -100,6 +106,7 @@
     transform-origin: 100% 0%;
     opacity: 0;
   }
+
   100% {
     transform: scaleX(1);
     transform-origin: 100% 0%;
@@ -113,6 +120,7 @@
     transform-origin: 100% 0%;
     opacity: 1;
   }
+
   100% {
     transform: scaleX(0.8);
     transform-origin: 100% 0%;
diff --git a/components/style/core/motion/zoom.less b/components/style/core/motion/zoom.less
index 6b4ab04638..72739b7511 100644
--- a/components/style/core/motion/zoom.less
+++ b/components/style/core/motion/zoom.less
@@ -33,6 +33,7 @@
     transform: scale(0.2);
     opacity: 0;
   }
+
   100% {
     transform: scale(1);
     opacity: 1;
@@ -43,6 +44,7 @@
   0% {
     transform: scale(1);
   }
+
   100% {
     transform: scale(0.2);
     opacity: 0;
@@ -54,6 +56,7 @@
     transform: scale(0.8);
     opacity: 0;
   }
+
   100% {
     transform: scale(1);
     opacity: 1;
@@ -64,6 +67,7 @@
   0% {
     transform: scale(1);
   }
+
   100% {
     transform: scale(0.8);
     opacity: 0;
@@ -76,6 +80,7 @@
     transform-origin: 50% 0%;
     opacity: 0;
   }
+
   100% {
     transform: scale(1);
     transform-origin: 50% 0%;
@@ -87,6 +92,7 @@
     transform: scale(1);
     transform-origin: 50% 0%;
   }
+
   100% {
     transform: scale(0.8);
     transform-origin: 50% 0%;
@@ -100,6 +106,7 @@
     transform-origin: 0% 50%;
     opacity: 0;
   }
+
   100% {
     transform: scale(1);
     transform-origin: 0% 50%;
@@ -111,6 +118,7 @@
     transform: scale(1);
     transform-origin: 0% 50%;
   }
+
   100% {
     transform: scale(0.8);
     transform-origin: 0% 50%;
@@ -124,6 +132,7 @@
     transform-origin: 100% 50%;
     opacity: 0;
   }
+
   100% {
     transform: scale(1);
     transform-origin: 100% 50%;
@@ -135,6 +144,7 @@
     transform: scale(1);
     transform-origin: 100% 50%;
   }
+
   100% {
     transform: scale(0.8);
     transform-origin: 100% 50%;
@@ -148,6 +158,7 @@
     transform-origin: 50% 100%;
     opacity: 0;
   }
+
   100% {
     transform: scale(1);
     transform-origin: 50% 100%;
@@ -159,6 +170,7 @@
     transform: scale(1);
     transform-origin: 50% 100%;
   }
+
   100% {
     transform: scale(0.8);
     transform-origin: 50% 100%;
diff --git a/components/style/mixins/clearfix.less b/components/style/mixins/clearfix.less
index 0ed35f9cfd..07e89f8012 100644
--- a/components/style/mixins/clearfix.less
+++ b/components/style/mixins/clearfix.less
@@ -6,6 +6,7 @@
     display: table;
     content: '';
   }
+
   &::after {
     // https://github.com/ant-design/ant-design/issues/21864
     display: table;
diff --git a/components/style/mixins/customize.less b/components/style/mixins/customize.less
index e393c8ca30..6f6fc18647 100644
--- a/components/style/mixins/customize.less
+++ b/components/style/mixins/customize.less
@@ -64,6 +64,7 @@
       .@{table-prefix-cls}-row-expand-icon {
         border: @popover-border;
       }
+
       tfoot {
         > tr {
           > th,
@@ -72,6 +73,7 @@
           }
         }
       }
+
       thead {
         > tr {
           > th {
@@ -80,6 +82,7 @@
           }
         }
       }
+
       tbody {
         > tr {
           > td {
diff --git a/components/switch/style/index.less b/components/switch/style/index.less
index 7b456eb257..5ead4105dc 100644
--- a/components/switch/style/index.less
+++ b/components/switch/style/index.less
@@ -45,6 +45,7 @@
   &-disabled {
     cursor: not-allowed;
     opacity: @switch-disabled-opacity;
+
     * {
       box-shadow: none;
       cursor: not-allowed;
diff --git a/components/table/style/bordered.less b/components/table/style/bordered.less
index 7c30103a89..8ea9659c4b 100644
--- a/components/table/style/bordered.less
+++ b/components/table/style/bordered.less
@@ -1,5 +1,4 @@
 @import './size';
-
 @import (reference) '../../style/themes/index';
 @table-prefix-cls: ~'@{ant-prefix}-table';
 
diff --git a/components/table/style/index.less b/components/table/style/index.less
index 5162769af4..8b50b7e9bb 100644
--- a/components/table/style/index.less
+++ b/components/table/style/index.less
@@ -539,6 +539,7 @@
     &-collapsed::before {
       transform: rotate(-180deg);
     }
+
     &-collapsed::after {
       transform: rotate(0deg);
     }
@@ -593,6 +594,7 @@
     .@{table-prefix-cls}-empty & {
       color: @disabled-color;
     }
+
     &:hover {
       > td {
         background: @component-background;
@@ -651,6 +653,7 @@
     &::before {
       left: 0;
     }
+
     &::after {
       right: 0;
     }
@@ -689,6 +692,7 @@
       box-shadow: inset -10px 0 8px -8px darken(@shadow-color, 5%);
     }
   }
+
   &-sticky {
     &-holder {
       position: sticky;
@@ -705,16 +709,20 @@
       background: lighten(@table-border-color, 80%);
       border-top: 1px solid @table-border-color;
       opacity: 0.6;
+
       &:hover {
         transform-origin: center bottom;
       }
+
       &-bar {
         height: 8px;
         background-color: @table-sticky-scroll-bar-bg;
         border-radius: @table-sticky-scroll-bar-radius;
+
         &:hover {
           background-color: @table-sticky-scroll-bar-active-bg;
         }
+
         &-active {
           background-color: @table-sticky-scroll-bar-active-bg;
         }
@@ -730,6 +738,7 @@
         box-shadow: none !important;
       }
     }
+
     &-ping-right {
       .@{table-prefix-cls}-cell-fix-right-first::after {
         box-shadow: none !important;
diff --git a/components/tabs/style/position.less b/components/tabs/style/position.less
index f670fef415..9087f43ba2 100644
--- a/components/tabs/style/position.less
+++ b/components/tabs/style/position.less
@@ -40,6 +40,7 @@
           left: 0;
           box-shadow: inset 10px 0 8px -8px fade(@shadow-color, 8%);
         }
+
         &::after {
           right: 0;
           box-shadow: inset -10px 0 8px -8px fade(@shadow-color, 8%);
@@ -123,6 +124,7 @@
           top: 0;
           box-shadow: inset 0 10px 8px -8px fade(@shadow-color, 8%);
         }
+
         &::after {
           bottom: 0;
           box-shadow: inset 0 -10px 8px -8px fade(@shadow-color, 8%);
diff --git a/components/tabs/style/rtl.less b/components/tabs/style/rtl.less
index 7d38e94de5..bfe4d84ffe 100644
--- a/components/tabs/style/rtl.less
+++ b/components/tabs/style/rtl.less
@@ -77,6 +77,7 @@
   &-rtl {
     direction: rtl;
   }
+
   &-menu-item {
     .@{tab-prefix-cls}-dropdown-rtl & {
       text-align: right;
diff --git a/components/tag/style/index.less b/components/tag/style/index.less
index 15708fd2fe..ec220bbd27 100644
--- a/components/tag/style/index.less
+++ b/components/tag/style/index.less
@@ -58,16 +58,20 @@
     background-color: transparent;
     border-color: transparent;
     cursor: pointer;
+
     &:not(&-checked):hover {
       color: @primary-color;
     }
+
     &:active,
     &-checked {
       color: @text-color-inverse;
     }
+
     &-checked {
       background-color: @primary-6;
     }
+
     &:active {
       background-color: @primary-7;
     }
diff --git a/components/transfer/style/rtl.less b/components/transfer/style/rtl.less
index 88562310c2..ee9077e65d 100644
--- a/components/transfer/style/rtl.less
+++ b/components/transfer/style/rtl.less
@@ -15,6 +15,7 @@
         padding-right: @control-padding-horizontal-sm;
         padding-left: 24px;
       }
+
       &-action {
         .@{transfer-prefix-cls}-rtl & {
           right: auto;
@@ -35,6 +36,7 @@
         right: 0;
         left: auto;
       }
+
       &-title {
         .@{transfer-prefix-cls}-rtl & {
           text-align: left;
diff --git a/components/tree/style/mixin.less b/components/tree/style/mixin.less
index 69b6e67137..c2d22d33d3 100644
--- a/components/tree/style/mixin.less
+++ b/components/tree/style/mixin.less
@@ -12,6 +12,7 @@
     display: inline-block;
     font-size: 10px;
     vertical-align: baseline;
+
     svg {
       transition: transform 0.3s;
     }
@@ -27,6 +28,7 @@
     background-color: @primary-color;
     border-radius: 1px;
     pointer-events: none;
+
     &::after {
       position: absolute;
       top: -3px;
@@ -187,6 +189,7 @@
         border-right: 1px solid @normal-color;
         content: ' ';
       }
+
       &::after {
         position: absolute;
         width: @tree-title-height - 14px;
@@ -233,6 +236,7 @@
       line-height: @tree-title-height;
       text-align: center;
       vertical-align: top;
+
       &:empty {
         display: none;
       }
@@ -310,6 +314,7 @@
   0% {
     opacity: 0;
   }
+
   100% {
     opacity: 1;
   }
diff --git a/components/typography/style/index.less b/components/typography/style/index.less
index 94b31810a4..bb77f5916e 100644
--- a/components/typography/style/index.less
+++ b/components/typography/style/index.less
@@ -22,6 +22,7 @@
 
   &&-danger {
     color: @error-color;
+
     a&:active,
     a&:focus,
     a&:hover {
@@ -45,18 +46,22 @@
   h1 {
     .typography-title-1();
   }
+
   h2&,
   h2 {
     .typography-title-2();
   }
+
   h3&,
   h3 {
     .typography-title-3();
   }
+
   h4&,
   h4 {
     .typography-title-4();
   }
+
   h5&,
   h5 {
     .typography-title-5();
diff --git a/components/upload/style/index.less b/components/upload/style/index.less
index 93ad3e5210..fab95e295a 100644
--- a/components/upload/style/index.less
+++ b/components/upload/style/index.less
@@ -121,6 +121,7 @@
       color: @disabled-color;
       font-size: 30px;
       transition: all 0.3s;
+
       &:hover {
         color: @text-color-secondary;
       }
@@ -149,6 +150,7 @@
     height: @line-height-base * @font-size-base;
     margin-top: @margin-xs;
     font-size: @font-size-base;
+
     &-name {
       display: inline-block;
       width: 100%;
@@ -246,6 +248,7 @@
       .@{iconfont-css-prefix} {
         color: @error-color;
       }
+
       &-btn {
         opacity: 1;
       }
diff --git a/components/upload/style/rtl.less b/components/upload/style/rtl.less
index d615c330d7..0dd9836eff 100644
--- a/components/upload/style/rtl.less
+++ b/components/upload/style/rtl.less
@@ -21,6 +21,7 @@
   &-rtl {
     direction: rtl;
   }
+
   &-item-list-type-text {
     &:hover {
       .@{upload-prefix-cls}-list-item-name-icon-count-1 {
@@ -37,6 +38,7 @@
       }
     }
   }
+
   &-item {
     &-name {
       .@{upload-prefix-cls}-list-rtl & {
diff --git a/package.json b/package.json
index af1d26c3f4..9e49653995 100644
--- a/package.json
+++ b/package.json
@@ -78,7 +78,7 @@
     "lint:deps": "antd-tools run deps-lint",
     "lint:md": "remark . -f -q",
     "lint:script": "eslint . --ext .js,.jsx,.ts,.tsx",
-    "lint:style": "stylelint {site,components}/**/*.less --syntax less",
+    "lint:style": "stylelint '{site,components}/**/*.less' --syntax less",
     "pre-publish": "npm run test-all -- --skip-build",
     "prettier": "prettier -c --write **/*",
     "pretty-quick": "pretty-quick",
@@ -270,7 +270,7 @@
     "simple-git": "^2.23.0",
     "string-replace-loader": "^3.0.3",
     "stylelint": "^13.0.0",
-    "stylelint-config-prettier": "^8.0.0",
+    "stylelint-config-prettier": "^9.0.2",
     "stylelint-config-rational-order": "^0.1.2",
     "stylelint-config-standard": "^22.0.0",
     "stylelint-declaration-block-no-ignored-properties": "^2.1.0",
diff --git a/site/theme/static/colors.less b/site/theme/static/colors.less
index 76960e7040..33c08cda03 100644
--- a/site/theme/static/colors.less
+++ b/site/theme/static/colors.less
@@ -24,23 +24,30 @@
 
 .color-palettes {
   margin: 0 1%;
+
   &-dark {
     margin: 0;
     padding: 0 28px;
     background-color: #141414;
+
     .color-title {
       color: fade(@white, 85);
     }
+
     .color-description {
       color: fade(@white, 45);
     }
+
     .color-palette {
       margin: 45px 3.5% 45px 0;
+
       &:nth-of-type(3n) {
         margin-right: 0;
       }
+
       .main-color-item {
         margin-right: 0;
+
         &:hover {
           margin-right: -8px;
         }
@@ -48,38 +55,46 @@
     }
   }
 }
+
 .color-palette {
   display: inline-block;
   width: 31%;
   margin: 45px 1%;
+
   &-pick {
     margin: 0 0 20px;
     font-size: 20px;
     text-align: center;
   }
+
   &-picker {
     margin: 24px 0;
+
     &-value {
       position: relative;
       top: -3px;
       margin-left: 16px;
       font-size: 14px;
       font-family: Consolas, sans-serif;
+
       .ant-row-rtl & {
         margin-right: 16px;
         margin-left: 0;
       }
     }
+
     &-validation {
       position: relative;
       top: -3px;
       margin-left: 16px;
       color: @error-color;
       font-size: 13px;
+
       .ant-row-rtl & {
         margin-right: 16px;
         margin-left: 0;
       }
+
       &-dark {
         margin-left: 0;
       }
@@ -105,9 +120,11 @@
   .palette-gray-11 {
     background: @gray-11;
   }
+
   .palette-gray-12 {
     background: @gray-12;
   }
+
   .palette-gray-13 {
     background: @gray-13;
   }
@@ -124,21 +141,26 @@
     line-height: 44px;
     cursor: pointer;
     transition: all 0.2s;
+
     &:first-child {
       border-radius: 4px 4px 0 0;
     }
+
     &:last-child {
       border-radius: 0 0 4px 4px;
     }
+
     &:hover {
       margin-right: -8px;
       border-radius: 0 4px 4px 0;
     }
   }
+
   &-item &-text {
     float: left;
     transition: all 0.3s;
   }
+
   &-item &-value {
     position: relative;
     left: 3px;
@@ -175,19 +197,24 @@
 
 .color-palette-horizontal {
   width: 100%;
+
   &-dark {
     height: 303px;
     padding: 32px 28px;
     background-color: #141414;
+
     .color-palette-picker {
       margin-bottom: 0;
     }
+
     .color-palette-pick {
       color: fade(@white, 65);
       text-align: left;
+
       &-hex {
         color: fade(@white, 65);
       }
+
       .ant-row-rtl & {
         direction: rtl;
         text-align: right;
diff --git a/site/theme/static/common.less b/site/theme/static/common.less
index 306ec690c1..baba11e0ec 100644
--- a/site/theme/static/common.less
+++ b/site/theme/static/common.less
@@ -148,6 +148,7 @@ a {
 
   .menu-item-link-outside {
     position: relative;
+
     .anticon {
       position: absolute;
       top: 16px;
@@ -157,6 +158,7 @@ a {
       opacity: 0;
       transition: all 0.3s;
     }
+
     &:hover .anticon {
       opacity: 1;
     }
@@ -178,6 +180,7 @@ a {
   margin-left: 5px;
   color: #aaa;
   font-size: 12px;
+
   .ant-row-rtl & {
     margin-right: 5px;
     margin-left: 0;
@@ -204,6 +207,7 @@ a {
 
 .drawer-content {
   padding: 40px 0;
+
   &-wrapper {
     background-color: @component-background;
   }
@@ -227,22 +231,27 @@ a {
   display: flex;
   flex-direction: column;
   cursor: pointer;
+
   &-tooltip {
     .ant-tooltip-inner {
       min-width: 100px;
     }
   }
+
   & > div {
     display: block;
   }
+
   &-active {
     color: @primary-color;
   }
+
   & &-avatar {
     color: #000;
     background-color: #fff;
     box-shadow: @shadow-2;
     transition: color 0.3s;
+
     &:hover {
       color: @primary-color;
     }
diff --git a/site/theme/static/dark.less b/site/theme/static/dark.less
index ea83b30f61..984c25faa2 100644
--- a/site/theme/static/dark.less
+++ b/site/theme/static/dark.less
@@ -41,16 +41,19 @@
 
   .code-box {
     border: 1px solid @border-color-split;
+
     .markdown {
       pre {
         margin: 0.5em 0;
         padding: 6px 12px;
       }
+
       pre code {
         margin: 0;
         background: #262626;
       }
     }
+
     &-debug {
       border-color: @purple-3;
     }
@@ -63,6 +66,7 @@
       cursor: pointer;
       opacity: 0.45;
       transition: all 0.3s;
+
       &:hover {
         opacity: 0.65;
       }
@@ -84,9 +88,11 @@
   ul.anticons-list {
     li {
       color: #acacac;
+
       &.TwoTone:hover {
         background-color: #15395b;
       }
+
       &:hover {
         .anticon {
           color: #fff;
@@ -206,13 +212,16 @@
         transparent 95.83333333%
       );
     }
+
     .code-box-demo .ant-row > div:not(.gutter-row) {
       padding: 16px 0;
       background: #028ac8;
+
       &:nth-child(2n + 1) {
         background: fade(#0088c6, 70%);
       }
     }
+
     .ant-row .demo-col,
     .code-box-demo .ant-row .demo-col {
       margin-top: 0;
@@ -223,14 +232,17 @@
       text-align: center;
       border: none;
     }
+
     .ant-row .demo-col-1 {
       background: fade(#0088c6, 70%);
     }
+
     .ant-row .demo-col-3,
     .code-box-demo .ant-row .demo-col-3 {
       color: @site-text-color-secondary;
       background: unset;
     }
+
     .ant-row .demo-col-5,
     .code-box-demo .ant-row .demo-col-5 {
       color: @site-text-color-secondary;
@@ -268,10 +280,12 @@
     .ds-dropdown-menu {
       [class^='ds-dataset-'] {
         background: @popover-background;
+
         .algolia-docsearch-suggestion {
           background: @popover-background;
         }
       }
+
       .ds-suggestion.ds-cursor {
         .algolia-docsearch-suggestion:not(.suggestion-layout-simple) {
           .algolia-docsearch-suggestion--content {
@@ -280,13 +294,16 @@
         }
       }
     }
+
     .algolia-docsearch-suggestion--category-header {
       color: rgba(255, 255, 255, 0.65);
       border-bottom: 1px solid @border-color-split;
     }
+
     .algolia-docsearch-suggestion--subcategory-column::before {
       background: @border-color-split;
     }
+
     .algolia-docsearch-suggestion--content {
       &::before {
         background: @border-color-split;
@@ -364,6 +381,7 @@
     &-img {
       background-color: rgba(255, 255, 255, 0.1);
     }
+
     &-search input {
       color: rgba(255, 255, 255, 0.65);
     }
diff --git a/site/theme/static/demo.less b/site/theme/static/demo.less
index 2e5256f70d..6e926b3c84 100644
--- a/site/theme/static/demo.less
+++ b/site/theme/static/demo.less
@@ -15,6 +15,7 @@
   border: 1px solid @site-border-color-split;
   border-radius: @border-radius-base;
   transition: all 0.2s;
+
   .code-box-title {
     &,
     a {
@@ -22,20 +23,24 @@
       background: @component-background;
     }
   }
+
   &,
   .code-box-demo {
     background-color: @component-background;
   }
+
   .markdown {
     pre {
       margin: 0.5em 0;
       padding: 6px 12px;
     }
+
     pre code {
       margin: 0;
       background: #f5f5f5;
     }
   }
+
   &:target {
     border: 1px solid @primary-color;
   }
@@ -100,6 +105,7 @@
     .anticon {
       color: @site-text-color-secondary;
       transition: all 0.3s;
+
       &:hover {
         color: @site-text-color;
       }
@@ -187,6 +193,7 @@
   .code-expand-icon-show {
     opacity: 0.55;
     pointer-events: auto;
+
     &:hover {
       opacity: 1;
     }
@@ -223,6 +230,7 @@
       padding: 0;
       background: @component-background;
     }
+
     &:not(:first-child) {
       border-top: 1px dashed @site-border-color-split;
     }
@@ -282,6 +290,7 @@
     &:hover {
       transform: scale(1.2);
     }
+
     &.anticon-check {
       color: @green-6 !important;
       font-weight: bold;
@@ -310,6 +319,7 @@
     overflow: hidden;
     border: 0;
     cursor: pointer;
+
     &:hover {
       opacity: 1;
     }
@@ -325,6 +335,7 @@
   pre {
     width: auto;
     margin: 0;
+
     code {
       background: @component-background;
       border: none;
diff --git a/site/theme/static/docsearch.less b/site/theme/static/docsearch.less
index 681e13aece..855627ecee 100644
--- a/site/theme/static/docsearch.less
+++ b/site/theme/static/docsearch.less
@@ -6,6 +6,7 @@
     [class^='ds-dataset-'] {
       background: @component-background;
       border: none;
+
       .algolia-docsearch-suggestion {
         background: @component-background;
       }
diff --git a/site/theme/static/footer.less b/site/theme/static/footer.less
index f1b8b8d776..bdbdc80cc5 100644
--- a/site/theme/static/footer.less
+++ b/site/theme/static/footer.less
@@ -16,6 +16,7 @@
   &-columns {
     justify-content: space-between;
   }
+
   &-item {
     html.rtl & {
       display: flex;
diff --git a/site/theme/static/highlight.less b/site/theme/static/highlight.less
index 4adb492c87..ecf49ee9ea 100644
--- a/site/theme/static/highlight.less
+++ b/site/theme/static/highlight.less
@@ -146,6 +146,7 @@ pre[class*='language-'] {
 .token.bold {
   font-weight: bold;
 }
+
 .token.italic {
   font-style: italic;
 }
diff --git a/site/theme/static/icon-pic-searcher.less b/site/theme/static/icon-pic-searcher.less
index 95c39c1df2..3da865c3a7 100644
--- a/site/theme/static/icon-pic-searcher.less
+++ b/site/theme/static/icon-pic-searcher.less
@@ -6,6 +6,7 @@
     color: @text-color-secondary;
     cursor: pointer;
     transition: all 0.3s;
+
     &:hover {
       color: @input-icon-hover-color;
     }
@@ -30,15 +31,19 @@
 .icon-pic-search-result {
   min-height: 50px;
   padding: 0 10px;
+
   > .result-tip {
     padding: 10px 0;
     color: @text-color-secondary;
   }
+
   > table {
     width: 100%;
+
     .col-icon {
       width: 80px;
       padding: 10px 0;
+
       > .anticon {
         font-size: 30px;
 
diff --git a/site/theme/static/icons.less b/site/theme/static/icons.less
index f5d647c703..5e78d4925e 100644
--- a/site/theme/static/icons.less
+++ b/site/theme/static/icons.less
@@ -3,6 +3,7 @@ ul.anticons-list {
   overflow: hidden;
   direction: ltr;
   list-style: none;
+
   li {
     position: relative;
     float: left;
@@ -18,10 +19,12 @@ ul.anticons-list {
     border-radius: 4px;
     cursor: pointer;
     transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
+
     .rtl & {
       margin: 3px 0;
       padding: 10px 0 0;
     }
+
     .anticon {
       margin: 12px 0 8px;
       font-size: 36px;
@@ -35,6 +38,7 @@ ul.anticons-list {
       white-space: nowrap;
       text-align: center;
       transform: scale(0.83);
+
       .ant-badge {
         transition: color 0.3s ease-in-out;
       }
@@ -43,9 +47,11 @@ ul.anticons-list {
     &:hover {
       color: #fff;
       background-color: @primary-color;
+
       .anticon {
         transform: scale(1.4);
       }
+
       .ant-badge {
         color: #fff;
       }
diff --git a/site/theme/static/markdown.less b/site/theme/static/markdown.less
index cb7014a609..a465668a93 100644
--- a/site/theme/static/markdown.less
+++ b/site/theme/static/markdown.less
@@ -57,12 +57,15 @@
 .markdown h3 {
   font-size: 18px;
 }
+
 .markdown h4 {
   font-size: 16px;
 }
+
 .markdown h5 {
   font-size: 14px;
 }
+
 .markdown h6 {
   font-size: 12px;
 }
@@ -78,6 +81,7 @@
 .markdown p,
 .markdown pre {
   margin: 1em 0;
+
   .ant-row-rtl & {
     direction: rtl;
     text-align: right;
@@ -95,6 +99,7 @@
     padding-right: 4px;
     padding-left: 0;
   }
+
   &:empty {
     display: none;
   }
@@ -176,6 +181,7 @@
 
 .markdown table td > a:not(:last-child) {
   margin-right: 0 !important;
+
   &::after {
     position: relative !important;
   }
@@ -288,6 +294,7 @@
 
     tbody tr {
       transition: all 0.3s;
+
       &:hover {
         background: rgba(60, 90, 100, 0.04);
       }
@@ -300,25 +307,31 @@
         font-weight: 600;
         white-space: nowrap;
       }
+
       &:nth-child(2) {
         width: 55%;
       }
+
       &:nth-child(3) {
         width: 22%;
         color: @magenta-7;
         font-size: max(@font-size-base - 1px, 12px);
       }
+
       &:nth-child(4) {
         width: 15%;
         font-size: max(@font-size-base - 1px, 12px);
       }
+
       &:nth-child(5) {
         width: 8%;
         font-size: max(@font-size-base - 1px, 12px);
       }
+
       &:nth-last-child(3):first-child {
         width: 38%;
       }
+
       &:nth-last-child(3):first-child ~ td:nth-last-child(2) {
         width: 70%;
       }
@@ -388,6 +401,7 @@
       transparent 95.83333333%
     );
   }
+
   .ant-row > div,
   .code-box-demo .ant-row > div {
     min-height: 30px;
@@ -397,13 +411,16 @@
     text-align: center;
     border-radius: 0;
   }
+
   .code-box-demo .ant-row > div:not(.gutter-row) {
     padding: 16px 0;
     background: @demo-grid-color;
+
     &:nth-child(2n + 1) {
       background: fade(@demo-grid-color, 75%);
     }
   }
+
   .ant-row .demo-col,
   .code-box-demo .ant-row .demo-col {
     margin-top: 0;
@@ -414,39 +431,48 @@
     text-align: center;
     border: none;
   }
+
   .ant-row .demo-col-1 {
     background: fade(@demo-grid-color, 75%);
   }
+
   .ant-row .demo-col-2,
   .code-box-demo .ant-row .demo-col-2 {
     background: fade(@demo-grid-color, 50%);
   }
+
   .ant-row .demo-col-3,
   .code-box-demo .ant-row .demo-col-3 {
     color: #999;
     background: rgba(255, 255, 255, 0.2);
   }
+
   .ant-row .demo-col-4,
   .code-box-demo .ant-row .demo-col-4 {
     background: fade(@demo-grid-color, 60%);
   }
+
   .ant-row .demo-col-5,
   .code-box-demo .ant-row .demo-col-5 {
     color: #999;
     background: rgba(255, 255, 255, 0.2);
   }
+
   .code-box-demo .height-100 {
     height: 100px;
     line-height: 100px;
   }
+
   .code-box-demo .height-50 {
     height: 50px;
     line-height: 50px;
   }
+
   .code-box-demo .height-120 {
     height: 120px;
     line-height: 120px;
   }
+
   .code-box-demo .height-80 {
     height: 80px;
     line-height: 80px;
@@ -464,19 +490,23 @@
 // For Changelog
 .markdown ul.ant-timeline {
   line-height: 2;
+
   li.ant-timeline-item {
     margin: 0;
     padding: 0 0 30px;
     list-style: none;
+
     .ant-timeline-item-content {
       position: relative;
       top: -14px;
       padding-left: 32px;
       font-size: 14px;
+
       > h2 {
         margin-top: 0;
         padding-top: 4px;
         direction: ltr;
+
         span {
           .ant-row-rtl & {
             float: right;
@@ -485,6 +515,7 @@
       }
     }
   }
+
   li.ant-timeline-item:first-child {
     margin-top: 40px;
   }
diff --git a/site/theme/static/motion.less b/site/theme/static/motion.less
index c90e1e0951..63275ec300 100644
--- a/site/theme/static/motion.less
+++ b/site/theme/static/motion.less
@@ -32,6 +32,7 @@
 .video-player {
   position: relative;
   max-width: 800px;
+
   &-right {
     float: right;
     width: 616px;
diff --git a/site/theme/static/preview-img.less b/site/theme/static/preview-img.less
index c7dd04b730..968eee920c 100644
--- a/site/theme/static/preview-img.less
+++ b/site/theme/static/preview-img.less
@@ -55,6 +55,7 @@
 .preview-image-wrapper video {
   display: block;
   width: 100%;
+
   + svg {
     position: absolute;
     top: 0;
@@ -110,6 +111,7 @@
   border-radius: @border-radius-base;
   cursor: pointer;
   transition: all 0.3s;
+
   &.no-padding {
     padding: 0;
     background: none;
@@ -137,13 +139,16 @@
   .ant-carousel {
     .slick-slider {
       padding-bottom: 24px;
+
       img {
         display: inline;
         max-width: 100%;
       }
     }
+
     .slick-dots {
       bottom: 4px;
+
       li button {
         background: #888;
       }
@@ -198,6 +203,7 @@
     text-align: center;
     border: 1px solid #e8e8e8;
     border-radius: 4px;
+
     &:last-child {
       margin-right: 0;
     }
diff --git a/site/theme/static/responsive.less b/site/theme/static/responsive.less
index 926141892a..3923cd68e5 100644
--- a/site/theme/static/responsive.less
+++ b/site/theme/static/responsive.less
@@ -20,6 +20,7 @@
       display: none;
     }
   }
+
   .code-boxes-col-2-1,
   .code-boxes-col-1-1 {
     float: none;
@@ -34,6 +35,7 @@
     width: 100%;
     margin: 0 !important;
   }
+
   .preview-image-box {
     width: 100%;
     margin: 10px 0;
@@ -74,6 +76,7 @@
     margin-left: 0;
     padding-right: 16px;
     padding-left: 16px;
+
     > .markdown > * {
       width: 100% !important;
     }
@@ -113,16 +116,20 @@
         margin: 80px auto 64px;
       }
     }
+
     .parallax-bg {
       display: none;
     }
   }
+
   .banner {
     display: block;
     height: 632px;
+
     &-bg-wrapper {
       display: none;
     }
+
     .img-wrapper,
     .text-wrapper {
       display: inline-block;
@@ -132,10 +139,12 @@
       margin: auto;
       text-align: center;
     }
+
     .img-wrapper {
       position: initial;
       margin-top: 20px;
       text-align: center;
+
       svg {
         width: 100%;
         max-width: 260px;
@@ -143,18 +152,22 @@
         margin: 0 auto;
       }
     }
+
     .text-wrapper {
       min-height: 200px;
       margin-top: 32px;
       padding: 0;
+
       h1 {
         display: none;
       }
+
       p {
         color: @home-text-color;
         font-size: 14px;
         line-height: 28px;
       }
+
       .banner-btns {
         display: block;
         min-width: 100%;
@@ -166,15 +179,19 @@
           font-size: 14px;
         }
       }
+
       .banner-promote {
         min-width: 100%;
         margin-top: 32px;
+
         .ant-divider {
           display: none;
         }
+
         a {
           font-size: 14px;
           white-space: nowrap;
+
           img {
             width: 20px;
           }
@@ -182,72 +199,92 @@
       }
     }
   }
+
   .page1 {
     min-height: 1300px;
+
     .ant-row {
       margin: 24px auto 64px;
+
       > div {
         margin-bottom: 48px;
       }
     }
   }
+
   .page2 {
     min-height: 840px;
     background: @body-background;
+
     &-content {
       box-shadow: none;
     }
+
     &-components {
       display: none;
     }
+
     &-product {
       min-height: auto;
       padding: 0 16px;
+
       .product-block {
         margin-bottom: 34px;
         padding-bottom: 35px;
         border-bottom: 1px solid @site-border-color-split;
+
         &:last-child {
           margin-bottom: 32px;
           border-bottom: none;
+
           .block-text-wrapper {
             height: auto;
           }
         }
+
         .block-image-wrapper {
           height: 88px;
+
           img {
             height: 100%;
           }
         }
+
         .block-text-wrapper {
           padding-bottom: 0;
           border-bottom: none;
+
           h4 {
             margin-bottom: 4px;
             font-size: 18px;
             line-height: 24px;
           }
+
           p {
             margin-bottom: 8px;
             font-size: 12px;
             line-height: 20px;
           }
+
           a {
             line-height: 20px;
           }
+
           .components-button-wrapper {
             margin-top: 16px;
             font-size: 12px;
+
             a {
               display: block;
             }
           }
+
           a.more-mobile-react,
           a.more-mobile-angular {
             margin-top: 0;
             color: @link-color;
           }
+
           a.more-mobile-react:hover,
           a.more-mobile-angular:hover {
             color: #40a9ff;
@@ -256,19 +293,23 @@
       }
     }
   }
+
   .page3 {
     min-height: 688px;
     background: url('https://gw.alipayobjects.com/zos/rmsportal/qICoJIqqQRMeRGhPHBBS.svg') no-repeat;
     background-size: cover;
+
     .ant-row {
       margin: 0 8px;
     }
+
     .page3-block {
       margin-bottom: 32px;
       padding: 24px;
       background: @body-background;
       border-radius: 4px;
       box-shadow: 0 8px 16px rgba(174, 185, 193, 0.3);
+
       &:nth-child(2) {
         .page3-img-wrapper img {
           display: block;
@@ -276,15 +317,19 @@
           margin: auto;
         }
       }
+
       p {
         font-size: 12px;
       }
+
       .page3-img-wrapper {
         width: 20%;
+
         img {
           width: 100%;
         }
       }
+
       .page3-text-wrapper {
         width: 80%;
         max-width: initial;
diff --git a/site/theme/static/rtl.less b/site/theme/static/rtl.less
index 57c00ce702..05a9cbb970 100644
--- a/site/theme/static/rtl.less
+++ b/site/theme/static/rtl.less
@@ -5,6 +5,7 @@
       left: 32px;
     }
   }
+
   .fixed-widgets {
     right: auto;
     left: 32px;
diff --git a/site/theme/static/toc.less b/site/theme/static/toc.less
index c4b6d4e8d2..801af77bc8 100644
--- a/site/theme/static/toc.less
+++ b/site/theme/static/toc.less
@@ -16,6 +16,7 @@ ul.toc > li {
   padding-left: 0;
   line-height: 1.5;
   list-style: none;
+
   &:not(:last-child) {
     margin-bottom: 4px;
   }
@@ -71,6 +72,7 @@ ul.toc > li {
   position: absolute;
   top: 8px;
   right: 20px;
+
   .ant-affix {
     z-index: 9;
     max-height: ~'calc(100vh - 16px)';
@@ -78,6 +80,7 @@ ul.toc > li {
     overflow-y: auto;
     background: #fff;
   }
+
   .ant-row-rtl & {
     right: auto;
     left: 20px;
@@ -88,9 +91,11 @@ ul.toc > li {
   position: absolute;
   right: 20px;
   bottom: 88px;
+
   .ant-affix {
     background: @body-background;
   }
+
   .ant-row-rtl & {
     right: auto;
     left: 20px;
diff --git a/site/theme/template/Content/ComponentOverview.less b/site/theme/template/Content/ComponentOverview.less
index 4d5c8b1162..37b06607e7 100644
--- a/site/theme/template/Content/ComponentOverview.less
+++ b/site/theme/template/Content/ComponentOverview.less
@@ -12,15 +12,18 @@
     color: @text-color;
     text-overflow: ellipsis;
   }
+
   &-img {
     display: flex;
     align-items: center;
     justify-content: center;
     height: 152px;
   }
+
   &-card {
     cursor: pointer;
     transition: all @animation-duration-base @ease-in-out;
+
     &:hover {
       box-shadow: @shadow-1-down;
     }
diff --git a/site/theme/template/Home/Banner/Logo.less b/site/theme/template/Home/Banner/Logo.less
index 64f785f47a..3640647ca2 100644
--- a/site/theme/template/Home/Banner/Logo.less
+++ b/site/theme/template/Home/Banner/Logo.less
@@ -20,6 +20,7 @@
     display: block;
     max-width: 100%;
   }
+
   .home-banner-normal {
     display: none;
   }
@@ -33,9 +34,11 @@
     .home-banner-mini {
       display: none;
     }
+
     .home-banner-normal {
       display: block;
     }
+
     .home-card-logo-icon {
       display: block;
     }
diff --git a/site/theme/template/Home/Banner/index.less b/site/theme/template/Home/Banner/index.less
index 253e0b5870..f68821dd56 100644
--- a/site/theme/template/Home/Banner/index.less
+++ b/site/theme/template/Home/Banner/index.less
@@ -48,6 +48,7 @@
         width: 18px;
         margin-right: 8px;
         vertical-align: text-bottom;
+
         .rtl & {
           margin-right: 0;
           margin-left: 8px;
diff --git a/site/theme/template/Home/index.less b/site/theme/template/Home/index.less
index 62d8715e79..4afe3f17f5 100644
--- a/site/theme/template/Home/index.less
+++ b/site/theme/template/Home/index.less
@@ -39,6 +39,7 @@
     font-size: 0.85em;
     opacity: 0.75;
     transition: all 0.2s;
+
     &-rtl {
       margin-right: 0.3em;
       margin-left: 0;
diff --git a/site/theme/template/Layout/Header/SearchBar.less b/site/theme/template/Layout/Header/SearchBar.less
index 9f00a32187..85dc40d253 100644
--- a/site/theme/template/Layout/Header/SearchBar.less
+++ b/site/theme/template/Layout/Header/SearchBar.less
@@ -24,6 +24,7 @@
 
   .keybinding {
     color: @search-icon-color;
+
     kbd {
       display: inline-block;
       width: 20px;
@@ -136,12 +137,15 @@
     border-radius: 0;
     box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
   }
+
   .ant-select-dropdown-menu {
     max-height: 200px;
   }
+
   .ant-select-dropdown-menu-item {
     border-radius: 0 !important;
   }
+
   .ant-component-decs {
     position: absolute;
     right: 16px;
diff --git a/site/theme/template/Resources/AffixTabs.less b/site/theme/template/Resources/AffixTabs.less
index 7523d2fe23..d5acd71927 100644
--- a/site/theme/template/Resources/AffixTabs.less
+++ b/site/theme/template/Resources/AffixTabs.less
@@ -25,6 +25,7 @@
 
     .ant-tabs-nav {
       margin: 0;
+
       &::before {
         border-bottom-color: transparent;
       }
diff --git a/site/theme/template/Resources/index.less b/site/theme/template/Resources/index.less
index ed8897d46c..93dee4f600 100644
--- a/site/theme/template/Resources/index.less
+++ b/site/theme/template/Resources/index.less
@@ -96,6 +96,7 @@
         font-size: 20px;
         line-height: 28px;
       }
+
       .resource-card-description {
         margin: 0 20px 20px 20px;
         color: #697b8c;

From 0313871c167c3c3965dcc958b299c0b35fbd64a3 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Wed, 13 Oct 2021 17:13:07 +0800
Subject: [PATCH 8/9] fix: Radio type cannot be override (#32463)

close #32459
---
 components/radio/__tests__/group.test.js | 84 +++++++++++++++---------
 components/radio/radio.tsx               |  6 +-
 2 files changed, 53 insertions(+), 37 deletions(-)

diff --git a/components/radio/__tests__/group.test.js b/components/radio/__tests__/group.test.js
index 9a9d2a81e2..6389238ea4 100644
--- a/components/radio/__tests__/group.test.js
+++ b/components/radio/__tests__/group.test.js
@@ -1,17 +1,15 @@
 import React from 'react';
 import { mount, render } from 'enzyme';
-import Radio from '../radio';
-import RadioGroup from '../group';
-import RadioButton from '../radioButton';
+import Radio from '..';
 
 describe('Radio Group', () => {
   function createRadioGroup(props) {
     return (
-      <RadioGroup {...props}>
+      <Radio.Group {...props}>
         <Radio value="A">A</Radio>
         <Radio value="B">B</Radio>
         <Radio value="C">C</Radio>
-      </RadioGroup>
+      </Radio.Group>
     );
   }
 
@@ -22,7 +20,7 @@ describe('Radio Group', () => {
       { label: 'C', value: 'C' },
     ];
 
-    return <RadioGroup {...props} options={options} />;
+    return <Radio.Group {...props} options={options} />;
   }
 
   it('responses hover events', () => {
@@ -30,9 +28,9 @@ describe('Radio Group', () => {
     const onMouseLeave = jest.fn();
 
     const wrapper = mount(
-      <RadioGroup onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
+      <Radio.Group onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
         <Radio />
-      </RadioGroup>,
+      </Radio.Group>,
     );
 
     wrapper.find('div').at(0).simulate('mouseenter');
@@ -63,7 +61,7 @@ describe('Radio Group', () => {
     const onChangeRadioGroup = jest.fn();
 
     const wrapper = mount(
-      <RadioGroup onChange={onChangeRadioGroup}>
+      <Radio.Group onChange={onChangeRadioGroup}>
         <Radio value="A" onChange={onChange}>
           A
         </Radio>
@@ -73,7 +71,7 @@ describe('Radio Group', () => {
         <Radio value="C" onChange={onChange}>
           C
         </Radio>
-      </RadioGroup>,
+      </Radio.Group>,
     );
     const radios = wrapper.find('input');
 
@@ -87,11 +85,11 @@ describe('Radio Group', () => {
     const onChange = jest.fn();
 
     const wrapper = mount(
-      <RadioGroup onChange={onChange}>
-        <RadioButton value="A">A</RadioButton>
-        <RadioButton value="B">B</RadioButton>
-        <RadioButton value="C">C</RadioButton>
-      </RadioGroup>,
+      <Radio.Group onChange={onChange}>
+        <Radio.Button value="A">A</Radio.Button>
+        <Radio.Button value="B">B</Radio.Button>
+        <Radio.Button value="C">C</Radio.Button>
+      </Radio.Group>,
     );
     const radios = wrapper.find('input');
 
@@ -104,7 +102,7 @@ describe('Radio Group', () => {
   it('should only trigger once when in group with options', () => {
     const onChange = jest.fn();
     const options = [{ label: 'Bamboo', value: 'Bamboo' }];
-    const wrapper = mount(<RadioGroup options={options} onChange={onChange} />);
+    const wrapper = mount(<Radio.Group options={options} onChange={onChange} />);
 
     wrapper.find('input').simulate('change');
     expect(onChange).toHaveBeenCalledTimes(1);
@@ -147,9 +145,7 @@ describe('Radio Group', () => {
       { label: 'Apple', value: 'Apple' },
       { label: 'Orange', value: 'Orange', style: { fontSize: 12 } },
     ];
-
-    const wrapper = render(<RadioGroup prefixCls="my-radio" options={options} />);
-
+    const wrapper = render(<Radio.Group prefixCls="my-radio" options={options} />);
     expect(wrapper).toMatchSnapshot();
   });
 
@@ -166,11 +162,46 @@ describe('Radio Group', () => {
     expect(radioGroupRef).toBe(wrapper.children().getDOMNode());
   });
 
+  it('should support data-* or aria-* props', () => {
+    const wrapper = mount(
+      createRadioGroup({
+        'data-radio-group-id': 'radio-group-id',
+        'aria-label': 'radio-group',
+      }),
+    );
+    expect(wrapper.getDOMNode().getAttribute('data-radio-group-id')).toBe('radio-group-id');
+    expect(wrapper.getDOMNode().getAttribute('aria-label')).toBe('radio-group');
+  });
+
+  it('Radio type should not be override', () => {
+    const onChange = jest.fn();
+    const wrapper = mount(
+      <Radio.Group onChange={onChange}>
+        <Radio value={1} type="1">
+          A
+        </Radio>
+        <Radio value={2} type="2">
+          B
+        </Radio>
+        <Radio value={3} type="3">
+          C
+        </Radio>
+        <Radio value={4} type="4">
+          D
+        </Radio>
+      </Radio.Group>,
+    );
+    const radios = wrapper.find('input');
+    radios.at(1).simulate('change');
+    expect(onChange).toHaveBeenCalled();
+    expect(radios.at(1).getDOMNode().type).toBe('radio');
+  });
+
   describe('value is null or undefined', () => {
     it('use `defaultValue` when `value` is undefined', () => {
       const options = [{ label: 'Bamboo', value: 'bamboo' }];
       const wrapper = mount(
-        <RadioGroup defaultValue="bamboo" value={undefined} options={options} />,
+        <Radio.Group defaultValue="bamboo" value={undefined} options={options} />,
       );
       expect(wrapper.find('.ant-radio-wrapper').at(0).hasClass('ant-radio-wrapper-checked')).toBe(
         true,
@@ -180,7 +211,7 @@ describe('Radio Group', () => {
     [undefined, null].forEach(newValue => {
       it(`should set value back when value change back to ${newValue}`, () => {
         const options = [{ label: 'Bamboo', value: 'bamboo' }];
-        const wrapper = mount(<RadioGroup value="bamboo" options={options} />);
+        const wrapper = mount(<Radio.Group value="bamboo" options={options} />);
         expect(wrapper.find('.ant-radio-wrapper').at(0).hasClass('ant-radio-wrapper-checked')).toBe(
           true,
         );
@@ -192,15 +223,4 @@ describe('Radio Group', () => {
       });
     });
   });
-
-  it('should support data-* or aria-* props', () => {
-    const wrapper = mount(
-      createRadioGroup({
-        'data-radio-group-id': 'radio-group-id',
-        'aria-label': 'radio-group',
-      }),
-    );
-    expect(wrapper.getDOMNode().getAttribute('data-radio-group-id')).toBe('radio-group-id');
-    expect(wrapper.getDOMNode().getAttribute('aria-label')).toBe('radio-group');
-  });
 });
diff --git a/components/radio/radio.tsx b/components/radio/radio.tsx
index da18857b1e..c2cf862333 100644
--- a/components/radio/radio.tsx
+++ b/components/radio/radio.tsx
@@ -49,7 +49,7 @@ const InternalRadio: React.ForwardRefRenderFunction<HTMLElement, RadioProps> = (
       onMouseEnter={props.onMouseEnter}
       onMouseLeave={props.onMouseLeave}
     >
-      <RcCheckbox {...radioProps} prefixCls={prefixCls} ref={mergedRef} />
+      <RcCheckbox {...radioProps} type="radio" prefixCls={prefixCls} ref={mergedRef} />
       {children !== undefined ? <span>{children}</span> : null}
     </label>
   );
@@ -59,8 +59,4 @@ const Radio = React.forwardRef<unknown, RadioProps>(InternalRadio);
 
 Radio.displayName = 'Radio';
 
-Radio.defaultProps = {
-  type: 'radio',
-};
-
 export default Radio;

From 8cafb114a7800ee54ed2bd0a6c2a1053c97fbc3b Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Wed, 13 Oct 2021 18:59:17 +0800
Subject: [PATCH 9/9] docs: react-infinite-scroller =>
 react-infinite-scroll-component (#32469)

* docs: react-infinite-scroller => react-infinite-scroll-component

close #32388

* update

* replace recommendataion

* update snapshot
---
 .../__tests__/__snapshots__/demo.test.js.snap | 112 +++++++-----
 components/list/demo/infinite-load.md         | 169 +++++++-----------
 .../list/demo/infinite-virtualized-load.md    |   2 -
 components/list/demo/loadmore.md              |   1 -
 docs/react/recommendation.en-US.md            |   2 +-
 docs/react/recommendation.zh-CN.md            |   2 +-
 package.json                                  |   2 +-
 7 files changed, 135 insertions(+), 155 deletions(-)

diff --git a/components/list/__tests__/__snapshots__/demo.test.js.snap b/components/list/__tests__/__snapshots__/demo.test.js.snap
index bd760dd2de..e6a4521deb 100644
--- a/components/list/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/list/__tests__/__snapshots__/demo.test.js.snap
@@ -1021,70 +1021,102 @@ Array [
 
 exports[`renders ./components/list/demo/infinite-load.md correctly 1`] = `
 <div
-  class="demo-infinite-container"
+  id="scrollableDiv"
+  style="height:400px;overflow:auto;padding:0 16px;border:1px solid rgba(140, 140, 140, 0.35)"
 >
-  <div>
+  <div
+    class="infinite-scroll-component__outerdiv"
+  >
     <div
-      class="ant-list ant-list-split"
+      class="infinite-scroll-component "
+      style="height:auto;overflow:auto;-webkit-overflow-scrolling:touch"
     >
       <div
-        class="ant-spin-nested-loading"
+        class="ant-list ant-list-split"
       >
         <div
-          class="ant-spin-container"
+          class="ant-spin-nested-loading"
         >
           <div
-            class="ant-list-empty-text"
+            class="ant-spin-container"
           >
             <div
-              class="ant-empty ant-empty-normal"
+              class="ant-list-empty-text"
             >
               <div
-                class="ant-empty-image"
+                class="ant-empty ant-empty-normal"
               >
-                <svg
-                  class="ant-empty-img-simple"
-                  height="41"
-                  viewBox="0 0 64 41"
-                  width="64"
-                  xmlns="http://www.w3.org/2000/svg"
+                <div
+                  class="ant-empty-image"
                 >
-                  <g
-                    fill="none"
-                    fill-rule="evenodd"
-                    transform="translate(0 1)"
+                  <svg
+                    class="ant-empty-img-simple"
+                    height="41"
+                    viewBox="0 0 64 41"
+                    width="64"
+                    xmlns="http://www.w3.org/2000/svg"
                   >
-                    <ellipse
-                      class="ant-empty-img-simple-ellipse"
-                      cx="32"
-                      cy="33"
-                      rx="32"
-                      ry="7"
-                    />
                     <g
-                      class="ant-empty-img-simple-g"
-                      fill-rule="nonzero"
+                      fill="none"
+                      fill-rule="evenodd"
+                      transform="translate(0 1)"
                     >
-                      <path
-                        d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
-                      />
-                      <path
-                        class="ant-empty-img-simple-path"
-                        d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
+                      <ellipse
+                        class="ant-empty-img-simple-ellipse"
+                        cx="32"
+                        cy="33"
+                        rx="32"
+                        ry="7"
                       />
+                      <g
+                        class="ant-empty-img-simple-g"
+                        fill-rule="nonzero"
+                      >
+                        <path
+                          d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
+                        />
+                        <path
+                          class="ant-empty-img-simple-path"
+                          d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
+                        />
+                      </g>
                     </g>
-                  </g>
-                </svg>
-              </div>
-              <div
-                class="ant-empty-description"
-              >
-                No Data
+                  </svg>
+                </div>
+                <div
+                  class="ant-empty-description"
+                >
+                  No Data
+                </div>
               </div>
             </div>
           </div>
         </div>
       </div>
+      <div
+        class="ant-skeleton ant-skeleton-with-avatar ant-skeleton-active"
+      >
+        <div
+          class="ant-skeleton-header"
+        >
+          <span
+            class="ant-skeleton-avatar ant-skeleton-avatar-lg ant-skeleton-avatar-circle"
+          />
+        </div>
+        <div
+          class="ant-skeleton-content"
+        >
+          <h3
+            class="ant-skeleton-title"
+            style="width:50%"
+          />
+          <ul
+            class="ant-skeleton-paragraph"
+          >
+            <li />
+          </ul>
+        </div>
+      </div>
     </div>
   </div>
 </div>
diff --git a/components/list/demo/infinite-load.md b/components/list/demo/infinite-load.md
index 550c5a79ff..c66e31f2f9 100644
--- a/components/list/demo/infinite-load.md
+++ b/components/list/demo/infinite-load.md
@@ -7,127 +7,78 @@ title:
 
 ## zh-CN
 
-结合 [react-infinite-scroller](https://github.com/CassetteRocks/react-infinite-scroller) 实现滚动自动加载列表。
+结合 [react-infinite-scroll-component](https://github.com/ankeetmaini/react-infinite-scroll-component) 实现滚动自动加载列表。
 
 ## en-US
 
-The example of infinite load with [react-infinite-scroller](https://github.com/CassetteRocks/react-infinite-scroller).
+The example of infinite load with [react-infinite-scroll-component](https://github.com/ankeetmaini/react-infinite-scroll-component).
 
 ```jsx
-import { List, message, Avatar, Spin } from 'antd';
-import reqwest from 'reqwest';
+import React, { useState, useEffect } from 'react';
+import { List, message, Avatar, Skeleton, Divider } from 'antd';
+import InfiniteScroll from 'react-infinite-scroll-component';
 
-import InfiniteScroll from 'react-infinite-scroller';
+const InfiniteListExample = () => {
+  const [loading, setLoading] = useState(false);
+  const [data, setData] = useState([]);
 
-const fakeDataUrl = 'https://randomuser.me/api/?results=5&inc=name,gender,email,nat&noinfo';
-
-class InfiniteListExample extends React.Component {
-  state = {
-    data: [],
-    loading: false,
-    hasMore: true,
-  };
-
-  componentDidMount() {
-    this.fetchData(res => {
-      this.setState({
-        data: res.results,
-      });
-    });
-  }
-
-  fetchData = callback => {
-    reqwest({
-      url: fakeDataUrl,
-      type: 'json',
-      method: 'get',
-      contentType: 'application/json',
-      success: res => {
-        callback(res);
-      },
-    });
-  };
-
-  handleInfiniteOnLoad = () => {
-    let { data } = this.state;
-    this.setState({
-      loading: true,
-    });
-    if (data.length > 14) {
-      message.warning('Infinite List loaded all');
-      this.setState({
-        hasMore: false,
-        loading: false,
-      });
+  const loadMoreData = () => {
+    if (loading) {
       return;
     }
-    this.fetchData(res => {
-      data = data.concat(res.results);
-      this.setState({
-        data,
-        loading: false,
+    setLoading(true);
+    fetch('https://randomuser.me/api/?results=10&inc=name,gender,email,nat&noinfo')
+      .then(res => res.json())
+      .then(body => {
+        setData([...data, ...body.results]);
+        setLoading(false);
+      })
+      .catch(() => {
+        setLoading(false);
       });
-    });
   };
 
-  render() {
-    return (
-      <div className="demo-infinite-container">
-        <InfiniteScroll
-          initialLoad={false}
-          pageStart={0}
-          loadMore={this.handleInfiniteOnLoad}
-          hasMore={!this.state.loading && this.state.hasMore}
-          useWindow={false}
-        >
-          <List
-            dataSource={this.state.data}
-            renderItem={item => (
-              <List.Item key={item.id}>
-                <List.Item.Meta
-                  avatar={
-                    <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
-                  }
-                  title={<a href="https://ant.design">{item.name.last}</a>}
-                  description={item.email}
-                />
-                <div>Content</div>
-              </List.Item>
-            )}
-          >
-            {this.state.loading && this.state.hasMore && (
-              <div className="demo-loading-container">
-                <Spin />
-              </div>
-            )}
-          </List>
-        </InfiniteScroll>
-      </div>
-    );
-  }
-}
+  useEffect(() => {
+    loadMoreData();
+  }, []);
+
+  return (
+    <div
+      id="scrollableDiv"
+      style={{
+        height: 400,
+        overflow: 'auto',
+        padding: '0 16px',
+        border: '1px solid rgba(140, 140, 140, 0.35)',
+      }}
+    >
+      <InfiniteScroll
+        dataLength={data.length}
+        next={loadMoreData}
+        hasMore={data.length < 50}
+        loader={<Skeleton avatar paragraph={{ rows: 1 }} active />}
+        endMessage={<Divider plain>It is all, nothing more 🤐</Divider>}
+        scrollableTarget="scrollableDiv"
+      >
+        <List
+          dataSource={data}
+          renderItem={item => (
+            <List.Item key={item.id}>
+              <List.Item.Meta
+                avatar={
+                  <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
+                }
+                title={<a href="https://ant.design">{item.name.last}</a>}
+                description={item.email}
+              />
+              <div>Content</div>
+            </List.Item>
+          )}
+        />
+      </InfiniteScroll>
+    </div>
+  );
+};
 
 ReactDOM.render(<InfiniteListExample />, mountNode);
 ```
-
-```css
-.demo-infinite-container {
-  height: 300px;
-  padding: 8px 24px;
-  overflow: auto;
-  border: 1px solid #e8e8e8;
-  border-radius: 4px;
-}
-.demo-loading-container {
-  position: absolute;
-  bottom: 40px;
-  width: 100%;
-  text-align: center;
-}
-```
-
-<style>
-  [data-theme="dark"] .demo-infinite-container {
-    border: 1px solid #303030;
-  }
-</style>
diff --git a/components/list/demo/infinite-virtualized-load.md b/components/list/demo/infinite-virtualized-load.md
index 6f6c4cc19f..893bcf630d 100644
--- a/components/list/demo/infinite-virtualized-load.md
+++ b/components/list/demo/infinite-virtualized-load.md
@@ -19,9 +19,7 @@ An example of infinite list & virtualized loading using [react-virtualized](http
 
 ```jsx
 import { List, message, Avatar, Spin } from 'antd';
-
 import reqwest from 'reqwest';
-
 import WindowScroller from 'react-virtualized/dist/commonjs/WindowScroller';
 import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';
 import VList from 'react-virtualized/dist/commonjs/List';
diff --git a/components/list/demo/loadmore.md b/components/list/demo/loadmore.md
index d363360345..d1b234cecc 100644
--- a/components/list/demo/loadmore.md
+++ b/components/list/demo/loadmore.md
@@ -15,7 +15,6 @@ Load more list with `loadMore` property.
 
 ```jsx
 import { List, Avatar, Button, Skeleton } from 'antd';
-
 import reqwest from 'reqwest';
 
 const count = 3;
diff --git a/docs/react/recommendation.en-US.md b/docs/react/recommendation.en-US.md
index 7198754179..107f7184de 100644
--- a/docs/react/recommendation.en-US.md
+++ b/docs/react/recommendation.en-US.md
@@ -26,7 +26,7 @@ title: Third-Party Libraries
 | i18n | [FormatJS](https://github.com/formatjs/formatjs) [react-i18next](https://react.i18next.com) |
 | Code highlight | [react-syntax-highlighter](https://github.com/conorhastings/react-syntax-highlighter) |
 | Markdown renderer | [react-markdown](https://remarkjs.github.io/react-markdown/) |
-| Infinite Scroll | [rc-virtual-list](https://github.com/react-component/virtual-list/) [react-virtualized](https://github.com/bvaughn/react-virtualized) [antd-table-infinity](https://github.com/Leonard-Li777/antd-table-infinity) |
+| Infinite Scroll | [rc-virtual-list](https://github.com/react-component/virtual-list/) [react-virtualized](https://github.com/bvaughn/react-virtualized) [react-infinite-scroll-component](https://github.com/ankeetmaini/react-infinite-scroll-component) |
 | Map | [react-google-maps](https://github.com/tomchentw/react-google-maps) [google-map-react](https://github.com/istarkov/google-map-react) [react-amap](https://github.com/ElemeFE/react-amap) |
 | Video | [react-player](https://github.com/CookPete/react-player) [video-react](https://github.com/video-react/video-react) [video.js](http://docs.videojs.com/tutorial-react.html) |
 | Context Menu | [react-contextmenu](https://github.com/vkbansal/react-contextmenu/) [react-contexify](https://github.com/fkhadra/react-contexify) |
diff --git a/docs/react/recommendation.zh-CN.md b/docs/react/recommendation.zh-CN.md
index 5a835b96c6..6f013b3d33 100644
--- a/docs/react/recommendation.zh-CN.md
+++ b/docs/react/recommendation.zh-CN.md
@@ -26,7 +26,7 @@ title: 社区精选组件
 | 应用国际化 | [FormatJS](https://github.com/formatjs/formatjs) [react-i18next](https://react.i18next.com) |
 | 代码高亮 | [react-syntax-highlighter](https://github.com/conorhastings/react-syntax-highlighter) |
 | Markdown 渲染 | [react-markdown](https://remarkjs.github.io/react-markdown/) |
-| 无限滚动 | [rc-virtual-list](https://github.com/react-component/virtual-list/) [react-virtualized](https://github.com/bvaughn/react-virtualized) [antd-table-infinity](https://github.com/Leonard-Li777/antd-table-infinity) |
+| 无限滚动 | [rc-virtual-list](https://github.com/react-component/virtual-list/) [react-virtualized](https://github.com/bvaughn/react-virtualized) [react-infinite-scroll-component](https://github.com/ankeetmaini/react-infinite-scroll-component) |
 | 地图 | [react-google-maps](https://github.com/tomchentw/react-google-maps) [google-map-react](https://github.com/istarkov/google-map-react) [react-amap 高德](https://github.com/ElemeFE/react-amap) |
 | 视频播放 | [react-player](https://github.com/CookPete/react-player) [video-react](https://github.com/video-react/video-react) [video.js](http://docs.videojs.com/tutorial-react.html) |
 | 右键菜单 | [react-contextmenu](https://github.com/vkbansal/react-contextmenu/) [react-contexify](https://github.com/fkhadra/react-contexify) |
diff --git a/package.json b/package.json
index 9e49653995..846fca369e 100644
--- a/package.json
+++ b/package.json
@@ -250,7 +250,7 @@
     "react-github-button": "^0.1.11",
     "react-helmet-async": "~1.1.2",
     "react-highlight-words": "^0.17.0",
-    "react-infinite-scroller": "^1.2.4",
+    "react-infinite-scroll-component": "^6.1.0",
     "react-intl": "^5.20.4",
     "react-resizable": "^3.0.1",
     "react-router-dom": "^5.0.1",