Chore: replace node-sass with dart-sass (#21019)

* chore: 移除 node-sass 替换为 sass 进行构建

- 更新调用库 gulp-sass 更新为 gulp-dart-sass 以支持 sass
- 更新 scss 使用语法旧语法已被废弃

* chore: add yarn lock

package.json

@@ -102,7 +102,7 @@
     "gulp": "^4.0.0",
     "gulp-autoprefixer": "^6.0.0",
     "gulp-cssmin": "^0.2.0",
-    "gulp-sass": "^4.0.2",
+    "gulp-dart-sass": "^1.0.2",
     "highlight.js": "^9.3.0",
     "html-webpack-plugin": "^3.2.0",
     "json-loader": "^0.5.7",
@@ -121,12 +121,12 @@
     "markdown-it-container": "^2.0.0",
     "mini-css-extract-plugin": "^0.4.1",
     "mocha": "^6.0.2",
-    "node-sass": "^4.11.0",
     "optimize-css-assets-webpack-plugin": "^5.0.1",
     "postcss": "^7.0.14",
     "progress-bar-webpack-plugin": "^1.11.0",
     "rimraf": "^2.5.4",
-    "sass-loader": "^7.1.0",
+    "sass": "^1.34.0",
+    "sass-loader": "^10.1.1",
     "select-version-cli": "^0.0.2",
     "sinon": "^7.2.7",
     "sinon-chai": "^3.3.0",

packages/theme-chalk/gulpfile.js

@@ -1,15 +1,15 @@
 'use strict';
 
 const { series, src, dest } = require('gulp');
-const sass = require('gulp-sass');
+const sass = require('gulp-dart-sass');
 const autoprefixer = require('gulp-autoprefixer');
 const cssmin = require('gulp-cssmin');
 
 function compile() {
   return src('./src/*.scss')
-    .pipe(sass.sync())
+    .pipe(sass.sync().on('error', sass.logError))
     .pipe(autoprefixer({
-      browsers: ['ie > 9', 'last 2 versions'],
+      overrideBrowserslist: ['ie > 9', 'last 2 versions'],
       cascade: false
     }))
     .pipe(cssmin())

packages/theme-chalk/package.json

@@ -28,7 +28,7 @@
   "devDependencies": {
     "gulp": "^3.9.1",
     "gulp-cssmin": "^0.1.7",
-    "gulp-sass": "^3.1.0",
+    "gulp-dart-sass": "^1.0.2",
     "gulp-autoprefixer": "^4.0.0"
   },
   "dependencies": {}

packages/theme-chalk/src/badge.scss

@@ -1,3 +1,4 @@
+@use "sass:math";
 @import "mixins/mixins";
 @import "common/var";
 
@@ -22,7 +23,7 @@
     @include when(fixed) {
       position: absolute;
       top: 0;
-      right: #{1 + $--badge-size / 2};
+      right: #{1 + math.div($--badge-size, 2)};
       transform: translateY(-50%) translateX(100%);
 
       @include when(dot) {

packages/theme-chalk/src/carousel.scss

@@ -1,3 +1,4 @@
+@use "sass:math";
 @import "mixins/mixins";
 @import "common/var";
 
@@ -122,7 +123,7 @@
       padding: $--carousel-indicator-padding-horizontal $--carousel-indicator-padding-vertical;
       .el-carousel__button {
         width: $--carousel-indicator-height;
-        height: #{$--carousel-indicator-width / 2};
+        height: #{math.div($--carousel-indicator-width, 2)};
       }
     }
 

packages/theme-chalk/src/col.scss

@@ -1,3 +1,4 @@
+@use "sass:math";
 @import "./common/var.scss";
 @import "./mixins/mixins.scss";
 
@@ -12,21 +13,21 @@
 
 @for $i from 0 through 24 {
   .el-col-#{$i} {
-    width: (1 / 24 * $i * 100) * 1%;
+    width: (math.div(1 , 24) * $i * 100) * 1%;
   }
 
   .el-col-offset-#{$i} {
-    margin-left: (1 / 24 * $i * 100) * 1%;
+    margin-left: (math.div(1 , 24) * $i * 100) * 1%;
   }
 
   .el-col-pull-#{$i} {
     position: relative;
-    right: (1 / 24 * $i * 100) * 1%;
+    right: (math.div(1 , 24) * $i * 100) * 1%;
   }
 
   .el-col-push-#{$i} {
     position: relative;
-    left: (1 / 24 * $i * 100) * 1%;
+    left: (math.div(1 , 24) * $i * 100) * 1%;
   }
 }
 
@@ -36,21 +37,21 @@
   }
   @for $i from 0 through 24 {
     .el-col-xs-#{$i} {
-      width: (1 / 24 * $i * 100) * 1%;
+      width: (math.div(1 , 24) * $i * 100) * 1%;
     }
 
     .el-col-xs-offset-#{$i} {
