Merge pull request #165 from BarthPaleologue/FixSassErrors

Migrate scss import to fix warnings
BarthPaleologue · Nov 3, 2024 · 4387ef8 · 4387ef8
2 parents 9331a18 + f3a3a5d
commit 4387ef8
Show file tree

Hide file tree

Showing 9 changed files with 57 additions and 44 deletions.
diff --git a/src/styles/bodyEditor/panels.scss b/src/styles/bodyEditor/panels.scss
@@ -1,3 +1,4 @@
+@use "sass:meta";
 //  This file is part of Cosmos Journeyer
 //
 //  Copyright (C) 2024 Barthélemy Paléologue <barth.paleologue@cosmosjourneyer.com>
@@ -44,12 +45,12 @@
       padding: 20px 10px 0 10px;
     }
 
-    @import "../utils/colorPicker";
+    @include meta.load-css("../utils/colorPicker");
 
     .range-slider {
       margin-top: -5%;
     }
 
-    @import "../utils/checkbox";
+    @include meta.load-css("../utils/checkbox");
   }
 }
diff --git a/src/styles/helmetOverlay/currentMissionDisplay.scss b/src/styles/helmetOverlay/currentMissionDisplay.scss
@@ -15,6 +15,8 @@
 //  You should have received a copy of the GNU Affero General Public License
 //  along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
