Enhance stylelint rules (ant-design#14803)

* rename .stylelintrc to .stylelintrc.json for explicit file type * add new npm script lint-fix:style * fix pseudo-element with double colon * function name should be lower except ignored functions * support stylelint declaration-block-no-ignored-properties rule * support sorted CSS properties order for readability and consistency * autofix order of all styles by lint-fix:style script * remove double slash comments after selector * replace .stylelintignore with ignoreFiles in .stylelintrc.json
smwhr · Feb 15, 2019 · 6936599 · 6936599
1 parent 80e6204
commit 6936599
Show file tree

Hide file tree

Showing 111 changed files with 2,260 additions and 2,276 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -8,12 +8,6 @@
       "options": {
         "parser": "json"
       }
-    },
-    {
-      "files": ".stylelintrc",
-      "options": {
-        "parser": "json"
-      }
     }
   ]
 }
diff --git a/.stylelintignore b/.stylelintignore
diff --git a/.stylelintrc b/.stylelintrc
diff --git a/.stylelintrc.json b/.stylelintrc.json
@@ -0,0 +1,17 @@
+{
+  "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,
+    "declaration-empty-line-before": null,
+    "function-name-case": ["lower", { "ignoreFunctions": ["/colorPalette/"] }],
+    "no-invalid-double-slash-comments": null,
+    "no-descending-specificity": null,
+    "plugin/declaration-block-no-ignored-properties": true
+  },
+  "ignoreFiles": ["components/style/color/{bezierEasing,colorPalette,tinyColor}.less"]
+}
diff --git a/components/alert/style/index.less b/components/alert/style/index.less
@@ -23,56 +23,56 @@
   }
 
   &-icon {
+    position: absolute;
     top: 8px + @font-size-base * @line-height-base / 2 - @font-size-base / 2;
     left: 16px;
-    position: absolute;
   }
 
   &-description {
+    display: none;
     font-size: @font-size-base;
     line-height: 22px;
-    display: none;
   }
 
   &-success {
-    border: @border-width-base @border-style-base @alert-success-border-color;
     background-color: @alert-success-bg-color;
+    border: @border-width-base @border-style-base @alert-success-border-color;
     .@{alert-prefix-cls}-icon {
       color: @alert-success-icon-color;
     }
   }
 
   &-info {
-    border: @border-width-base @border-style-base @alert-info-border-color;
     background-color: @alert-info-bg-color;
+    border: @border-width-base @border-style-base @alert-info-border-color;
     .@{alert-prefix-cls}-icon {
       color: @alert-info-icon-color;
     }
   }
 
   &-warning {
-    border: @border-width-base @border-style-base @alert-warning-border-color;
     background-color: @alert-warning-bg-color;
+    border: @border-width-base @border-style-base @alert-warning-border-color;
     .@{alert-prefix-cls}-icon {
       color: @alert-warning-icon-color;
     }
   }
 
   &-error {
-    border: @border-width-base @border-style-base @alert-error-border-color;
     background-color: @alert-error-bg-color;
+    border: @border-width-base @border-style-base @alert-error-border-color;
     .@{alert-prefix-cls}-icon {
       color: @alert-error-icon-color;
     }
   }
 
   &-close-icon {
-    font-size: @font-size-sm;
     position: absolute;
-    right: 16px;
     top: 8px;
-    line-height: 22px;
+    right: 16px;
     overflow: hidden;
+    font-size: @font-size-sm;
+    line-height: 22px;
     cursor: pointer;
 
     .@{iconfont-css-prefix}-close {
@@ -90,11 +90,11 @@
   }
 
   &-with-description {
-    padding: 15px 15px 15px 64px;
     position: relative;
-    border-radius: @border-radius-base;
+    padding: 15px 15px 15px 64px;
     color: @alert-text-color;
     line-height: @line-height-base;
+    border-radius: @border-radius-base;
   }
 
   &-with-description&-no-icon {
@@ -112,15 +112,15 @@
     position: absolute;
     top: 16px;
     right: 16px;
-    cursor: pointer;
     font-size: @font-size-base;
+    cursor: pointer;
   }
 
   &-with-description &-message {
-    font-size: @font-size-lg;
-    color: @alert-message-color;
     display: block;
     margin-bottom: 4px;
+    color: @alert-message-color;
+    font-size: @font-size-lg;
   }
 
   &-with-description &-description {
@@ -132,8 +132,8 @@
     margin: 0;
     padding-top: 0;
     padding-bottom: 0;
-    transition: all 0.3s @ease-in-out-circ;
     transform-origin: 50% 0;
+    transition: all 0.3s @ease-in-out-circ;
   }
 
   &-slide-up-leave {
@@ -142,34 +142,34 @@
   }
 
   &-banner {
-    border-radius: 0;
-    border: 0;
     margin-bottom: 0;
+    border: 0;
+    border-radius: 0;
   }
 }
 
 @keyframes antAlertSlideUpIn {
   0% {
-    opacity: 0;
-    transform-origin: 0% 0%;
     transform: scaleY(0);
+    transform-origin: 0% 0%;
+    opacity: 0;
   }
   100% {
-    opacity: 1;
-    transform-origin: 0% 0%;
     transform: scaleY(1);
+    transform-origin: 0% 0%;
+    opacity: 1;
   }
 }
 
 @keyframes antAlertSlideUpOut {
   0% {
-    opacity: 1;
-    transform-origin: 0% 0%;
     transform: scaleY(1);
+    transform-origin: 0% 0%;
+    opacity: 1;
   }
   100% {
-    opacity: 0;
-    transform-origin: 0% 0%;
     transform: scaleY(0);
+    transform-origin: 0% 0%;
+    opacity: 0;
   }
 }
