refactor: replace node-sass by sass (#1373)

* refactor: replaced node-sass by sass and removed node-sass-selector-importer

node-sass is deprecated, integrated its successor sass instead; and node-sass-selector-importer never seems to have been used

* refactor(scss): replaced by new Dart Sass syntax

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

* refactor: simplified those calculations

to even also prevent the usage of math.div

* Revert "refactor: replaced node-sass by sass and removed node-sass-selector-importer"

This reverts commit ca72dcf.

* refactor: replaced node-sass by sass and removed node-sass-selector-impo…

…rter

node-sass is deprecated, integrated its successor sass instead; and node-sass-selector-importer never seems to have been used

Author: mfranzke

packages/starterkit-handlebars-demo/package.json

@@ -23,6 +23,6 @@
     "access": "public"
   },
   "scripts": {
-    "build": "cd dist/css && npx node-sass style.scss style.css"
+    "build": "cd dist/css && sass style.scss style.css"
   }
 }

packages/starterkit-twig-demo/dist/css/scss/generic/_variables.scss

@@ -38,12 +38,12 @@ $space : 1em;
 $space-and-half : $space*1.5;
 $space-double : $space*2;
 $space-quad : $space*4;
-$space-half : $space/2;
+$space-half : $space*0.5;
 $pad : 1em;
 $pad-and-half : $pad*1.5;
 $pad-double : $pad*2;
-$pad-half : $pad/2;
-$pad-quarter :$pad/4;
+$pad-half : $pad*0.5;
+$pad-quarter :$pad*0.25;
 
 //Borders
 $border-med: 3px;

packages/uikit-workshop/package.json

@@ -78,8 +78,6 @@
     "lit-html": "^1.1.2",
     "mini-css-extract-plugin": "^0.8.0",
     "mousetrap": "^1.6.5",
-    "node-sass": "^6.0.0",
-    "node-sass-selector-importer": "^5.2.0",
     "postcss-loader": "^3.0.0",
     "preact": "8.3.1",
     "preact-compat": "3.18.4",
@@ -94,6 +92,7 @@
     "react-html-parser": "^2.0.2",
     "redux": "3.7.2",
     "redux-thunk": "^2.3.0",
+    "sass": "1.43.4",
     "sass-loader": "^10.1.1",
     "scriptjs": "^2.5.9",
     "scroll-js": "^2.2.0",

packages/uikit-workshop/src/sass/scss/01-abstracts/_variables.scss

@@ -40,7 +40,7 @@ $pl-font-size-large: 1.2rem;
 $pl-space: 1rem;
 $pl-doublespace: $pl-space * 2;
 $pl-pad: 1rem;
-$pl-pad-half: $pl-pad/2;
+$pl-pad-half: $pl-pad * 0.5;
 $offset-top: 2rem;
 
 // Breakpoints
@@ -57,4 +57,4 @@ $pl-border-radius: 3px;
 $pl-border-radius-med: 6px;
 
 
-$pl-sidebar-width: 16rem; //Define sidebar width for calculating dimensions
+$pl-sidebar-width: 16rem; //Define sidebar width for calculating dimensions

packages/uikit-workshop/src/scripts/components/pl-nav/pl-nav.scss

@@ -257,8 +257,8 @@ pl-nav {
 .pl-c-nav__link--sublink {
   text-transform: none;
   font-size: 0.78rem;
-  padding-left: $pl-space + ($pl-space / 2);
-  padding-right: $pl-space + ($pl-space / 2);
+  padding-left: $pl-space + $pl-space * 0.5;
+  padding-right: $pl-space + $pl-space * 0.5;
 
   &.pl-is-active {
     box-shadow: inset 4px 0 0 #6c79d9;

packages/uikit-workshop/webpack.config.js

@@ -5,7 +5,6 @@ const TerserPlugin = require('terser-webpack-plugin');
 const autoprefixer = require('autoprefixer');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const selectorImporter = require('node-sass-selector-importer');
 const webpack = require('webpack');
 const CopyPlugin = require('copy-webpack-plugin');
 const path = require('path');
@@ -121,8 +120,7 @@ module.exports = function (apiConfig) {
         options: {
           sassOptions: {
             sourceMap: config.sourceMaps,
-            outputStyle: 'expanded',
-            importer: [selectorImporter()],
+            outputStyle: 'expanded'
           },
         },
       },