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;
-  padding: 5px 15px;
-  font-size: 12px;
-  color: @text-color;
-  background-color: @background-color-light;
   box-sizing: border-box;
+  padding: 5px 15px;
+  color: @text-color;
+  font-size: 12px;
+  background-color: @background-color-light;
 
   &__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/var.less";
-@import "./style/ellipsis.less";	
+@import "./style/ellipsis.less";
-@import "./style/clearfix.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;
   }
 }

packages/field/index.less

@@ -18,17 +18,17 @@
   &__input {
     position: relative;
     display: block;
+    box-sizing: border-box;
     width: 100%;
     height: 24px;
     min-height: 24px;
-    padding: 0;
     margin: 0;
-    line-height: inherit;
+    padding: 0;
     color: @text-color;
+    line-height: inherit;
     text-align: left;
     background-color: transparent;
     border: 0;
-    box-sizing: border-box;
     resize: none;
 
     &--textarea {
@@ -70,14 +70,14 @@
 
   &__icon-root {
     display: flex;
-    min-height: 24px;
     align-items: center;
+    min-height: 24px;
   }
 
   &__clear-root,
   &__icon-container {
-    padding: 0 10px;
     margin-right: -10px;
+    padding: 0 10px;
     line-height: inherit;
     vertical-align: middle;
   }
@@ -109,8 +109,8 @@
   }
 
   &__error-message {
-    font-size: 12px;
     color: @red;
+    font-size: 12px;
     text-align: left;
 
     &--center {

packages/goods-action-icon/index.less

@@ -6,12 +6,12 @@
 
   &__content {
     display: flex;
-    height: 100%;
-    font-size: 10px;
-    line-height: 1;
-    color: @gray-darker;
     flex-direction: column;
     justify-content: center;
+    height: 100%;
+    color: @gray-darker;
+    font-size: 10px;
+    line-height: 1;
   }
 
   &__icon {

packages/info/index.less

@@ -4,19 +4,19 @@
   position: absolute;
   top: -@info-size / 2;
   right: 0;
+  box-sizing: border-box;
   min-width: @info-size;
   padding: @info-padding;
-  font-family: @info-font-family;
-  font-size: @info-font-size;
-  font-weight: @info-font-weight;
-  line-height: @info-size - @info-border-width * 2;
   color: @info-color;
-  text-align: center;
+  font-weight: @info-font-weight;
+  font-size: @info-font-size;
+  font-family: @info-font-family;
+  line-height: @info-size - @info-border-width * 2;
   white-space: nowrap;
+  text-align: center;
   background-color: @info-background-color;
   border: @info-border-width solid @white;
   border-radius: @info-size;
   transform: translateX(50%);
-  box-sizing: border-box;
   transform-origin: 100%;
 }

packages/loading/index.less

@@ -1,19 +1,19 @@
 @import '../common/style/var.less';
 
 .van-loading {
-  z-index: 0;
-  line-height: 0;
   position: relative;
+  z-index: 0;
   display: inline-block;
+  line-height: 0;
   vertical-align: middle;
 
   &__spinner {
-    z-index: -1;
-    width: 100%;
-    height: 100%;
     position: relative;
+    z-index: -1;
     display: inline-block;
     box-sizing: border-box;
+    width: 100%;
+    height: 100%;
     animation: van-rotate 0.8s linear infinite;
 
     &--spinner {
@@ -22,35 +22,35 @@
 
     &--circular {
       border: 1px solid;
-      border-radius: 100%;
       border-color: transparent;
-      border-top-color: currentColor
+      border-top-color: currentColor;
+      border-radius: 100%;
     }
   }
 
   &__dot {
+    position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
-    position: absolute;
 
     &::before {
+      display: block;
       width: 2px;
       height: 25%;
-      content: ' ';
-      display: block;
       margin: 0 auto;
-      border-radius: 40%;
       background-color: currentColor;
+      border-radius: 40%;
+      content: ' ';
     }
   }
 }
 
 .generate(@n, @i: 1) when (@i =< @n) {
   .van-loading__dot:nth-of-type(@{i}) {
-    opacity: 1 - (0.75 / 12) * (@i - 1);
     transform: rotate(@i * 30deg);
+    opacity: 1 - (0.75 / 12) * (@i - 1);
   }
   .generate(@n, (@i + 1));
 }

packages/nav-bar/index.less

@@ -10,8 +10,8 @@
 
   &__text {
     display: inline-block;
-    padding: 0 15px;
     margin: 0 -15px;
+    padding: 0 15px;
     color: @blue;
     vertical-align: middle;
 
@@ -25,8 +25,8 @@
     vertical-align: middle;
 
     + .van-nav-bar__text {
-      padding-left: 25px;
       margin-left: -20px;
+      padding-left: 25px;
     }
   }
 
@@ -40,8 +40,8 @@
   &__title {
     max-width: 60%;
     margin: 0 auto;
-    font-size: 16px;
     font-weight: 500;
+    font-size: 16px;
   }
 
   &__left,

packages/notice-bar/index.less

@@ -1,10 +1,10 @@
 .van-notice-bar {
   display: flex;
+  align-items: center;
   height: 40px;
   padding: 0 15px;
   font-size: 14px;
   line-height: 24px;
-  align-items: center;
 
   &--withicon {
     position: relative;
@@ -29,9 +29,9 @@
 
   &__left-icon {
     display: flex;
+    align-items: center;
     margin-right: 4px;
     vertical-align: middle;
-    align-items: center;
   }
 
   &__right-icon {
@@ -43,9 +43,9 @@
 
   &__wrap {
     position: relative;
+    flex: 1;
     height: 24px;
     overflow: hidden;
-    flex: 1;
   }
 
   &__content {

packages/notify/index.less

@@ -3,13 +3,13 @@
 .van-notify {
   position: fixed;
   top: 0;
+  box-sizing: border-box;
   width: 100%;
   padding: @notify-padding;
   font-size: @notify-font-size;
   line-height: @notify-line-height;
   text-align: center;
   word-break: break-all;
-  box-sizing: border-box;
 
   &__safe-top {
     height: @nav-bar-height;

packages/picker-column/index.less

@@ -2,16 +2,16 @@
 
 .van-picker-column {
   overflow: hidden;
-  font-size: 16px;
   color: @gray-dark;
+  font-size: 16px;
   text-align: center;
 
   &__item {
     padding: 0 5px;
 
     &--selected {
-      font-weight: 500;
       color: @text-color;
+      font-weight: 500;
     }
 
     &--disabled {

packages/picker/index.less

@@ -9,16 +9,16 @@
 
   &__toolbar {
     display: flex;
+    justify-content: space-between;
     height: 44px;
     line-height: 44px;
-    justify-content: space-between;
   }
 
   &__cancel,
   &__confirm {
     padding: 0 15px;
-    font-size: 14px;
     color: @blue;
+    font-size: 14px;
 
     &--hover {
       background-color: @active-color;
@@ -27,8 +27,8 @@
 
   &__title {
     max-width: 50%;
-    font-size: 16px;
     font-weight: 500;
+    font-size: 16px;
     text-align: center;
   }
 
@@ -50,9 +50,9 @@
     left: 0;
     z-index: 4;
     display: flex;
-    background-color: rgba(255, 255, 255, 0.9);
     align-items: center;
     justify-content: center;
+    background-color: rgba(255, 255, 255, 0.9);
   }
 
   &__loading .van-loading,
@@ -62,7 +62,7 @@
     left: 0;
     z-index: 1;
     width: 100%;
-    pointer-events: none;
     transform: translateY(-50%);
+    pointer-events: none;
   }
 }

packages/popup/index.less

@@ -4,13 +4,13 @@
   position: fixed;
   top: 50%;
   left: 50%;
+  box-sizing: border-box;
   max-height: 100%;
   overflow-y: auto;
   background-color: @white;
-  box-sizing: border-box;
+  transition-timing-function: ease;
   animation: ease both;
   -webkit-overflow-scrolling: touch;
-  transition-timing-function: ease;
 
   &--center {
     transform: translate3d(-50%, -50%, 0);
@@ -95,8 +95,8 @@
 
 .van-scale-enter,
 .van-scale-leave-to {
-  opacity: 0;
   transform: translate3d(-50%, -50%, 0) scale(0.7);
+  opacity: 0;
 }
 
 .van-fade-enter-active,

packages/progress/index.less

@@ -17,6 +17,7 @@
     position: absolute;
     top: 50%;
     right: 0;
+    box-sizing: border-box;
     min-width: 2em;
     padding: 0 5px;
     font-size: 10px;
@@ -26,6 +27,5 @@
     background-color: @gray-light;
     border-radius: 1em;
     transform: translateY(-50%);
-    box-sizing: border-box;
   }
 }

packages/radio-group/index.less

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

packages/radio/index.less

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

packages/row/index.less

@@ -1,7 +1,7 @@
 .van-row {
   &::after {
-    content: "";
     display: table;
     clear: both;
+    content: "";
   }
 }

packages/search/index.less

@@ -2,16 +2,16 @@
 
 .van-search {
   display: flex;
-  padding: 10px 16px;
   align-items: center;
   box-sizing: border-box;
+  padding: 10px 16px;
 
   &__content {
     display: flex;
+    flex: 1;
     padding-left: 10px;
     background-color: @search-background-color;
     border-radius: 2px;
-    flex: 1;
 
     &--round {
       border-radius: 17px;
@@ -20,9 +20,9 @@
 
   &__label {
     padding: 0 5px;
+    color: @text-color;
     font-size: 14px;
     line-height: 34px;
-    color: @text-color;
   }
 
   &__field {
@@ -39,9 +39,9 @@
 
   &__action {
     padding: 0 10px;
+    color: @text-color;
     font-size: 14px;
     line-height: 34px;
-    color: @text-color;
 
     &--hover {
       background-color: @active-color;

packages/sidebar-item/index.less

@@ -2,15 +2,15 @@
 
 .van-sidebar-item {
   display: block;
+  box-sizing: border-box;
   padding: 20px 12px 20px 9px;
   overflow: hidden;
+  color: @gray-darker;
   font-size: 14px;
   line-height: 1.4;
-  color: @gray-darker;
   word-break: break-all;
   background-color: @background-color;
   border-left: 3px solid transparent;
-  box-sizing: border-box;
   user-select: none;
 
   &--hover {
@@ -22,8 +22,8 @@
   }
 
   &--active {
-    font-weight: bold;
     color: @text-color;
+    font-weight: bold;
     border-color: @red;
 
     &::after {

packages/slider/index.less

@@ -2,20 +2,20 @@
 
 .van-slider {
   position: relative;
-  border-radius: 999px;
   background-color: @gray-light;
+  border-radius: 999px;
 
   &__bar {
     position: relative;
-    border-radius: inherit;
     background-color: @blue;
+    border-radius: inherit;
   }
 
   &__button {
     width: 20px;
     height: 20px;
-    border-radius: 50%;
     background-color: @white;
+    border-radius: 50%;
     box-shadow: 0 1px 2px rgba(0, 0, 0, .5);
 
     &-wrapper {
@@ -23,15 +23,15 @@
       top: 50%;
       right: 0;
       transform: translate3d(50%, -50%, 0);
-  
+
       /* use pseudo element to expand touch area */
       &::after {
-        content: '';
         position: absolute;
-        width: 200%;
-        height: 200%;
         top: -50%;
         left: -50%;
+        width: 200%;
+        height: 200%;
+        content: '';
       }
     }
   }

packages/stepper/index.less

@@ -7,14 +7,14 @@
   &__plus {
     position: relative;
     display: inline-block;
+    box-sizing: border-box;
     width: 28px;
     height: 28px;
-    padding: 5px;
     margin: 1px;
+    padding: 5px;
     vertical-align: middle;
     background-color: @stepper-background-color;
     border: 0;
-    box-sizing: border-box;
 
     &::before {
       width: 9px;
@@ -70,19 +70,19 @@
 
   &__input {
     display: inline-block;
+    box-sizing: content-box;
     width: 30px;
     height: 26px;
-    padding: 1px;
     margin: 1px;
-    font-size: 14px;
+    padding: 1px;
     color: @text-color;
+    font-size: 14px;
     text-align: center;
     vertical-align: middle;
     background-color: @stepper-background-color;
     border: 0;
     border-width: 1px 0;
     border-radius: 0;
-    box-sizing: content-box;
     -webkit-appearance: none;
 
     &--disabled {

packages/steps/index.less

@@ -26,8 +26,8 @@
 .van-step {
   position: relative;
   flex: 1;
-  font-size: 14px;
   color: @gray-dark;
+  font-size: 14px;
 
   &--finish {
     color: @text-color;

packages/submit-bar/index.less

@@ -10,9 +10,9 @@
 
   &__tip {
     padding: @submit-bar-tip-padding;
+    color: @submit-bar-tip-color;
     font-size: @submit-bar-tip-font-size;
     line-height: @submit-bar-tip-line-height;
-    color: @submit-bar-tip-color;
     background-color: @submit-bar-tip-background-color;
 
     &:empty {
@@ -34,11 +34,11 @@
 
   &__bar {
     display: flex;
+    align-items: center;
+    justify-content: flex-end;
     height: @submit-bar-height;
     font-size: @submit-bar-text-font-size;
     background-color: @submit-bar-background-color;
-    align-items: center;
-    justify-content: flex-end;
 
     &--safe {
       padding-bottom: @safe-area-inset-bottom;
@@ -46,16 +46,16 @@
   }
 
   &__text {
-    padding-right: 12px;
-    font-weight: 500;
-    color: @submit-bar-text-color;
     flex: 1;
+    padding-right: 12px;
+    color: @submit-bar-text-color;
+    font-weight: 500;
     text-align: right;
   }
 
   &__price {
-    font-size: @submit-bar-price-font-size;
     color: @submit-bar-price-color;
+    font-size: @submit-bar-price-font-size;
   }
 
   &__currency {

packages/switch/index.less

@@ -1,33 +1,33 @@
 @import '../common/style/var.less';
 
 .van-switch {
-  display: inline-block;
   position: relative;
+  display: inline-block;
+  box-sizing: content-box;
   width: @switch-width;
   height: @switch-height;
+  background-color: @switch-background-color;
   border: @switch-border;
   border-radius: @switch-node-size;
-  box-sizing: content-box;
-  background-color: @switch-background-color;
   transition: background-color @switch-transition-duration;
 
   &__node {
+    position: absolute;
     top: 0;
     left: 0;
-    position: absolute;
+    z-index: @switch-node-z-index;
-    border-radius: 100%;
     width: @switch-node-size;
     height: @switch-node-size;
-    z-index: @switch-node-z-index;
-    transition: @switch-transition-duration;
-    box-shadow: @switch-node-box-shadow;
     background-color: @switch-node-background-color;
+    border-radius: 100%;
+    box-shadow: @switch-node-box-shadow;
+    transition: @switch-transition-duration;
   }
 
   &__loading {
+    position: absolute !important;
     top: 25%;
     left: 25%;
-    position: absolute !important;
   }
 
   &--on {

packages/tab/index.less

@@ -7,7 +7,7 @@
   }
 
   &--inactive {
-    height: 0px;
+    height: 0;
     overflow: visible;
   }
 }

packages/tabbar-item/index.less

@@ -5,37 +5,37 @@
 }
 
 .van-tabbar-item {
-  color: @gray-darker;
-  height: 100%;
   display: flex;
-  line-height: 1;
-  font-size: 12px;
-  align-items: center;
   flex-direction: column;
+  align-items: center;
   justify-content: center;
+  height: 100%;
+  color: @gray-darker;
+  font-size: 12px;
+  line-height: 1;
 
   &__icon {
-    font-size: 18px;
-    margin-bottom: 5px;
     position: relative;
+    margin-bottom: 5px;
+    font-size: 18px;
 
     &--dot {
       &::after {
+        position: absolute;
         top: 0;
         right: -8px;
         width: 8px;
         height: 8px;
-        content: ' ';
-        position: absolute;
-        border-radius: 100%;
         background-color: @red;
+        border-radius: 100%;
+        content: ' ';
       }
     }
 
     image {
+      display: block;
       width: 30px;
       height: 18px;
-      display: block;
     }
   }
 

packages/tabs/index.less

@@ -49,8 +49,8 @@
       height: @tabs-card-height;
 
       .van-tab {
-        line-height: @tabs-card-height;
         color: @red;
+        line-height: @tabs-card-height;
         border-right: 1px solid @red;
 
         &:last-child {
@@ -84,8 +84,8 @@
   }
 
   &--card {
-    padding-top: @tabs-card-height;
     margin: 0 15px;
+    padding-top: @tabs-card-height;
 
     .van-tabs__wrap {
       height: @tabs-card-height;
@@ -103,19 +103,19 @@
 
 .van-tab {
   position: relative;
+  flex: 1;
+  box-sizing: border-box;
   min-width: 0; /* hack for flex ellipsis */
   padding: 0 5px;
+  color: @gray-darker;
   font-size: 14px;
   line-height: @tabs-line-height;
-  color: @gray-darker;
   text-align: center;
   cursor: pointer;
-  box-sizing: border-box;
-  flex: 1;
 
   &--active {
-    font-weight: 500;
     color: @text-color;
+    font-weight: 500;
   }
 
   &--disabled {

packages/tag/index.less

@@ -1,12 +1,12 @@
 @import '../common/style/var.less';
 
 .van-tag {
+  display: inline-block;
+  padding: .2em .5em;
   color: @white;
   font-size: 10px;
-  padding: .2em .5em;
   line-height: normal;
   border-radius: .2em;
-  display: inline-block;
 
   &::after {
     border-color: currentColor;

packages/toast/index.less

@@ -2,39 +2,39 @@
 
 .van-toast {
   display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  box-sizing: content-box;
   color: @toast-text-color;
   font-size: @toast-font-size;
   line-height: @toast-line-height;
-  border-radius: @toast-border-radius;
-  word-break: break-all;
-  align-items: center;
-  flex-direction: column;
-  justify-content: center;
-  box-sizing: content-box;
-  background-color: @toast-background-color;
 
   // allow newline charactor
   white-space: pre-wrap;
+  word-break: break-all;
+  background-color: @toast-background-color;
+  border-radius: @toast-border-radius;
 
   &__container {
     position: fixed;
     top: 50%;
     left: 50%;
-    max-width: @toast-max-width;
     // hack for avoid max-width when use left & fixed
-    width: fit-content; 
+    width: fit-content;
+    max-width: @toast-max-width;
     transform: translate(-50%, -50%);
   }
 
   &--text {
-    padding: @toast-text-padding;
     min-width: @toast-text-min-width;
+    padding: @toast-text-padding;
   }
 
   &--icon {
     width: @toast-default-width;
-    padding: @toast-default-padding;
     min-height: @toast-default-min-height;
+    padding: @toast-default-padding;
 
     .van-toast__icon {
       font-size: @toast-icon-size;

packages/transition/index.less

@@ -25,26 +25,26 @@
 
 .van-fade-up-enter,
 .van-fade-up-leave-to {
-  opacity: 0;
   transform: translate3d(0, 100%, 0);
+  opacity: 0;
 }
 
 .van-fade-down-enter,
 .van-fade-down-leave-to {
-  opacity: 0;
   transform: translate3d(0, -100%, 0);
+  opacity: 0;
 }
 
 .van-fade-left-enter,
 .van-fade-left-leave-to {
-  opacity: 0;
   transform: translate3d(-100%, 0, 0);
+  opacity: 0;
 }
 
 .van-fade-right-enter,
 .van-fade-right-leave-to {
-  opacity: 0;
   transform: translate3d(100%, 0, 0);
+  opacity: 0;
 }
 
 .van-slide-up-enter-active,

packages/tree-select/index.less

@@ -41,11 +41,11 @@
   }
 
   &__content {
-    width: 65%;
-    padding-left: 15px;
-    margin-left: 35%;
-    background-color: @white;
     box-sizing: border-box;
+    width: 65%;
+    margin-left: 35%;
+    padding-left: 15px;
+    background-color: @white;
   }
 
   &__item {