perf: remove CSS variables polyfill (#4487)

* perf: remove CSS variables polyfill * style: fix missing calc value * perf: reduce some useless css vars
youzan · Sep 23, 2021 · 1a78895 · 1a78895
1 parent ba5526a
commit 1a78895
Show file tree

Hide file tree

Showing 57 changed files with 1,179 additions and 743 deletions.
diff --git a/example/pages/submit-bar/index.wxml b/example/pages/submit-bar/index.wxml
@@ -14,7 +14,7 @@
     price="{{ 3050 }}"
     button-text="提交订单"
     tip="您的收货地址不支持同城送, 我们已为您推荐快递"
-    tip-icon="//img.yzcdn.cn/public_files/2017/8/10/6af5b7168eed548100d9041f07b7c616.png"
+    tip-icon="info-o"
     bind:submit="onClickButton"
     custom-class="van-submit-bar"
     safe-area-inset-bottom="{{ false }}"

diff --git a/packages/action-sheet/index.less b/packages/action-sheet/index.less
@@ -1,20 +1,28 @@
 @import '../common/style/var.less';
-@import '../common/style/theme.less';
 
 .van-action-sheet {
-  .theme(max-height, '@action-sheet-max-height') !important;
-  .theme(color, '@action-sheet-item-text-color');
+  max-height: var(
+    --action-sheet-max-height,
+    @action-sheet-max-height
+  ) !important;
+  color: var(--action-sheet-item-text-color, @action-sheet-item-text-color);
 
   &__item,
   &__cancel {
     padding: 14px @padding-md;
     text-align: center;
-    .theme(font-size, '@action-sheet-item-font-size');
-    .theme(line-height, '@action-sheet-item-line-height');
-    .theme(background-color, '@action-sheet-item-background');
+    font-size: var(--action-sheet-item-font-size, @action-sheet-item-font-size);
+    line-height: var(
+      --action-sheet-item-line-height,
+      @action-sheet-item-line-height
+    );
+    background-color: var(
+      --action-sheet-item-background,
+      @action-sheet-item-background
+    );
 
     &--hover {
-      .theme(background-color, '@active-color');
+      background-color: @active-color;
     }
 
     // reset weapp default border
@@ -24,53 +32,92 @@
   }
 
   &__cancel {
-    .theme(color, '@action-sheet-cancel-text-color');
+    color: var(
+      --action-sheet-cancel-text-color,
+      @action-sheet-cancel-text-color
+    );
   }
 
   &__gap {
     display: block;
-    .theme(height, '@action-sheet-cancel-padding-top');
-    .theme(background-color, '@action-sheet-cancel-padding-color');
+    height: var(
+      --action-sheet-cancel-padding-top,
+      @action-sheet-cancel-padding-top
+    );
+    background-color: var(
+      --action-sheet-cancel-padding-color,
+      @action-sheet-cancel-padding-color
+    );
   }
 
   &__item--disabled {
-    .theme(color, '@action-sheet-item-disabled-text-color');
+    color: var(
+      --action-sheet-item-disabled-text-color,
+      @action-sheet-item-disabled-text-color
+    );
   }
 
   &__item--disabled&__item--hover {
-    .theme(background-color, '@action-sheet-item-background');
+    background-color: var(
+      --action-sheet-item-background,
+      @action-sheet-item-background
+    );
   }
 
   &__subname {
-    .theme(margin-top, '@padding-xs');
-    .theme(font-size, '@action-sheet-subname-font-size');
-    .theme(color, '@action-sheet-subname-color');
-    .theme(line-height, '@action-sheet-subname-line-height');
+    margin-top: var(--padding-xs, @padding-xs);
+    font-size: var(
+      --action-sheet-subname-font-size,
+      @action-sheet-subname-font-size
+    );
+    color: var(--action-sheet-subname-color, @action-sheet-subname-color);
+    line-height: var(
+      --action-sheet-subname-line-height,
+      @action-sheet-subname-line-height
+    );
   }
 
   &__header {
     text-align: center;
-    .theme(font-weight, '@font-weight-bold');
-    .theme(font-size, '@action-sheet-header-font-size');
-    .theme(line-height, '@action-sheet-header-height');
+    font-weight: var(--font-weight-bold, @font-weight-bold);
+    font-size: var(
+      --action-sheet-header-font-size,
+      @action-sheet-header-font-size
+    );
+    line-height: var(--action-sheet-header-height, @action-sheet-header-height);
   }
 
   &__description {
     text-align: center;
-    .theme(padding, '20px @padding-md');
-    .theme(color, '@action-sheet-description-color');
-    .theme(font-size, '@action-sheet-description-font-size');
-    .theme(line-height, '@action-sheet-description-line-height');
+    padding: 20px var(--padding-md, @padding-md);
+    color: var(
+      --action-sheet-description-color,
+      @action-sheet-description-color
+    );
+    font-size: var(
+      --action-sheet-description-font-size,
+      @action-sheet-description-font-size
+    );
+    line-height: var(
+      --action-sheet-description-line-height,
+      @action-sheet-description-line-height
+    );
   }
 
   &__close {
     position: absolute !important;
     top: 0;
     right: 0;
     line-height: inherit !important;
-    .theme(padding, '@action-sheet-close-icon-padding');
-    .theme(font-size, '@action-sheet-close-icon-size') !important;
-    .theme(color, '@action-sheet-close-icon-color');
+    padding: var(
+      --action-sheet-close-icon-padding,
+      @action-sheet-close-icon-padding
+    );
+    font-size: var(
+      --action-sheet-close-icon-size,
+      @action-sheet-close-icon-size
+    ) !important;
+    color: var(--action-sheet-close-icon-color, @action-sheet-close-icon-color);
   }
 
   &__loading {

diff --git a/packages/button/index.less b/packages/button/index.less
@@ -1,5 +1,4 @@
 @import '../common/style/var.less';
-@import '../common/style/theme.less';
 
 .van-button {
   position: relative;
@@ -12,12 +11,11 @@
   vertical-align: middle;
   -webkit-appearance: none;
   -webkit-text-size-adjust: 100%;
-
-  .theme(height, '@button-default-height');
-  .theme(line-height, '@button-line-height');
-  .theme(font-size, '@button-default-font-size');
-  .theme(transition, 'opacity @animation-duration-fast');
-  .theme(border-radius, '@button-border-radius');
+  height: var(--button-default-height, @button-default-height);
+  line-height: var(--button-line-height, @button-line-height);
+  font-size: var(--button-default-font-size, @button-default-font-size);
+  transition: opacity @animation-duration-fast;
+  border-radius: var(--button-border-radius, @button-border-radius);
 
   &::before {
     position: absolute;
@@ -30,9 +28,8 @@
     transform: translate(-50%, -50%);
     opacity: 0;
     content: ' ';
-
-    .theme(background-color, '@black');
-    .theme(border-color, '@black');
+    background-color: @black;
+    border-color: @black;
   }
 
   // reset weapp default border
@@ -49,78 +46,110 @@
   }
 
   &--default {
-    .theme(color, '@button-default-color');
-    .theme(background, '@button-default-background-color');
-    .theme(border, '@button-border-width solid @button-default-border-color');
+    color: var(--button-default-color, @button-default-color);
+    background: var(
+      --button-default-background-color,
+      @button-default-background-color
+    );
+    border: var(--button-border-width, @button-border-width) solid
+      var(--button-default-border-color, @button-default-border-color);
   }
 
   &--primary {
-    .theme(color, '@button-primary-color');
-    .theme(background, '@button-primary-background-color');
-    .theme(border, '@button-border-width solid @button-primary-border-color');
+    color: var(--button-primary-color, @button-primary-color);
+    background: var(
+      --button-primary-background-color,
+      @button-primary-background-color
+    );
+    border: var(--button-border-width, @button-border-width) solid
+      var(--button-primary-border-color, @button-primary-border-color);
   }
 
   &--info {
-    .theme(color, '@button-info-color');
-    .theme(background, '@button-info-background-color');
-    .theme(border, '@button-border-width solid @button-info-border-color');
+    color: var(--button-info-color, @button-info-color);
+    background: var(
+      --button-info-background-color,
+      @button-info-background-color
+    );
+    border: var(--button-border-width, @button-border-width) solid
+      var(--button-info-border-color, @button-info-border-color);
   }
 
   &--danger {
-    .theme(color, '@button-danger-color');
-    .theme(background, '@button-danger-background-color');
-    .theme(border, '@button-border-width solid @button-danger-border-color');
+    color: var(--button-danger-color, @button-danger-color);
+    background: var(
+      --button-danger-background-color,
+      @button-danger-background-color
+    );
+    border: var(--button-border-width, @button-border-width) solid
+      var(--button-danger-border-color, @button-danger-border-color);
   }
 
   &--warning {
-    .theme(color, '@button-warning-color');
-    .theme(background, '@button-warning-background-color');
-    .theme(border, '@button-border-width solid @button-warning-border-color');
+    color: var(--button-warning-color, @button-warning-color);
+    background: var(
+      --button-warning-background-color,
+      @button-warning-background-color
+    );
+    border: var(--button-border-width, @button-border-width) solid
+      var(--button-warning-border-color, @button-warning-border-color);
   }
 
   &--plain {
-    .theme(background, '@button-plain-background-color');
+    background: var(
+      --button-plain-background-color,
+      @button-plain-background-color
+    );
 
     &.van-button--primary {
-      .theme(color, '@button-primary-background-color');
+      color: var(
+        --button-primary-background-color,
+        @button-primary-background-color
+      );
     }
 
     &.van-button--info {
-      .theme(color, '@button-info-background-color');
+      color: var(--button-info-background-color, @button-info-background-color);
     }
 
     &.van-button--danger {
-      .theme(color, '@button-danger-background-color');
+      color: var(
+        --button-danger-background-color,
+        @button-danger-background-color
+      );
     }
 
     &.van-button--warning {
-      .theme(color, '@button-warning-background-color');
+      color: var(
+        --button-warning-background-color,
+        @button-warning-background-color
+      );
     }
   }
 
   &--large {
     width: 100%;
-    .theme(height, '@button-large-height');
+    height: var(--button-large-height, @button-large-height);
   }
 
   &--normal {
     padding: 0 15px;
-    .theme(font-size, '@button-normal-font-size');
+    font-size: var(--button-normal-font-size, @button-normal-font-size);
   }
 
   &--small {
-    .theme(min-width, '@button-small-min-width');
-    .theme(height, '@button-small-height');
-    .theme(padding, '0 @padding-xs');
-    .theme(font-size, '@button-small-font-size');
+    min-width: var(--button-small-min-width, @button-small-min-width);
+    height: var(--button-small-height, @button-small-height);
+    padding: 0 var(--padding-xs, @padding-xs);
+    font-size: var(--button-small-font-size, @button-small-font-size);
   }
 
   // mini图标默认宽度50px，文字不能超过4个
   &--mini {
     display: inline-block;
-    .theme(min-width, '@button-mini-min-width');
-    .theme(height, '@button-mini-height');
-    .theme(font-size, '@button-mini-font-size');
+    min-width: var(--button-mini-min-width, @button-mini-min-width);
+    height: var(--button-mini-height, @button-mini-height);
+    font-size: var(--button-mini-font-size, @button-mini-font-size);
 
     & + .van-button--mini {
       margin-left: 5px;
@@ -133,15 +162,18 @@
   }
 
   &--round {
-    .theme(border-radius, '@button-round-border-radius');
+    border-radius: var(
+      --button-round-border-radius,
+      @button-round-border-radius
+    );
   }
 
   &--square {
     border-radius: 0;
   }
 
   &--disabled {
-    .theme(opacity, '@button-disabled-opacity');
+    opacity: var(--button-disabled-opacity, @button-disabled-opacity);
   }
 
   &__text {
@@ -166,11 +198,16 @@
     &::after {
       border-color: inherit;
       border-width: 1px;
-      .theme(border-radius, 'calc(@button-border-radius * 2)');
+      border-radius: calc(
+        var(--button-border-radius, @button-border-radius) * 2
+      );
     }
 
     &.van-button--round::after {
-      .theme(border-radius, '@button-round-border-radius');
+      border-radius: var(
+        --button-round-border-radius,
+        @button-round-border-radius
+      );
     }
 
     &.van-button--square::after {