From 256b2e1c9c31aa48a400890210c15f8e11c63bba Mon Sep 17 00:00:00 2001
From: axunonb <axunonb@users.noreply.github.com>
Date: Sat, 26 Aug 2023 00:32:20 +0200
Subject: [PATCH] Refactor scss files (#107)

* Fix: grunt-sass doesn't allow array for input scss files
* Add: custom_bootstrap.scss to build the custom bootstrap css
* Unify: use single quotes in scss files
---
 League/Gruntfile.js                            | 12 +++++-------
 League/Styles/bootstrap/_custom.scss           | 10 +++++-----
 League/Styles/bootstrap/_custom_variables.scss |  5 ++++-
 League/Styles/bootstrap/custom_bootstrap.scss  |  3 +++
 League/Styles/site/_std-input.scss             |  4 +---
 League/Styles/site/site.scss                   |  4 ++--
 6 files changed, 20 insertions(+), 18 deletions(-)
 create mode 100644 League/Styles/bootstrap/custom_bootstrap.scss

diff --git a/League/Gruntfile.js b/League/Gruntfile.js
index c1884432..cfcdb430 100644
--- a/League/Gruntfile.js
+++ b/League/Gruntfile.js
@@ -27,13 +27,11 @@ module.exports = function (grunt) {
                 outputStyle: 'nested' // Minify output with "compressed"
             },
             dist: {
-                files: [
-                    {
-                        'wwwroot/lib/bootstrap/bootstrap.css': ['Styles/bootstrap/_custom.scss', 'node_modules/bootstrap/scss/bootstrap.scss'],  // "destination": "source"
-                        'wwwroot/lib/fontawesome/fontawesome.css': 'Styles/fontawesome/fontawesome.scss',
-                        'wwwroot/css/site.css': 'Styles/site/site.scss'
-                    }
-                ]
+                files: {
+                    'wwwroot/lib/bootstrap/bootstrap.css': 'Styles/bootstrap/custom_bootstrap.scss',  // "destination": "source" (no arrays!)
+                    'wwwroot/lib/fontawesome/fontawesome.css': 'Styles/fontawesome/fontawesome.scss',
+                    'wwwroot/css/site.css': 'Styles/site/site.scss'
+                }
             }
         },
 
diff --git a/League/Styles/bootstrap/_custom.scss b/League/Styles/bootstrap/_custom.scss
index c18068da..6a594e69 100644
--- a/League/Styles/bootstrap/_custom.scss
+++ b/League/Styles/bootstrap/_custom.scss
@@ -1,9 +1,9 @@
-// Bootstrap dependencies - javascript and fonts must be copied separately
-// font-awesome is included by site.scss
+// This is the import file for site scss files
+// which are using variables and Bootstrap functions / mixins
 
-@import "node_modules/bootstrap/scss/functions";
+@import 'node_modules/bootstrap/scss/functions';
 
 @import './custom_variables';
 
-@import "node_modules/bootstrap/scss/variables";
-@import "node_modules/bootstrap/scss/mixins";
+@import 'node_modules/bootstrap/scss/variables';
+@import 'node_modules/bootstrap/scss/mixins';
diff --git a/League/Styles/bootstrap/_custom_variables.scss b/League/Styles/bootstrap/_custom_variables.scss
index ec8936ac..1fbbac8b 100644
--- a/League/Styles/bootstrap/_custom_variables.scss
+++ b/League/Styles/bootstrap/_custom_variables.scss
@@ -1,3 +1,6 @@
+// Required
+@import 'node_modules/bootstrap/scss/functions';
+
 // Bootstrap variable overrides
 
 //
@@ -28,7 +31,7 @@ $danger: #E401CD;
 $light: $gray-100;
 $dark: $gray-800;
 
-// Reassign color vars to semantic color scheme
+// Assign color vars to semantic color scheme
 $theme-colors: ( 'primary': $primary, 'secondary': $secondary, 'success': $success, 'info': $info, 'warning': $warning, 'danger': $danger, 'light': $light, 'dark': $dark);
 
 $table-bg: $light;
diff --git a/League/Styles/bootstrap/custom_bootstrap.scss b/League/Styles/bootstrap/custom_bootstrap.scss
new file mode 100644
index 00000000..a9a8030c
--- /dev/null
+++ b/League/Styles/bootstrap/custom_bootstrap.scss
@@ -0,0 +1,3 @@
+// Input file for the custom Bootstrap build
+@import './custom_variables';
+@import 'node_modules/bootstrap/scss/bootstrap';
diff --git a/League/Styles/site/_std-input.scss b/League/Styles/site/_std-input.scss
index d41f1add..0c4a490b 100644
--- a/League/Styles/site/_std-input.scss
+++ b/League/Styles/site/_std-input.scss
@@ -1,14 +1,12 @@
 // **************************************
 // Variables used locally
 // **************************************
-@import '../bootstrap/custom';
-
+@import '../bootstrap/_custom';
 
 // **************************************
 // Styles
 // **************************************
 
-
 /**************************************************************
 * START: css classes coming from jquery Unobtrousive Validation
 **************************************************************/
diff --git a/League/Styles/site/site.scss b/League/Styles/site/site.scss
index d2563b8b..12f9f39e 100644
--- a/League/Styles/site/site.scss
+++ b/League/Styles/site/site.scss
@@ -1,5 +1,5 @@
-@import '../bootstrap/custom';
-@import 'std-input';
+@import '../bootstrap/_custom';
+@import '_std-input';
 @import '../fontawesome/fontawesome.scss';
 
 $body-width: 60rem;