From 0dbb6020d4da4792da85851d34fe535c1a402824 Mon Sep 17 00:00:00 2001 From: nbogie Date: Fri, 3 Apr 2026 06:34:59 +0100 Subject: [PATCH 1/2] 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 --- ...temp-sass-import-to-use-migration-notes.md | 38 ++++++++++++++ src/components/Dropdown/styles.module.scss | 14 +++--- src/components/Nav/styles.module.scss | 22 ++++---- src/components/Settings/styles.module.scss | 24 ++++----- src/layouts/HomepageLayout.astro | 4 +- styles/base.scss | 8 +-- styles/global.scss | 50 +++++++++---------- styles/markdown.scss | 4 +- 8 files changed, 101 insertions(+), 63 deletions(-) create mode 100644 docs/temp-sass-import-to-use-migration-notes.md diff --git a/docs/temp-sass-import-to-use-migration-notes.md b/docs/temp-sass-import-to-use-migration-notes.md new file mode 100644 index 0000000000..18db00d852 --- /dev/null +++ b/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. + diff --git a/src/components/Dropdown/styles.module.scss b/src/components/Dropdown/styles.module.scss index 2cd61bfc12..d5ab44b2fb 100644 --- a/src/components/Dropdown/styles.module.scss +++ b/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; } diff --git a/src/components/Nav/styles.module.scss b/src/components/Nav/styles.module.scss index 9171252f57..601222f5ac 100644 --- a/src/components/Nav/styles.module.scss +++ b/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; diff --git a/src/components/Settings/styles.module.scss b/src/components/Settings/styles.module.scss index ab566a0a95..3e3ab39f32 100644 --- a/src/components/Settings/styles.module.scss +++ b/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; } } diff --git a/src/layouts/HomepageLayout.astro b/src/layouts/HomepageLayout.astro index 0fe83af15b..a1eadcbb37 100644 --- a/src/layouts/HomepageLayout.astro +++ b/src/layouts/HomepageLayout.astro @@ -104,10 +104,10 @@ setJumpToState(null);