-      margin-left: (1 / 24 * $i * 100) * 1%;
+      margin-left: (math.div(1 , 24) * $i * 100) * 1%;
     }
 
     .el-col-xs-pull-#{$i} {
       position: relative;
-      right: (1 / 24 * $i * 100) * 1%;
+      right: (math.div(1 , 24) * $i * 100) * 1%;
     }
 
     .el-col-xs-push-#{$i} {
       position: relative;
-      left: (1 / 24 * $i * 100) * 1%;
+      left: (math.div(1 , 24) * $i * 100) * 1%;
     }
   }
 }
@@ -61,21 +62,21 @@
   }
   @for $i from 0 through 24 {
     .el-col-sm-#{$i} {
-      width: (1 / 24 * $i * 100) * 1%;
+      width: (math.div(1 , 24) * $i * 100) * 1%;
     }
 
     .el-col-sm-offset-#{$i} {
-      margin-left: (1 / 24 * $i * 100) * 1%;
+      margin-left: (math.div(1 , 24) * $i * 100) * 1%;
     }
 
     .el-col-sm-pull-#{$i} {
       position: relative;
-      right: (1 / 24 * $i * 100) * 1%;
+      right: (math.div(1 , 24) * $i * 100) * 1%;
     }
 
     .el-col-sm-push-#{$i} {
       position: relative;
-      left: (1 / 24 * $i * 100) * 1%;
+      left: (math.div(1 , 24) * $i * 100) * 1%;
     }
   }
 }
@@ -86,21 +87,21 @@
   }
   @for $i from 0 through 24 {
     .el-col-md-#{$i} {
-      width: (1 / 24 * $i * 100) * 1%;
+      width: (math.div(1 , 24) * $i * 100) * 1%;
     }
 
     .el-col-md-offset-#{$i} {
-      margin-left: (1 / 24 * $i * 100) * 1%;
+      margin-left: (math.div(1 , 24) * $i * 100) * 1%;
     }
 
     .el-col-md-pull-#{$i} {
       position: relative;
-      right: (1 / 24 * $i * 100) * 1%;
+      right: (math.div(1 , 24) * $i * 100) * 1%;
     }
 
     .el-col-md-push-#{$i} {
       position: relative;
-      left: (1 / 24 * $i * 100) * 1%;
+      left: (math.div(1 , 24) * $i * 100) * 1%;
     }
   }
 }
@@ -111,21 +112,21 @@
   }
   @for $i from 0 through 24 {
     .el-col-lg-#{$i} {
-      width: (1 / 24 * $i * 100) * 1%;
+      width: (math.div(1 , 24) * $i * 100) * 1%;
     }
 
     .el-col-lg-offset-#{$i} {
-      margin-left: (1 / 24 * $i * 100) * 1%;
+      margin-left: (math.div(1 , 24) * $i * 100) * 1%;
     }
 
     .el-col-lg-pull-#{$i} {
       position: relative;
-      right: (1 / 24 * $i * 100) * 1%;
+      right: (math.div(1 , 24) * $i * 100) * 1%;
     }
 
     .el-col-lg-push-#{$i} {
       position: relative;
-      left: (1 / 24 * $i * 100) * 1%;
+      left: (math.div(1 , 24) * $i * 100) * 1%;
     }
   }
 }
@@ -136,21 +137,21 @@
   }
   @for $i from 0 through 24 {
     .el-col-xl-#{$i} {
-      width: (1 / 24 * $i * 100) * 1%;
+      width: (math.div(1 , 24) * $i * 100) * 1%;
     }
 
     .el-col-xl-offset-#{$i} {
-      margin-left: (1 / 24 * $i * 100) * 1%;
+      margin-left: (math.div(1 , 24) * $i * 100) * 1%;
     }
 
     .el-col-xl-pull-#{$i} {
       position: relative;
-      right: (1 / 24 * $i * 100) * 1%;
+      right: (math.div(1 , 24) * $i * 100) * 1%;
     }
 
     .el-col-xl-push-#{$i} {
       position: relative;
-      left: (1 / 24 * $i * 100) * 1%;
+      left: (math.div(1 , 24) * $i * 100) * 1%;
     }
   }
 }

packages/theme-chalk/src/common/var.scss

@@ -1,3 +1,4 @@
+@use "sass:math";
 /* Element Chalk Variables */
 
 // Special comment for theme configurator
@@ -486,7 +487,7 @@ $--cascader-tag-background: #f0f2f5;
 
 /* Group
 -------------------------- */
-$--group-option-flex: 0 0 (1/5) * 100% !default;
+$--group-option-flex: 0 0 math.div(1, 5) * 100% !default;
 $--group-option-offset-bottom: 12px !default;
 $--group-option-fill-hover: rgba($--color-black, 0.06) !default;
 $--group-title-color: $--color-black !default;

packages/theme-chalk/src/input-number.scss

