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

linxsbox · web-flow · commit d6dedac2e2cb · 2021-11-15T11:43:08.000+08:00
* chore: 移除 node-sass 替换为 sass 进行构建

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

* chore: add yarn lock
diff --git a/package.json b/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",
diff --git a/packages/theme-chalk/gulpfile.js b/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())
diff --git a/packages/theme-chalk/package.json b/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": {}
diff --git a/packages/theme-chalk/src/badge.scss b/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) {
diff --git a/packages/theme-chalk/src/carousel.scss b/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)};
       }
     }
 
diff --git a/packages/theme-chalk/src/col.scss b/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%;
     }
   }
 }
diff --git a/packages/theme-chalk/src/common/var.scss b/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;
diff --git a/packages/theme-chalk/src/input-number.scss b/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)};
       }
     }
   }
diff --git a/packages/theme-chalk/src/loading.scss b/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;
diff --git a/packages/theme-chalk/src/mixins/mixins.scss b/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))} {
-      @content;
+    @if $key=='sm-only'or $key=='md-only'or $key=='lg-only' {
+      // 判定特定定义处理字符串参数值问题
+      @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}`";
diff --git a/packages/theme-chalk/src/popper.scss b/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;
 
diff --git a/packages/theme-chalk/src/transfer.scss b/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;
     }
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+@use "sass:math";`
`1`	`2`	`@import "mixins/mixins";`
`2`	`3`	`@import "common/var";`
`3`	`4`
`@@ -122,7 +123,7 @@`
`122`	`123`	`padding: $--carousel-indicator-padding-horizontal $--carousel-indicator-padding-vertical;`
`123`	`124`	`.el-carousel__button {`
`124`	`125`	`width: $--carousel-indicator-height;`
`125`		`- height: #{$--carousel-indicator-width / 2};`
	`126`	`+ height: #{math.div($--carousel-indicator-width, 2)};`
`126`	`127`	`}`
`127`	`128`	`}`
`128`	`129`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+@use "sass:math";`
`1`	`2`	`@import "./common/var.scss";`
`2`	`3`	`@import "./mixins/mixins.scss";`
`3`	`4`
`@@ -12,21 +13,21 @@`
`12`	`13`
`13`	`14`	`@for $i from 0 through 24 {`
`14`	`15`	`.el-col-#{$i} {`
`15`		`- width: (1 / 24 * $i * 100) * 1%;`
	`16`	`+ width: (math.div(1 , 24) * $i * 100) * 1%;`
`16`	`17`	`}`
`17`	`18`
`18`	`19`	`.el-col-offset-#{$i} {`
`19`		`- margin-left: (1 / 24 * $i * 100) * 1%;`
	`20`	`+ margin-left: (math.div(1 , 24) * $i * 100) * 1%;`
`20`	`21`	`}`
`21`	`22`
`22`	`23`	`.el-col-pull-#{$i} {`
`23`	`24`	`position: relative;`
`24`		`- right: (1 / 24 * $i * 100) * 1%;`
	`25`	`+ right: (math.div(1 , 24) * $i * 100) * 1%;`
`25`	`26`	`}`
`26`	`27`
`27`	`28`	`.el-col-push-#{$i} {`
`28`	`29`	`position: relative;`
`29`		`- left: (1 / 24 * $i * 100) * 1%;`
	`30`	`+ left: (math.div(1 , 24) * $i * 100) * 1%;`
`30`	`31`	`}`
`31`	`32`	`}`
`32`	`33`
`@@ -36,21 +37,21 @@`
`36`	`37`	`}`
`37`	`38`	`@for $i from 0 through 24 {`
`38`	`39`	`.el-col-xs-#{$i} {`
`39`		`- width: (1 / 24 * $i * 100) * 1%;`
	`40`	`+ width: (math.div(1 , 24) * $i * 100) * 1%;`
`40`	`41`	`}`
`41`	`42`
`42`	`43`	`.el-col-xs-offset-#{$i} {`
`43`		`- margin-left: (1 / 24 * $i * 100) * 1%;`
	`44`	`+ margin-left: (math.div(1 , 24) * $i * 100) * 1%;`
`44`	`45`	`}`
`45`	`46`
`46`	`47`	`.el-col-xs-pull-#{$i} {`
`47`	`48`	`position: relative;`
`48`		`- right: (1 / 24 * $i * 100) * 1%;`
	`49`	`+ right: (math.div(1 , 24) * $i * 100) * 1%;`
`49`	`50`	`}`
`50`	`51`
`51`	`52`	`.el-col-xs-push-#{$i} {`
`52`	`53`	`position: relative;`
`53`		`- left: (1 / 24 * $i * 100) * 1%;`
	`54`	`+ left: (math.div(1 , 24) * $i * 100) * 1%;`
`54`	`55`	`}`
`55`	`56`	`}`
`56`	`57`	`}`
`@@ -61,21 +62,21 @@`
`61`	`62`	`}`
`62`	`63`	`@for $i from 0 through 24 {`
`63`	`64`	`.el-col-sm-#{$i} {`
`64`		`- width: (1 / 24 * $i * 100) * 1%;`
	`65`	`+ width: (math.div(1 , 24) * $i * 100) * 1%;`
`65`	`66`	`}`
`66`	`67`
`67`	`68`	`.el-col-sm-offset-#{$i} {`
`68`		`- margin-left: (1 / 24 * $i * 100) * 1%;`
	`69`	`+ margin-left: (math.div(1 , 24) * $i * 100) * 1%;`
`69`	`70`	`}`
`70`	`71`
`71`	`72`	`.el-col-sm-pull-#{$i} {`
`72`	`73`	`position: relative;`
`73`		`- right: (1 / 24 * $i * 100) * 1%;`
	`74`	`+ right: (math.div(1 , 24) * $i * 100) * 1%;`
`74`	`75`	`}`
`75`	`76`
`76`	`77`	`.el-col-sm-push-#{$i} {`
`77`	`78`	`position: relative;`
`78`		`- left: (1 / 24 * $i * 100) * 1%;`
	`79`	`+ left: (math.div(1 , 24) * $i * 100) * 1%;`
`79`	`80`	`}`
`80`	`81`	`}`
`81`	`82`	`}`
`@@ -86,21 +87,21 @@`
`86`	`87`	`}`
`87`	`88`	`@for $i from 0 through 24 {`
`88`	`89`	`.el-col-md-#{$i} {`
`89`		`- width: (1 / 24 * $i * 100) * 1%;`
	`90`	`+ width: (math.div(1 , 24) * $i * 100) * 1%;`
`90`	`91`	`}`
`91`	`92`
`92`	`93`	`.el-col-md-offset-#{$i} {`
`93`		`- margin-left: (1 / 24 * $i * 100) * 1%;`
	`94`	`+ margin-left: (math.div(1 , 24) * $i * 100) * 1%;`
`94`	`95`	`}`
`95`	`96`
`96`	`97`	`.el-col-md-pull-#{$i} {`
`97`	`98`	`position: relative;`
`98`		`- right: (1 / 24 * $i * 100) * 1%;`
	`99`	`+ right: (math.div(1 , 24) * $i * 100) * 1%;`
`99`	`100`	`}`
`100`	`101`
`101`	`102`	`.el-col-md-push-#{$i} {`
`102`	`103`	`position: relative;`
`103`		`- left: (1 / 24 * $i * 100) * 1%;`
	`104`	`+ left: (math.div(1 , 24) * $i * 100) * 1%;`
`104`	`105`	`}`
`105`	`106`	`}`
`106`	`107`	`}`
`@@ -111,21 +112,21 @@`
`111`	`112`	`}`
`112`	`113`	`@for $i from 0 through 24 {`
`113`	`114`	`.el-col-lg-#{$i} {`
`114`		`- width: (1 / 24 * $i * 100) * 1%;`
	`115`	`+ width: (math.div(1 , 24) * $i * 100) * 1%;`
`115`	`116`	`}`
`116`	`117`
`117`	`118`	`.el-col-lg-offset-#{$i} {`
`118`		`- margin-left: (1 / 24 * $i * 100) * 1%;`
	`119`	`+ margin-left: (math.div(1 , 24) * $i * 100) * 1%;`
`119`	`120`	`}`
`120`	`121`
`121`	`122`	`.el-col-lg-pull-#{$i} {`
`122`	`123`	`position: relative;`
`123`		`- right: (1 / 24 * $i * 100) * 1%;`
	`124`	`+ right: (math.div(1 , 24) * $i * 100) * 1%;`
`124`	`125`	`}`
`125`	`126`
`126`	`127`	`.el-col-lg-push-#{$i} {`
`127`	`128`	`position: relative;`
`128`		`- left: (1 / 24 * $i * 100) * 1%;`
	`129`	`+ left: (math.div(1 , 24) * $i * 100) * 1%;`
`129`	`130`	`}`
`130`	`131`	`}`
`131`	`132`	`}`
`@@ -136,21 +137,21 @@`
`136`	`137`	`}`
`137`	`138`	`@for $i from 0 through 24 {`
`138`	`139`	`.el-col-xl-#{$i} {`
`139`		`- width: (1 / 24 * $i * 100) * 1%;`
	`140`	`+ width: (math.div(1 , 24) * $i * 100) * 1%;`
`140`	`141`	`}`
`141`	`142`
`142`	`143`	`.el-col-xl-offset-#{$i} {`
`143`		`- margin-left: (1 / 24 * $i * 100) * 1%;`
	`144`	`+ margin-left: (math.div(1 , 24) * $i * 100) * 1%;`
`144`	`145`	`}`
`145`	`146`
`146`	`147`	`.el-col-xl-pull-#{$i} {`
`147`	`148`	`position: relative;`
`148`		`- right: (1 / 24 * $i * 100) * 1%;`
	`149`	`+ right: (math.div(1 , 24) * $i * 100) * 1%;`
`149`	`150`	`}`
`150`	`151`
`151`	`152`	`.el-col-xl-push-#{$i} {`
`152`	`153`	`position: relative;`
`153`		`- left: (1 / 24 * $i * 100) * 1%;`
	`154`	`+ left: (math.div(1 , 24) * $i * 100) * 1%;`
`154`	`155`	`}`
`155`	`156`	`}`
`156`	`157`	`}`