Upgrade and tweak scss compliation

CHANGELOG.md

@@ -13,6 +13,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - `Security`
 
 =======
+## [3.10.9] - 2021-06-03
+- https://github.com/teamsnap/teamsnap-ui/pull/665
+- `Changed` style compilation to use `sass` and fixed soon to be deprecated scss syntax. Also upgraded `gulp-sass` and `sass-loader`
+
 ## [3.10.8] - 2021-06-03
 - https://github.com/teamsnap/teamsnap-ui/pull/341
 - `Changed` font paths to teamsnap-ui CDN.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamsnap/teamsnap-ui",
-  "version": "3.10.8",
+  "version": "3.10.9",
   "description": "a CSS component library for TeamSnap",
   "main": "dist/js/index.js",
   "types": "dist/js/index.d.ts",
@@ -69,16 +69,16 @@
     "gulp-autoprefixer": "^6.1.0",
     "gulp-clean-css": "^4.3.0",
     "gulp-if": "^2.0.2",
-    "gulp-sass": "^4.0.1",
+    "gulp-sass": "^4.1.0",
     "gulp-util": "^3.0.8",
-    "node-sass": "^4.12.0",
     "object-path": ">=0.11.5",
     "prop-types": "^15.6.1",
     "react": "^17.0.1",
     "react-docgen-typescript-loader": "^3.1.0",
     "react-docgen-typescript-webpack-plugin": "^1.1.0",
     "react-dom": "^17.0.1",
-    "sass-loader": "^7.3.1",
+    "sass": "1.34.1",
+    "sass-loader": "10.2.0",
     "style-loader": "^0.23.1",
     "svgo": "^1.3.0",
     "typescript": "^4.0.3"

scripts/gulpfile.js

@@ -6,18 +6,20 @@ const browserSync = require('browser-sync').create();
 const autoprefixer = require('gulp-autoprefixer');
 const del = require('del');
 const env = require('gulp-util').env;
-const gulpif = require('gulp-if');
 const config = require('./config');
 const cleanCSS = require('gulp-clean-css');
 
+sass.compiler = require('sass');
+
 // Create a function for all CSS tasks so
 // teamsnap-ui and themes can build independently
 function buildCSS(config) {
-  return gulp.src(config.src)
+  return gulp
+    .src(config.src)
     .pipe(sass())
     .pipe(autoprefixer('last 2 versions'))
-    .pipe(cleanCSS({level: 2}))
-    .pipe(gulp.dest(config.dest))
+    .pipe(cleanCSS({ level: 2 }))
+    .pipe(gulp.dest(config.dest));
 }
 
 // Build teamsnap-ui CSS
@@ -34,20 +36,19 @@ gulp.task('css-themes', (done) => {
 
 // Copy fonts
 gulp.task('fonts', () => {
-  return gulp.src(config.fonts.src)
-    .pipe(gulp.dest(config.fonts.dest))
+  return gulp.src(config.fonts.src).pipe(gulp.dest(config.fonts.dest));
 });
 
 // Start browsersync
 gulp.task('serve', () => {
-  browserSync.init(config.serve.options)
+  browserSync.init(config.serve.options);
 });
 
 // Delete the dist directory and all its contents
 gulp.task('clean', (done) => {
   del.sync('dist');
   done();
-})
+});
 
 // Watch for SCSS changes, then build CSS and update browser
 // Add --themes flag to also build theme CSS

src/css/components/Checkbox.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 @import "../config/index.scss";
 
 //------------------------------------------------------------//
@@ -50,7 +52,7 @@ $Checkbox-bg-color: $cu-foreground !default;
 
       &:before {
         top: 50%;
-        margin-top: ($size / 2) * -1;
+        margin-top: math.div($size, 2) * -1;
         // Centers radio in Pill if text wraps
       }
     }

src/css/components/Icon.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 @import "../config/index.scss";
 
 // * Icon component
