refactor: replace node-sass by sass (pattern-lab#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
quelltexterin · Nov 21, 2021 · a1fac7c · a1fac7c
1 parent fd7632b
commit a1fac7c
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 9 deletions.
diff --git a/packages/uikit-workshop/package.json b/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",

diff --git a/packages/uikit-workshop/src/sass/scss/01-abstracts/_variables.scss b/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
diff --git a/packages/uikit-workshop/src/scripts/components/pl-nav/pl-nav.scss b/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;

diff --git a/packages/uikit-workshop/webpack.config.js b/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'
           },
         },
       },