Enhance stylelint rules, fix propTypes error of TagSelect

.stylelintrc.json

@@ -1,9 +1,13 @@
 {
-  "extends": ["stylelint-config-standard", "stylelint-config-prettier"],
+  "extends": [
+    "stylelint-config-standard",
+    "stylelint-config-css-modules",
+    "stylelint-config-rational-order",
+    "stylelint-config-prettier"
+  ],
+  "plugins": ["stylelint-order", "stylelint-declaration-block-no-ignored-properties"],
   "rules": {
-    "declaration-empty-line-before": null,
     "no-descending-specificity": null,
-    "selector-pseudo-class-no-unknown": null,
-    "selector-pseudo-element-colon-notation": null
+    "plugin/declaration-block-no-ignored-properties": true
   }
 }

package.json

@@ -10,10 +10,10 @@
     "build": "umi build",
     "site": "npm run presite && cross-env APP_TYPE=site npm run build && firebase deploy && npm run docker:push",
     "analyze": "cross-env ANALYZE=1 umi build",
-    "lint:style": "stylelint \"src/**/*.less\" --syntax less",
+    "lint:style": "stylelint 'src/**/*.less' --syntax less",
     "lint:prettier": "check-prettier lint",
     "lint": "eslint --ext .js src mock tests && npm run lint:style && npm run lint:prettier",
-    "lint:fix": "eslint --fix --ext .js src mock tests && npm run lint:style",
+    "lint:fix": "eslint --fix --ext .js src mock tests && stylelint --fix 'src/**/*.less' --syntax less",
     "lint-staged": "lint-staged",
     "lint-staged:js": "eslint --ext .js",
     "tslint": "npm run tslint:fix",
@@ -90,8 +90,12 @@
     "prettier": "1.16.3",
     "slash2": "^2.0.0",
     "stylelint": "^9.10.1",
+    "stylelint-config-css-modules": "^1.3.0",
     "stylelint-config-prettier": "^4.0.0",
+    "stylelint-config-rational-order": "^0.0.4",
     "stylelint-config-standard": "^18.2.0",
+    "stylelint-declaration-block-no-ignored-properties": "^1.1.0",
+    "stylelint-order": "^2.0.0",
     "tslint": "^5.12.1",
     "tslint-config-prettier": "^1.17.0",
     "tslint-react": "^3.6.0",

src/components/ActiveChart/index.less

