[Improvement] upgrade to precss 3.0 (#1696)

packages/vant-css/package.json

@@ -13,14 +13,13 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "autoprefixer": "^8.3.0",
-    "fs-extra": "^6.0.1",
+    "autoprefixer": "^9.1.3",
+    "fs-extra": "^7.0.0",
     "gulp": "^3.9.1",
-    "gulp-clean-css": "^3.9.0",
-    "gulp-postcss": "^7.0.0",
+    "gulp-clean-css": "^3.10.0",
+    "gulp-postcss": "^8.0.0",
     "postcss-calc": "^6.0.1",
-    "postcss-easy-import": "^3.0.0",
     "postcss-theme-variables": "^1.0.0",
-    "precss": "^2.0.0"
+    "precss": "^3.1.2"
   }
 }

packages/vant-css/src/card.css

@@ -58,7 +58,7 @@
   &__title {
     max-height: 40px;
 
-    @mixin multi-ellipsis 2;
+    @include multi-ellipsis(2);
   }
 
   &__desc {
@@ -66,7 +66,7 @@
     font-size: 12px;
     max-height: 20px;
 
-    @mixin ellipsis;
+    @include ellipsis;
   }
 
   &__price,

packages/vant-css/src/common/clearfix.css

@@ -1,5 +1,5 @@
 @import '../mixins/clearfix.css';
 
 .van-clearfix {
-  @mixin clearfix;
+  @include clearfix;
 }

packages/vant-css/src/common/ellipsis.css

@@ -1,5 +1,5 @@
 @import '../mixins/ellipsis.css';
 
 .van-ellipsis {
-  @mixin ellipsis;
+  @include ellipsis;
 }

packages/vant-css/src/common/hairline.css

@@ -1,10 +1,10 @@
-@import "../mixins/border-retina.css";
+@import "../mixins/hairline.css";
 
 [class*='van-hairline'] {
   position: relative;
 
   &::after {
-    @mixin hairline;
+    @include hairline;
   }
 }
 

packages/vant-css/src/coupon-list.css

@@ -70,7 +70,7 @@
     h2 {
       margin: 0;
 
-      @mixin ellipsis;
+      @include ellipsis;
     }
 
     h2 {

packages/vant-css/src/mixins/border-retina.css

@@ -1,34 +0,0 @@
-@import '../common/var.css';
-
-$border-poses: top, right, bottom, left;
-
-@define-mixin border-retina $poses: $border-poses, $border-retina-color: $border-color {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 200%;
-  height: 200%;
-  transform: scale(.5);
-  transform-origin: 0 0;
-  pointer-events: none;
-  box-sizing: border-box;
-
-  @each $pos in $poses {
-    border-$(pos): 1px solid $border-retina-color;
-  }
-}
-
-@define-mixin hairline $border-retina-color: $border-color {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 200%;
-  height: 200%;
-  transform: scale(.5);
-  transform-origin: 0 0;
-  pointer-events: none;
-  box-sizing: border-box;
-  border: 0 solid $border-retina-color;
-}

packages/vant-css/src/mixins/clearfix.css

@@ -1,4 +1,4 @@
-@define-mixin clearfix {
+@mixin clearfix {
   &::after {
     content: '';
     display: table;

packages/vant-css/src/mixins/ellipsis.css

@@ -1,13 +1,13 @@
-@define-mixin multi-ellipsis $lines {
-  overflow : hidden;
+@mixin multi-ellipsis($lines) {
+  overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: $lines;
   -webkit-box-orient: vertical;
 }
 
-@define-mixin ellipsis {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-}
+@mixin ellipsis {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}

packages/vant-css/src/mixins/hairline.css

@@ -0,0 +1,13 @@
+@mixin hairline($border-color: #e5e5e5) {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 200%;
+  height: 200%;
+  transform: scale(0.5);
+  transform-origin: 0 0;
+  pointer-events: none;
+  box-sizing: border-box;
+  border: 0 solid $border-color;
+}