Bug 32978: Replace node-sass with dart-sass

'npm install' fails in ktd on aarch64, giving unsupported architecture error for node-sass.

This patch addresses this by replacing node-sass with dart-sass, updating our gulpfile
accordingly. Some corrections have been made to SCSS to fix warnings
raised during the build process.

Signed-off-by: Paul Derscheid <paul.derscheid@lmscloud.de>
Works like a charm. Great work oleonard! Tested on Apple M1, e.g. aarch64.

Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
Edit: I removed some useless formatting changes in the gulpfile, and the
yarn.lock changes as well.
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>

gulpfile.js

@@ -9,8 +9,7 @@ const os = require('os');
 const path = require('path');
 const util = require('util');
 
-const sass = require("gulp-sass");
-const cssnano = require("gulp-cssnano");
+const sass = require('gulp-sass')(require('sass'));
 const rtlcss = require('gulp-rtlcss');
 const sourcemaps = require('gulp-sourcemaps');
 const autoprefixer = require('gulp-autoprefixer');
@@ -30,8 +29,6 @@ var CSS_BASE = args.view == "opac"
     : STAFF_CSS_BASE;
 
 var sassOptions = {
-    errLogToConsole: true,
-    precision: 3,
     includePaths: [
         __dirname + '/node_modules',
         __dirname + '/../node_modules'
@@ -62,16 +59,13 @@ function css(css_base) {
     return stream;
 
 }
-
 // CSS processing for production
 function build(css_base) {
-    css_base = css_base || CSS_BASE
+    css_base = css_base || CSS_BASE;
+    sassOptions.outputStyle = "compressed";
     var stream = src(css_base + "/src/**/*.scss")
         .pipe(sass(sassOptions).on('error', sass.logError))
         .pipe(autoprefixer())
-        .pipe(cssnano({
-            zindex: false
-        }))
         .pipe(dest(css_base));
 
     if( args.view == "opac" ){

koha-tmpl/intranet-tmpl/prog/css/src/_flatpickr_vars.scss

@@ -3,7 +3,7 @@ $slideTime: 400ms;
 
 
 $daySize: 39px !default;
-$padding: $daySize / 16;
+$padding: calc( $daySize / 16 );
 $dayMargin: 2px !default;
 $daysWidth: $daySize * 7 + $dayMargin * 14 + $padding * 2 + 2;
 $calendarWidth: $daysWidth;

koha-tmpl/opac-tmpl/bootstrap/css/src/_flatpickr_vars.scss

@@ -1,9 +1,9 @@
 $bezier: cubic-bezier( .23, 1, .32, 1 );
 $slideTime: 400ms;
 $daySize: 39px !default;
-$padding: $daySize / 16;
+$padding: calc( $daySize / 16 );
 $dayMargin: 2px !default;
-$daysWidth: $daySize * 7 + $dayMargin * 14 + $padding * 2 + 2;
+$daysWidth: calc( $daySize * 7) + $dayMargin * 14 + $padding * 2 + 2;
 $calendarWidth: $daysWidth;
 $monthNavHeight: 34px !default;
 $weekdaysHeight: 28px !default;

package.json

@@ -21,11 +21,10 @@
     "gulp": "^4.0.2",
     "gulp-autoprefixer": "^4.0.0",
     "gulp-concat-po": "^1.0.0",
-    "gulp-cssnano": "^2.1.2",
     "gulp-exec": "^4.0.0",
     "gulp-rename": "^2.0.0",
     "gulp-rtlcss": "^1.4.1",
-    "gulp-sass": "^3.1.0",
+    "gulp-sass": "^5.1.0",
     "gulp-sourcemaps": "^2.6.1",
     "js-yaml": "^3.13.1",
     "lodash": "^4.17.12",
@@ -33,6 +32,7 @@
     "minimist": "^1.2.5",
     "mysql": "^2.18.1",
     "pinia": "^2.0.13",
+    "sass": "^1.58.1",
     "style-loader": "^3.3.1",
     "vue": "^3.2.31",
     "vue-flatpickr-component": "^9",
@@ -63,11 +63,6 @@
   "author": "",
   "license": "GPL-3.0",
   "devDependencies": {
-    "postcss-selector-parser": "^6.0.10",
-    "postcss": "^8.4.14",
-    "stylelint-config-standard-scss": "^5.0.0",
-    "stylelint-order": "^5.0.0",
-    "stylelint": "^14.9.1",
     "@babel/core": "^7.17.5",
     "@babel/preset-env": "^7.16.11",
     "@vue/compiler-sfc": "^3.2.31",
@@ -77,6 +72,11 @@
     "clean-webpack-plugin": "^4.0.0",
     "gulp-tap": "^1.0.1",
     "html-webpack-plugin": "^5.5.0",
+    "postcss": "^8.4.14",
+    "postcss-selector-parser": "^6.0.10",
+    "stylelint": "^14.9.1",
+    "stylelint-config-standard-scss": "^5.0.0",
+    "stylelint-order": "^5.0.0",
     "ts-loader": "^9.2.7",
     "typescript": "^4.6.2",
     "vinyl-source-stream": "^2.0.0",