@@ -12,15 +12,15 @@
 }
 .activeChartLegend {
   position: relative;
-  font-size: 0;
-  margin-top: 8px;
   height: 20px;
+  margin-top: 8px;
+  font-size: 0;
   line-height: 20px;
   span {
     display: inline-block;
+    width: 33.33%;
     font-size: 12px;
     text-align: center;
-    width: 33.33%;
   }
   span:first-child {
     text-align: left;
@@ -31,9 +31,9 @@
 }
 .dashedLine {
   position: relative;
-  height: 1px;
   top: -70px;
   left: -3px;
+  height: 1px;
 
   .line {
     position: absolute;

src/components/ArticleListContent/index.less

@@ -2,25 +2,25 @@
 
 .listContent {
   .description {
-    line-height: 22px;
     max-width: 720px;
+    line-height: 22px;
   }
   .extra {
-    color: @text-color-secondary;
     margin-top: 16px;
+    color: @text-color-secondary;
     line-height: 22px;
     & > :global(.ant-avatar) {
-      vertical-align: top;
-      margin-right: 8px;
-      width: 20px;
-      height: 20px;
       position: relative;
       top: 1px;
+      width: 20px;
+      height: 20px;
+      margin-right: 8px;
+      vertical-align: top;
     }
     & > em {
+      margin-left: 16px;
       color: @disabled-color;
       font-style: normal;
-      margin-left: 16px;
     }
   }
 }
@@ -30,8 +30,8 @@
     .extra {
       & > em {
         display: block;
-        margin-left: 0;
         margin-top: 8px;
+        margin-left: 0;
       }
     }
   }

src/components/AvatarList/index.less

@@ -11,10 +11,10 @@
 
 .avatarItem {
   display: inline-block;
-  font-size: @font-size-base;
-  margin-left: -8px;
   width: @avatar-size-base;
   height: @avatar-size-base;
+  margin-left: -8px;
+  font-size: @font-size-base;
   :global {
     .ant-avatar {
       border: 1px solid #fff;

src/components/Charts/ChartCard/index.less

@@ -4,8 +4,8 @@
   position: relative;
   .chartTop {
     position: relative;
-    overflow: hidden;
     width: 100%;
+    overflow: hidden;
   }
   .chartTopMargin {
     margin-bottom: 12px;
@@ -26,45 +26,45 @@
     }
   }
   .meta {
+    height: 22px;
     color: @text-color-secondary;
     font-size: @font-size-base;
     line-height: 22px;
-    height: 22px;
   }
   .action {
-    cursor: pointer;
     position: absolute;
     top: 4px;
     right: 0;
     line-height: 1;
+    cursor: pointer;
   }
   .total {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    word-break: break-all;
-    white-space: nowrap;
-    color: @heading-color;
+    height: 38px;
     margin-top: 4px;
     margin-bottom: 0;
+    overflow: hidden;
+    color: @heading-color;
     font-size: 30px;
     line-height: 38px;
-    height: 38px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    word-break: break-all;
   }
   .content {
-    margin-bottom: 12px;
     position: relative;
     width: 100%;
+    margin-bottom: 12px;
   }
   .contentFixed {
     position: absolute;
-    left: 0;
     bottom: 0;
+    left: 0;
     width: 100%;
   }
   .footer {
-    border-top: 1px solid @border-color-split;
-    padding-top: 9px;
     margin-top: 8px;
+    padding-top: 9px;
+    border-top: 1px solid @border-color-split;
     & > * {
       position: relative;
     }

src/components/Charts/Field/index.less

@@ -1,17 +1,17 @@
 @import '~antd/lib/style/themes/default.less';
 
 .field {
-  white-space: nowrap;
+  margin: 0;
   overflow: hidden;
+  white-space: nowrap;
   text-overflow: ellipsis;
-  margin: 0;
   .label,
   .number {
     font-size: @font-size-base;
     line-height: 22px;
   }
   .number {
-    color: @heading-color;
     margin-left: 8px;
+    color: @heading-color;
   }
 }

src/components/Charts/MiniProgress/index.less

@@ -1,31 +1,31 @@
 @import '~antd/lib/style/themes/default.less';
 
 .miniProgress {
-  padding: 5px 0;
   position: relative;
   width: 100%;
+  padding: 5px 0;
   .progressWrap {
-    background-color: @background-color-base;
     position: relative;
+    background-color: @background-color-base;
   }
   .progress {
-    transition: all 0.4s cubic-bezier(0.08, 0.82, 0.17, 1) 0s;
-    border-radius: 1px 0 0 1px;
-    background-color: @primary-color;
     width: 0;
     height: 100%;
+    background-color: @primary-color;
+    border-radius: 1px 0 0 1px;
+    transition: all 0.4s cubic-bezier(0.08, 0.82, 0.17, 1) 0s;
   }
   .target {
     position: absolute;
     top: 0;
     bottom: 0;
     span {
-      border-radius: 100px;
       position: absolute;
       top: 0;
       left: 0;
-      height: 4px;
       width: 2px;
+      height: 4px;
+      border-radius: 100px;
     }
     span:last-child {
       top: auto;

src/components/Charts/Pie/index.less

@@ -10,38 +10,38 @@
   }
   .legend {
     position: absolute;
+    top: 50%;
     right: 0;
     min-width: 200px;
-    top: 50%;
-    transform: translateY(-50%);
     margin: 0 20px;
-    list-style: none;
     padding: 0;
+    list-style: none;
+    transform: translateY(-50%);
     li {
-      cursor: pointer;
-      margin-bottom: 16px;
       height: 22px;
+      margin-bottom: 16px;
       line-height: 22px;
+      cursor: pointer;
       &:last-child {
         margin-bottom: 0;
       }
     }
   }
   .dot {
-    border-radius: 8px;
-    display: inline-block;
-    margin-right: 8px;
     position: relative;
     top: -1px;
-    height: 8px;
+    display: inline-block;
     width: 8px;
+    height: 8px;
+    margin-right: 8px;
+    border-radius: 8px;
   }
   .line {
-    background-color: @border-color-split;
     display: inline-block;
-    margin-right: 8px;
     width: 1px;
     height: 16px;
+    margin-right: 8px;
+    background-color: @border-color-split;
   }
   .legendTitle {
     color: @text-color;
@@ -58,24 +58,24 @@
   }
   .total {
     position: absolute;
-    left: 50%;
     top: 50%;
-    text-align: center;
+    left: 50%;
     max-height: 62px;
+    text-align: center;
     transform: translate(-50%, -50%);
     & > h4 {
-      color: @text-color-secondary;
-      font-size: 14px;
-      line-height: 22px;
       height: 22px;
       margin-bottom: 8px;
+      color: @text-color-secondary;
       font-weight: normal;
+      font-size: 14px;
+      line-height: 22px;
     }
     & > p {
-      color: @heading-color;
       display: block;
-      font-size: 1.2em;
       height: 32px;
+      color: @heading-color;
+      font-size: 1.2em;
       line-height: 32px;
       white-space: nowrap;
     }

src/components/Charts/Radar/index.less

@@ -5,42 +5,42 @@
     margin-top: 16px;
     .legendItem {
       position: relative;
-      text-align: center;
-      cursor: pointer;
       color: @text-color-secondary;
       line-height: 22px;
+      text-align: center;
+      cursor: pointer;
       p {
         margin: 0;
       }
       h6 {
-        color: @heading-color;
+        margin-top: 4px;
+        margin-bottom: 0;
         padding-left: 16px;
+        color: @heading-color;
         font-size: 24px;
         line-height: 32px;
-        margin-top: 4px;
-        margin-bottom: 0;
       }
-      &:after {
-        background-color: @border-color-split;
+      &::after {
         position: absolute;
         top: 8px;
         right: 0;
-        height: 40px;
         width: 1px;
+        height: 40px;
+        background-color: @border-color-split;
         content: '';
       }
     }
-    > :last-child .legendItem:after {
+    > :last-child .legendItem::after {
       display: none;
     }
     .dot {
-      border-radius: 6px;
-      display: inline-block;
-      margin-right: 6px;
       position: relative;
       top: -1px;
-      height: 6px;
+      display: inline-block;
       width: 6px;
+      height: 6px;
+      margin-right: 6px;
+      border-radius: 6px;
     }
   }
 }