@@ -1,3 +1,4 @@
+@use "sass:math";
 @import "mixins/mixins";
 @import "common/var";
 @import "input";
@@ -137,7 +138,7 @@
 
     @include e((increase, decrease)) {
       height: auto;
-      line-height: #{($--input-height - 2) / 2};
+      line-height: #{math.div($--input-height - 2, 2)};
 
       [class*=el-icon] {
         transform: scale(.8);
@@ -161,19 +162,19 @@
 
     &[class*=medium] {
       [class*=increase], [class*=decrease] {
-        line-height: #{($--input-medium-height - 2) / 2};
+        line-height: #{math.div($--input-medium-height - 2, 2)};
       }
     }
 
     &[class*=small] {
       [class*=increase], [class*=decrease] {
-        line-height: #{($--input-small-height - 2) / 2};
+        line-height: #{math.div($--input-small-height - 2, 2)};
       }
     }
 
     &[class*=mini] {
       [class*=increase], [class*=decrease] {
-        line-height: #{($--input-mini-height - 2) / 2};
+        line-height: #{math.div($--input-mini-height - 2, 2)};
       }
     }
   }

packages/theme-chalk/src/loading.scss

@@ -1,3 +1,4 @@
+@use "sass:math";
 @import "mixins/mixins";
 @import "common/var";
 
@@ -26,7 +27,7 @@
     position: fixed;
 
     .el-loading-spinner {
-      margin-top: #{- $--loading-fullscreen-spinner-size / 2};
+      margin-top: #{math.div(-$--loading-fullscreen-spinner-size, 2)};
 
       .circular {
         height: $--loading-fullscreen-spinner-size;
@@ -38,7 +39,7 @@
 
 @include b(loading-spinner) {
   top: 50%;
-  margin-top: #{- $--loading-spinner-size / 2};
+  margin-top: #{math.div(-$--loading-spinner-size, 2)};
   width: 100%;
   text-align: center;
   position: absolute;

packages/theme-chalk/src/mixins/mixins.scss

@@ -6,8 +6,17 @@
 @mixin res($key, $map: $--breakpoints) {
   // 循环断点Map，如果存在则返回
   @if map-has-key($map, $key) {
-    @media only screen and #{inspect(map-get($map, $key))} {
+    @if $key=='sm-only'or $key=='md-only'or $key=='lg-only' {
-      @content;
+      // 判定特定定义处理字符串参数值问题
+      @media only screen and #{unquote(map-get($map, $key))} {
+        @content;
+      }
+    }
+
+    @else {
+      @media only screen and #{inspect(map-get($map, $key))} {
+        @content;
+      }
     }
   } @else {
     @warn "Undefeined points: `#{$map}`";

packages/theme-chalk/src/popper.scss

@@ -1,3 +1,4 @@
+@use "sass:math";
 @import "mixins/mixins";
 @import "common/var";
 
@@ -29,7 +30,7 @@
   &[x-placement^="top"] .popper__arrow {
     bottom: -$--popover-arrow-size;
     left: 50%;
-    margin-right: #{$--tooltip-arrow-size / 2};
+    margin-right: math.div($--tooltip-arrow-size, 2);
     border-top-color: $--popover-border-color;
     border-bottom-width: 0;
 
@@ -48,7 +49,7 @@
   &[x-placement^="bottom"] .popper__arrow {
     top: -$--popover-arrow-size;
     left: 50%;
-    margin-right: #{$--tooltip-arrow-size / 2};
+    margin-right: math.div($--tooltip-arrow-size, 2);
     border-top-width: 0;
     border-bottom-color: $--popover-border-color;
 
@@ -67,7 +68,7 @@
   &[x-placement^="right"] .popper__arrow {
     top: 50%;
     left: -$--popover-arrow-size;
-    margin-bottom: #{$--tooltip-arrow-size / 2};
+    margin-bottom: #{math.div($--tooltip-arrow-size , 2)};
     border-right-color: $--popover-border-color;
     border-left-width: 0;
 
@@ -86,7 +87,7 @@
   &[x-placement^="left"] .popper__arrow {
     top: 50%;
     right: -$--popover-arrow-size;
-    margin-bottom: #{$--tooltip-arrow-size / 2};
+    margin-bottom:  #{math.div($--tooltip-arrow-size , 2)};
     border-right-width: 0;
     border-left-color: $--popover-border-color;
 

packages/theme-chalk/src/transfer.scss

@@ -1,3 +1,4 @@
+@use "sass:math";
 @import "mixins/mixins";
 @import "mixins/utils";
 @import "common/var";
@@ -138,7 +139,7 @@
       font-size: 12px;
       display: inline-block;
       box-sizing: border-box;
-      border-radius: #{$--transfer-filter-height / 2};
+      border-radius: #{math.div($--transfer-filter-height, 2)};
       padding-right: 10px;
       padding-left: 30px;
     }