From df88c31c403aade0622db46bb6874bddf5f1e6d4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20Fastr=C3=A9?= <julien.fastre@champs-libres.coop>
Date: Wed, 28 May 2025 15:04:59 +0000
Subject: [PATCH] Replace node-sass with sass and update bootstrap to version
 5.3

---
 .changes/unreleased/DX-20250528-165813.yaml               | 6 ++++++
 package.json                                              | 4 ++--
 .../Resources/public/vuejs/MyCalendarRange/App2.vue       | 7 ++-----
 .../Resources/public/module/bootstrap/_shared.scss        | 7 +++----
 .../Resources/public/module/bootstrap/bootstrap.scss      | 8 +++++---
 webpack.config.js                                         | 7 ++++++-
 6 files changed, 24 insertions(+), 15 deletions(-)
 create mode 100644 .changes/unreleased/DX-20250528-165813.yaml

diff --git a/.changes/unreleased/DX-20250528-165813.yaml b/.changes/unreleased/DX-20250528-165813.yaml
new file mode 100644
index 000000000..f13945e76
--- /dev/null
+++ b/.changes/unreleased/DX-20250528-165813.yaml
@@ -0,0 +1,6 @@
+kind: DX
+body: Replace library node-sass by sass, and upgrade bootstrap to version 5.3 (yarn upgrade / install is required)
+time: 2025-05-28T16:58:13.226870341+02:00
+custom:
+    Issue: ""
+    SchemaChange: No schema change
diff --git a/package.json b/package.json
index f8489c27d..73fa14d86 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
     "@types/eslint__js": "^8.42.3",
     "@typescript-eslint/parser": "^8.12.2",
     "bindings": "^1.5.0",
-    "bootstrap": "5.2.3",
+    "bootstrap": "^5.3.6",
     "chokidar": "^3.5.1",
     "ckeditor5": "^45.1.0",
     "dompurify": "^3.1.0",
@@ -29,11 +29,11 @@
     "fork-awesome": "^1.1.7",
     "intl-messageformat": "^10.5.11",
     "jquery": "^3.6.0",
-    "node-sass": "^8.0.0",
     "popper.js": "^1.16.1",
     "postcss-loader": "^7.0.2",
     "prettier": "^3.3.3",
     "raw-loader": "^4.0.2",
+    "sass": "^1.89.0",
     "sass-loader": "^14.0.0",
     "select2": "^4.0.13",
     "select2-bootstrap-theme": "0.1.0-beta.10",
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App2.vue b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App2.vue
index b17e6d1d8..b93af07e4 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App2.vue
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App2.vue
@@ -97,7 +97,7 @@
     </div>
     <FullCalendar :options="calendarOptions" ref="calendarRef">
         <template v-slot:eventContent="{ event }">
-            <span :class="eventClasses(event)">
+            <span :class="eventClasses">
                 <b v-if="event.extendedProps.is === 'remote'">{{
                     event.title
                 }}</b>
@@ -349,11 +349,8 @@ const pickedLocation = computed<Location | null>({
 
 /**
  * return the show classes for the event
- * @param arg
  */
-const eventClasses = function (): object {
-    return { calendarRangeItems: true };
-};
+const eventClasses = { calendarRangeItems: true };
 
 /*
 // currently, all events are stored into calendarRanges, due to reactivity bug
diff --git a/src/Bundle/ChillMainBundle/Resources/public/module/bootstrap/_shared.scss b/src/Bundle/ChillMainBundle/Resources/public/module/bootstrap/_shared.scss
index 96da20779..a83f7e798 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/module/bootstrap/_shared.scss
+++ b/src/Bundle/ChillMainBundle/Resources/public/module/bootstrap/_shared.scss
@@ -11,15 +11,14 @@
 
 // 3. Include remainder of required Bootstrap stylesheets
 @import "bootstrap/scss/variables";
+@import "bootstrap/scss/variables-dark";
 
 // 4. Include any default map overrides here
 @import "custom/_maps";
-@import "bootstrap/scss/maps";
 
 // 5. Include remainder of required parts
+@import "bootstrap/scss/maps";
 @import "bootstrap/scss/mixins";
-@import "bootstrap/scss/utilities";
 @import "bootstrap/scss/root";
-
-
+@import "bootstrap/scss/utilities";
 
diff --git a/src/Bundle/ChillMainBundle/Resources/public/module/bootstrap/bootstrap.scss b/src/Bundle/ChillMainBundle/Resources/public/module/bootstrap/bootstrap.scss
index a8d5f2f13..c06cac59e 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/module/bootstrap/bootstrap.scss
+++ b/src/Bundle/ChillMainBundle/Resources/public/module/bootstrap/bootstrap.scss
@@ -1,8 +1,8 @@
 // Some Bootstrap variables and configuration files are shared with chill entrypoint
 @import "shared";
 
-// 6. Optionally include any other parts as needed
-@import "bootstrap/scss/utilities";
+// 6. Include any other optional stylesheet partials as desired; list below is not inclusive of all available stylesheets
+@import "bootstrap/scss/root";
 @import "bootstrap/scss/reboot";
 @import "bootstrap/scss/type";
 @import "bootstrap/scss/images";
@@ -32,10 +32,12 @@
 @import "bootstrap/scss/carousel";
 @import "bootstrap/scss/spinners";
 @import "bootstrap/scss/offcanvas";
-@import "bootstrap/scss/helpers";
+@import "bootstrap/scss/placeholders";
 
 // 7. Optionally include utilities API last to generate classes based on the Sass map in
 @import "bootstrap/scss/utilities/api";
+// Helpers
+@import "bootstrap/scss/helpers";
 
 // 8. Add additional custom code here
 @import "custom";
diff --git a/webpack.config.js b/webpack.config.js
index 13e3b89dc..d3a9b40b8 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -74,7 +74,12 @@ module.exports = (async () => {
   // basic encore configuration
   Encore.setOutputPath("public/build/")
     .setPublicPath("/build")
-    .enableSassLoader()
+    .enableSassLoader(function (options) {
+      // If set to true, Sass won’t print warnings that are caused by dependencies (like bootstrap):
+      // https://sass-lang.com/documentation/js-api/interfaces/options/#quietDeps
+        options.sassOptions.quietDeps = true;
+        options.sassOptions.silenceDeprecations = ['import'];
+    })
     .enableVueLoader(() => {}, {
       version: 3,
     })