diff --git a/.stylelintrc b/.stylelintrc
index 90e25c699..cb3dd21ac 100644
--- a/.stylelintrc
+++ b/.stylelintrc
@@ -1,6 +1,10 @@
 {
-  "extends": "stylelint-config-standard",
+  "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,
diff --git a/package.json b/package.json
index 18d3a3dfa..21813793b 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
   "scripts": {
     "bootstrap": "yarn || npm i",
     "dev": "npm run build:entry && webpack-dev-server --config build/webpack.dev.js",
-    "lint": "eslint ./packages --ext .js,.vue,.ts,.tsx && stylelint \"packages/*.less\"",
+    "lint": "eslint ./packages --ext .js,.vue,.ts,.tsx && stylelint \"packages/**/*.less\" --fix",
     "build:entry": "node build/build-entry.js",
     "build:changelog": "vant-doc changelog ./changelog.generated.md",
     "build:lib": "node build/build-lib.js",
@@ -104,7 +104,9 @@
     "signale": "^1.4.0",
     "style-loader": "^0.23.1",
     "stylelint": "^10.0.1",
+    "stylelint-config-rational-order": "^0.1.2",
     "stylelint-config-standard": "^18.3.0",
+    "stylelint-order": "^3.0.0",
     "ts-jest": "^24.0.2",
     "typescript": "^3.4.5",
     "uppercamelcase": "^3.0.0",
diff --git a/packages/action-sheet/index.less b/packages/action-sheet/index.less
index 939edabad..5135c4d3b 100644
--- a/packages/action-sheet/index.less
+++ b/packages/action-sheet/index.less
@@ -1,14 +1,14 @@
 @import '../style/var';
 
 .van-action-sheet {
-  color: @action-sheet-item-text-color;
   max-height: @action-sheet-max-height;
+  color: @action-sheet-item-text-color;
 
   &__item,
   &__cancel {
-    text-align: center;
     font-size: @action-sheet-item-font-size;
     line-height: @action-sheet-item-height;
+    text-align: center;
     background-color: @action-sheet-item-background;
 
     &:active {
@@ -29,9 +29,9 @@
   }
 
   &__subname {
+    margin-left: 5px;
     color: @action-sheet-subname-color;
     font-size: @action-sheet-subname-font-size;
-    margin-left: 5px;
   }
 
   &__loading {
@@ -39,10 +39,10 @@
   }
 
   &__cancel::before {
-    content: ' ';
     display: block;
     height: 10px;
     background-color: @background-color;
+    content: ' ';
   }
 
   &__header {
@@ -52,13 +52,13 @@
   }
 
   &__close {
+    position: absolute;
     top: 0;
     right: 0;
     padding: 0 15px;
-    position: absolute;
-    line-height: inherit;
     color: @action-sheet-close-icon-color;
     font-size: @action-sheet-close-icon-size;
+    line-height: inherit;
   }
 
   &--safe-area-inset-bottom {
diff --git a/packages/address-list/index.less b/packages/address-list/index.less
index 03629a5e2..0ab16b48b 100644
--- a/packages/address-list/index.less
+++ b/packages/address-list/index.less
@@ -1,20 +1,20 @@
 @import '../style/var';
 
 .van-address-list {
+  box-sizing: border-box;
   height: 100%;
   padding-bottom: 100px;
-  box-sizing: border-box;
 
   &__add {
     position: fixed;
-    left: 0;
     bottom: 0;
+    left: 0;
     z-index: 9999;
   }
 
   &__disabled-text {
-    color: @gray-dark;
     padding: 0 15px;
+    color: @gray-dark;
     font-size: 12px;
     line-height: 30px;
   }
@@ -24,23 +24,23 @@
   padding: 15px;
 
   &__value {
-    color: @text-color;
-    padding-right: 34px;
     position: relative;
+    padding-right: 34px;
+    color: @text-color;
   }
 
   .van-radio__label {
+    box-sizing: border-box;
     width: 100%;
     margin-left: 0;
     padding-left: 27px;
-    box-sizing: border-box;
   }
 
   .van-radio__icon {
+    position: absolute;
     top: 50%;
     left: 0;
     height: 16px;
-    position: absolute;
     line-height: 16px;
     transform: translate(0, -50%);
 
@@ -52,21 +52,21 @@
   }
 
   .van-radio__icon--checked .van-icon {
-    border-color: @red;
     background-color: @red;
+    border-color: @red;
   }
 
   &__name {
-    font-size: 14px;
-    font-weight: 500;
-    line-height: 20px;
     margin-bottom: 5px;
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 20px;
   }
 
   &__address {
+    color: @gray-darker;
     font-size: 12px;
     line-height: 16px;
-    color: @gray-darker;
   }
 
   &--unswitchable {
diff --git a/packages/button/index.less b/packages/button/index.less
index 09dbc8031..d1a9ead1e 100644
--- a/packages/button/index.less
+++ b/packages/button/index.less
@@ -1,31 +1,31 @@
 @import '../style/var';
 
 .van-button {
-  display: inline-block;
   position: relative;
-  padding: 0;
-  height: @button-default-height;
-  line-height: @button-default-line-height;
-  font-size: @button-default-font-size;
-  border-radius: @button-border-radius;
-  text-align: center;
+  display: inline-block;
   box-sizing: border-box;
+  height: @button-default-height;
+  padding: 0;
+  font-size: @button-default-font-size;
+  line-height: @button-default-line-height;
+  text-align: center;
+  border-radius: @button-border-radius;
   -webkit-appearance: none;
   -webkit-text-size-adjust: 100%;
 
   &::before {
-    content: " ";
     position: absolute;
     top: 50%;
     left: 50%;
-    opacity: 0;
     width: 100%;
     height: 100%;
+    background-color: @black;
     border: inherit;
     border-color: @black;
-    background-color: @black;
     border-radius: inherit; /* inherit parent's border radius */
     transform: translate(-50%, -50%);
+    opacity: 0;
+    content: ' ';
   }
 
   &:active::before {
@@ -101,9 +101,9 @@
   }
 
   &--small {
-    padding: 0 8px;
-    height: @button-small-height;
     min-width: @button-small-min-width;
+    height: @button-small-height;
+    padding: 0 8px;
     font-size: @button-small-font-size;
     line-height: @button-small-line-height;
   }
@@ -116,8 +116,8 @@
 
   &--mini {
     display: inline-block;
-    height: @button-mini-height;
     min-width: @button-mini-min-width;
+    height: @button-mini-height;
     font-size: @button-mini-font-size;
     line-height: @button-mini-line-height;
 
@@ -127,8 +127,8 @@
   }
 
   &--block {
-    width: 100%;
     display: block;
+    width: 100%;
   }
 
   &--disabled {
@@ -144,8 +144,8 @@
   }
 
   &__loading-text {
-    margin-left: 5px;
     display: inline-block;
+    margin-left: 5px;
     vertical-align: middle;
   }
 
@@ -160,7 +160,7 @@
     &.van-button--round::after {
       border-radius: @button-round-border-radius;
     }
-    
+
     &.van-button--square::after {
       border-radius: 0;
     }
diff --git a/packages/card/index.less b/packages/card/index.less
index 902cca0c8..e8bd4c79c 100644
--- a/packages/card/index.less
+++ b/packages/card/index.less
@@ -3,10 +3,10 @@
 
 .van-card {
   position: relative;
-  color: @card-text-color;
-  padding: @card-padding;
-  font-size: @card-font-size;
   box-sizing: border-box;
+  padding: @card-padding;
+  color: @card-text-color;
+  font-size: @card-font-size;
   background-color: @card-background-color;
 
   &:not(:first-child) {
@@ -18,19 +18,19 @@
   }
 
   &__thumb {
-    display: flex;
     position: relative;
-    width: @card-thumb-size;
-    height: @card-thumb-size;
-    margin-right: 10px;
+    display: flex;
     flex: none;
     align-items: center;
     justify-content: center;
+    width: @card-thumb-size;
+    height: @card-thumb-size;
+    margin-right: 10px;
 
     img {
-      border: none;
       max-width: 100%;
       max-height: 100%;
+      border: none;
     }
   }
 
@@ -38,9 +38,9 @@
     position: relative;
     display: flex;
     flex: 1;
-    height: @card-thumb-size;
     flex-direction: column;
     min-width: 0; /* hack for flex box ellipsis */
+    height: @card-thumb-size;
 
     &--centered {
       justify-content: center;
@@ -53,16 +53,16 @@
   }
 
   &__title {
-    line-height: @card-title-line-height;
     max-height: 32px;
     font-weight: 500;
+    line-height: @card-title-line-height;
 
     .multi-ellipsis(2);
   }
 
   &__desc {
-    color: @card-desc-color;
     max-height: @card-desc-line-height;
+    color: @card-desc-color;
     line-height: @card-desc-line-height;
   }
 
@@ -95,8 +95,8 @@
   }
 
   &__footer {
-    text-align: right;
     flex: none;
+    text-align: right;
 
     .van-button {
       margin-left: 5px;
diff --git a/packages/cell-group/index.less b/packages/cell-group/index.less
index dbf4ae548..bc42a8bea 100644
--- a/packages/cell-group/index.less
+++ b/packages/cell-group/index.less
@@ -4,8 +4,8 @@
   background-color: @cell-group-background-color;
 
   &__title {
-    color: @cell-group-title-color;
     padding: @cell-group-title-padding;
+    color: @cell-group-title-color;
     font-size: @cell-group-title-font-size;
     line-height: @cell-group-title-line-height;
   }
diff --git a/packages/cell/index.less b/packages/cell/index.less
index ebb45fcf9..e52a2db14 100644
--- a/packages/cell/index.less
+++ b/packages/cell/index.less
@@ -4,14 +4,14 @@
 .van-cell {
   position: relative;
   display: flex;
-  width: 100%;
-  overflow: hidden;
   box-sizing: border-box;
+  width: 100%;
+  padding: @cell-vertical-padding @cell-horizontal-padding;
+  overflow: hidden;
   color: @cell-text-color;
   font-size: @cell-font-size;
   line-height: @cell-line-height;
   background-color: @cell-background-color;
-  padding: @cell-vertical-padding @cell-horizontal-padding;
 
   &:not(:last-child)::after {
     .hairline-bottom(@cell-border-color, 15px);
@@ -22,9 +22,9 @@
   }
 
   &__label {
+    margin-top: @cell-label-margin-top;
     color: @cell-label-color;
     font-size: @cell-label-font-size;
-    margin-top: @cell-label-margin-top;
     line-height: @cell-label-line-height;
   }
 
@@ -34,10 +34,10 @@
   }
 
   &__value {
-    color: @cell-value-color;
-    overflow: hidden;
-    text-align: right;
     position: relative;
+    overflow: hidden;
+    color: @cell-value-color;
+    text-align: right;
     vertical-align: middle;
 
     &--alone {
@@ -73,11 +73,11 @@
     overflow: visible;
 
     &::before {
-      content: '*';
       position: absolute;
       left: 7px;
-      font-size: @cell-font-size;
       color: @cell-required-color;
+      font-size: @cell-font-size;
+      content: '*';
     }
   }
 
diff --git a/packages/checkbox/index.less b/packages/checkbox/index.less
index 79d861516..8d4c7e486 100644
--- a/packages/checkbox/index.less
+++ b/packages/checkbox/index.less
@@ -12,18 +12,18 @@
 
   &__icon {
     height: 1em;
-    line-height: 1em;
     font-size: @checkbox-size;
+    line-height: 1em;
 
     .van-icon {
       display: block;
+      box-sizing: border-box;
       width: 1.25em;
       height: 1.25em;
-      font-size: .8em;
       color: transparent;
-      text-align: center;
+      font-size: .8em;
       line-height: inherit;
-      box-sizing: border-box;
+      text-align: center;
       border: 1px solid @checkbox-border-color;
       transition: @checkbox-transition-duration;
     }
@@ -37,15 +37,15 @@
     &--checked {
       .van-icon {
         color: @white;
-        border-color: @checkbox-checked-icon-color;
         background-color: @checkbox-checked-icon-color;
+        border-color: @checkbox-checked-icon-color;
       }
     }
 
     &--disabled {
       .van-icon {
-        border-color: @checkbox-disabled-icon-color;
         background-color: @checkbox-disabled-background-color;
+        border-color: @checkbox-disabled-icon-color;
       }
     }
 
@@ -57,9 +57,9 @@
   }
 
   &__label {
+    margin-left: @checkbox-label-margin;
     color: @checkbox-label-color;
     line-height: @checkbox-size;
-    margin-left: @checkbox-label-margin;
 
     &--left {
       float: left;
diff --git a/packages/circle/index.less b/packages/circle/index.less
index 0be72694e..83fcdcfcb 100644
--- a/packages/circle/index.less
+++ b/packages/circle/index.less
@@ -2,34 +2,34 @@
 
 .van-circle {
   position: relative;
-  text-align: center;
   display: inline-block;
+  text-align: center;
 
   svg {
+    position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
-    position: absolute;
   }
 
   &__layer {
-    fill: none;
-    stroke-linecap: round;
-    stroke-dasharray: 3140;
-    stroke-dashoffset: 3140;
     transform: rotate(90deg);
     // should not use transform-origin: center
     // that will cause incorrect style in android devices
     transform-origin: 530px 530px;
+    fill: none;
+    stroke-linecap: round;
+    stroke-dasharray: 3140;
+    stroke-dashoffset: 3140;
   }
 
   &__text {
+    position: absolute;
     top: 50%;
     left: 0;
     width: 100%;
     color: @circle-text-color;
-    position: absolute;
     transform: translateY(-50%);
   }
 }
diff --git a/packages/collapse-item/index.less b/packages/collapse-item/index.less
index 901968fba..da498b3ef 100644
--- a/packages/collapse-item/index.less
+++ b/packages/collapse-item/index.less
@@ -35,13 +35,13 @@
 
   &__wrapper {
     overflow: hidden;
-    will-change: height;
     transition: height @collapse-item-transition-duration ease-in-out;
+    will-change: height;
   }
 
   &__content {
-    color: @collapse-item-content-text-color;
     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;
     background-color: @collapse-item-content-background-color;
diff --git a/packages/contact-card/index.less b/packages/contact-card/index.less
index d3e31c1b9..1540ef525 100644
--- a/packages/contact-card/index.less
+++ b/packages/contact-card/index.less
@@ -4,9 +4,9 @@
   padding: 15px;
 
   &__value {
+    display: inline-block;
     margin-left: 5px;
     line-height: 20px;
-    display: inline-block;
     vertical-align: middle;
   }
 
@@ -22,12 +22,11 @@
   }
 
   &::before {
-    content: '';
-    left: 0;
+    position: absolute;
     right: 0;
     bottom: 0;
+    left: 0;
     height: 2px;
-    position: absolute;
     background: repeating-linear-gradient(
       -45deg,
       #ff6c6c 0,
@@ -40,5 +39,6 @@
       transparent 50%
     );
     background-size: 80px;
+    content: '';
   }
 }
diff --git a/packages/contact-list/index.less b/packages/contact-list/index.less
index d9f0e90d7..ad3b08029 100644
--- a/packages/contact-list/index.less
+++ b/packages/contact-list/index.less
@@ -1,18 +1,18 @@
 @import '../style/var';
 
 .van-contact-list {
+  box-sizing: border-box;
   height: 100%;
   padding-bottom: 50px;
-  box-sizing: border-box;
 
   &__item {
     padding: 15px;
   }
 
   &__item-value {
-    color: @text-color;
-    padding-right: 34px;
     position: relative;
+    padding-right: 34px;
+    color: @text-color;
   }
 
   .van-radio__label {
@@ -20,10 +20,10 @@
   }
 
   .van-radio__icon {
+    position: absolute;
     top: 50%;
     left: 0;
     height: 16px;
-    position: absolute;
     line-height: 16px;
     transform: translate(0, -50%);
 
@@ -35,20 +35,20 @@
   }
 
   .van-radio__icon--checked .van-icon {
-    border-color: @red;
     background-color: @red;
+    border-color: @red;
   }
 
   &__group {
+    box-sizing: border-box;
     height: 100%;
     overflow-y: scroll;
-    box-sizing: border-box;
     -webkit-overflow-scrolling: touch;
   }
 
   &__name {
-    font-size: 14px;
     font-weight: 500;
+    font-size: 14px;
     line-height: 20px;
   }
 
@@ -62,8 +62,8 @@
 
   &__add {
     position: fixed;
-    left: 0;
     bottom: 0;
+    left: 0;
     z-index: 9999;
   }
 }
diff --git a/packages/coupon-list/index.less b/packages/coupon-list/index.less
index ce45f3f62..b14365b5f 100644
--- a/packages/coupon-list/index.less
+++ b/packages/coupon-list/index.less
@@ -1,8 +1,8 @@
 @import '../style/var';
 
 .van-coupon-list {
-  height: 100%;
   position: relative;
+  height: 100%;
   background-color: @background-color;
 
   &__field {
@@ -15,16 +15,16 @@
   }
 
   &__list {
-    overflow-y: auto;
-    padding: 15px 0;
     box-sizing: border-box;
+    padding: 15px 0;
+    overflow-y: auto;
     -webkit-overflow-scrolling: touch;
   }
 
   &__close {
-    left: 0;
-    bottom: 0;
     position: absolute;
+    bottom: 0;
+    left: 0;
     font-weight: 500;
   }
 
@@ -33,8 +33,8 @@
     text-align: center;
 
     p {
-      color: @gray-dark;
       margin: 15px 0;
+      color: @gray-dark;
       font-size: 14px;
       line-height: 20px;
     }
diff --git a/packages/coupon/index.less b/packages/coupon/index.less
index 1c67bfaf5..361366170 100644
--- a/packages/coupon/index.less
+++ b/packages/coupon/index.less
@@ -2,10 +2,10 @@
 @import '../style/mixins/ellipsis';
 
 .van-coupon {
-  overflow: hidden;
-  border-radius: 4px;
   margin: 0 15px 15px;
+  overflow: hidden;
   background-color: @white;
+  border-radius: 4px;
   box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
 
   &:active {
@@ -14,9 +14,9 @@
 
   &__content {
     display: flex;
+    box-sizing: border-box;
     height: 100px;
     padding: 24px 0 0 15px;
-    box-sizing: border-box;
   }
 
   p,
@@ -33,9 +33,9 @@
   }
 
   p {
+    color: @gray-dark;
     font-size: 12px;
     line-height: 16px;
-    color: @gray-dark;
   }
 
   &__head {
@@ -62,8 +62,8 @@
   }
 
   &__body {
-    flex: 1;
     position: relative;
+    flex: 1;
     border-radius: 0 4px 4px 0;
 
     h2 {
@@ -72,20 +72,20 @@
   }
 
   &__corner {
+    position: absolute;
     top: 16px;
     right: 15px;
-    position: absolute;
 
     .van-icon {
-      border-color: @red;
       background-color: @red;
+      border-color: @red;
     }
   }
 
   &__description {
     padding: 7px 15px;
-    border-top: 1px dashed @border-color;
     background-color: @background-color-light;
+    border-top: 1px dashed @border-color;
   }
 
   &--disabled {
diff --git a/packages/dialog/index.less b/packages/dialog/index.less
index 1370b8240..fac46e43a 100644
--- a/packages/dialog/index.less
+++ b/packages/dialog/index.less
@@ -4,19 +4,19 @@
   position: fixed;
   top: 50%;
   left: 50%;
-  overflow: hidden;
   width: @dialog-width;
+  overflow: hidden;
   font-size: @dialog-font-size;
-  transition: @dialog-transition;
-  border-radius: @dialog-border-radius;
   background-color: @dialog-background-color;
+  border-radius: @dialog-border-radius;
   transform: translate3d(-50%, -50%, 0);
   backface-visibility: hidden; // avoid blurry text after scale animation
+  transition: @dialog-transition;
 
   &__header {
-    text-align: center;
-    font-weight: @dialog-header-font-weight;
     padding-top: @dialog-header-padding-top;
+    font-weight: @dialog-header-font-weight;
+    text-align: center;
 
     &--isolated {
       padding: @dialog-header-isolated-padding;
@@ -24,20 +24,20 @@
   }
 
   &__message {
+    max-height: @dialog-message-max-height;
     padding: @dialog-message-padding;
+    overflow-y: auto;
     font-size: @dialog-message-font-size;
     line-height: @dialog-message-line-height;
-    max-height: @dialog-message-max-height;
-    overflow-y: auto;
-    text-align: center;
-    -webkit-overflow-scrolling: touch;
 
     // allow newline charactor
     white-space: pre-wrap;
+    text-align: center;
+    -webkit-overflow-scrolling: touch;
 
     &--has-title {
-      color: @dialog-has-title-message-text-color;
       padding-top: @dialog-has-title-message-padding-top;
+      color: @dialog-has-title-message-text-color;
     }
 
     &--left {
@@ -74,12 +74,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;
   }
 }
diff --git a/packages/dropdown-item/index.less b/packages/dropdown-item/index.less
index b93652881..5bcd794c9 100644
--- a/packages/dropdown-item/index.less
+++ b/packages/dropdown-item/index.less
@@ -2,9 +2,9 @@
 
 .van-dropdown-item {
   position: fixed;
-  left: 0;
   right: 0;
   bottom: 0;
+  left: 0;
   overflow: hidden;
 
   &__content {
diff --git a/packages/dropdown-menu/index.less b/packages/dropdown-menu/index.less
index 30c3b65b3..19134dd91 100644
--- a/packages/dropdown-menu/index.less
+++ b/packages/dropdown-menu/index.less
@@ -3,12 +3,12 @@
 .van-dropdown-menu {
   display: flex;
   height: 50px;
-  user-select: none;
   background-color: @white;
+  user-select: none;
 
   &__item {
-    flex: 1;
     display: flex;
+    flex: 1;
     align-items: center;
     justify-content: center;
 
@@ -18,25 +18,25 @@
   }
 
   &__title {
-    font-size: 15px;
     position: relative;
+    font-size: 15px;
 
     &::after {
       position: absolute;
-      content: '';
       top: 3px;
       right: -12px;
-      opacity: .6;
       border: 3px solid;
-      transform: rotate(-45deg);
       border-color: transparent transparent currentColor currentColor;
+      transform: rotate(-45deg);
+      opacity: .6;
+      content: '';
     }
 
     &--active {
       &::after {
         top: 7px;
-        opacity: 1;
         transform: rotate(135deg);
+        opacity: 1;
       }
     }
   }
diff --git a/packages/field/index.less b/packages/field/index.less
index 8d932835f..410d188b8 100644
--- a/packages/field/index.less
+++ b/packages/field/index.less
@@ -20,24 +20,24 @@
   }
 
   &__control {
-    border: 0;
+    display: block;
+    box-sizing: border-box;
+    width: 100%;
     margin: 0;
     padding: 0;
-    width: 100%;
-    resize: none;
-    display: block;
     color: @field-input-text-color;
-    box-sizing: border-box;
     background-color: transparent;
+    border: 0;
+    resize: none;
 
     &::placeholder {
       color: @field-placeholder-text-color;
     }
 
     &:disabled {
-      opacity: 1;
       color: @field-input-disabled-text-color;
       background-color: transparent;
+      opacity: 1;
     }
 
     &--center {
@@ -65,9 +65,9 @@
 
   &__clear,
   &__right-icon {
+    margin-right: -10px;
     padding: 0 10px;
     line-height: inherit;
-    margin-right: -10px;
   }
 
   &__clear {
diff --git a/packages/goods-action-icon/index.less b/packages/goods-action-icon/index.less
index 22c458369..00f15adb8 100644
--- a/packages/goods-action-icon/index.less
+++ b/packages/goods-action-icon/index.less
@@ -1,16 +1,16 @@
 @import '../style/var';
 
 .van-goods-action-icon {
-  color: @gray-darker;
   display: flex;
-  height: 50px;
-  font-size: 10px;
+  flex-direction: column;
+  justify-content: center;
   min-width: 15%;
+  height: 50px;
+  color: @gray-darker;
+  font-size: 10px;
   line-height: 1;
   text-align: center;
   background-color: @white;
-  flex-direction: column;
-  justify-content: center;
 
   &:not(:first-child)::after {
     border-left-width: 1px;
@@ -22,7 +22,7 @@
 
   &__icon {
     width: 1em;
-    font-size: 20px;
     margin: 0 auto 5px;
+    font-size: 20px;
   }
 }
diff --git a/packages/goods-action/index.less b/packages/goods-action/index.less
index 136b6a5f6..7fdffd760 100644
--- a/packages/goods-action/index.less
+++ b/packages/goods-action/index.less
@@ -1,11 +1,11 @@
 @import '../style/var';
 
 .van-goods-action {
-  left: 0;
+  position: fixed;
   right: 0;
   bottom: 0;
+  left: 0;
   display: flex;
-  position: fixed;
   background-color: @white;
 
   &--safe-area-inset-bottom {
diff --git a/packages/icon/index.less b/packages/icon/index.less
index 0ff68fc56..2a10d872f 100644
--- a/packages/icon/index.less
+++ b/packages/icon/index.less
@@ -7,14 +7,14 @@
     height: 1em;
 
     img {
+      position: absolute;
       top: 0;
-      left: 0;
       right: 0;
       bottom: 0;
-      margin: auto;
+      left: 0;
       max-width: 100%;
       max-height: 100%;
-      position: absolute;
+      margin: auto;
     }
   }
 }
diff --git a/packages/image-preview/index.less b/packages/image-preview/index.less
index e1e741f5b..ee28ffe87 100644
--- a/packages/image-preview/index.less
+++ b/packages/image-preview/index.less
@@ -1,21 +1,21 @@
 @import '../style/var';
 
 .van-image-preview {
+  position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-  position: fixed;
 
   &__image {
+    position: absolute;
     top: 0;
-    left: 0;
     right: 0;
     bottom: 0;
-    margin: auto;
+    left: 0;
     max-width: 100%;
     max-height: 100%;
-    position: absolute;
+    margin: auto;
   }
 
   &__index {
diff --git a/packages/index-anchor/index.less b/packages/index-anchor/index.less
index 62f6a03f0..b05f88dd0 100644
--- a/packages/index-anchor/index.less
+++ b/packages/index-anchor/index.less
@@ -2,7 +2,7 @@
 
 .van-index-anchor {
   padding: 0 15px;
-  font-size: 14px;
   font-weight: 500;
+  font-size: 14px;
   line-height: 32px;
 }
diff --git a/packages/index-bar/index.less b/packages/index-bar/index.less
index 8d606d1bb..62263a5c9 100644
--- a/packages/index-bar/index.less
+++ b/packages/index-bar/index.less
@@ -3,20 +3,20 @@
 .van-index-bar {
   &__sidebar {
     position: fixed;
-    display: flex;
     top: 50%;
     right: 0;
     z-index: 1;
-    user-select: none;
-    text-align: center;
+    display: flex;
     flex-direction: column;
+    text-align: center;
     transform: translateY(-50%);
+    user-select: none;
   }
 
   &__index {
-    font-size: 10px;
-    font-weight: 500;
-    line-height: 14px;
     padding: 0 3px 0 15px;
+    font-weight: 500;
+    font-size: 10px;
+    line-height: 14px;
   }
 }
diff --git a/packages/info/index.less b/packages/info/index.less
index a8b3bff98..bf7f50782 100644
--- a/packages/info/index.less
+++ b/packages/info/index.less
@@ -2,20 +2,20 @@
 
 .van-info {
   position: absolute;
-  right: 0;
   top: -@info-size / 2;
-  color: @info-color;
-  font-size: @info-font-size;
-  font-weight: @info-font-weight;
-  font-family: @info-font-family;
-  text-align: center;
+  right: 0;
   box-sizing: border-box;
-  padding: @info-padding;
   min-width: @info-size;
+  padding: @info-padding;
+  color: @info-color;
+  font-weight: @info-font-weight;
+  font-size: @info-font-size;
+  font-family: @info-font-family;
   line-height: @info-size - @info-border-width * 2;
+  text-align: center;
+  background-color: @info-background-color;
   border: @info-border-width solid @white;
   border-radius: @info-size;
-  background-color: @info-background-color;
   transform: translateX(50%);
   transform-origin: 100%;
 }
diff --git a/packages/loading/index.less b/packages/loading/index.less
index 74cebeae7..367b2a683 100644
--- a/packages/loading/index.less
+++ b/packages/loading/index.less
@@ -1,44 +1,44 @@
 @import '../style/var';
 
 .van-loading {
+  position: relative;
   z-index: 0;
   font-size: 0;
   line-height: 0;
-  position: relative;
   vertical-align: middle;
 
   &__spinner {
-    z-index: -1;
-    width: 30px;
-    height: 30px;
     position: relative;
+    z-index: -1;
     display: inline-block;
     box-sizing: border-box;
-    vertical-align: middle;
-    animation: van-rotate 0.8s linear infinite;
+    width: 30px;
 
     // compatible for 1.x, users may set width or height in root element
     max-width: 100%;
+    height: 30px;
     max-height: 100%;
+    vertical-align: middle;
+    animation: van-rotate 0.8s linear infinite;
 
     &--spinner {
       animation-timing-function: steps(12);
 
       i {
+        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: ' ';
         }
       }
     }
@@ -53,30 +53,30 @@
     height: 100%;
 
     circle {
+      animation: van-circular 1.5s ease-in-out infinite;
       stroke: currentColor;
       stroke-width: 3;
       stroke-linecap: round;
-      animation: van-circular 1.5s ease-in-out infinite;
     }
   }
 
   &__text {
     display: inline-block;
-    vertical-align: middle;
+    margin-left: 10px;
     color: @loading-text-color;
     font-size: @loading-text-font-size;
     line-height: @loading-text-line-height;
-    margin-left: 10px;
+    vertical-align: middle;
   }
 
   &--vertical {
     display: flex;
-    align-items: center;
     flex-direction: column;
+    align-items: center;
 
     .van-loading__text {
-      margin-left: 0;
       margin-top: 10px;
+      margin-left: 0;
     }
   }
 }
@@ -100,8 +100,8 @@
 
 .generate-spinner(@n, @i: 1) when (@i =< @n) {
   .van-loading__spinner--spinner i:nth-of-type(@{i}) {
-    opacity: 1 - (0.75 / 12) * (@i - 1);
     transform: rotate(@i * 30deg);
+    opacity: 1 - (0.75 / 12) * (@i - 1);
   }
   .generate-spinner(@n, (@i + 1));
 }
diff --git a/packages/nav-bar/index.less b/packages/nav-bar/index.less
index 49bea5c35..37b29955c 100644
--- a/packages/nav-bar/index.less
+++ b/packages/nav-bar/index.less
@@ -2,11 +2,11 @@
 
 .van-nav-bar {
   position: relative;
-  user-select: none;
-  text-align: center;
   height: @nav-bar-height;
   line-height: @nav-bar-height;
+  text-align: center;
   background-color: @nav-bar-background-color;
+  user-select: none;
 
   .van-icon {
     color: @nav-bar-icon-color;
@@ -24,25 +24,25 @@
   }
 
   &--fixed {
+    position: fixed;
     top: 0;
     left: 0;
     width: 100%;
-    position: fixed;
   }
 
   &__title {
-    margin: 0 auto;
     max-width: 60%;
+    margin: 0 auto;
     color: @nav-bar-title-text-color;
-    font-size: @nav-bar-title-font-size;
     font-weight: 500;
+    font-size: @nav-bar-title-font-size;
   }
 
   &__left,
   &__right {
+    position: absolute;
     bottom: 0;
     font-size: 14px;
-    position: absolute;
   }
 
   &__left {
@@ -54,10 +54,10 @@
   }
 
   &__text {
-    color: @nav-bar-text-color;
+    display: inline-block;
     margin: 0 -15px;
     padding: 0 15px;
-    display: inline-block;
+    color: @nav-bar-text-color;
     vertical-align: middle;
 
     &:active {
diff --git a/packages/notice-bar/index.less b/packages/notice-bar/index.less
index 54187050c..118f3efe0 100644
--- a/packages/notice-bar/index.less
+++ b/packages/notice-bar/index.less
@@ -1,20 +1,20 @@
 @import '../style/var';
 
 .van-notice-bar {
+  position: relative;
   display: flex;
+  align-items: center;
   height: 40px;
   padding: 0 15px;
+  color: @orange-dark;
   font-size: 14px;
   line-height: 24px;
-  position: relative;
-  align-items: center;
-  color: @orange-dark;
   background-color: @orange-light;
 
   &__left-icon,
   &__right-icon {
-    font-size: 16px;
     min-width: 22px;
+    font-size: 16px;
   }
 
   &__right-icon {
@@ -22,10 +22,10 @@
   }
 
   &__wrap {
+    position: relative;
     flex: 1;
     height: 24px;
     overflow: hidden;
-    position: relative;
   }
 
   &__content {
diff --git a/packages/notify/index.less b/packages/notify/index.less
index 6b1d685a5..e1162ba7c 100644
--- a/packages/notify/index.less
+++ b/packages/notify/index.less
@@ -1,7 +1,6 @@
 @import '../style/var';
 
 .van-notify {
-  text-align: center;
   box-sizing: border-box;
   padding: @notify-padding;
   font-size: @notify-font-size;
@@ -9,4 +8,5 @@
 
   // allow newline charactor
   white-space: pre-wrap;
+  text-align: center;
 }
diff --git a/packages/number-keyboard/index.less b/packages/number-keyboard/index.less
index e79a5d6b3..9b01f8a42 100644
--- a/packages/number-keyboard/index.less
+++ b/packages/number-keyboard/index.less
@@ -1,25 +1,25 @@
 @import '../style/var';
 
 .van-number-keyboard {
-  left: 0;
-  bottom: 0;
-  width: 100%;
   position: fixed;
-  user-select: none;
+  bottom: 0;
+  left: 0;
+  width: 100%;
   background-color: @white;
   animation-timing-function: ease-out;
+  user-select: none;
 
   &__title {
+    position: relative;
     height: 30px;
+    color: @gray-darker;
     font-size: 14px;
     line-height: 30px;
     text-align: center;
-    position: relative;
-    color: @gray-darker;
 
     &-left {
-      left: 0;
       position: absolute;
+      left: 0;
     }
   }
 
@@ -28,11 +28,11 @@
   }
 
   &__close {
+    position: absolute;
     right: 0;
+    padding: 0 15px;
     color: @blue;
     font-size: 14px;
-    padding: 0 15px;
-    position: absolute;
 
     &:active {
       background-color: @active-color;
@@ -40,10 +40,10 @@
   }
 
   &__sidebar {
+    position: absolute;
     top: 0;
     right: 0;
     width: 25%;
-    position: absolute;
     height: @number-keyboard-key-height * 4;
   }
 
@@ -60,14 +60,14 @@
 }
 
 .van-key {
+  display: inline-block;
   width: 100% / 3;
+  height: @number-keyboard-key-height;
   font-size: 24px;
   font-style: normal;
-  text-align: center;
-  display: inline-block;
-  vertical-align: middle;
-  height: @number-keyboard-key-height;
   line-height: @number-keyboard-key-height;
+  text-align: center;
+  vertical-align: middle;
 
   &::after {
     border-width: 1px 1px 0 0;
diff --git a/packages/pagination/index.less b/packages/pagination/index.less
index 8d6a76114..b7f3e73f8 100644
--- a/packages/pagination/index.less
+++ b/packages/pagination/index.less
@@ -2,17 +2,17 @@
 
 .van-pagination {
   display: flex;
-  text-align: center;
-  line-height: 40px;
   font-size: 14px;
+  line-height: 40px;
+  text-align: center;
 
   &__item {
     flex: 1;
-    color: @blue;
-    height: 40px;
-    min-width: 36px;
-    background-color: @white;
     box-sizing: border-box;
+    min-width: 36px;
+    height: 40px;
+    color: @blue;
+    background-color: @white;
     user-select: none;
 
     &:active {
@@ -30,8 +30,8 @@
 
     &--disabled,
     &--disabled:active {
-      background-color: @background-color;
       color: @gray-darker;
+      background-color: @background-color;
       opacity: 0.6;
     }
 
diff --git a/packages/password-input/index.less b/packages/password-input/index.less
index 3fb769802..a6187eb12 100644
--- a/packages/password-input/index.less
+++ b/packages/password-input/index.less
@@ -1,9 +1,9 @@
 @import '../style/var';
 
 .van-password-input {
+  position: relative;
   margin: 0 15px;
   user-select: none;
-  position: relative;
 
   &:focus {
     outline: none;
@@ -11,8 +11,8 @@
 
   &__info,
   &__error-info {
-    font-size: 14px;
     margin-top: 15px;
+    font-size: 14px;
     text-align: center;
   }
 
@@ -25,9 +25,9 @@
   }
 
   &__security {
+    display: flex;
     width: 100%;
     height: 50px;
-    display: flex;
     background-color: @white;
 
     &::after {
@@ -35,9 +35,9 @@
     }
 
     li {
+      position: relative;
       flex: 1;
       height: 100%;
-      position: relative;
       font-size: 20px;
       line-height: 50px;
       text-align: center;
@@ -49,14 +49,14 @@
 
     i {
       position: absolute;
-      left: 50%;
       top: 50%;
+      left: 50%;
       width: 10px;
       height: 10px;
       margin: -5px 0 0 -5px;
-      visibility: hidden;
-      border-radius: 100%;
       background-color: @black;
+      border-radius: 100%;
+      visibility: hidden;
     }
   }
 }
diff --git a/packages/picker/index.less b/packages/picker/index.less
index 353c653bd..122198691 100644
--- a/packages/picker/index.less
+++ b/packages/picker/index.less
@@ -1,23 +1,23 @@
 @import '../style/var';
 
 .van-picker {
-  overflow: hidden;
-  user-select: none;
   position: relative;
+  overflow: hidden;
   background-color: @white;
+  user-select: none;
   -webkit-text-size-adjust: 100%; /* avoid iOS text size adjust */
 
   &__toolbar {
     display: flex;
+    justify-content: space-between;
     height: 44px;
     line-height: 44px;
-    justify-content: space-between;
   }
 
   &__cancel,
   &__confirm {
-    color: @blue;
     padding: 0 15px;
+    color: @blue;
     font-size: 14px;
 
     &:active {
@@ -27,24 +27,24 @@
 
   &__title {
     max-width: 50%;
-    font-size: 16px;
     font-weight: 500;
+    font-size: 16px;
     text-align: center;
   }
 
   &__columns {
-    display: flex;
     position: relative;
+    display: flex;
   }
 
   &__loading {
+    position: absolute;
     top: 0;
-    left: 0;
     right: 0;
     bottom: 0;
+    left: 0;
     z-index: 2;
     display: flex;
-    position: absolute;
     align-items: center;
     justify-content: center;
     background-color: rgba(255, 255, 255, .9);
@@ -52,13 +52,13 @@
 
   &__loading .van-loading,
   &__frame {
+    position: absolute;
     top: 50%;
     left: 0;
-    width: 100%;
     z-index: 1;
-    position: absolute;
-    pointer-events: none;
+    width: 100%;
     transform: translateY(-50%);
+    pointer-events: none;
   }
 
   &-column {
@@ -72,8 +72,8 @@
       color: @gray-dark;
 
       &--selected {
-        font-weight: 500;
         color: @text-color;
+        font-weight: 500;
       }
 
       &--disabled {
diff --git a/packages/popup/index.less b/packages/popup/index.less
index 20ecf87f7..88369c7ec 100644
--- a/packages/popup/index.less
+++ b/packages/popup/index.less
@@ -20,9 +20,9 @@
     }
 
     &--top {
-      width: 100%;
       top: 0;
       left: 50%;
+      width: 100%;
       transform: translate3d(-50%, 0, 0);
     }
 
@@ -33,9 +33,9 @@
     }
 
     &--bottom {
-      width: 100%;
       bottom: 0;
       left: 50%;
+      width: 100%;
       transform: translate3d(-50%, 0, 0);
     }
 
diff --git a/packages/progress/index.less b/packages/progress/index.less
index 6bcc8270d..8909d2553 100644
--- a/packages/progress/index.less
+++ b/packages/progress/index.less
@@ -1,15 +1,15 @@
 @import '../style/var';
 
 .van-progress {
-  height: 4px;
   position: relative;
-  border-radius: 4px;
+  height: 4px;
   background: @gray-light;
+  border-radius: 4px;
 
   &__portion {
+    position: absolute;
     left: 0;
     height: 100%;
-    position: absolute;
     border-radius: inherit;
 
     &--with-pivot {
@@ -19,18 +19,18 @@
   }
 
   &__pivot {
+    position: absolute;
     top: 50%;
     right: 0;
+    box-sizing: border-box;
     min-width: 2em;
     padding: 0 5px;
     font-size: 10px;
-    position: absolute;
     line-height: 1.6;
     text-align: center;
-    border-radius: 1em;
     word-break: keep-all;
-    box-sizing: border-box;
     background-color: @gray-light;
+    border-radius: 1em;
     transform: translate(100%, -50%);
   }
 }
diff --git a/packages/pull-refresh/index.less b/packages/pull-refresh/index.less
index 6d9e3cf21..e08971952 100644
--- a/packages/pull-refresh/index.less
+++ b/packages/pull-refresh/index.less
@@ -1,24 +1,24 @@
 @import '../style/var';
 
 .van-pull-refresh {
-  user-select: none;
   overflow: hidden;
+  user-select: none;
 
   &__track {
     position: relative;
   }
 
   &__head {
+    position: absolute;
+    top: -50px;
+    left: 0;
     width: 100%;
     height: 50px;
-    left: 0;
     overflow: hidden;
-    position: absolute;
-    text-align: center;
-    top: -50px;
-    font-size: 14px;
     color: @gray-dark;
+    font-size: 14px;
     line-height: 50px;
+    text-align: center;
   }
 
   &__loading {
@@ -30,8 +30,8 @@
 
     span,
     .van-loading {
-      vertical-align: middle;
       display: inline-block;
+      vertical-align: middle;
     }
   }
 }
diff --git a/packages/radio/index.less b/packages/radio/index.less
index 935fd12d1..fc717c99d 100644
--- a/packages/radio/index.less
+++ b/packages/radio/index.less
@@ -12,18 +12,18 @@
 
   &__icon {
     height: 1em;
-    line-height: 1em;
     font-size: @radio-size;
+    line-height: 1em;
 
     .van-icon {
       display: block;
+      box-sizing: border-box;
       width: 1.25em;
       height: 1.25em;
-      font-size: .8em;
       color: transparent;
-      text-align: center;
+      font-size: .8em;
       line-height: inherit;
-      box-sizing: border-box;
+      text-align: center;
       border: 1px solid @radio-border-color;
       transition: @radio-transition-duration;
     }
@@ -37,15 +37,15 @@
     &--checked {
       .van-icon {
         color: @white;
-        border-color: @radio-checked-icon-color;
         background-color: @radio-checked-icon-color;
+        border-color: @radio-checked-icon-color;
       }
     }
 
     &--disabled {
       .van-icon {
-        border-color: @radio-disabled-icon-color;
         background-color: @radio-disabled-background-color;
+        border-color: @radio-disabled-icon-color;
       }
     }
 
@@ -57,9 +57,9 @@
   }
 
   &__label {
+    margin-left: @radio-label-margin;
     color: @radio-label-color;
     line-height: @radio-size;
-    margin-left: @radio-label-margin;
 
     &--left {
       float: left;
diff --git a/packages/rate/index.less b/packages/rate/index.less
index cca8a90d0..8fae1cf7a 100644
--- a/packages/rate/index.less
+++ b/packages/rate/index.less
@@ -4,8 +4,8 @@
   user-select: none;
 
   &__item {
-    display: inline-block;
     position: relative;
+    display: inline-block;
     padding: 0 @rate-horizontal-padding;
   }
 
@@ -16,7 +16,7 @@
       position: absolute;
       top: 0;
       left: @rate-horizontal-padding;
-      width: .5em;;
+      width: .5em;
       overflow: hidden;
     }
   }
diff --git a/packages/row/index.less b/packages/row/index.less
index df0a1c591..ff122e49a 100644
--- a/packages/row/index.less
+++ b/packages/row/index.less
@@ -2,9 +2,9 @@
 
 .van-row {
   &::after {
-    content: "";
     display: table;
     clear: both;
+    content: "";
   }
 
   &--flex {
diff --git a/packages/search/index.less b/packages/search/index.less
index 3f07f34ed..2cd095dae 100644
--- a/packages/search/index.less
+++ b/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;
-    padding-left: 10px;
 
     &--round {
       border-radius: 17px;
@@ -19,10 +19,10 @@
   }
 
   &__label {
-    font-size: 14px;
-    color: @text-color;
-    line-height: 34px;
     padding: 0 5px;
+    color: @text-color;
+    font-size: 14px;
+    line-height: 34px;
   }
 
   .van-cell {
@@ -50,9 +50,9 @@
 
   &__action {
     padding: 0 10px;
+    color: @text-color;
     font-size: 14px;
     line-height: 34px;
-    color: @text-color;
 
     &:active {
       background-color: @active-color;
diff --git a/packages/sidebar-item/index.less b/packages/sidebar-item/index.less
index 54671b5a8..87c1c3f3c 100644
--- a/packages/sidebar-item/index.less
+++ b/packages/sidebar-item/index.less
@@ -2,16 +2,16 @@
 
 .van-sidebar-item {
   display: block;
-  overflow: hidden;
-  user-select: none;
-  word-break: break-all;
   box-sizing: border-box;
-  color: @sidebar-text-color;
   padding: @sidebar-padding;
+  overflow: hidden;
+  color: @sidebar-text-color;
   font-size: @sidebar-font-size;
   line-height: @sidebar-line-height;
+  word-break: break-all;
   background-color: @sidebar-background-color;
   border-left: 3px solid transparent;
+  user-select: none;
 
   &__text {
     position: relative;
diff --git a/packages/sku/index.less b/packages/sku/index.less
index 11f048e3a..6baa0ce2d 100644
--- a/packages/sku/index.less
+++ b/packages/sku/index.less
@@ -3,10 +3,10 @@
 
 .van-sku {
   &-container {
+    max-height: max-content; /* avoid androiod keyboard cover fields */
+    overflow-y: visible;
     font-size: 14px;
     background: @white;
-    overflow-y: visible;
-    max-height: max-content; /* avoid androiod keyboard cover fields */
   }
 
   &-body {
@@ -26,29 +26,29 @@
     &__img-wrap {
       position: relative;
       float: left;
-      margin-top: -10px;
       width: 80px;
       height: 80px;
+      margin-top: -10px;
       background: @background-color;
       border-radius: 2px;
 
       img {
         position: absolute;
-        margin: auto;
         top: 0;
-        left: 0;
         right: 0;
         bottom: 0;
+        left: 0;
         max-width: 100%;
         max-height: 100%;
+        margin: auto;
       }
     }
 
     &__goods-info {
-      padding: 10px 60px 10px 10px;
-      min-height: 82px;
-      overflow: hidden;
       box-sizing: border-box;
+      min-height: 82px;
+      padding: 10px 60px 10px 10px;
+      overflow: hidden;
     }
   }
 
@@ -66,17 +66,17 @@
   }
 
   &__goods-price {
-    color: @red;
     margin-top: 10px;
+    color: @red;
     vertical-align: middle;
   }
 
   &__close-icon {
+    position: absolute;
     top: 10px;
     right: 15px;
-    font-size: 20px;
     color: @gray-dark;
-    position: absolute;
+    font-size: 20px;
     text-align: center;
   }
 
@@ -105,28 +105,28 @@
 
     &__item {
       display: inline-block;
-      padding: 5px 9px;
-      margin: 0 10px 10px 0;
-      height: 28px;
+      box-sizing: border-box;
       min-width: 52px;
-      line-height: 16px;
-      font-size: 12px;
+      height: 28px;
+      margin: 0 10px 10px 0;
+      padding: 5px 9px;
       color: @text-color;
+      font-size: 12px;
+      line-height: 16px;
       text-align: center;
       border: 1px solid @gray-dark;
       border-radius: 3px;
-      box-sizing: border-box;
 
       &--active {
         color: @white;
-        border-color: @red;
         background: @red;
+        border-color: @red;
       }
 
       &--disabled {
+        color: @gray;
         background: @active-color;
         border-color: @border-color;
-        color: @gray;
       }
     }
   }
@@ -134,8 +134,8 @@
   /* sku stepper */
   &-stepper {
     &-stock {
-      padding: 12px 0;
       margin-left: 15px;
+      padding: 12px 0;
     }
 
     &-container {
@@ -185,12 +185,12 @@
     display: inline-block;
 
     &__header {
-      color: @text-color;
       padding: 0 10px;
+      color: @text-color;
       font-size: 12px;
       line-height: 24px;
-      border-radius: 3px;
       border: 1px solid @border-color;
+      border-radius: 3px;
 
       .van-icon {
         top: 3px;
@@ -200,45 +200,45 @@
     }
 
     &__img {
-      height: 60px;
-      width: 60px;
-      float: left;
-      margin: 10px 10px 0 0;
       position: relative;
+      float: left;
+      width: 60px;
+      height: 60px;
+      margin: 10px 10px 0 0;
       border: 1px solid @border-color;
 
       img {
+        position: relative;
+        top: 50%;
         max-width: 100%;
         max-height: 100%;
-        top: 50%;
-        position: relative;
         transform: translateY(-50%);
       }
     }
 
     &__delete {
       position: absolute;
-      color: @red;
       top: -12px;
       right: -14px;
       z-index: 1;
       padding: 6px;
+      color: @red;
 
       &::before {
-        border-radius: 14px;
         background-color: @white;
+        border-radius: 14px;
       }
     }
 
     &__uploading {
       position: absolute;
       top: 0;
-      left: 0;
       right: 0;
       bottom: 0;
-      margin: auto;
+      left: 0;
       width: 20px;
       height: 20px;
+      margin: auto;
     }
   }
 
diff --git a/packages/slider/index.less b/packages/slider/index.less
index 37340589a..c0b695e69 100644
--- a/packages/slider/index.less
+++ b/packages/slider/index.less
@@ -2,21 +2,21 @@
 
 .van-slider {
   position: relative;
-  border-radius: 999px;
   background-color: @slider-inactive-background-color;
+  border-radius: 999px;
 
   &__bar {
     position: relative;
-    border-radius: inherit;
     background-color: @slider-active-background-color;
+    border-radius: inherit;
   }
 
   &__button {
     width: @slider-button-width;
     height: @slider-button-height;
-    box-shadow: @slider-button-box-shadow;
-    border-radius: @slider-button-border-radius;
     background-color: @slider-button-background-color;
+    border-radius: @slider-button-border-radius;
+    box-shadow: @slider-button-box-shadow;
 
     &-wrapper {
       position: absolute;
@@ -26,12 +26,12 @@
 
       /* use pseudo element to expand touch area */
       &::after {
-        content: '';
         position: absolute;
-        width: 200%;
-        height: 200%;
         top: -50%;
         left: -50%;
+        width: 200%;
+        height: 200%;
+        content: '';
       }
     }
   }
@@ -41,8 +41,8 @@
   }
 
   &--vertical {
-    height: 100%;
     display: inline-block;
+    height: 100%;
 
     .van-slider__button-wrapper {
       top: auto;
diff --git a/packages/step/index.less b/packages/step/index.less
index 55e2175d3..7ff24d6ca 100644
--- a/packages/step/index.less
+++ b/packages/step/index.less
@@ -1,17 +1,17 @@
 @import '../style/var';
 
 .van-step {
-  flex: 1;
-  font-size: 14px;
   position: relative;
+  flex: 1;
   color: @gray-dark;
+  font-size: 14px;
 
   &__circle {
     display: block;
     width: 5px;
     height: 5px;
-    border-radius: 50%;
     background-color: @gray-dark;
+    border-radius: 50%;
   }
 
   &--horizontal {
@@ -19,8 +19,8 @@
 
     &:first-child {
       .van-step__title {
-        transform: none;
         margin-left: 0;
+        transform: none;
       }
     }
 
@@ -30,13 +30,13 @@
       width: auto;
 
       .van-step__title {
-        transform: none;
         margin-left: 0;
+        transform: none;
       }
 
       .van-step__circle-container {
-        left: auto;
         right: -9px;
+        left: auto;
       }
     }
 
@@ -44,27 +44,27 @@
       position: absolute;
       top: 30px;
       left: -8px;
-      padding: 0 8px;
       z-index: 1;
+      padding: 0 8px;
       background-color: @white;
       transform: translateY(-50%);
     }
 
     .van-step__title {
       display: inline-block;
-      font-size: 12px;
       margin-left: 3px;
+      font-size: 12px;
       transform: translateX(-50%);
 
-      @media(max-width: 321px) {
+      @media (max-width: 321px) {
         font-size: 11px;
       }
     }
 
     .van-step__line {
       position: absolute;
-      left: 0;
       top: 30px;
+      left: 0;
       width: 100%;
       height: 1px;
       background-color: @border-color;
@@ -81,11 +81,11 @@
   }
 
   &--vertical {
-    float: none;
     display: block;
+    float: none;
+    padding: 10px 10px 10px 0;
     font-size: 14px;
     line-height: 18px;
-    padding: 10px 10px 10px 0;
 
     &:not(:last-child)::after {
       border-bottom-width: 1px;
@@ -93,24 +93,24 @@
 
     &:first-child {
       &::before {
-        content: '';
         position: absolute;
-        width: 1px;
-        height: 20px;
-        background-color: @white;
         top: 0;
         left: -15px;
         z-index: 1;
+        width: 1px;
+        height: 20px;
+        background-color: @white;
+        content: '';
       }
     }
 
     .van-step__circle-container {
       position: absolute;
-      z-index: 2;
       top: 19px;
       left: -15px;
-      line-height: 1;
+      z-index: 2;
       font-size: 12px;
+      line-height: 1;
       transform: translate(-50%, -50%);
     }
 
diff --git a/packages/stepper/index.less b/packages/stepper/index.less
index e07c792ae..2ad9ef9a7 100644
--- a/packages/stepper/index.less
+++ b/packages/stepper/index.less
@@ -5,15 +5,15 @@
 
   &__minus,
   &__plus {
+    position: relative;
+    box-sizing: border-box;
     width: 28px;
     height: 28px;
-    box-sizing: border-box;
-    background-color: @stepper-background-color;
-    border: 0;
     margin: 1px;
-    position: relative;
     padding: 5px;
     vertical-align: middle;
+    background-color: @stepper-background-color;
+    border: 0;
 
     &::before {
       width: 9px;
@@ -27,14 +27,14 @@
 
     &::before,
     &::after {
-      content: '';
       position: absolute;
-      margin: auto;
       top: 0;
-      left: 0;
       right: 0;
       bottom: 0;
+      left: 0;
+      margin: auto;
       background-color: @text-color;
+      content: '';
     }
 
     &:active {
@@ -68,19 +68,19 @@
   }
 
   &__input {
+    box-sizing: content-box;
     width: 30px;
     height: 26px;
-    padding: 1px;
-    border: 0;
     margin: 1px;
-    background-color: @stepper-background-color;
-    border-width: 1px 0;
-    border-radius: 0;
-    box-sizing: content-box;
+    padding: 1px;
     color: @text-color;
     font-size: 14px;
-    vertical-align: middle;
     text-align: center;
+    vertical-align: middle;
+    background-color: @stepper-background-color;
+    border: 0;
+    border-width: 1px 0;
+    border-radius: 0;
     -webkit-appearance: none;
 
     &[disabled] {
@@ -91,7 +91,7 @@
 
   input[type="number"]::-webkit-inner-spin-button,
   input[type="number"]::-webkit-outer-spin-button {
-    -webkit-appearance: none;
     margin: 0;
+    -webkit-appearance: none;
   }
 }
diff --git a/packages/steps/index.less b/packages/steps/index.less
index 53eb55243..b131a25a4 100644
--- a/packages/steps/index.less
+++ b/packages/steps/index.less
@@ -8,9 +8,9 @@
     padding: 10px 10px 0;
 
     .van-steps__items {
+      position: relative;
       display: flex;
       margin: 0 0 10px;
-      position: relative;
       padding-bottom: 22px;
     }
   }
diff --git a/packages/style/mixins/clearfix.less b/packages/style/mixins/clearfix.less
index 47ff6e667..c9f0cb19c 100644
--- a/packages/style/mixins/clearfix.less
+++ b/packages/style/mixins/clearfix.less
@@ -1,7 +1,7 @@
 .clearfix() {
   &::after {
-    content: '';
     display: table;
     clear: both;
+    content: '';
   }
 }
diff --git a/packages/style/mixins/ellipsis.less b/packages/style/mixins/ellipsis.less
index 44e005dde..44b97b728 100644
--- a/packages/style/mixins/ellipsis.less
+++ b/packages/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;
 }
diff --git a/packages/style/mixins/hairline.less b/packages/style/mixins/hairline.less
index 7975be75a..f824e276f 100644
--- a/packages/style/mixins/hairline.less
+++ b/packages/style/mixins/hairline.less
@@ -1,27 +1,27 @@
 .hairline-common() {
-  content: ' ';
   position: absolute;
-  pointer-events: none;
   box-sizing: border-box;
+  content: ' ';
+  pointer-events: none;
 }
 
 .hairline(@border-color: #ebedf0) {
   .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: #ebedf0, @left: 0) {
   .hairline-common();
 
-  left: @left;
   right: 0;
   bottom: 0;
-  transform: scaleY(0.5);
+  left: @left;
   border-bottom: 1px solid @border-color;
+  transform: scaleY(0.5);
 }
diff --git a/packages/style/normalize.less b/packages/style/normalize.less
index e1519d9b6..25a2b897a 100644
--- a/packages/style/normalize.less
+++ b/packages/style/normalize.less
@@ -33,6 +33,6 @@ ul {
 input,
 button,
 textarea {
-  font: inherit;
   color: inherit;
+  font: inherit;
 }
diff --git a/packages/style/reset.less b/packages/style/reset.less
index e05996239..41dd438ac 100644
--- a/packages/style/reset.less
+++ b/packages/style/reset.less
@@ -83,10 +83,10 @@ audio,
 video {
   margin: 0;
   padding: 0;
-  border: 0;
   font: inherit;
   font-size: 100%;
   vertical-align: baseline;
+  border: 0;
 }
 
 html {
@@ -148,14 +148,14 @@ summary {
 }
 
 body {
-  font-family: Arial, Helvetica, 'STHeiti STXihei', 'Microsoft YaHei', Tohoma, sans-serif;
   color: @text-color;
+  font-family: Arial, Helvetica, 'STHeiti STXihei', 'Microsoft YaHei', Tohoma, sans-serif;
   background-color: @background-color;
 }
 
 a {
-  background: transparent;
   text-decoration: none;
+  background: transparent;
 }
 
 button,
@@ -166,7 +166,7 @@ input[type='email'],
 input[type='search'],
 select,
 textarea {
-  font-family: inherit;
   margin: 0;
+  font-family: inherit;
   -webkit-appearance: none;
 }
diff --git a/packages/submit-bar/index.less b/packages/submit-bar/index.less
index c9bc7f1da..1ada4cc0c 100644
--- a/packages/submit-bar/index.less
+++ b/packages/submit-bar/index.less
@@ -1,25 +1,25 @@
 @import '../style/var';
 
 .van-submit-bar {
-  left: 0;
-  bottom: 0;
-  width: 100%;
-  z-index: 100;
   position: fixed;
-  user-select: none;
+  bottom: 0;
+  left: 0;
+  z-index: 100;
+  width: 100%;
   background-color: @white;
+  user-select: none;
 
   &__tip {
-    color: #f56723;
     padding: 10px;
+    color: #f56723;
     font-size: 12px;
     line-height: 18px;
     background-color: #fff7cc;
   }
 
   &__tip-icon {
-    font-size: 12px;
     min-width: 18px;
+    font-size: 12px;
     vertical-align: middle;
   }
 
@@ -28,18 +28,18 @@
   }
 
   &__bar {
-    height: 50px;
     display: flex;
-    font-size: 14px;
     align-items: center;
+    height: 50px;
+    font-size: 14px;
   }
 
   &__text {
     flex: 1;
+    padding-right: 12px;
+    color: @text-color;
     font-weight: 500;
     text-align: right;
-    color: @text-color;
-    padding-right: 12px;
 
     span {
       display: inline-block;
diff --git a/packages/swipe-cell/index.less b/packages/swipe-cell/index.less
index 14da6ce49..e2a54f843 100644
--- a/packages/swipe-cell/index.less
+++ b/packages/swipe-cell/index.less
@@ -1,14 +1,14 @@
 @import '../style/var';
 
 .van-swipe-cell {
-  overflow: hidden;
   position: relative;
+  overflow: hidden;
 
   &__left,
   &__right {
+    position: absolute;
     top: 0;
     height: 100%;
-    position: absolute;
   }
 
   &__left {
diff --git a/packages/swipe/index.less b/packages/swipe/index.less
index 3221d4c37..4ef6abbd7 100644
--- a/packages/swipe/index.less
+++ b/packages/swipe/index.less
@@ -1,8 +1,8 @@
 @import '../style/var';
 
 .van-swipe {
-  overflow: hidden;
   position: relative;
+  overflow: hidden;
   user-select: none;
 
   &__track {
@@ -10,16 +10,16 @@
   }
 
   &__indicators {
-    display: flex;
     position: absolute;
-    left: 50%;
     bottom: @swipe-indicator-margin;
+    left: 50%;
+    display: flex;
     transform: translateX(-50%);
 
     &--vertical {
-      left: @swipe-indicator-margin;
       top: 50%;
       bottom: auto;
+      left: @swipe-indicator-margin;
       flex-direction: column;
       transform: translateY(-50%);
 
@@ -30,11 +30,11 @@
   }
 
   &__indicator {
-    border-radius: 100%;
-    opacity: @swipe-indicator-inactive-opacity;
     width: @swipe-indicator-size;
     height: @swipe-indicator-size;
     background-color: @swipe-indicator-inactive-background-color;
+    border-radius: 100%;
+    opacity: @swipe-indicator-inactive-opacity;
     transition: opacity .2s;
 
     &:not(:last-child) {
@@ -42,8 +42,8 @@
     }
 
     &--active {
-      opacity: @swipe-indicator-active-opacity;
       background-color: @swipe-indicator-active-background-color;
+      opacity: @swipe-indicator-active-opacity;
     }
   }
 }
diff --git a/packages/switch/index.less b/packages/switch/index.less
index c6398f0de..ce5e0ca92 100644
--- a/packages/switch/index.less
+++ b/packages/switch/index.less
@@ -1,27 +1,27 @@
 @import '../style/var';
 
 .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;
-    border-radius: 100%;
+    z-index: @switch-node-z-index;
     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 {
diff --git a/packages/tabbar-item/index.less b/packages/tabbar-item/index.less
index 48e73a342..ff89d134b 100644
--- a/packages/tabbar-item/index.less
+++ b/packages/tabbar-item/index.less
@@ -1,19 +1,19 @@
 @import '../style/var';
 
 .van-tabbar-item {
-  flex: 1;
   display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
   color: @tabbar-item-text-color;
   font-size: @tabbar-item-font-size;
   line-height: @tabbar-item-line-height;
-  align-items: center;
-  flex-direction: column;
-  justify-content: center;
 
   &__icon {
     position: relative;
-    font-size: @tabbar-item-icon-size;
     margin-bottom: @tabbar-item-margin-bottom;
+    font-size: @tabbar-item-icon-size;
 
     .van-icon {
       display: block;
@@ -22,14 +22,14 @@
 
     &--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: ' ';
       }
     }
 
diff --git a/packages/tabbar/index.less b/packages/tabbar/index.less
index 5ac33da58..92c3fc86b 100644
--- a/packages/tabbar/index.less
+++ b/packages/tabbar/index.less
@@ -7,9 +7,9 @@
   background-color: @tabbar-background-color;
 
   &--fixed {
-    left: 0;
-    bottom: 0;
     position: fixed;
+    bottom: 0;
+    left: 0;
   }
 
   &--safe-area-inset-bottom {
diff --git a/packages/tabs/index.less b/packages/tabs/index.less
index dbfe6f530..89b730e58 100644
--- a/packages/tabs/index.less
+++ b/packages/tabs/index.less
@@ -1,24 +1,24 @@
 @import '../style/var';
 
 .van-tab {
+  position: relative;
   flex: 1;
-  cursor: pointer;
+  box-sizing: border-box;
   min-width: 0; // hack for flex ellipsis
   padding: 0 5px;
-  font-size: 14px;
-  position: relative;
   color: @gray-darker;
+  font-size: 14px;
   line-height: @tabs-line-height;
   text-align: center;
-  box-sizing: border-box;
+  cursor: pointer;
 
   span {
     display: block;
   }
 
   &--active {
-    font-weight: 500;
     color: @text-color;
+    font-weight: 500;
   }
 
   &--disabled {
@@ -30,12 +30,12 @@
   position: relative;
 
   &__wrap {
+    position: absolute;
     top: 0;
-    left: 0;
     right: 0;
+    left: 0;
     z-index: 99;
     overflow: hidden;
-    position: absolute;
 
     &--page-top {
       position: fixed;
@@ -68,28 +68,28 @@
   }
 
   &__nav {
-    display: flex;
-    user-select: none;
     position: relative;
+    display: flex;
     background-color: @white;
+    user-select: none;
 
     &--line {
+      box-sizing: content-box;
       height: 100%;
       padding-bottom: 15px; /* 15px padding to hide scrollbar in mobile safari */
-      box-sizing: content-box;
     }
 
     &--card {
-      margin: 0 15px;
-      border-radius: 2px;
       box-sizing: border-box;
-      border: 1px solid @red;
       height: @tabs-card-height;
+      margin: 0 15px;
+      border: 1px solid @red;
+      border-radius: 2px;
 
       .van-tab {
         color: @red;
-        border-right: 1px solid @red;
         line-height: @tabs-card-height - 2px;
+        border-right: 1px solid @red;
 
         &:last-child {
           border-right: none;
@@ -108,13 +108,13 @@
   }
 
   &__line {
-    z-index: 1;
-    left: 0;
-    bottom: 15px;
-    height: 3px;
     position: absolute;
-    border-radius: 3px;
+    bottom: 15px;
+    left: 0;
+    z-index: 1;
+    height: 3px;
     background-color: @red;
+    border-radius: 3px;
   }
 
   &__content {
@@ -148,8 +148,8 @@
   }
 
   .van-tab__pane {
-    width: 100%;
     flex-shrink: 0;
     box-sizing: border-box;
+    width: 100%;
   }
 }
diff --git a/packages/tag/index.less b/packages/tag/index.less
index 03bc343d6..156302828 100644
--- a/packages/tag/index.less
+++ b/packages/tag/index.less
@@ -1,12 +1,12 @@
 @import '../style/var';
 
 .van-tag {
+  display: inline-block;
+  padding: @tag-padding;
   color: @tag-text-color;
   font-size: @tag-font-size;
-  padding: @tag-padding;
   line-height: normal;
   border-radius: @tag-border-radius;
-  display: inline-block;
 
   &::after {
     border-color: currentColor;
diff --git a/packages/toast/index.less b/packages/toast/index.less
index 80c85aa8c..6575f1a88 100644
--- a/packages/toast/index.less
+++ b/packages/toast/index.less
@@ -5,25 +5,25 @@
   top: 50%;
   left: 50%;
   display: flex;
-  text-align: center;
-  color: @toast-text-color;
-  max-width: @toast-max-width;
-  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;
+  align-items: center;
   justify-content: center;
   box-sizing: content-box;
-  transform: translate3d(-50%, -50%, 0);
-  background-color: @toast-background-color;
 
   // hack for avoid max-width when use left & fixed
   width: fit-content;
+  max-width: @toast-max-width;
+  color: @toast-text-color;
+  font-size: @toast-font-size;
+  line-height: @toast-line-height;
 
   // allow newline charactor
   white-space: pre-wrap;
+  text-align: center;
+  word-break: break-all;
+  background-color: @toast-background-color;
+  border-radius: @toast-border-radius;
+  transform: translate3d(-50%, -50%, 0);
 
   // should not add pointer-events: none directly to body tag
   // that will cause unexpected tap-highlight-color in mobile safari
@@ -34,14 +34,14 @@
   }
 
   &--text {
-    padding: @toast-text-padding;
     min-width: @toast-text-min-width;
+    padding: @toast-text-padding;
   }
 
   &--default {
     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;
diff --git a/packages/tree-select/index.less b/packages/tree-select/index.less
index d90b287ac..26ced94d7 100644
--- a/packages/tree-select/index.less
+++ b/packages/tree-select/index.less
@@ -1,16 +1,16 @@
 @import '../style/var';
 
 .van-tree-select {
-  user-select: none;
-  font-size: 14px;
   position: relative;
+  font-size: 14px;
+  user-select: none;
 
   &__nav {
-    width: 35%;
     position: absolute;
-    left: 0;
     top: 0;
     bottom: 0;
+    left: 0;
+    width: 35%;
     min-width: 120px;
     overflow: scroll;
     background-color: @background-color-light;
@@ -19,8 +19,8 @@
 
   &__nitem {
     position: relative;
-    line-height: 44px;
     padding: 0 9px 0 15px;
+    line-height: 44px;
 
     &--active::after {
       position: absolute;
@@ -47,14 +47,14 @@
   }
 
   &__content {
+    box-sizing: border-box;
     width: 65%;
     height: 100%;
-    padding-left: 15px;
     margin-left: 35%;
+    padding-left: 15px;
     overflow: scroll;
-    -webkit-overflow-scrolling: touch;
     background-color: @white;
-    box-sizing: border-box;
+    -webkit-overflow-scrolling: touch;
   }
 
   &__item {
diff --git a/packages/uploader/index.less b/packages/uploader/index.less
index e624c585c..0b40be564 100644
--- a/packages/uploader/index.less
+++ b/packages/uploader/index.less
@@ -12,8 +12,8 @@
     left: 0;
     width: 100%;
     height: 100%;
-    opacity: 0;
     cursor: pointer;
+    opacity: 0;
   }
 
   input[type="file"]::-webkit-file-upload-button {
diff --git a/yarn.lock b/yarn.lock
index 9023d375f..0062a179a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1619,7 +1619,7 @@ atob@^2.1.1:
   resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
   integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
 
-autoprefixer@^9.5.1:
+autoprefixer@^9.0.0, autoprefixer@^9.5.1:
   version "9.5.1"
   resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.5.1.tgz#243b1267b67e7e947f28919d786b50d3bb0fb357"
   integrity sha512-KJSzkStUl3wP0D5sdMlP82Q52JLy5+atf2MHAre48+ckWkXgixmfHyWmA77wFDy6jTHU6mIgXv6hAQ2mf1PjJQ==
@@ -2505,7 +2505,7 @@ cosmiconfig@^4.0.0:
     parse-json "^4.0.0"
     require-from-string "^2.0.1"
 
-cosmiconfig@^5.0.2, cosmiconfig@^5.2.0:
+cosmiconfig@^5.0.0, cosmiconfig@^5.0.2, cosmiconfig@^5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-5.2.0.tgz#45038e4d28a7fe787203aede9c25bca4a08b12c8"
   integrity sha512-nxt+Nfc3JAqf4WIWd0jXLjTJZmsPLrA9DDc4nRw2KFJQJK7DNooqSXrNI7tzLG50CF8axczly5UV929tBmh/7g==
@@ -3683,6 +3683,13 @@ figures@^2.0.0:
   dependencies:
     escape-string-regexp "^1.0.5"
 
+file-entry-cache@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-4.0.0.tgz#633567d15364aefe0b299e1e217735e8f3a9f6e8"
+  integrity sha512-AVSwsnbV8vH/UVbvgEhf3saVQXORNv0ZzSkvkhQIaia5Tia+JhGTaa/ePUSVoPHQyGayQNmYfkzFi3WZV5zcpA==
+  dependencies:
+    flat-cache "^2.0.1"
+
 file-entry-cache@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-5.0.1.tgz#ca0f6efa6dd3d561333fb14515065c2fafdf439c"
@@ -3992,6 +3999,11 @@ get-own-enumerable-property-symbols@^3.0.0:
   resolved "https://registry.yarnpkg.com/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.0.tgz#b877b49a5c16aefac3655f2ed2ea5b684df8d203"
   integrity sha512-CIJYJC4GGF06TakLg8z4GQKvDsx9EMspVxOYih7LerEL/WosUnFIww45CGfxfeKHqlg3twgUrYRT1O3WQqjGCg==
 
+get-stdin@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-6.0.0.tgz#9e09bf712b360ab9225e812048f71fde9c89657b"
+  integrity sha512-jp4tHawyV7+fkkSKyvjuLZswblUtz+SQKzSWnBbii16BuZksJlU1wuBYXY75r+duh/llF1ur6oNwi+2ZzjKZ7g==
+
 get-stdin@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-7.0.0.tgz#8d5de98f15171a125c5e516643c7a6d0ea8a96f6"
@@ -4107,7 +4119,7 @@ globby@^6.1.0:
     pify "^2.0.0"
     pinkie-promise "^2.0.0"
 
-globby@^9.2.0:
+globby@^9.0.0, globby@^9.2.0:
   version "9.2.0"
   resolved "https://registry.yarnpkg.com/globby/-/globby-9.2.0.tgz#fd029a706c703d29bdd170f4b6db3a3f7a7cb63d"
   integrity sha512-ollPHROa5mcxDEkwg6bPt3QbEf4pDQSNtd6JPL1YvOvAo/7/0VAm9TccUeoTmarjPw4pfUthSCqcyfNB1I3ZSg==
@@ -4482,7 +4494,7 @@ ignore@^4.0.3, ignore@^4.0.6:
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc"
   integrity sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==
 
-ignore@^5.0.6:
+ignore@^5.0.4, ignore@^5.0.6:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.1.1.tgz#2fc6b8f518aff48fef65a7f348ed85632448e4a5"
   integrity sha512-DWjnQIFLenVrwyRCKZT+7a7/U4Cqgar4WG8V++K3hw+lrW1hc/SIwdiGmtxKCVACmHULTuGeBbHJmbwW7/sAvA==
@@ -5563,6 +5575,11 @@ kleur@^3.0.2:
   resolved "https://registry.yarnpkg.com/kleur/-/kleur-3.0.3.tgz#a79c9ecc86ee1ce3fa6206d1216c501f147fc07e"
   integrity sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==
 
+known-css-properties@^0.11.0:
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/known-css-properties/-/known-css-properties-0.11.0.tgz#0da784f115ea77c76b81536d7052e90ee6c86a8a"
+  integrity sha512-bEZlJzXo5V/ApNNa5z375mJC6Nrz4vG43UgcSCrg2OHC+yuB6j0iDSrY7RQ/+PRofFB03wNIIt9iXIVLr4wc7w==
+
 known-css-properties@^0.13.0:
   version "0.13.0"
   resolved "https://registry.yarnpkg.com/known-css-properties/-/known-css-properties-0.13.0.tgz#2750fde566cbf542a9876d4acd6bb0257ebadd2c"
@@ -5865,7 +5882,7 @@ lodash.uniq@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
   integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
 
-lodash@^4.15.0, lodash@^4.17.11, lodash@^4.17.3, lodash@^4.17.4:
+lodash@^4.15.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.3, lodash@^4.17.4:
   version "4.17.11"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d"
   integrity sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==
@@ -5877,7 +5894,7 @@ log-symbols@^1.0.2:
   dependencies:
     chalk "^1.0.0"
 
-log-symbols@^2.2.0:
+log-symbols@^2.0.0, log-symbols@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-2.2.0.tgz#5740e1c5d6f0dfda4ad9323b5332107ef6b4c40a"
   integrity sha512-VeIAFslyIerEJLXHziedo2basKbMKtTw3vfn5IzG0XTjhAVEJyNHnL2p7vc+wBDSdQuUpNw3M2u6xb9QsAY5Eg==
@@ -6025,7 +6042,7 @@ matcher@^1.0.0:
   dependencies:
     escape-string-regexp "^1.0.4"
 
-mathml-tag-names@^2.1.0:
+mathml-tag-names@^2.0.1, mathml-tag-names@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/mathml-tag-names/-/mathml-tag-names-2.1.0.tgz#490b70e062ee24636536e3d9481e333733d00f2c"
   integrity sha512-3Zs9P/0zzwTob2pdgT0CHZuMbnSUSp8MB1bddfm+HDmnFWHGT4jvEZRf+2RuPoa+cjdn/z25SEt5gFTqdhvJAg==
@@ -7033,7 +7050,7 @@ pify@^3.0.0:
   resolved "https://registry.yarnpkg.com/pify/-/pify-3.0.0.tgz#e5a4acd2c101fdf3d9a4d07f0dbc4db49dd28176"
   integrity sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=
 
-pify@^4.0.1:
+pify@^4.0.0, pify@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/pify/-/pify-4.0.1.tgz#4b2cd25c50d598735c50292224fd8c6df41e3231"
   integrity sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==
@@ -7126,7 +7143,7 @@ postcss-jsx@^0.36.0:
   dependencies:
     "@babel/core" ">=7.1.0"
 
-postcss-less@^3.1.4:
+postcss-less@^3.1.0, postcss-less@^3.1.4:
   version "3.1.4"
   resolved "https://registry.yarnpkg.com/postcss-less/-/postcss-less-3.1.4.tgz#369f58642b5928ef898ffbc1a6e93c958304c5ad"
   integrity sha512-7TvleQWNM2QLcHqvudt3VYjULVB49uiW6XzEUFmvwHzvsOEF5MwBrIXZDJQvJNFGjJQTzSzZnDoCJ8h/ljyGXA==
@@ -7196,7 +7213,7 @@ postcss-modules-values@^2.0.0:
     icss-replace-symbols "^1.1.0"
     postcss "^7.0.6"
 
-postcss-reporter@^6.0.1:
+postcss-reporter@^6.0.0, postcss-reporter@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/postcss-reporter/-/postcss-reporter-6.0.1.tgz#7c055120060a97c8837b4e48215661aafb74245f"
   integrity sha512-LpmQjfRWyabc+fRygxZjpRxfhRf9u/fdlKf4VHG4TSPbV2XNsuISzYW1KL+1aQzx53CAppa1bKG4APIB/DOXXw==
@@ -7211,7 +7228,7 @@ postcss-resolve-nested-selector@^0.1.1:
   resolved "https://registry.yarnpkg.com/postcss-resolve-nested-selector/-/postcss-resolve-nested-selector-0.1.1.tgz#29ccbc7c37dedfac304e9fff0bf1596b3f6a0e4e"
   integrity sha1-Kcy8fDfe36wwTp//C/FZaz9qDk4=
 
-postcss-safe-parser@^4.0.1:
+postcss-safe-parser@^4.0.0, postcss-safe-parser@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/postcss-safe-parser/-/postcss-safe-parser-4.0.1.tgz#8756d9e4c36fdce2c72b091bbc8ca176ab1fcdea"
   integrity sha512-xZsFA3uX8MO3yAda03QrG3/Eg1LN3EPfjjf07vke/46HERLZyHrTsQ9E1r1w1W//fWEhtYNndo2hQplN2cVpCQ==
@@ -7260,6 +7277,22 @@ postcss-selector-parser@^6.0.0:
     indexes-of "^1.0.1"
     uniq "^1.0.1"
 
+postcss-sorting@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-sorting/-/postcss-sorting-4.1.0.tgz#a107f0bf3852977fa64e4442bc340c88d5aacdb3"
+  integrity sha512-r4T2oQd1giURJdHQ/RMb72dKZCuLOdWx2B/XhXN1Y1ZdnwXsKH896Qz6vD4tFy9xSjpKNYhlZoJmWyhH/7JUQw==
+  dependencies:
+    lodash "^4.17.4"
+    postcss "^7.0.0"
+
+postcss-sorting@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-sorting/-/postcss-sorting-5.0.0.tgz#4e4ce0a554c17d78d4287f08f792db8992bf62b5"
+  integrity sha512-m25mKLNq0fPAyZFElQ1hngRDFQDMlc+9ZwoWsL8oix6i1GsBzIxyke6sDeY9BXee7L86z4tex01fcH/9wTj3Jg==
+  dependencies:
+    lodash "^4.17.11"
+    postcss "^7.0.14"
+
 postcss-syntax@^0.36.2:
   version "0.36.2"
   resolved "https://registry.yarnpkg.com/postcss-syntax/-/postcss-syntax-0.36.2.tgz#f08578c7d95834574e5593a82dfbfa8afae3b51c"
@@ -7279,7 +7312,7 @@ postcss-values-parser@^1.5.0:
     indexes-of "^1.0.1"
     uniq "^1.0.1"
 
-postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.16, postcss@^7.0.2, postcss@^7.0.5, postcss@^7.0.6, postcss@^7.0.7:
+postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.13, postcss@^7.0.14, postcss@^7.0.16, postcss@^7.0.2, postcss@^7.0.5, postcss@^7.0.6, postcss@^7.0.7:
   version "7.0.16"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.16.tgz#48f64f1b4b558cb8b52c88987724359acb010da2"
   integrity sha512-MOo8zNSlIqh22Uaa3drkdIAgUGEL+AD1ESiSdmElLUmE2uVDo1QloiT/IfW9qRw8Gw+Y/w69UVMGwbufMSftxA==
@@ -8682,6 +8715,14 @@ style-search@^0.1.0:
   resolved "https://registry.yarnpkg.com/style-search/-/style-search-0.1.0.tgz#7958c793e47e32e07d2b5cafe5c0bf8e12e77902"
   integrity sha1-eVjHk+R+MuB9K1yv5cC/jhLneQI=
 
+stylelint-config-rational-order@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/stylelint-config-rational-order/-/stylelint-config-rational-order-0.1.2.tgz#4e98e390783d437f0ec41fb73bc41992e78d02a0"
+  integrity sha512-Qo7ZQaihCwTqijfZg4sbdQQHtugOX/B1/fYh018EiDZHW+lkqH9uHOnsDwDPGZrYJuB6CoyI7MZh2ecw2dOkew==
+  dependencies:
+    stylelint "^9.10.1"
+    stylelint-order "^2.2.1"
+
 stylelint-config-recommended@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/stylelint-config-recommended/-/stylelint-config-recommended-2.2.0.tgz#46ab139db4a0e7151fd5f94af155512886c96d3f"
@@ -8694,6 +8735,24 @@ stylelint-config-standard@^18.3.0:
   dependencies:
     stylelint-config-recommended "^2.2.0"
 
+stylelint-order@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/stylelint-order/-/stylelint-order-2.2.1.tgz#cd2d4a0d81d91c705f1d275a58487e5ad5aa5828"
+  integrity sha512-019KBV9j8qp1MfBjJuotse6MgaZqGVtXMc91GU9MsS9Feb+jYUvUU3Z8XiClqPdqJZQ0ryXQJGg3U3PcEjXwfg==
+  dependencies:
+    lodash "^4.17.10"
+    postcss "^7.0.2"
+    postcss-sorting "^4.1.0"
+
+stylelint-order@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/stylelint-order/-/stylelint-order-3.0.0.tgz#ec44afb93a3183dcf8c91540d4486de776250506"
+  integrity sha512-CaK3ebU5qSDY4aQZ5yA5uCL1jjAeK+TQeyKcH1w1O/wxC1GjM6JCv0msrA3Wno29F1jW/1UoWIsRFeo7hk9gtg==
+  dependencies:
+    lodash "^4.17.11"
+    postcss "^7.0.14"
+    postcss-sorting "^5.0.0"
+
 stylelint@^10.0.1:
   version "10.0.1"
   resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-10.0.1.tgz#f85cd9755e905d826023d67df62b32716fa6dfb4"
@@ -8747,6 +8806,59 @@ stylelint@^10.0.1:
     svg-tags "^1.0.0"
     table "^5.2.3"
 
+stylelint@^9.10.1:
+  version "9.10.1"
+  resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-9.10.1.tgz#5f0ee3701461dff1d68284e1386efe8f0677a75d"
+  integrity sha512-9UiHxZhOAHEgeQ7oLGwrwoDR8vclBKlSX7r4fH0iuu0SfPwFaLkb1c7Q2j1cqg9P7IDXeAV2TvQML/fRQzGBBQ==
+  dependencies:
+    autoprefixer "^9.0.0"
+    balanced-match "^1.0.0"
+    chalk "^2.4.1"
+    cosmiconfig "^5.0.0"
+    debug "^4.0.0"
+    execall "^1.0.0"
+    file-entry-cache "^4.0.0"
+    get-stdin "^6.0.0"
+    global-modules "^2.0.0"
+    globby "^9.0.0"
+    globjoin "^0.1.4"
+    html-tags "^2.0.0"
+    ignore "^5.0.4"
+    import-lazy "^3.1.0"
+    imurmurhash "^0.1.4"
+    known-css-properties "^0.11.0"
+    leven "^2.1.0"
+    lodash "^4.17.4"
+    log-symbols "^2.0.0"
+    mathml-tag-names "^2.0.1"
+    meow "^5.0.0"
+    micromatch "^3.1.10"
+    normalize-selector "^0.2.0"
+    pify "^4.0.0"
+    postcss "^7.0.13"
+    postcss-html "^0.36.0"
+    postcss-jsx "^0.36.0"
+    postcss-less "^3.1.0"
+    postcss-markdown "^0.36.0"
+    postcss-media-query-parser "^0.2.3"
+    postcss-reporter "^6.0.0"
+    postcss-resolve-nested-selector "^0.1.1"
+    postcss-safe-parser "^4.0.0"
+    postcss-sass "^0.3.5"
+    postcss-scss "^2.0.0"
+    postcss-selector-parser "^3.1.0"
+    postcss-syntax "^0.36.2"
+    postcss-value-parser "^3.3.0"
+    resolve-from "^4.0.0"
+    signal-exit "^3.0.2"
+    slash "^2.0.0"
+    specificity "^0.4.1"
+    string-width "^3.0.0"
+    style-search "^0.1.0"
+    sugarss "^2.0.0"
+    svg-tags "^1.0.0"
+    table "^5.0.0"
+
 stylus-lookup@^3.0.1:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/stylus-lookup/-/stylus-lookup-3.0.2.tgz#c9eca3ff799691020f30b382260a67355fefdddd"
@@ -8801,6 +8913,16 @@ synchronous-promise@^2.0.6:
   resolved "https://registry.yarnpkg.com/synchronous-promise/-/synchronous-promise-2.0.7.tgz#3574b3d2fae86b145356a4b89103e1577f646fe3"
   integrity sha512-16GbgwTmFMYFyQMLvtQjvNWh30dsFe1cAW5Fg1wm5+dg84L9Pe36mftsIRU95/W2YsISxsz/xq4VB23sqpgb/A==
 
+table@^5.0.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/table/-/table-5.3.0.tgz#8a2c3354dc87312328c68732039b38b6a41c86c9"
+  integrity sha512-6V2qlZHIbbZQGzoP3Ghcj/IQDPhBvQYjZE4W4JEyFMkbzHziIzG6jxmAD87BZ1ZXgwPwgu3MzvCUGMOFRN7wlw==
+  dependencies:
+    ajv "^6.9.1"
+    lodash "^4.17.11"
+    slice-ansi "^2.1.0"
+    string-width "^3.0.0"
+
 table@^5.2.3:
   version "5.2.3"
   resolved "https://registry.yarnpkg.com/table/-/table-5.2.3.tgz#cde0cc6eb06751c009efab27e8c820ca5b67b7f2"