+@use "../variables";
+
 .currentMissionDisplay {
   position: absolute;
   top: 0;
@@ -25,7 +27,7 @@
   flex-direction: column;
 
   background: rgba(0, 0, 0, 0.5);
-  transition: $transition-time;
+  transition: variables.$transition-time;
 
   &.completed {
     background: rgba(0, 64, 0, 0.5);

diff --git a/src/styles/helmetOverlay/helmetOverlay.scss b/src/styles/helmetOverlay/helmetOverlay.scss
@@ -15,9 +15,10 @@
 //  You should have received a copy of the GNU Affero General Public License
 //  along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
-@import "notifications.scss";
+@use "sass:meta";
+@use "notifications.scss";
 
-@import "currentMissionDisplay.scss";
+@use "currentMissionDisplay.scss";
 
 #helmetOverlay {
   position: absolute;
@@ -31,7 +32,7 @@
 
   font-family: Nasalization, sans-serif;
 
-  @import "targetHelper.scss";
+  @include meta.load-css("targetHelper.scss");
 
   .cursor {
     position: absolute;

diff --git a/src/styles/index.scss b/src/styles/index.scss
@@ -1,3 +1,4 @@
+@use "sass:meta";
 @use "sass:color";
 
 //  This file is part of Cosmos Journeyer
@@ -17,13 +18,13 @@
 //  You should have received a copy of the GNU Affero General Public License
 //  along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
+@use "variables";
+
 @font-face {
   font-family: 'Nasalization';
   src: url('./nasalization/nasalization-rg.otf') format('opentype');
 }
 
-@import "variables";
-
 *,
 *::before,
 *::after {
@@ -49,6 +50,17 @@
   background: #555;
 }
 
+:root {
+  --text-size: 2vmin;
+  --h2-size: calc(1.5 * var(--text-size));
+  --h1-size: calc(2.0 * var(--text-size));
+  --menu-items-size: 3.2vmin;
+  --accent-color: #002b6a;
+  --accent-color-dark: #001a3f;
+  --accent-color-light: #003f9f;
+  --disabled-color: rgb(100, 100, 100);
+}
+
 body {
   margin: 0;
   overflow: hidden;
@@ -66,18 +78,18 @@ body {
     top: 65vh;
     left: 2.5vw;
     transform: translateY(-50%);
-    transition: $transition-time ease-in-out;
+    transition: variables.$transition-time ease-in-out;
 
     z-index: 10;
 
     li {
       color: white;
-      font-family: $main-font;
+      font-family: variables.$main-font;
       font-size: var(--menu-items-size);
       line-height: 1.5em;
       cursor: pointer;
       padding: 5px 20px;
-      transition: $transition-time;
+      transition: variables.$transition-time;
 
       &:hover {
         background: var(--accent-color);
@@ -98,31 +110,31 @@ body {
     }
   }
 
-  @import "bodyEditor/nav";
+  @include meta.load-css("bodyEditor/nav");
 
-  @import "bodyEditor/panels";
+  @include meta.load-css("bodyEditor/panels");
 
-  @import "helmetOverlay/helmetOverlay";
+  @include meta.load-css("helmetOverlay/helmetOverlay");
 
-  @import "spaceStationUI/spaceStationUI";
+  @include meta.load-css("spaceStationUI/spaceStationUI");
 
-  @import "pauseMenu/index.scss";
+  @include meta.load-css("pauseMenu/index.scss");
 
-  @import "mainMenu.scss";
+  @include meta.load-css("mainMenu.scss");
 
-  @import "inputs.scss";
+  @include meta.load-css("inputs.scss");
 
-  @import "loadingScreen.scss";
+  @include meta.load-css("loadingScreen.scss");
 
-  @import "targetCursors.scss";
+  @include meta.load-css("targetCursors.scss");
 
-  @import "starMapUI.scss";
+  @include meta.load-css("starMapUI.scss");
 
-  @import "tutorialLayer.scss";
+  @include meta.load-css("tutorialLayer.scss");
 
-  @import "tutorialsMenuPanel.scss";
+  @include meta.load-css("tutorialsMenuPanel.scss");
 
-  @import "inspectorLayer.scss";
+  @include meta.load-css("inspectorLayer.scss");
 
   #renderer {
     z-index: 1;
@@ -141,5 +153,5 @@ body {
     background: rgba(0, 0, 0, .7);
   }
 
-  @import "bodyEditor/toolbar";
+  @include meta.load-css("bodyEditor/toolbar");
 }
diff --git a/src/styles/mainMenu.scss b/src/styles/mainMenu.scss
@@ -15,6 +15,8 @@
 //  You should have received a copy of the GNU Affero General Public License
 //  along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
+@use "variables";
+
 #mainMenu {
   position: absolute;
   width: 100vw;

diff --git a/src/styles/spaceStationUI/spaceStationUI.scss b/src/styles/spaceStationUI/spaceStationUI.scss
@@ -1,3 +1,5 @@
+@use "../variables";
+
 $gaps: 10px;
 
 #spaceStationUI {
@@ -8,7 +10,7 @@ $gaps: 10px;
     right: 0;
     z-index: 2;
 
-    font-family: Nasalization, sans-serif;
+    font-family: variables.$main-font;
 
     padding: $gaps;
 
@@ -130,11 +132,11 @@ $gaps: 10px;
                         outline: none;
                         border: none;
                         color: white;
-                        font-family: $main-font;
+                        font-family: variables.$main-font;
                         padding: 1.0vmin;
                         font-size: var(--text-size);
 
-                        transition: $transition-time;
+                        transition: variables.$transition-time;
 
                         &:hover {
                             background: var(--accent-color-light);

diff --git a/src/styles/starMapUI.scss b/src/styles/starMapUI.scss
@@ -1,3 +1,5 @@
+@use "variables";
+
 @keyframes loadingAnimation {
   0% {
     background-position: 100% 0;
@@ -23,7 +25,7 @@
     pointer-events: none;
     transform-origin: center;
     scale: 1;
-    transition: scale $transition-time $bezier-overshoot;
+    transition: scale variables.$transition-time variables.$bezier-overshoot;
   }
 
   .systemIcons {
@@ -71,7 +73,7 @@
     z-index: 5;
 
     color: white;
-    font-family: $main-font;
+    font-family: variables.$main-font;
     padding: 2vmin;
 
     h2, p {
@@ -97,11 +99,11 @@
       border: none;
       cursor: none;
       color: white;
-      font-family: $main-font;
+      font-family: variables.$main-font;
       padding: 1.0vmin;
       font-size: var(--text-size);
 
-      transition: $transition-time;
+      transition: variables.$transition-time;
 
       &:hover {
         background: var(--accent-color-light);

diff --git a/src/styles/targetCursors.scss b/src/styles/targetCursors.scss
@@ -1,3 +1,5 @@
+@use "variables";
+
 .targetCursorRoot {
   --dim: 50px;
   position: absolute;

diff --git a/src/styles/variables.scss b/src/styles/variables.scss
@@ -1,15 +1,4 @@
 $main-font: "Nasalization", sans-serif;
 $transition-time: 0.2s;
 $bezier-overshoot: cubic-bezier(0.34, -1.87, 0.74, 2.99);
-$backdrop-blur: blur(3px);
-
-:root {
-  --text-size: 2vmin;
-  --h2-size: calc(1.5 * var(--text-size));
-  --h1-size: calc(2.0 * var(--text-size));
-  --menu-items-size: 3.2vmin;
-  --accent-color: #002b6a;
-  --accent-color-dark: #001a3f;
-  --accent-color-light: #003f9f;
-  --disabled-color: rgb(100, 100, 100);
-}
+$backdrop-blur: blur(3px);