From c0d6c93441a815d36bffcb59a359c685240969e8 Mon Sep 17 00:00:00 2001 From: Paul Derscheid Date: Mon, 26 Aug 2024 13:31:46 +0200 Subject: [PATCH] Bug 35402: (follow-up) Use ~ to resolve to nearest node_modules when building css - This patch adds a new dev dependency node-sass-tilde-importer. - We use the tilde to resolve to the nearest node_moduldes, meaning - /kohadevbox/koha/node_modules or - /kohadevbox/node_modules - We explicitly prefix the last path component with an underscore to prevent the resolution from failing (this doesn't seem necessary for all cases, though) Signed-off-by: Jonathan Druart --- gulpfile.js | 2 + .../intranet-tmpl/prog/css/src/installer.scss | 40 ++++---- .../prog/css/src/staff-global.scss | 91 +++++++++---------- .../opac-tmpl/bootstrap/css/src/_common.scss | 85 +++++++++-------- package.json | 1 + yarn.lock | 12 +++ 6 files changed, 122 insertions(+), 109 deletions(-) diff --git a/gulpfile.js b/gulpfile.js index 7c6a56372f8..918ea10b664 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -11,6 +11,7 @@ const util = require('util'); const stream = require('stream/promises'); const sass = require('gulp-sass')(require('sass')); +const tildeImporter = require('node-sass-tilde-importer'); const rtlcss = require('gulp-rtlcss'); const sourcemaps = require('gulp-sourcemaps'); const autoprefixer = require('gulp-autoprefixer'); @@ -30,6 +31,7 @@ var CSS_BASE = args.view == "opac" : STAFF_CSS_BASE; var sassOptions = { + importer: tildeImporter, includePaths: [ __dirname + '/node_modules', __dirname + '/../node_modules' diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/installer.scss b/koha-tmpl/intranet-tmpl/prog/css/src/installer.scss index 4e08dec07b9..1450471404e 100644 --- a/koha-tmpl/intranet-tmpl/prog/css/src/installer.scss +++ b/koha-tmpl/intranet-tmpl/prog/css/src/installer.scss @@ -1,32 +1,32 @@ // scss-docs-start import-stack // Configuration -@import "../../../../../node_modules/bootstrap5/scss/functions"; +@import "~bootstrap5/scss/_functions"; // Include any default variable overrides here -@import "variables"; +@import "_variables"; // Include remainder of required Bootstrap stylesheets -@import "../../../../../node_modules/bootstrap5/scss/variables"; -@import "../../../../../node_modules/bootstrap5/scss/mixins"; +@import "~bootstrap5/scss/_variables"; +@import "~bootstrap5/scss/_mixins"; $enable-dark-mode: false; -@import "../../../../../node_modules/bootstrap5/scss/maps"; -@import "../../../../../node_modules/bootstrap5/scss/utilities"; -@import "../../../../../node_modules/bootstrap5/scss/root"; -@import "../../../../../node_modules/bootstrap5/scss/reboot"; -@import "../../../../../node_modules/bootstrap5/scss/type"; -@import "../../../../../node_modules/bootstrap5/scss/containers"; -@import "../../../../../node_modules/bootstrap5/scss/grid"; -@import "../../../../../node_modules/bootstrap5/scss/forms"; -@import "../../../../../node_modules/bootstrap5/scss/buttons"; -@import "../../../../../node_modules/bootstrap5/scss/transitions"; -@import "../../../../../node_modules/bootstrap5/scss/breadcrumb"; -@import "../../../../../node_modules/bootstrap5/scss/badge"; -@import "../../../../../node_modules/bootstrap5/scss/alert"; -@import "../../../../../node_modules/bootstrap5/scss/helpers"; -@import "../../../../../node_modules/bootstrap5/scss/utilities/api"; -@import "flatpickr"; +@import "~bootstrap5/scss/_maps"; +@import "~bootstrap5/scss/_utilities"; +@import "~bootstrap5/scss/_root"; +@import "~bootstrap5/scss/_reboot"; +@import "~bootstrap5/scss/_type"; +@import "~bootstrap5/scss/_containers"; +@import "~bootstrap5/scss/_grid"; +@import "~bootstrap5/scss/_forms"; +@import "~bootstrap5/scss/_buttons"; +@import "~bootstrap5/scss/_transitions"; +@import "~bootstrap5/scss/_breadcrumb"; +@import "~bootstrap5/scss/_badge"; +@import "~bootstrap5/scss/_alert"; +@import "~bootstrap5/scss/_helpers"; +@import "~bootstrap5/scss/_utilities/api"; +@import "_flatpickr"; body { background-color: #EEE; diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss index 2d3bed2ad27..c0939e417f2 100644 --- a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss +++ b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss @@ -1,66 +1,65 @@ -@import "../../../../../node_modules/bootstrap5/scss/mixins/banner"; -@import "../../../../../node_modules/bootstrap5/scss/mixins/banner"; -@include bsBanner(""); +@import "~bootstrap5/scss/mixins/_banner"; +@import "~bootstrap5/scss/mixins/_banner"; // scss-docs-start import-stack +@import "~bootstrap5/scss/_functions"; // Configuration -@import "../../../../../node_modules/bootstrap5/scss/functions"; // Include any default variable overrides here -@import "variables"; +@import "_variables"; // Include remainder of required Bootstrap stylesheets -@import "../../../../../node_modules/bootstrap5/scss/variables"; -@import "../../../../../node_modules/bootstrap5/scss/mixins"; +@import "~bootstrap5/scss/_variables"; +@import "~bootstrap5/scss/_mixins"; $enable-dark-mode: false; -@import "../../../../../node_modules/bootstrap5/scss/maps"; -@import "../../../../../node_modules/bootstrap5/scss/utilities"; +@import "~bootstrap5/scss/_maps"; +@import "~bootstrap5/scss/_utilities"; // Layout & components -@import "../../../../../node_modules/bootstrap5/scss/root"; -@import "../../../../../node_modules/bootstrap5/scss/reboot"; -@import "../../../../../node_modules/bootstrap5/scss/type"; -@import "../../../../../node_modules/bootstrap5/scss/images"; -@import "../../../../../node_modules/bootstrap5/scss/containers"; -@import "../../../../../node_modules/bootstrap5/scss/grid"; -@import "../../../../../node_modules/bootstrap5/scss/tables"; -@import "../../../../../node_modules/bootstrap5/scss/forms"; -@import "../../../../../node_modules/bootstrap5/scss/buttons"; -@import "../../../../../node_modules/bootstrap5/scss/transitions"; -@import "../../../../../node_modules/bootstrap5/scss/dropdown"; -@import "../../../../../node_modules/bootstrap5/scss/button-group"; -@import "../../../../../node_modules/bootstrap5/scss/nav"; -@import "../../../../../node_modules/bootstrap5/scss/navbar"; -@import "../../../../../node_modules/bootstrap5/scss/card"; -@import "../../../../../node_modules/bootstrap5/scss/accordion"; -@import "../../../../../node_modules/bootstrap5/scss/breadcrumb"; -@import "../../../../../node_modules/bootstrap5/scss/pagination"; -@import "../../../../../node_modules/bootstrap5/scss/badge"; -@import "../../../../../node_modules/bootstrap5/scss/alert"; -@import "../../../../../node_modules/bootstrap5/scss/progress"; -@import "../../../../../node_modules/bootstrap5/scss/list-group"; -@import "../../../../../node_modules/bootstrap5/scss/close"; -@import "../../../../../node_modules/bootstrap5/scss/toasts"; -@import "../../../../../node_modules/bootstrap5/scss/modal"; -@import "../../../../../node_modules/bootstrap5/scss/tooltip"; -@import "../../../../../node_modules/bootstrap5/scss/popover"; -@import "../../../../../node_modules/bootstrap5/scss/carousel"; -@import "../../../../../node_modules/bootstrap5/scss/spinners"; -@import "../../../../../node_modules/bootstrap5/scss/offcanvas"; -@import "../../../../../node_modules/bootstrap5/scss/placeholders"; +@import "~bootstrap5/scss/_root"; +@import "~bootstrap5/scss/_reboot"; +@import "~bootstrap5/scss/_type"; +@import "~bootstrap5/scss/_images"; +@import "~bootstrap5/scss/_containers"; +@import "~bootstrap5/scss/_grid"; +@import "~bootstrap5/scss/_tables"; +@import "~bootstrap5/scss/_forms"; +@import "~bootstrap5/scss/_buttons"; +@import "~bootstrap5/scss/_transitions"; +@import "~bootstrap5/scss/_dropdown"; +@import "~bootstrap5/scss/_button-group"; +@import "~bootstrap5/scss/_nav"; +@import "~bootstrap5/scss/_navbar"; +@import "~bootstrap5/scss/_card"; +@import "~bootstrap5/scss/_accordion"; +@import "~bootstrap5/scss/_breadcrumb"; +@import "~bootstrap5/scss/_pagination"; +@import "~bootstrap5/scss/_badge"; +@import "~bootstrap5/scss/_alert"; +@import "~bootstrap5/scss/_progress"; +@import "~bootstrap5/scss/_list-group"; +@import "~bootstrap5/scss/_close"; +@import "~bootstrap5/scss/_toasts"; +@import "~bootstrap5/scss/_modal"; +@import "~bootstrap5/scss/_tooltip"; +@import "~bootstrap5/scss/_popover"; +@import "~bootstrap5/scss/_carousel"; +@import "~bootstrap5/scss/_spinners"; +@import "~bootstrap5/scss/_offcanvas"; +@import "~bootstrap5/scss/_placeholders"; // Helpers -@import "../../../../../node_modules/bootstrap5/scss/helpers"; +@import "~bootstrap5/scss/_helpers"; // Utilities -@import "../../../../../node_modules/bootstrap5/scss/utilities/api"; +@import "~bootstrap5/scss/utilities/_api"; // scss-docs-end import-stack -@import "mixins"; -@import "tables"; -@import "flatpickr"; -@import "fonts"; +@import "_mixins"; +@import "_tables"; +@import "_flatpickr"; +@import "_fonts"; .btn-default { @include button-variant( diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss index b59113e87b2..e70db6adc86 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss +++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss @@ -36,70 +36,69 @@ $high-contrast-grey: #666666; box-shadow: inset 0 1px 1px rgba( 0, 0, 0, .075 ), 0 0 8px rgba( 194, 228, 136, .6 ); } -@import "../../../../../node_modules/bootstrap5/scss/mixins/banner"; -@include bsBanner(""); +@import "~bootstrap5/scss/mixins/_banner"; // scss-docs-start import-stack // Configuration -@import "../../../../../node_modules/bootstrap5/scss/functions"; +@import "~bootstrap5/scss/_functions"; // Include any default variable overrides here -@import "variables"; +@import "_variables"; // Include remainder of required Bootstrap stylesheets -@import "../../../../../node_modules/bootstrap5/scss/variables"; -@import "../../../../../node_modules/bootstrap5/scss/mixins"; +@import "~bootstrap5/scss/_variables"; +@import "~bootstrap5/scss/_mixins"; $enable-dark-mode: false; -@import "../../../../../node_modules/bootstrap5/scss/maps"; -@import "../../../../../node_modules/bootstrap5/scss/utilities"; +@import "~bootstrap5/scss/_maps"; +@import "~bootstrap5/scss/_utilities"; // Layout & components -@import "../../../../../node_modules/bootstrap5/scss/root"; -@import "../../../../../node_modules/bootstrap5/scss/reboot"; -@import "../../../../../node_modules/bootstrap5/scss/type"; -@import "../../../../../node_modules/bootstrap5/scss/images"; -@import "../../../../../node_modules/bootstrap5/scss/containers"; -@import "../../../../../node_modules/bootstrap5/scss/grid"; -@import "../../../../../node_modules/bootstrap5/scss/tables"; -@import "../../../../../node_modules/bootstrap5/scss/forms"; -@import "../../../../../node_modules/bootstrap5/scss/buttons"; -@import "../../../../../node_modules/bootstrap5/scss/transitions"; -@import "../../../../../node_modules/bootstrap5/scss/dropdown"; -@import "../../../../../node_modules/bootstrap5/scss/button-group"; -@import "../../../../../node_modules/bootstrap5/scss/nav"; -@import "../../../../../node_modules/bootstrap5/scss/navbar"; -@import "../../../../../node_modules/bootstrap5/scss/card"; -@import "../../../../../node_modules/bootstrap5/scss/accordion"; -@import "../../../../../node_modules/bootstrap5/scss/breadcrumb"; -@import "../../../../../node_modules/bootstrap5/scss/pagination"; -@import "../../../../../node_modules/bootstrap5/scss/badge"; -@import "../../../../../node_modules/bootstrap5/scss/alert"; -@import "../../../../../node_modules/bootstrap5/scss/progress"; -@import "../../../../../node_modules/bootstrap5/scss/list-group"; -@import "../../../../../node_modules/bootstrap5/scss/close"; -@import "../../../../../node_modules/bootstrap5/scss/toasts"; -@import "../../../../../node_modules/bootstrap5/scss/modal"; -@import "../../../../../node_modules/bootstrap5/scss/tooltip"; -@import "../../../../../node_modules/bootstrap5/scss/popover"; -@import "../../../../../node_modules/bootstrap5/scss/carousel"; -@import "../../../../../node_modules/bootstrap5/scss/spinners"; -@import "../../../../../node_modules/bootstrap5/scss/offcanvas"; -@import "../../../../../node_modules/bootstrap5/scss/placeholders"; +@import "~bootstrap5/scss/_root"; +@import "~bootstrap5/scss/_reboot"; +@import "~bootstrap5/scss/_type"; +@import "~bootstrap5/scss/_images"; +@import "~bootstrap5/scss/_containers"; +@import "~bootstrap5/scss/_grid"; +@import "~bootstrap5/scss/_tables"; +@import "~bootstrap5/scss/_forms"; +@import "~bootstrap5/scss/_buttons"; +@import "~bootstrap5/scss/_transitions"; +@import "~bootstrap5/scss/_dropdown"; +@import "~bootstrap5/scss/_button-group"; +@import "~bootstrap5/scss/_nav"; +@import "~bootstrap5/scss/_navbar"; +@import "~bootstrap5/scss/_card"; +@import "~bootstrap5/scss/_accordion"; +@import "~bootstrap5/scss/_breadcrumb"; +@import "~bootstrap5/scss/_pagination"; +@import "~bootstrap5/scss/_badge"; +@import "~bootstrap5/scss/_alert"; +@import "~bootstrap5/scss/_progress"; +@import "~bootstrap5/scss/_list-group"; +@import "~bootstrap5/scss/_close"; +@import "~bootstrap5/scss/_toasts"; +@import "~bootstrap5/scss/_modal"; +@import "~bootstrap5/scss/_tooltip"; +@import "~bootstrap5/scss/_popover"; +@import "~bootstrap5/scss/_carousel"; +@import "~bootstrap5/scss/_spinners"; +@import "~bootstrap5/scss/_offcanvas"; +@import "~bootstrap5/scss/_placeholders"; // Helpers -@import "../../../../../node_modules/bootstrap5/scss/helpers"; +@import "~bootstrap5/scss/_helpers"; // Utilities -@import "../../../../../node_modules/bootstrap5/scss/utilities/api"; +@import "~bootstrap5/scss/utilities/_api"; // scss-docs-end import-stack -@import "flatpickr"; +@import "_flatpickr"; /* Koha imports */ -@import "fonts"; +@import "_fonts"; // Sticky footer styles html, diff --git a/package.json b/package.json index bcc0f18a4f5..83f40a22c7d 100644 --- a/package.json +++ b/package.json @@ -81,6 +81,7 @@ "eslint-plugin-prettier": "^5.1.3", "gulp-tap": "^1.0.1", "html-webpack-plugin": "^5.5.0", + "node-sass-tilde-importer": "^1.0.2", "postcss": "^8.4.14", "postcss-selector-parser": "^6.0.10", "stylelint": "^14.9.1", diff --git a/yarn.lock b/yarn.lock index 691781c8860..ff80010c7b1 100755 --- a/yarn.lock +++ b/yarn.lock @@ -4799,6 +4799,11 @@ find-cache-dir@^3.3.1: make-dir "^3.0.2" pkg-dir "^4.1.0" +find-parent-dir@^0.3.0: + version "0.3.1" + resolved "https://registry.yarnpkg.com/find-parent-dir/-/find-parent-dir-0.3.1.tgz#c5c385b96858c3351f95d446cab866cbf9f11125" + integrity sha512-o4UcykWV/XN9wm+jMEtWLPlV8RXCZnMhQI6F6OdHeSez7iiJWePw8ijOlskJZMsaQoGR/b7dH6lO02HhaTN7+A== + find-up@^1.0.0: version "1.1.2" resolved "https://registry.yarnpkg.com/find-up/-/find-up-1.1.2.tgz#6b2e9822b1a2ce0a60ab64d610eccad53cb24d0f" @@ -7366,6 +7371,13 @@ node-releases@^2.0.6: resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.6.tgz#8a7088c63a55e493845683ebf3c828d8c51c5503" integrity sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg== +node-sass-tilde-importer@^1.0.2: + version "1.0.2" + resolved "https://registry.yarnpkg.com/node-sass-tilde-importer/-/node-sass-tilde-importer-1.0.2.tgz#1a15105c153f648323b4347693fdb0f331bad1ce" + integrity sha512-Swcmr38Y7uB78itQeBm3mThjxBy9/Ah/ykPIaURY/L6Nec9AyRoL/jJ7ECfMR+oZeCTVQNxVMu/aHU+TLRVbdg== + dependencies: + find-parent-dir "^0.3.0" + nomnom@1.8.1: version "1.8.1" resolved "https://registry.yarnpkg.com/nomnom/-/nomnom-1.8.1.tgz#2151f722472ba79e50a76fc125bb8c8f2e4dc2a7" -- 2.34.1