sass: replace deprecated @import with @use, plus...

Also, assume project root dir is in load path, remove leading /

However, see differences from @import
https://sass-lang.com/documentation/at-rules/use/#differences-from-import

Author: nbogie

docs/temp-sass-import-to-use-migration-notes.md

@@ -0,0 +1,38 @@
+## TODO:
+Use `--fatal-deprecation=import` to prevent any regressive use of @import - this will treat any sass @import rules as errors.
+
+Whilst the changed sass seems to be working fine, it's _possible_ that in our astro config, within `vite: {}`, we will want to tell sass to look in the project root when we use @use without an absolute path.  e.g. `@use "styles/variables.scss"`
+```json
+    css: {
+      preprocessorOptions: {
+        scss: {
+          // This tells Sass to look in the project root for any @use paths
+          loadPaths: [path.resolve('./')],
+        },
+      },
+    },
+```
+This will also need `import path from 'path';`
+
+
+## notes
+change: moved from use of @import to @use
+reason: lots of noisy deprecation warnings about our use of @import, when running the astro site.
+change 2: changed paths from `/styles/variables.scss` to `styles/variables.scss`
+
+
+process:
+
+read: https://sass-lang.com/blog/import-is-deprecated/
+read: https://sass-lang.com/documentation/at-rules/use/#differences-from-import
+
+used
+```
+npx sass-migrator module --migrate-deps --load-path=. "styles/*.scss"
+```
+* The migrator failed because it couldn't parse .astro files
+* Manually updated the @import to @use in Astro components (only one, at the time, HomepageLayout)
+* ran the migrator
+* checked that multiple uses of @use aren't causing the same large chunk of html to be copied to output css files.
+* it may still be worth a split of variables.scss to separate the sass variables - which may be imported with @use in many places,from the rest of the css variables defined in there, which can be loaded in just once to some sort of base css file.
+

src/components/Dropdown/styles.module.scss

