chore: support less4 (#3449)

Author: tangjinzhou

.stylelintrc.json

@@ -0,0 +1,16 @@
+{
+  "extends": [
+    "stylelint-config-standard",
+    "stylelint-config-rational-order",
+    "stylelint-config-prettier"
+  ],
+  "plugins": ["stylelint-order", "stylelint-declaration-block-no-ignored-properties"],
+  "rules": {
+    "comment-empty-line-before": null,
+    "function-name-case": ["lower", { "ignoreFunctions": ["/colorPalette/"] }],
+    "no-invalid-double-slash-comments": null,
+    "no-descending-specificity": null,
+    "declaration-empty-line-before": null
+  },
+  "ignoreFiles": ["components/style/color/{bezierEasing,colorPalette,tinyColor}.less"]
+}

antdv-demo

@@ -9,7 +9,7 @@
 @alert-close-hover-color: @icon-color-hover;
 
 .@{alert-prefix-cls} {
-  .reset-component;
+  .reset-component();
 
   position: relative;
   padding: 8px 15px 8px 37px;
@@ -26,7 +26,7 @@
 
   &-icon {
     position: absolute;
-    top: 8px + @font-size-base * @line-height-base / 2 - @font-size-base / 2;
+    top: 8px + (@font-size-base * @line-height-base / 2) - (@font-size-base / 2);
     left: 16px;
   }
 

components/alert/style/index.less

@@ -4,7 +4,7 @@
 @anchor-border-width: 2px;
 
 .@{ant-prefix}-anchor {
-  .reset-component;
+  .reset-component();
 
   position: relative;
   padding-left: @anchor-border-width;

components/anchor/style/index.less

@@ -7,7 +7,7 @@
 @autocomplete-prefix-cls: ~'@{select-prefix-cls}-auto-complete';
 
 .@{autocomplete-prefix-cls} {
-  .reset-component;
+  .reset-component();
 
   // https://github.com/ant-design/ant-design/issues/22302
   .@{select-prefix-cls}-clear {

components/auto-complete/style/index.less

@@ -4,7 +4,7 @@
 @avatar-prefix-cls: ~'@{ant-prefix}-avatar';
 
 .@{avatar-prefix-cls} {
-  .reset-component;
+  .reset-component();
 
   position: relative;
   display: inline-block;

components/avatar/style/index.less

@@ -4,7 +4,7 @@
 @backtop-prefix-cls: ~'@{ant-prefix}-back-top';
 
 .@{backtop-prefix-cls} {
-  .reset-component;
+  .reset-component();
 
   position: fixed;
   right: 100px;

components/back-top/style/index.less

@@ -5,7 +5,7 @@
 @number-prefix-cls: ~'@{ant-prefix}-scroll-number';
 
 .@{badge-prefix-cls} {
-  .reset-component;
+  .reset-component();
 
   position: relative;
   display: inline-block;
@@ -23,7 +23,7 @@
     white-space: nowrap;
     text-align: center;
     background: @highlight-color;
-    border-radius: @badge-height / 2;
+    border-radius: (@badge-height / 2);
     box-shadow: 0 0 0 1px @shadow-color-inverse;
     a,
     a:hover {

components/badge/style/index.less

@@ -4,7 +4,7 @@
 @breadcrumb-prefix-cls: ~'@{ant-prefix}-breadcrumb';
 
 .@{breadcrumb-prefix-cls} {
-  .reset-component;
+  .reset-component();
 
   color: @breadcrumb-base-color;
   font-size: @breadcrumb-font-size;

components/breadcrumb/style/index.less

@@ -21,8 +21,8 @@
   // It is a render problem of chrome, which is only happened in the codesandbox demo
   // 0.001px solution works and I don't why
   line-height: @line-height-base;
-  .btn;
-  .btn-default;
+  .btn();
+  .btn-default();
 
   // Make sure that the target of Button's click event always be `button`
   // Ref: https://github.com/ant-design/ant-design/issues/7034
@@ -34,7 +34,7 @@
   }
 
   &-primary {
-    .btn-primary;
+    .btn-primary();
 
     .@{btn-prefix-cls}-group &:not(:first-child):not(:last-child) {
       border-right-color: @btn-group-border;
@@ -64,19 +64,19 @@
   }
 
   &-ghost {
-    .btn-ghost;
+    .btn-ghost();
   }
 
   &-dashed {
-    .btn-dashed;
+    .btn-dashed();
   }
 
   &-danger {
-    .btn-danger;
+    .btn-danger();
   }
 
   &-link {
-    .btn-link;
+    .btn-link();
   }
 
   &-icon-only {