build: add stylelint (#1982)

.stylelintrc

@@ -0,0 +1,14 @@
+{
+  "extends": [
+    "stylelint-config-standard",
+    "stylelint-config-rational-order"
+  ],
+  "rules": {
+    "order/properties-order": [],
+    "at-rule-no-unknown": null,
+    "number-leading-zero": null,
+    "no-descending-specificity": null,
+    "declaration-colon-newline-after": null,
+    "font-family-no-missing-generic-family-keyword": null
+  }
+}

package.json

@@ -31,6 +31,10 @@
     "*.{ts,js}": [
       "eslint",
       "git add"
+    ],
+    "*.{css,less}": [
+      "stylelint",
+      "git add"
     ]
   },
   "homepage": "https://github.com/youzan/vant-weapp#readme",
@@ -63,6 +67,10 @@
     "postcss-loader": "^3.0.0",
     "progress-bar-webpack-plugin": "^1.11.0",
     "style-loader": "^1.0.0",
+    "stylelint": "^10.1.0",
+    "stylelint-config-rational-order": "^0.1.2",
+    "stylelint-config-standard": "^18.3.0",
+    "stylelint-order": "^3.0.1",
     "typescript": "^3.5.3",
     "vue": "2.6.10",
     "vue-loader": "^15.7.1",

packages/action-sheet/index.less

@@ -38,13 +38,13 @@
 
   &__subname {
     margin-left: 5px;
-    font-size: 12px;
     color: @gray-darker;
+    font-size: 12px;
   }
 
   &__header {
-    font-size: 16px;
     font-weight: 500;
+    font-size: 16px;
     line-height: 44px;
     text-align: center;
   }
@@ -54,8 +54,8 @@
     top: 0;
     right: 0;
     padding: 0 15px;
+    color: @gray-dark;
     font-size: 18px !important;
     line-height: inherit !important;
-    color: @gray-dark;
   }
 }

packages/area/index.less

@@ -0,0 +1 @@
+// empty

packages/button/index.less

@@ -3,13 +3,13 @@
 .van-button {
   position: relative;
   display: inline-block;
+  box-sizing: border-box;
   height: 44px;
   padding: 0;
   font-size: 16px;
   line-height: 42px;
   text-align: center;
   vertical-align: middle;
-  box-sizing: border-box;
   border-radius: @button-border-radius;
   -webkit-appearance: none;
   -webkit-text-size-adjust: 100%;
@@ -24,9 +24,9 @@
     border: inherit;
     border-color: @black;
     border-radius: inherit; /* inherit parent's border radius */
-    content: ' ';
-    opacity: 0;
     transform: translate(-50%, -50%);
+    opacity: 0;
+    content: ' ';
   }
 
   // reset weapp default border
@@ -104,8 +104,8 @@
   }
 
   &--small {
-    height: 30px;
     min-width: 60px;
+    height: 30px;
     padding: 0 8px;
     font-size: 12px;
     line-height: 28px;
@@ -146,8 +146,8 @@
   }
 
   &__loading-text {
-    margin-left: 5px;
     display: inline-block;
+    margin-left: 5px;
     vertical-align: middle;
   }
 