diff --git a/components/anchor/style/index.less b/components/anchor/style/index.less
@@ -9,37 +9,37 @@
   padding-left: @anchor-border-width;
 
   &-wrapper {
-    background-color: @component-background;
-    overflow: auto;
-    padding-left: 4px;
     margin-left: -4px;
+    padding-left: 4px;
+    overflow: auto;
+    background-color: @component-background;
   }
 
   &-ink {
     position: absolute;
-    height: 100%;
-    left: 0;
     top: 0;
-    &:before {
-      content: ' ';
+    left: 0;
+    height: 100%;
+    &::before {
       position: relative;
+      display: block;
       width: @anchor-border-width;
       height: 100%;
-      display: block;
-      background-color: @border-color-split;
       margin: 0 auto;
+      background-color: @border-color-split;
+      content: ' ';
     }
     &-ball {
-      display: none;
       position: absolute;
+      left: 50%;
+      display: none;
       width: 8px;
       height: 8px;
-      border-radius: 8px;
-      border: 2px solid @primary-color;
       background-color: @component-background;
-      left: 50%;
-      transition: top 0.3s ease-in-out;
+      border: 2px solid @primary-color;
+      border-radius: 8px;
       transform: translateX(-50%);
+      transition: top 0.3s ease-in-out;
       &.visible {
         display: inline-block;
       }
@@ -55,14 +55,14 @@
     line-height: 1.143;
 
     &-title {
-      display: block;
       position: relative;
-      transition: all 0.3s;
+      display: block;
+      margin-bottom: 6px;
+      overflow: hidden;
       color: @text-color;
       white-space: nowrap;
-      overflow: hidden;
       text-overflow: ellipsis;
-      margin-bottom: 6px;
+      transition: all 0.3s;
 
       &:only-child {
         margin-bottom: 0;

diff --git a/components/auto-complete/style/index.less b/components/auto-complete/style/index.less
@@ -15,14 +15,14 @@
         border: 0;
         box-shadow: none;
         &__rendered {
-          margin-left: 0;
-          margin-right: 0;
           height: 100%;
+          margin-right: 0;
+          margin-left: 0;
           line-height: @input-height-base;
         }
         &__placeholder {
-          margin-left: (@input-padding-horizontal-base + 1px);
           margin-right: (@input-padding-horizontal-base + 1px);
+          margin-left: (@input-padding-horizontal-base + 1px);
         }
 
         &--single {
@@ -44,10 +44,10 @@
     }
 
     .@{input-prefix-cls} {
+      height: @input-height-base;
+      line-height: @line-height-base;
       background: transparent;
       border-width: @border-width-base;
-      line-height: @line-height-base;
-      height: @input-height-base;
       &:focus,
       &:hover {
         .hover;
@@ -63,9 +63,9 @@
         line-height: @input-height-lg;
       }
       .@{input-prefix-cls} {
+        height: @input-height-lg;
         padding-top: @input-padding-vertical-lg;
         padding-bottom: @input-padding-vertical-lg;
-        height: @input-height-lg;
       }
     }
 
@@ -74,9 +74,9 @@
         line-height: @input-height-sm;
       }
       .@{input-prefix-cls} {
+        height: @input-height-sm;
         padding-top: @input-padding-vertical-sm;
         padding-bottom: @input-padding-vertical-sm;
-        height: @input-height-sm;
       }
     }
   }

diff --git a/components/avatar/style/index.less b/components/avatar/style/index.less
@@ -5,14 +5,14 @@
 
 .@{avatar-prefix-cls} {
   .reset-component;
+  position: relative;
   display: inline-block;
-  text-align: center;
-  background: @avatar-bg;
+  overflow: hidden;
   color: @avatar-color;
   white-space: nowrap;
-  position: relative;
-  overflow: hidden;
+  text-align: center;
   vertical-align: middle;
+  background: @avatar-bg;
 
   &-image {
     background: transparent;
@@ -33,9 +33,9 @@
   }
 
   & > img {
+    display: block;
     width: 100%;
     height: 100%;
-    display: block;
   }
 }
 

diff --git a/components/back-top/style/index.less b/components/back-top/style/index.less
@@ -5,23 +5,23 @@
 
 .@{backtop-prefix-cls} {
   .reset-component;
-  z-index: @zindex-back-top;
   position: fixed;
   right: 100px;
   bottom: 50px;
-  height: 40px;
+  z-index: @zindex-back-top;
   width: 40px;
+  height: 40px;
   cursor: pointer;
 
   &-content {
-    height: 40px;
     width: 40px;
-    border-radius: 20px;
-    background-color: @back-top-bg;
+    height: 40px;
+    overflow: hidden;
     color: @back-top-color;
     text-align: center;
+    background-color: @back-top-bg;
+    border-radius: 20px;
     transition: all 0.3s @ease-in-out;
-    overflow: hidden;
 
     &:hover {
       background-color: @back-top-hover-bg;
@@ -30,9 +30,9 @@
   }
 
   &-icon {
-    margin: 12px auto;
     width: 14px;
     height: 16px;
+    margin: 12px auto;
     background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAoCAYAAACWwljjAAAABGdBTUEAALGPC/xhBQAAAbtJREFUWAntmMtKw0AUhhMvS5cuxILgQlRUpIggIoKIIoigG1eC+AA+jo+i6FIXBfeuXIgoeKVeitVWJX5HWhhDksnUpp3FDPyZk3Nm5nycmZKkXhAEOXSA3lG7muTeRzmfy6HneUvIhnYkQK+Q9NhAA0Opg0vBEhjBKHiyb8iGMyQMOYuK41BcBSypAL+MYXSKjtFAW7EAGEO3qN4uMQbbAkXiSfRQJ1H6a+yhlkKRcAoVFYiweYNjtCVQJJpBz2GCiPt7fBOZQpFgDpUikse5HgnkM4Fi4QX0Fpc5wf9EbLqpUCy4jMoJSXWhFwbMNgWKhVbRhy5jirhs9fy/oFhgHVVTJEs7RLZ8sSEoJm6iz7SZDMbJ+/OKERQTttCXQRLToRUmrKWCYuA2+jbN0MB4OQobYShfdTCgn/sL1K36M7TLrN3n+758aPy2rrpR6+/od5E8tf/A1uLS9aId5T7J3CNYihkQ4D9PiMdMC7mp4rjB9kjFjZp8BlnVHJBuO1yFXIV0FdDF3RlyFdJVQBdv5AxVdIsq8apiZ2PyYO1EVykesGfZEESsCkweyR8MUW+V8uJ1gkYipmpdP1pm2aJVPEGzAAAAAElFTkSuQmCC)
       ~'100%/100%' no-repeat;
   }