@@ -50,7 +52,7 @@ $Icon--loader-duration: 1.4s;
    stroke-dashoffset: $Icon--loader-offset;
  }
  50% {
-   stroke-dashoffset: $Icon--loader-offset / 4;
+   stroke-dashoffset: math.div($Icon--loader-offset, 4);
    transform: rotate(135deg);
  }
  100% {

src/css/components/Popup.scss

@@ -1,10 +1,12 @@
+@use "sass:math";
+
 $Popup-bg-color: $cu-foreground !default;
 $Popup-text-color: $cu-info !default;
 $Popup-border-color: $cu-divider !default;
 $Popup-offset: 10px;
 $Popup-arrow-size: 12px;
-$Popup-arrow-offset: $Popup-arrow-size / 2;
-$Popup-arrow-offsetCover: ($Popup-arrow-size / 2) + 1;
+$Popup-arrow-offset: math.div($Popup-arrow-size, 2);
+$Popup-arrow-offsetCover: math.div($Popup-arrow-size, 2) + 1;
 $Popup-arrow-borderRadius: 3px;
 
 // * .Popup

src/css/components/Progress.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 @import "../config/index.scss";
 
 //------------------------------------------------------------//
@@ -36,36 +38,36 @@
 
 .ProgressBar,
 .ProgressBar-status {
-  border-radius: $su-small / 2;
+  border-radius: math.div($su-small, 2);
 }
 
 // * 1.a Default Progress Sizes
 
 .ProgressBar--xsmall {
   height: $su-xxsmall;
   &, .ProgressBar-status {
-    border-radius: $su-xxsmall / 2;
+    border-radius: math.div($su-xxsmall, 2);
   }
 }
 
 .ProgressBar--small {
   height: $su-xsmall;
   &, .ProgressBar-status {
-    border-radius: $su-xsmall / 2;
+    border-radius: math.div($su-xsmall, 2);
   }
 }
 
 .ProgressBar--large {
   height: $su-medium;
   &, .ProgressBar-status {
-    border-radius: $su-medium / 2;
+    border-radius: math.div($su-medium, 2);
   }
 }
 
 .ProgressBar--xlarge {
   height: $su-large;
   &, .ProgressBar-status {
-    border-radius: $su-large / 2;
+    border-radius: math.div($su-large, 2);
   }
 }
 
@@ -85,7 +87,7 @@
   }
 
   &, .ProgressBar-status {
-    border-radius: $su-xxlarge / 2;
+    border-radius: math.div($su-xxlarge, 2);
   }
 
 }
@@ -97,28 +99,28 @@
   &.ProgressBar--xsmall {
     width: $su-medium;
     &, .ProgressBar-status {
-      border-radius: $su-medium / 2;
+      border-radius: math.div($su-medium, 2);
     }
   }
 
   &.ProgressBar--small {
     width: $su-large;
     &, .ProgressBar-status {
-      border-radius: $su-large / 2;
+      border-radius: math.div($su-large, 2);
     }
   }
 
   &.ProgressBar--large {
     width: scaleGrid(6);
     &, .ProgressBar-status {
-      border-radius: scaleGrid(6) / 2;
+      border-radius: math.div(scaleGrid(6), 2);
     }
   }
 
   &.ProgressBar--xlarge {
     width: scaleGrid(8);
     &, .ProgressBar-status {
-      border-radius: scaleGrid(8) / 2;
+      border-radius: math.div(scaleGrid(8), 2);
     }
   }
 
@@ -187,7 +189,7 @@
   top: 0;
   height: 100%;
   width: 100%;
-  clip: rect(0, scaleGrid(10), scaleGrid(10), scaleGrid(10)/2 );
+  clip: rect(0, scaleGrid(10), scaleGrid(10), math.div(scaleGrid(10), 2) );
 
 }
 
@@ -203,7 +205,7 @@
   left: 0;
   border-radius: 50%;
   background: transparent;
