Stop using @import in scss (#284)

* Stop using @import in scss

* Configure scss formatter

.vscode/extensions.json

@@ -22,6 +22,8 @@
     "dbaeumer.vscode-eslint",
     "dprint.dprint",
     "meganrogge.template-string-converter",
+    "mrmlnc.vscode-scss",
+    "sibiraj-s.vscode-scss-formatter", // This can likely eventually be replaced by dprint's malva plugin
     // Python/TOML
     "charliermarsh.ruff",
     "ms-python.mypy-type-checker",

.vscode/settings.json

@@ -143,7 +143,7 @@
     "editor.defaultFormatter": "vscode.css-language-features"
   },
   "[scss]": {
-    "editor.defaultFormatter": "vscode.css-language-features"
+    "editor.defaultFormatter": "sibiraj-s.vscode-scss-formatter"
   },
   "[postcss]": {
     "editor.defaultFormatter": "vscode.css-language-features"
@@ -154,6 +154,9 @@
   "less.format.spaceAroundSelectorSeparator": true,
   "css.format.spaceAroundSelectorSeparator": true,
   "scss.format.spaceAroundSelectorSeparator": true,
+  "scssFormatter.printWidth": 100,
+  "scssFormatter.singleQuote": true,
+  "scssFormatter.trailingComma": "all",
 
   /*
   * Python

canopeum_frontend/src/App.scss

@@ -1,30 +1,25 @@
-@import "../node_modules/bootstrap/scss/functions";
-
-$primary: #007E51;
-$secondary: #F18200;
-$border-radius: 0.5rem;
-$link-decoration: none;
-/* TODO: We should reference palette, not direct colors
-https://github.com/BesLogic/releaf-canopeum/issues/249 */
-$green: #06C270;
-$lightgreen: #E8F3E9;
-$cream: #FFFAF5;
-
-$font-family-sans-serif: -apple-system, BlinkMacSystemFont, 'Lato', Roboto, 'Helvetica Neue', Arial, sans-serif;
-$font-family-monospace: 'Helvetica Neue', Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
-$font-family-base: $font-family-sans-serif;
-$headings-font-family: Lato;
-
-$headings-font-weight: 700;
-
-
-@import "rsuite/dist/rsuite.min.css";
-
-@import "../node_modules/bootstrap/scss/variables";
-@import "../node_modules/bootstrap/scss/mixins";
-
-@import "../node_modules/bootstrap/scss/bootstrap.scss";
-
-@import "./assets/styles/GlobalStyles.scss";
-
-$navbar-dark-toggler-border-color: rgba($white, 1);
+// Load rsuite CSS first because we don't want it to have priority over bootstrap
+// We can also later override its css vars
+// TODO: Strongly consider to stop using rsuite, we have too many co-existing design systems !
+// (rsuite + mui + bootstrap)
+@use '../node_modules/rsuite/dist/rsuite.min.css';
+
+// Load variables before Bootsrap so it generates the right theme colors
+@forward './assets/styles/Variables.scss';
+@use './assets/styles/Variables.scss' as *;
+
+@use '../node_modules/bootstrap/scss/bootstrap' with (
+  $font-family-sans-serif: $font-family-sans-serif,
+  $font-family-monospace: $font-family-monospace,
+  $font-family-base: $font-family-base,
+  $headings-font-family: $headings-font-family,
+  $headings-font-weight: $headings-font-weight,
+  $border-radius: $border-radius,
+  $link-decoration: $link-decoration,
+  $primary: $primary,
+  $secondary: $secondary,
+  $success: $success,
+  $white: $white
+);
+
+@use './assets/styles/GlobalStyles.scss';

canopeum_frontend/src/assets/styles/DropdownMenu.scss

@@ -1,3 +1,5 @@
+@use '../../assets/styles/Variables.scss' as *;
+
 .rs-dropdown-item-submenu:hover > .rs-dropdown-item-toggle {
   background-color: $lightgreen;
   color: inherit;

canopeum_frontend/src/assets/styles/Forms.scss

@@ -1,6 +1,6 @@
-@import "../node_modules/bootstrap/scss/variables";
+@use '../../../node_modules/bootstrap/scss/bootstrap' as *;
 
-$default-text-color: #433A2E;
+$default-text-color: #433a2e;
 
 .form-control::placeholder {
   color: map-get($theme-colors, light-gray);

canopeum_frontend/src/assets/styles/GlobalStyles.scss

@@ -1,17 +1,13 @@
-// Import here all global style modules from this same folder
-
-@import "./Buttons.scss";
-@import "./Forms.scss";
-@import "./Icons.scss";
-@import "./Navbar.scss";
-@import "./Transitions.scss";
-@import "./DropdownMenu.scss";
-
-$small-width: 540px;
-$medium-width: 720px;
-$large-width: 960px;
-$xlarge-width: 1200px;
-$xxlarge-width: 1600px;
+@use 'Variables.scss' as *;
+
+// TODO (Sam. T): Move this file to a GlobalStyles/_index.scss and imported files into same folder
+
+@use 'Buttons.scss';
+@use 'Forms.scss';
+@use 'Icons.scss';
+@use 'Navbar.scss';
+@use 'Transitions.scss';
+@use 'DropdownMenu.scss';
 
 ::-webkit-scrollbar {
   width: 10px;

canopeum_frontend/src/assets/styles/Variables.scss

@@ -0,0 +1,52 @@
+/*
+* Bootstrap variables
+*/
+
+$font-family-sans-serif: (
+  -apple-system,
+  BlinkMacSystemFont,
+  'Lato',
+  Roboto,
+  'Helvetica Neue',
+  Arial,
+  sans-serif
+);
+$font-family-monospace: (
+  'Helvetica Neue',
+  Monaco,
+  Consolas,
+  'Liberation Mono',
+  'Courier New',
+  monospace
+);
+$font-family-base: $font-family-sans-serif;
+$headings-font-family: Lato;
+$headings-font-weight: 700;
+
+$border-radius: 0.5rem;
+$link-decoration: none;
+
+$primary: #007e51;
+$secondary: #f18200;
+$success: #06c270;
+
+$white: #fffaf5;
+/* TODO: We should reference palette, not direct colors
+https://github.com/BesLogic/releaf-canopeum/issues/249 */
+$cream: #fffaf5;
+
+/*
+* Custom variables
+*/
+
+// TODO (Sam T.): We should try to configure and properly use Bootstrap breakpoints instead
+$small-width: 540px;
+$medium-width: 720px;
+$large-width: 960px;
+$xlarge-width: 1200px;
+$xxlarge-width: 1600px;
+
+// TODO (Sam T.): We should configure bootstrap so that
+// our primary-derived color this represents uses the right shade of green.
+// Then use the generated bootstrap scss variable instead of $lightgreen
+$lightgreen: #e8f3e9;

canopeum_frontend/src/assets/styles/export.module.scss

@@ -1,7 +1,7 @@
-@import '../../App.scss';
+@use 'Variables.scss' as *;
 
 :export {
   primary: $primary;
   secondary: $secondary;
-  success: map-get($theme-colors, success);
+  success: $success;
 }

canopeum_frontend/src/components/analytics/AnalyticsSiteHeader.scss

@@ -1,4 +1,4 @@
-@import '../../App.scss';
+@use '../../assets/styles/Variables.scss' as *;
 
 .header-card {
   display: flex;

canopeum_frontend/src/components/analytics/ImageUpload.scss

@@ -1,4 +1,4 @@
-@import '../../App.scss';
+@use '../../assets/styles/Variables.scss' as *;
 
 .upload-button {
   background-color: var(--bs-body-bg);

canopeum_frontend/src/components/analytics/SiteAdminTabs.scss

@@ -1,4 +1,4 @@
-@import '../../App.scss';
+@use '../../assets/styles/Variables.scss' as *;
 
 .admin-site-tabs.nav .nav-link {
   color: $cream;

canopeum_frontend/src/components/settings/SettingsTab.module.scss

@@ -1,4 +1,4 @@
-@import '../../App.scss';
+@use '../../assets/styles/Variables.scss' as *;
 
 .settingsTab {
   border: none;
@@ -7,6 +7,6 @@
 }
 
 .selectedSettingsTab {
-  border-left: 6px solid map-get($theme-colors, primary);
+  border-left: 6px solid $primary;
   background: $lightgreen;
 }

canopeum_frontend/src/components/social/SiteSocialHeader.scss

@@ -1,4 +1,4 @@
-@import '../../App.scss';
+@use '../../assets/styles/Variables.scss' as *;
 
 .site-social-header-card {
   display: flex;

canopeum_frontend/src/pages/Map.scss

@@ -1,4 +1,4 @@
-@import '../App.scss';
+@use '../assets/styles/Variables.scss' as *;
 
 #map-page-row-container {
   padding: 0 2rem;

canopeum_frontend/src/pages/UserManagement.scss

@@ -1,4 +1,4 @@
-@import '../App.scss';
+@use '../assets/styles/Variables.scss' as *;
 
 .settings-left-nav-menu {
   margin-bottom: 2rem;