@@ -1,4 +1,4 @@
-@import "/styles/variables.scss";
+@use "styles/variables.scss";
 
 .container {
   position: relative;
@@ -62,11 +62,11 @@
 .icon {
   left: 10px;
   top: 8px;
-  @media (min-width: $breakpoint-tablet) {
+  @media (min-width: variables.$breakpoint-tablet) {
     left: 11px;
     top: 8px;
   }
-  @media (min-width: $breakpoint-desktop) {
+  @media (min-width: variables.$breakpoint-desktop) {
     left: 11px;
     top: 10px;
   }
@@ -76,7 +76,7 @@
   left: 10px;
   top: 8px;
 
-  @media (min-width: $breakpoint-laptop) {
+  @media (min-width: variables.$breakpoint-laptop) {
     left: 11px;
     top: 10px;
   }
@@ -85,11 +85,11 @@
 .chevron {
   right: 10px;
   top: 12px;
-  @media (min-width: $breakpoint-tablet) {
+  @media (min-width: variables.$breakpoint-tablet) {
     right: 12px;
     top: 14px;
   }
-  @media (min-width: $breakpoint-desktop) {
+  @media (min-width: variables.$breakpoint-desktop) {
     right: 12px;
     top: 16px;
   }
@@ -125,7 +125,7 @@ button.chevron {
   // 0.75rem font-size for mobile to fit content in smaller screens
   font-size: 0.75rem;
 
-  @media (min-width: $breakpoint-tablet) {
+  @media (min-width: variables.$breakpoint-tablet) {
     font-size: 1rem;
     padding-right: 10px;
   }

src/components/Nav/styles.module.scss

@@ -1,10 +1,10 @@
-@import "/styles/variables.scss";
-@import "/styles/global.scss";
+@use "styles/variables.scss";
+@use "styles/global.scss";
 
 .container {
   height: fit-content;
 
-  @media (min-width: $breakpoint-tablet) {
+  @media (min-width: variables.$breakpoint-tablet) {
     position: fixed;
     border-right-width: 1px;
     border-color: var(--sidebar-type-color);
@@ -49,7 +49,7 @@
     margin-bottom: var(--spacing-xs);
   }
 
-  @media (min-width: $breakpoint-tablet) {
+  @media (min-width: variables.$breakpoint-tablet) {
     display: grid;
     grid-auto-flow: column;
     grid-template-columns: 1fr;
@@ -104,14 +104,14 @@
       height: 1rem;
       width: 1.25rem;
     }
-    @media (min-width: $breakpoint-tablet) {
+    @media (min-width: variables.$breakpoint-tablet) {
       display: none !important;
     }
   }
 
   .desktopMenuLabel {
     display: none;
-    @media (min-width: $breakpoint-tablet) {
+    @media (min-width: variables.$breakpoint-tablet) {
       display: block;
       margin-top: 7.5px;
     }
@@ -122,7 +122,7 @@
       display: flex;
     }
     .desktopMenuLabel {
-      @media (min-width: $breakpoint-tablet) {
+      @media (min-width: variables.$breakpoint-tablet) {
         display: none;
       }
     }
@@ -175,7 +175,7 @@
     padding: var(--spacing-xs) 1.25rem;
   }
 
-  @media (min-width: $breakpoint-tablet) {
+  @media (min-width: variables.$breakpoint-tablet) {
     height: fit-content;
     border-top-width: 1px;
     margin-top: auto;
@@ -217,7 +217,7 @@
   line-height: 1.167;
   -webkit-text-stroke-width: 0.15px;
 
-  @media (min-width: $breakpoint-tablet) {
+  @media (min-width: variables.$breakpoint-tablet) {
     font-size: 1.25rem;
     line-height: 1.2;
     -webkit-text-stroke-width: 0.15px;
@@ -244,7 +244,7 @@
     -webkit-text-stroke-width: 0.05px;
   }
 
-  @media (min-width: $breakpoint-tablet) {
+  @media (min-width: variables.$breakpoint-tablet) {
     &:global(.small) {
       // text-body-caption
       font-size: 0.875rem;
@@ -270,7 +270,7 @@
   flex-grow: 1;
   height: unset;
 
-  @media (min-width: $breakpoint-tablet) {
+  @media (min-width: variables.$breakpoint-tablet) {
     height: 100%;
     overflow-y: scroll;
 

src/components/Settings/styles.module.scss

@@ -1,8 +1,8 @@
-@import "/styles/variables.scss";
+@use "styles/variables.scss";
 
 .container {
   position: relative;
-  @media (min-width: $breakpoint-tablet) {
+  @media (min-width: variables.$breakpoint-tablet) {
     margin-top: 0;
   }
 }
@@ -19,18 +19,18 @@
   row-gap: 20px;
   column-gap: 40px;
 
-  @media (min-width: $breakpoint-tablet) {
+  @media (min-width: variables.$breakpoint-tablet) {
     width: calc(100% - var(--nav-offset-x));
     padding: 1.25rem var(--spacing-lg) var(--spacing-sm);
   }
 
-  @media (min-width: $breakpoint-laptop) {
+  @media (min-width: variables.$breakpoint-laptop) {
     grid-template-columns: repeat(9, minmax(0, 1fr));
     gap: 40px;
     grid-template-rows: var(--settings-container-height-laptop);
   }
 
-  @media (min-width: $breakpoint-desktop) {
+  @media (min-width: variables.$breakpoint-desktop) {
     grid-template-columns: repeat(12, minmax(0, 1fr));
   }
 }
@@ -44,10 +44,10 @@
 .localeselect,
 .a11yselect {
   grid-column: span 3;
-  @media (min-width: $breakpoint-tablet) {
+  @media (min-width: variables.$breakpoint-tablet) {
     grid-column: span 3;
   }
-  @media (min-width: $breakpoint-laptop) {
+  @media (min-width: variables.$breakpoint-laptop) {
     grid-column: span 3;
   }
 }
@@ -56,16 +56,16 @@
   grid-column: span 6;
   grid-row: 1;
 
-  @media (min-width: $breakpoint-tablet) {
+  @media (min-width: variables.$breakpoint-tablet) {
     grid-column: span 6;
   }
 
-  @media (min-width: $breakpoint-laptop) {
+  @media (min-width: variables.$breakpoint-laptop) {
     grid-row: unset;
     grid-column: span 3;
   }
 
-  @media (min-width: $breakpoint-desktop) {
+  @media (min-width: variables.$breakpoint-desktop) {
     grid-column: span 6;
   }
 }
@@ -96,14 +96,14 @@
 
 .container:global(.noJumpTo) .wrapper:global(.open) {
   top: 40px;
-  @media (min-width: $breakpoint-tablet) {
+  @media (min-width: variables.$breakpoint-tablet) {
     top: 0px;
   }
 }
 
 .wrapper:global(.open) {
   top: 80px;
-  @media (min-width: $breakpoint-tablet) {
+  @media (min-width: variables.$breakpoint-tablet) {
     top: 0px;
   }
 }

src/layouts/HomepageLayout.astro

@@ -104,10 +104,10 @@ setJumpToState(null);
 </BaseLayout>
 
 <style lang="scss">
-  @import "../../styles/variables.scss";
+  @use "styles/variables.scss";
   h2 {
     @apply mb-sm mt-0;
-    @media (min-width: $breakpoint-tablet) {
+    @media (min-width: variables.$breakpoint-tablet) {
       font-size: 3.5rem;
     }
   }

styles/base.scss

@@ -1,4 +1,4 @@
-@import "./variables.scss";
-@import "./global.scss";
-@import "./code-editor.scss";
-@import "./markdown.scss";
+@use "variables.scss";
+@use "global.scss";
+@use "code-editor.scss";
+@use "markdown.scss";