chore: support less4 #3436

.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"]
+}

components/alert/style/index.less

@@ -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/anchor/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/auto-complete/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/avatar/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/back-top/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/badge/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/breadcrumb/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/button/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 {

components/button/style/mixin.less

@@ -238,15 +238,15 @@
 }
 // round button
 .btn-round(@btnClassName: btn) {
-  .button-size(@btn-circle-size; 0 @btn-circle-size / 2; @font-size-base; @btn-circle-size);
+  .button-size(@btn-circle-size; 0 (@btn-circle-size / 2) ; @font-size-base; @btn-circle-size);
   &.@{btnClassName}-lg {
     .button-size(
-      @btn-circle-size-lg; 0 @btn-circle-size-lg / 2; @btn-font-size-lg; @btn-circle-size-lg
+      @btn-circle-size-lg; 0 (@btn-circle-size-lg / 2) ; @btn-font-size-lg; @btn-circle-size-lg
     );
   }
   &.@{btnClassName}-sm {
     .button-size(
-      @btn-circle-size-sm; 0 @btn-circle-size-sm / 2; @font-size-base; @btn-circle-size-sm
+      @btn-circle-size-sm; 0 (@btn-circle-size-sm / 2) ; @font-size-base; @btn-circle-size-sm
     );
   }
 }

components/calendar/style/index.less

@@ -4,7 +4,7 @@
 @full-calendar-prefix-cls: ~'@{ant-prefix}-fullcalendar';
 
 .@{full-calendar-prefix-cls} {
-  .reset-component;
+  .reset-component();
 
   border-top: @border-width-base @border-style-base @border-color-base;
   outline: none;

components/card/style/index.less

@@ -10,7 +10,7 @@
 @gradient-max: fade(@card-skeleton-bg, 40%);
 
 .@{card-prefix-cls} {
-  .reset-component;
+  .reset-component();
 
   position: relative;
   background: @card-background;
@@ -39,7 +39,7 @@
     background: @card-head-background;
     border-bottom: @border-width-base @border-style-base @border-color-split;
     border-radius: @card-radius @card-radius 0 0;
-    .clearfix;
+    .clearfix();
 
     &-wrapper {
       display: flex;
@@ -80,7 +80,7 @@
 
   &-body {
     padding: @card-padding-base;
-    .clearfix;
+    .clearfix();
   }
 
   &-contain-grid:not(&-loading) &-body {
@@ -132,7 +132,7 @@
     list-style: none;
     background: @card-actions-background;
     border-top: @border-width-base @border-style-base @border-color-split;
-    .clearfix;
+    .clearfix();
 
     & > li {
       float: left;
@@ -198,7 +198,7 @@
 
   &-meta {
     margin: -4px 0;
-    .clearfix;
+    .clearfix();
 
     &-avatar {
       float: left;

components/card/style/size.less

@@ -1,6 +1,6 @@
 @card-head-height-sm: 36px;
-@card-padding-base-sm: @card-padding-base / 2;
-@card-head-padding-sm: @card-head-padding / 2;
+@card-padding-base-sm: (@card-padding-base / 2);
+@card-head-padding-sm: (@card-head-padding / 2);
 @card-head-font-size-sm: @font-size-base;
 
 .@{card-prefix-cls}-small {

components/carousel/style/index.less

@@ -2,7 +2,7 @@
 @import '../../style/mixins/index';
 
 .@{ant-prefix}-carousel {
-  .reset-component;
+  .reset-component();
 
   .slick-slider {
     position: relative;

components/cascader/style/index.less

@@ -5,7 +5,7 @@
 @cascader-prefix-cls: ~'@{ant-prefix}-cascader';
 
 .@{cascader-prefix-cls} {
-  .reset-component;
+  .reset-component();
 
   &-input.@{ant-prefix}-input {
     // Keep it static for https://github.com/ant-design/ant-design/issues/16738
@@ -24,7 +24,7 @@
   }
 
   &-picker {
-    .reset-component;
+    .reset-component();
 
     position: relative;
     display: inline-block;
@@ -48,7 +48,7 @@
     }
 
     &:focus .@{cascader-prefix-cls}-input {
-      .active;
+      .active();
     }
 
     &-show-search&-focused {
@@ -114,7 +114,7 @@
 
   // https://github.com/ant-design/ant-design/pull/12407#issuecomment-424657810
   &-picker-label:hover + &-input {
-    .hover;
+    .hover();
   }
 
   &-picker-small &-picker-clear,

components/checkbox/style/mixin.less

@@ -4,7 +4,7 @@
   @checkbox-inner-prefix-cls: ~'@{checkbox-prefix-cls}-inner';
   // 一般状态
   .@{checkbox-prefix-cls} {
-    .reset-component;
+    .reset-component();
 
     position: relative;
     top: -0.09em;
@@ -146,7 +146,7 @@
   }
 
   .@{checkbox-prefix-cls}-wrapper {
-    .reset-component;
+    .reset-component();
 
     display: inline-block;
     line-height: unset;
@@ -165,7 +165,7 @@
   }
 
   .@{checkbox-prefix-cls}-group {
-    .reset-component;
+    .reset-component();
 
     display: inline-block;
     &-item {

components/collapse/style/index.less

@@ -4,7 +4,7 @@
 @collapse-prefix-cls: ~'@{ant-prefix}-collapse';
 
 .@{collapse-prefix-cls} {
-  .reset-component;
+  .reset-component();
 
   background-color: @collapse-header-bg;
   border: @border-width-base @border-style-base @border-color-base;

components/color-picker/style/index.less

@@ -75,15 +75,15 @@
     height: @input-height-base;
     cursor: inherit;
     &:hover {
-      .hover;
+      .hover();
     }
   }
   &-icon {
     .iconfont-mixin();
     position: absolute;
     top: 50%;
     right: @control-padding-horizontal - 4px;
-    margin-top: -@font-size-sm / 2;
+    margin-top: (-@font-size-sm / 2);
     color: @disabled-color;
     font-size: @font-size-sm;
     line-height: 1;
@@ -99,7 +99,7 @@
       height: @input-height-lg;
     }
     .@{color-picker-prefix-cls}-icon {
-      top: @input-height-lg / 2;
+      top: (@input-height-lg / 2);
     }
   }
 
@@ -114,7 +114,7 @@
     }
     .@{color-picker-prefix-cls}-icon {
       right: @control-padding-horizontal - 2px;
-      top: @input-height-sm / 2;
+      top: (@input-height-sm / 2);
       font-size: 10px;
     }
   }