Attachment 147136 Details for Bug 32978 – Bug 32978: Replace node-sass with dart-sass

[patch] Bug 32978: Replace node-sass with dart-sass

Bug-32978-Replace-node-sass-with-dart-sass.patch (text/plain), 5.06 KB, created by Tomás Cohen Arazi (tcohen) on 2023-02-22 13:00:49 UTC

(hide)

Description:

Filename:

MIME Type:

Creator: Tomás Cohen Arazi (tcohen)

Created: 2023-02-22 13:00:49 UTC

Size: 5.06 KB

patch

obsolete

>From f90b9241e80c32b142dd7b33c5748a28e111cd26 Mon Sep 17 00:00:00 2001
>From: Owen Leonard <oleonard@myacpl.org>
>Date: Wed, 15 Feb 2023 17:36:57 +0000
>Subject: [PATCH] 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.
>---
> gulpfile.js                                        | 12 +++---------
> .../prog/css/src/_flatpickr_vars.scss              |  2 +-
> .../bootstrap/css/src/_flatpickr_vars.scss         |  4 ++--
> package.json                                       | 14 +++++++-------
> 4 files changed, 13 insertions(+), 19 deletions(-)
>
>diff --git a/gulpfile.js b/gulpfile.js
>index 86da8f3407d..6b3ab44cf83 100644
>--- a/gulpfile.js
>+++ b/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" ){
>diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/_flatpickr_vars.scss b/koha-tmpl/intranet-tmpl/prog/css/src/_flatpickr_vars.scss
>index 0c0eaffab39..4c69afa1033 100644
>--- a/koha-tmpl/intranet-tmpl/prog/css/src/_flatpickr_vars.scss
>+++ b/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;
>diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/_flatpickr_vars.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/_flatpickr_vars.scss
>index 19b74871ce0..80a3027cbd4 100644
>--- a/koha-tmpl/opac-tmpl/bootstrap/css/src/_flatpickr_vars.scss
>+++ b/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;
>diff --git a/package.json b/package.json
>index 04ddc823093..046755dbb8c 100644
>--- a/package.json
>+++ b/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",
>-- 
>2.34.1

Actions: View | Diff | Splinter Review

Attachments on bug 32978: 146729 | 146744 | 146745 | 147136 | 147137