-  clip: rect(0, scaleGrid(10)/2, scaleGrid(10), 0);
+  clip: rect(0, math.div(scaleGrid(10), 2), scaleGrid(10), 0);
   border: {
     width: scaleGrid(5);
     style: solid;
@@ -218,11 +220,11 @@
   width: scaleGrid(4);
 
   .RadialProgress-circle {
-    clip: rect(0, scaleGrid(4), scaleGrid(4), scaleGrid(4)/2 );
+    clip: rect(0, scaleGrid(4), scaleGrid(4), math.div(scaleGrid(4), 2) );
   }
 
   .RadialProgress-status {
-    clip: rect(0, scaleGrid(4)/2, scaleGrid(4), 0);
+    clip: rect(0, math.div(scaleGrid(4), 2), scaleGrid(4), 0);
     border-width: scaleGrid(2);
   }
 
@@ -233,11 +235,11 @@
   width: scaleGrid(6);
 
   .RadialProgress-circle {
-    clip: rect(0, scaleGrid(6), scaleGrid(6), scaleGrid(6)/2 );
+    clip: rect(0, scaleGrid(6), scaleGrid(6), math.div(scaleGrid(6), 2) );
   }
 
   .RadialProgress-status {
-    clip: rect(0, scaleGrid(6)/2, scaleGrid(6), 0);
+    clip: rect(0, math.div(scaleGrid(6), 2), scaleGrid(6), 0);
     border-width: scaleGrid(3);
   }
 
@@ -248,11 +250,11 @@
   width: scaleGrid(14);
 
   .RadialProgress-circle {
-    clip: rect(0, scaleGrid(14), scaleGrid(14), scaleGrid(14)/2 );
+    clip: rect(0, scaleGrid(14), scaleGrid(14), math.div(scaleGrid(14), 2) );
   }
 
   .RadialProgress-status {
-    clip: rect(0, scaleGrid(14)/2, scaleGrid(14), 0);
+    clip: rect(0, math.div(scaleGrid(14), 2), scaleGrid(14), 0);
     border-width: scaleGrid(7);
   }
 
@@ -263,11 +265,11 @@
   width: scaleGrid(20);
 
   .RadialProgress-circle {
-    clip: rect(0, scaleGrid(20), scaleGrid(20), scaleGrid(20)/2 );
+    clip: rect(0, scaleGrid(20), scaleGrid(20), math.div(scaleGrid(20), 2) );
   }
 
   .RadialProgress-status {
-    clip: rect(0, scaleGrid(20)/2, scaleGrid(20), 0);
+    clip: rect(0, math.div(scaleGrid(20), 2), scaleGrid(20), 0);
     border-width: scaleGrid(10);
   }
 

src/css/components/StepNav.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 @import "../config/index.scss";
 
 //------------------------------------------------------------//
@@ -40,18 +42,18 @@ $StepNav-spacing--xsmall: scaleGrid(-3);
     &:before {
       width: calc(100% - #{$paddedWidth});
       height: $spacing;
-      top: ($size / 2);
+      top: math.div($size, 2);
       right: $paddedWidth;
     }
     &.is-active,
     &.is-enabled a:hover {
       .StepNav-stepIcon {
-        box-shadow: 0 0 ($spacing / 2) $cu-primary--dark inset;
+        box-shadow: 0 0 math.div($spacing, 2) $cu-primary--dark inset;
       }
     }
     &.is-enabled a:hover {
       .StepNav-stepIcon {
-        box-shadow: 0 0 ($spacing / 2) $cu-primary--dark inset;
+        box-shadow: 0 0 math.div($spacing, 2) $cu-primary--dark inset;
       }
     }
   }
@@ -62,7 +64,7 @@ $StepNav-spacing--xsmall: scaleGrid(-3);
 
   .StepNav-stepTitle {
     width: $StepNav-titleWidth;
-    left: calc( 0px - #{(($StepNav-titleWidth - $paddedWidth) / 2)});
+    left: calc( 0px - #{math.div($StepNav-titleWidth - $paddedWidth, 2)});
     padding-top: $spacing;
   }
 
@@ -73,7 +75,7 @@ $StepNav-spacing--xsmall: scaleGrid(-3);
     }
     height: $size;
     width: $size;
-    border-radius: ($size / 2);
+    border-radius: math.div($size, 2);
     padding: $size * .25;
   }
 }
@@ -246,7 +248,7 @@ $StepNav-spacing--xsmall: scaleGrid(-3);
   &:before {
     content: '';
     position: absolute;
-    top: ($StepNav-size / 2);
+    top: math.div($StepNav-size, 2);
     left: 100%;
     height: $StepNav-spacing;
     width: 1000%;

src/css/config/functions.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 //------------------------------------------------------------//
 
 // * TeamSnap-UI Functions
@@ -17,12 +19,12 @@
 // * 1. Basic Math Helper Functions
 
 @function quarter($number) {
-  $number: round($number / 4);
+  $number: round(math.div($number, 4));
   @return $number
 }
 
 @function halve($number) {
-  $number: round($number / 2);
+  $number: round(math.div($number, 2));
   @return $number
 }
 
@@ -67,7 +69,7 @@
   @else if ($step < 0) {
     $step: convertNegative($step);
     @for $i from 1 through $step {
-      $property: $property / $ratio;
+      $property: math.div($property, $ratio);
     }
   }
 
@@ -139,7 +141,7 @@
 
     // halves base unit based on negative step values
     @for $i from 1 through $step {
-      $spacing: $spacing / 2;
+      $spacing: math.div($spacing, 2);
     }
   }