@@ -164,12 +164,12 @@
   }
 
   &--hairline {
-    border-width: 0;
     padding-top: 1px; // add 1px padding for text vertical align middle
+    border-width: 0;
 
     &::after {
-      border-width: 1px;
       border-color: inherit;
+      border-width: 1px;
       border-radius: @button-border-radius * 2;
     }
 

packages/card/index.less

@@ -2,11 +2,11 @@
 
 .van-card {
   position: relative;
+  box-sizing: border-box;
   padding: 5px 15px;
-  font-size: 12px;
   color: @text-color;
+  font-size: 12px;
   background-color: @background-color-light;
-  box-sizing: border-box;
 
   &__header {
     display: flex;
@@ -19,10 +19,10 @@
 
   &__thumb {
     position: relative;
+    flex: none;
     width: 90px;
     height: 90px;
     margin-right: 10px;
-    flex: none;
 
     &:empty {
       display: none;
@@ -36,8 +36,8 @@
 
   &__content {
     position: relative;
-    min-width: 0; /* hack for flex box ellipsis */
     flex: 1;
+    min-width: 0; /* hack for flex box ellipsis */
   }
 
   &__title,
@@ -51,8 +51,8 @@
   }
 
   &__desc {
-    line-height: 20px;
     color: @gray-darker;
+    line-height: 20px;
   }
 
   &__bottom {
@@ -61,15 +61,15 @@
 
   &__price {
     display: inline-block;
-    font-weight: bold;
     color: @red;
+    font-weight: bold;
   }
 
   &__origin-price {
     display: inline-block;
     margin-left: 5px;
-    font-size: 10px;
     color: @gray-darker;
+    font-size: 10px;
     text-decoration: line-through;
   }
 
@@ -84,8 +84,8 @@
   }
 
   &__footer {
+    flex: none;
     width: 100%;
     text-align: right;
-    flex: none;
   }
 }

packages/cell-group/index.less

@@ -2,9 +2,9 @@
 
 .van-cell-group {
   &__title {
-    font-size: 14px;
     padding: 15px 15px 5px;
     color: @gray-dark;
+    font-size: 14px;
     line-height: 16px;
   }
 }

packages/cell/index.less

@@ -4,13 +4,13 @@
 .van-cell {
   position: relative;
   display: flex;
+  box-sizing: border-box;
   width: 100%;
   padding: 10px 15px;
+  color: @text-color;
   font-size: 14px;
   line-height: 24px;
-  color: @text-color;
   background-color: @white;
-  box-sizing: border-box;
 
   &::after {
     .hairline-bottom(@border-color, 15px);
@@ -26,9 +26,9 @@
 
   &__label {
     margin-top: 3px;
+    color: @gray-dark;
     font-size: 12px;
     line-height: 18px;
-    color: @gray-dark;
   }
 
   &__value {
@@ -50,9 +50,9 @@
   &__left-icon-wrap,
   &__right-icon-wrap {
     display: flex;
+    align-items: center;
     height: 24px;
     font-size: 16px;
-    align-items: center;
   }
 
   &__left-icon-wrap {
@@ -83,8 +83,8 @@
     &::before {
       position: absolute;
       left: 7px;
-      font-size: 14px;
       color: @red;
+      font-size: 14px;
       content: '*';
     }
   }

packages/checkbox-group/index.less

@@ -0,0 +1 @@
+// empty

packages/checkbox/index.less

@@ -16,13 +16,13 @@
 
   &__icon {
     display: block;
+    box-sizing: border-box;
     width: @checkbox-size;
     height: @checkbox-size;
-    font-size: 14px;
     color: transparent;
+    font-size: 14px;
     text-align: center;
     border: 1px solid @checkbox-border-color;
-    box-sizing: border-box;
     transition: @checkbox-transition-duration;
 
     &--round {

packages/collapse-item/index.less

@@ -35,9 +35,9 @@
 
   &__content {
     padding: @collapse-item-content-padding;
+    color: @collapse-item-content-text-color;
     font-size: @collapse-item-content-font-size;
     line-height: @collapse-item-content-line-height;
-    color: @collapse-item-content-text-color;
     background-color: @collapse-item-content-background-color;
   }
 }

packages/common/index.less

@@ -1,8 +1,8 @@
-/**	
- * Entry of basic styles	
- */	
+/**
+ * Entry of basic styles
+ */
 
-@import "./style/var.less";	
-@import "./style/ellipsis.less";	
-@import "./style/clearfix.less";	
+@import "./style/var.less";
+@import "./style/ellipsis.less";
+@import "./style/clearfix.less";
 @import "./style/hairline.less";

packages/common/style/mixins/clearfix.less

@@ -1,7 +1,7 @@
 .clearfix() {
   &::after {
-    content: '';
     display: table;
     clear: both;
+    content: '';
   }
 }

packages/common/style/mixins/ellipsis.less

@@ -1,8 +1,9 @@
 .multi-ellipsis(@lines) {
+  display: -webkit-box;
   overflow: hidden;
   text-overflow: ellipsis;
-  display: -webkit-box;
   -webkit-line-clamp: @lines;
+
   /* autoprefixer: ignore next */
   -webkit-box-orient: vertical;
 }

packages/common/style/mixins/hairline.less

@@ -1,27 +1,29 @@
 .hairline-common() {
-  content: ' ';
   position: absolute;
-  pointer-events: none;
   box-sizing: border-box;
   transform-origin: center; /* cover wechat button:after default transforn-origin */
+  content: ' ';
+  pointer-events: none;
 }
 
 .hairline(@border-color: #eee) {
   .hairline-common();
+
   top: -50%;
-  left: -50%;
   right: -50%;
   bottom: -50%;
-  transform: scale(0.5);
+  left: -50%;
   border: 0 solid @border-color;
+  transform: scale(0.5);
 }
 
 .hairline-bottom(@border-color: #eee, @left: 0) {
   .hairline-common();
+
   top: auto;
-  left: @left;
   right: 0;
   bottom: 0;
-  transform: scaleY(0.5);
+  left: @left;
   border-bottom: 1px solid @border-color;
+  transform: scaleY(0.5);
 }

packages/datetime-picker/index.less

@@ -0,0 +1 @@
+// empty

packages/dialog/index.less

@@ -60,12 +60,12 @@
   }
 
   &-bounce-enter {
-    opacity: 0;
     transform: translate3d(-50%, -50%, 0) scale(0.7);
+    opacity: 0;
   }
 
   &-bounce-leave-active {
-    opacity: 0;
     transform: translate3d(-50%, -50%, 0) scale(0.9);
+    opacity: 0;
   }
 }