Sass: upgrade deprecations & use modern-compiler API

package.json

@@ -79,7 +79,7 @@
     "json-server": "0.17.4",
     "nodemon": "3.1.7",
     "nyc": "17.1.0",
-    "sass": "1.80.6",
+    "sass-embedded": "1.80.6",
     "sinon": "19.0.2",
     "standard": "17.1.2",
     "vite": "5.4.10",

src/components/cylc/workspace/Lumino.vue

@@ -48,6 +48,8 @@ import { when } from '@/utils'
 import { useDefaultView } from '@/views/views'
 import { eventBus } from '@/services/eventBus'
 
+import '@lumino/default-theme/style'
+
 /*
  * A component to wrap the Lumino application.
  *

src/styles/_util.scss

@@ -15,14 +15,16 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+@use "sass:map";
+
 @mixin theme-dependent($prop, $color, $intensity, $important: null) {
   // Set the specified color property in a way that just works regardless of
   // whether the theme is light or dark.
   // If light theme, lighten the specified color by the specified intensity;
   // if dark, darken.
   @each $theme in 'light', 'dark' {
     .v-theme--#{$theme} & {
-      #{$prop}: map-get($color, '#{$theme}en-#{$intensity}') $important;
+      #{$prop}: map.get($color, '#{$theme}en-#{$intensity}') $important;
     }
   }
 }

src/styles/cylc/_drawer.scss

@@ -15,8 +15,9 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-@use '../settings.scss';
-@import '../util.scss';
+@use "sass:map";
+@use '../settings';
+@use '../util';
 
 body.resizing-drawer {
   cursor: ew-resize !important;
@@ -27,7 +28,7 @@ body.resizing-drawer {
 }
 
 #c-sidebar {
-  @include theme-dependent(background-color, settings.$grey, 4);
+  @include util.theme-dependent(background-color, settings.$grey, 4);
 
   .resize-bar {
     display: block;
@@ -40,7 +41,7 @@ body.resizing-drawer {
     transition: background-color 0.2s;
 
     &:hover, body.resizing-drawer & {
-      background: map-get(settings.$blue, "base");
+      background: map.get(settings.$blue, "base");
       transition-delay: 0.5s;
     }
   }

src/styles/cylc/_gscan.scss

@@ -15,11 +15,12 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-@use '../settings.scss';
+@use "sass:map";
+@use '../settings';
 
 @mixin hover {
   &:hover {
-    background-color: map-get(settings.$grey, 'lighten-2');
+    background-color: map.get(settings.$grey, 'lighten-2');
   }
 }
 

src/styles/cylc/_header.scss

@@ -15,22 +15,23 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-@use '../settings.scss';
-@import '../util.scss';
+@use "sass:map";
+@use '../settings';
+@use '../util';
 
 .c-header {
   display: block;
 
-  @include theme-dependent(background-color, settings.$grey, 3);
+  @include util.theme-dependent(background-color, settings.$grey, 3);
 
   .c-environment-info {
     font-size: 1rem;
-    font-weight: map-get(settings.$font-weights, 'regular');
+    font-weight: map.get(settings.$font-weights, 'regular');
 
     .v-chip {
       font-size: 1rem;
-      @include theme-dependent(background-color, settings.$grey, 5, !important);
-      @include theme-dependent(border-color, settings.$grey, 1, !important);
+      @include util.theme-dependent(background-color, settings.$grey, 5, !important);
+      @include util.theme-dependent(border-color, settings.$grey, 1, !important);
     }
   }
 }

src/styles/cylc/_toolbar.scss

@@ -15,9 +15,8 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-@use '../settings.scss';
-@import 'variables';
-
+@use '../settings';
+@use 'variables';
 
 .c-toolbar {
   $icon-size: 24px;
@@ -31,7 +30,7 @@
   }
 
   .status-msg {
-    color: $font-dimished-color;
+    color: variables.$font-dimished-color;
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;

src/styles/cylc/_tree.scss

@@ -15,7 +15,8 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-@use '../settings.scss';
+ @use "sass:map";
+ @use '../settings';
 
 $active-color: #BDD5F7;
 /**
@@ -47,7 +48,7 @@ $icon-width: 1.5rem;
 
 @mixin states() {
   &:hover {
-    background-color: map-get(settings.$grey, 'lighten-3');
+    background-color: map.get(settings.$grey, 'lighten-3');
   }
 }
 
@@ -105,7 +106,7 @@ $icon-width: 1.5rem;
   }
 
   $arrow-size: calc($icon-width / 2);
-  $leaf-background-color: map-get(settings.$grey, 'lighten-3');
+  $leaf-background-color: map.get(settings.$grey, 'lighten-3');
 
   .leaf {
     padding: 0;

src/styles/cylc/_workflow.scss

@@ -15,8 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-@use '../settings.scss';
-@import '@lumino/default-theme/style/index.css';
+@use '../settings';
 
 .workflow-panel {
   .main {

src/styles/index.scss

@@ -18,23 +18,21 @@
 @use "settings";
 @use "vuetify";
 
-@import "cylc/variables";
-
-@import "cylc/markdown";
-@import "cylc/dashboard";
-@import "cylc/drawer";
-@import "cylc/gscan";
-@import "cylc/header";
-@import "cylc/job";
-@import "cylc/toolbar";
-@import "cylc/tree";
-@import "cylc/table";
-@import "cylc/user_profile";
-@import "cylc/warning";
-@import "cylc/workflow";
-@import "cylc/tooltip";
-@import "cylc/mutation_form";
-@import "cylc/menu";
+@use "cylc/markdown";
+@use "cylc/dashboard";
+@use "cylc/drawer";
+@use "cylc/gscan";
+@use "cylc/header";
+@use "cylc/job";
+@use "cylc/toolbar";
+@use "cylc/tree";
+@use "cylc/table";
+@use "cylc/user_profile";
+@use "cylc/warning";
+@use "cylc/workflow";
+@use "cylc/tooltip";
+@use "cylc/mutation_form";
+@use "cylc/menu";
 
 html {
   // Only show scrollbar when needed:

vite.config.js

@@ -102,6 +102,13 @@ export default defineConfig(({ mode }) => {
       // good enough:
       target: 'modules',
     },
+    css: {
+      preprocessorOptions: {
+        scss: {
+          api: 'modern-compiler',
+        },
+      },
+    },
     define: {
       // Allow vue devtools to work when runing vite build:
       __VUE_PROD_DEVTOOLS__: mode !== 'production'