From 02e4c01bd0899e31735414c23b4363223499c9d0 Mon Sep 17 00:00:00 2001
From: Rick van Lieshout <info@rickvanlieshout.com>
Date: Wed, 16 Jul 2025 11:44:05 +0200
Subject: [PATCH] fix: updated sass to use @use instead of @import

---
 src/assets/scss/_base.scss                             | 2 +-
 src/assets/scss/_mixins.scss                           | 8 ++++----
 src/assets/scss/base/_generic.scss                     | 4 ++--
 src/assets/scss/main.scss                              | 6 +++---
 src/assets/scss/mixins/_breakpoints.scss               | 2 +-
 src/assets/scss/mixins/_line-height.scss               | 2 +-
 src/assets/scss/mixins/_margin.scss                    | 2 +-
 src/assets/scss/mixins/_padding.scss                   | 2 +-
 src/components/Cookiebar/CookieBar.module.scss         | 2 +-
 src/components/Feed/Feed.module.scss                   | 4 ++--
 src/components/Layout/Layout.module.scss               | 4 ++--
 src/components/Page/Page.module.scss                   | 4 ++--
 src/components/Pagination/Pagination.module.scss       | 4 ++--
 src/components/Post/Author/Author.module.scss          | 4 ++--
 src/components/Post/Content/Content.module.scss        | 4 ++--
 src/components/Post/Meta/Meta.module.scss              | 4 ++--
 src/components/Post/Post.module.scss                   | 4 ++--
 src/components/Post/Tags/Tags.module.scss              | 4 ++--
 src/components/PostHeader/PostHeader.module.scss       | 4 ++--
 src/components/Sidebar/Author/Author.module.scss       | 4 ++--
 src/components/Sidebar/Contacts/Contacts.module.scss   | 4 ++--
 src/components/Sidebar/Copyright/Copyright.module.scss | 4 ++--
 src/components/Sidebar/Menu/Menu.module.scss           | 4 ++--
 src/components/Sidebar/Sidebar.module.scss             | 4 ++--
 24 files changed, 45 insertions(+), 45 deletions(-)

diff --git a/src/assets/scss/_base.scss b/src/assets/scss/_base.scss
index b7c462d..df1394d 100644
--- a/src/assets/scss/_base.scss
+++ b/src/assets/scss/_base.scss
@@ -1,6 +1,6 @@
 @charset "UTF-8";
 
-@import "base/generic";
+@use "base/generic";
 
 .showInPrintView {
   display: none;
diff --git a/src/assets/scss/_mixins.scss b/src/assets/scss/_mixins.scss
index 74f9a6d..f53492d 100644
--- a/src/assets/scss/_mixins.scss
+++ b/src/assets/scss/_mixins.scss
@@ -1,6 +1,6 @@
 @charset "UTF-8";
 
-@import "mixins/breakpoints";
-@import "mixins/line-height";
-@import "mixins/padding";
-@import "mixins/margin";
+@forward "mixins/breakpoints";
+@forward "mixins/line-height";
+@forward "mixins/padding";
+@forward "mixins/margin";
diff --git a/src/assets/scss/base/_generic.scss b/src/assets/scss/base/_generic.scss
index 4986b23..af0f921 100644
--- a/src/assets/scss/base/_generic.scss
+++ b/src/assets/scss/base/_generic.scss
@@ -1,5 +1,5 @@
-@import "../variables";
-@import "../mixins";
+@use "../variables" as *;
+@use "../mixins" as *;
 
 html {
   font-size: $typographic-root-font-size;
diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss
index 5eea9b7..29a2d55 100644
--- a/src/assets/scss/main.scss
+++ b/src/assets/scss/main.scss
@@ -1,5 +1,5 @@
 @charset "UTF-8";
 
-@import "variables";
-@import "mixins";
-@import "base";
+@use "variables";
+@use "mixins";
+@use "base";
diff --git a/src/assets/scss/mixins/_breakpoints.scss b/src/assets/scss/mixins/_breakpoints.scss
index 1434974..5559f0a 100644
--- a/src/assets/scss/mixins/_breakpoints.scss
+++ b/src/assets/scss/mixins/_breakpoints.scss
@@ -1,4 +1,4 @@
-@import "../variables";
+@use "../variables" as *;
 
 @mixin breakpoint-xs {
   @content;
diff --git a/src/assets/scss/mixins/_line-height.scss b/src/assets/scss/mixins/_line-height.scss
index e9d78d6..1ad4195 100644
--- a/src/assets/scss/mixins/_line-height.scss
+++ b/src/assets/scss/mixins/_line-height.scss
@@ -1,4 +1,4 @@
-@import "../variables";
+@use "../variables" as *;
 
 @mixin line-height($number) {
   line-height: #{$number * $typographic-leading + "px"};
diff --git a/src/assets/scss/mixins/_margin.scss b/src/assets/scss/mixins/_margin.scss
index 21de22b..b7d760e 100644
--- a/src/assets/scss/mixins/_margin.scss
+++ b/src/assets/scss/mixins/_margin.scss
@@ -1,4 +1,4 @@
-@import "../variables";
+@use "../variables" as *;
 
 @mixin margin-auto($number: 0) {
   margin: #{$number * $typographic-leading + "px"} auto;
diff --git a/src/assets/scss/mixins/_padding.scss b/src/assets/scss/mixins/_padding.scss
index 39a9297..9d2bc77 100644
--- a/src/assets/scss/mixins/_padding.scss
+++ b/src/assets/scss/mixins/_padding.scss
@@ -1,4 +1,4 @@
-@import "../variables";
+@use "../variables" as *;
 
 @mixin padding-left($number) {
   padding-left: #{$number * $typographic-leading + "px"};
diff --git a/src/components/Cookiebar/CookieBar.module.scss b/src/components/Cookiebar/CookieBar.module.scss
index 4332582..49adfb7 100644
--- a/src/components/Cookiebar/CookieBar.module.scss
+++ b/src/components/Cookiebar/CookieBar.module.scss
@@ -1,4 +1,4 @@
-@import "../../assets/scss/variables";
+@use "../../assets/scss/variables" as *;
 
 $shadow: 0px -1px 5px rgba(50, 50, 50, 0.75);
 
diff --git a/src/components/Feed/Feed.module.scss b/src/components/Feed/Feed.module.scss
index 5499ae0..4fd1d15 100644
--- a/src/components/Feed/Feed.module.scss
+++ b/src/components/Feed/Feed.module.scss
@@ -1,5 +1,5 @@
-@import "../../assets/scss/variables";
-@import "../../assets/scss/mixins";
+@use "../../assets/scss/variables" as *;
+@use "../../assets/scss/mixins" as *;
 
 .feed {
   .item {
diff --git a/src/components/Layout/Layout.module.scss b/src/components/Layout/Layout.module.scss
index caa11e9..339a64d 100644
--- a/src/components/Layout/Layout.module.scss
+++ b/src/components/Layout/Layout.module.scss
@@ -1,5 +1,5 @@
-@import "../../assets/scss/variables";
-@import "../../assets/scss/mixins";
+@use "../../assets/scss/variables" as *;
+@use "../../assets/scss/mixins" as *;
 
 .layout {
   lost-center: $layout-width;
diff --git a/src/components/Page/Page.module.scss b/src/components/Page/Page.module.scss
index 4fbc657..54f583f 100644
--- a/src/components/Page/Page.module.scss
+++ b/src/components/Page/Page.module.scss
@@ -1,5 +1,5 @@
-@import "../../assets/scss/variables";
-@import "../../assets/scss/mixins";
+@use "../../assets/scss/variables" as *;
+@use "../../assets/scss/mixins" as *;
 
 .page {
   @include margin-bottom(2);
diff --git a/src/components/Pagination/Pagination.module.scss b/src/components/Pagination/Pagination.module.scss
index b925f41..39a07da 100644
--- a/src/components/Pagination/Pagination.module.scss
+++ b/src/components/Pagination/Pagination.module.scss
@@ -1,7 +1,7 @@
 @use "sass:color";
 
-@import "../../assets/scss/variables";
-@import "../../assets/scss/mixins";
+@use "../../assets/scss/variables" as *;
+@use "../../assets/scss/mixins" as *;
 
 .pagination {
   display: flex;
diff --git a/src/components/Post/Author/Author.module.scss b/src/components/Post/Author/Author.module.scss
index ef4786f..27b9a1b 100644
--- a/src/components/Post/Author/Author.module.scss
+++ b/src/components/Post/Author/Author.module.scss
@@ -1,5 +1,5 @@
-@import "../../../assets/scss/variables";
-@import "../../../assets/scss/mixins";
+@use "../../../assets/scss/variables" as *;
+@use "../../../assets/scss/mixins" as *;
 
 .author {
   border-top: 1px solid $color-gray-border;
diff --git a/src/components/Post/Content/Content.module.scss b/src/components/Post/Content/Content.module.scss
index 6833761..744e13a 100644
--- a/src/components/Post/Content/Content.module.scss
+++ b/src/components/Post/Content/Content.module.scss
@@ -1,5 +1,5 @@
-@import "../../../assets/scss/variables";
-@import "../../../assets/scss/mixins";
+@use "../../../assets/scss/variables" as *;
+@use "../../../assets/scss/mixins" as *;
 
 .content {
   @include margin-auto();
diff --git a/src/components/Post/Meta/Meta.module.scss b/src/components/Post/Meta/Meta.module.scss
index 3111990..be3f4d8 100644
--- a/src/components/Post/Meta/Meta.module.scss
+++ b/src/components/Post/Meta/Meta.module.scss
@@ -1,5 +1,5 @@
-@import "../../../assets/scss/variables";
-@import "../../../assets/scss/mixins";
+@use "../../../assets/scss/variables" as *;
+@use "../../../assets/scss/mixins" as *;
 
 .meta {
   .date {
diff --git a/src/components/Post/Post.module.scss b/src/components/Post/Post.module.scss
index 6d1c5bd..cfa7d80 100644
--- a/src/components/Post/Post.module.scss
+++ b/src/components/Post/Post.module.scss
@@ -1,5 +1,5 @@
-@import "../../assets/scss/variables";
-@import "../../assets/scss/mixins";
+@use "../../assets/scss/variables" as *;
+@use "../../assets/scss/mixins" as *;
 
 .post {
 
diff --git a/src/components/Post/Tags/Tags.module.scss b/src/components/Post/Tags/Tags.module.scss
index baa3d84..c3ce69e 100644
--- a/src/components/Post/Tags/Tags.module.scss
+++ b/src/components/Post/Tags/Tags.module.scss
@@ -1,5 +1,5 @@
-@import "../../../assets/scss/variables";
-@import "../../../assets/scss/mixins";
+@use "../../../assets/scss/variables" as *;
+@use "../../../assets/scss/mixins" as *;
 
 .tags {
   @include margin-bottom(0.5);
diff --git a/src/components/PostHeader/PostHeader.module.scss b/src/components/PostHeader/PostHeader.module.scss
index cecc121..73143b7 100644
--- a/src/components/PostHeader/PostHeader.module.scss
+++ b/src/components/PostHeader/PostHeader.module.scss
@@ -1,5 +1,5 @@
-@import "../../assets/scss/variables";
-@import "../../assets/scss/mixins";
+@use "../../assets/scss/variables" as *;
+@use "../../assets/scss/mixins" as *;
 
 .header {
   align-items: baseline;
diff --git a/src/components/Sidebar/Author/Author.module.scss b/src/components/Sidebar/Author/Author.module.scss
index b0bfec4..3799305 100644
--- a/src/components/Sidebar/Author/Author.module.scss
+++ b/src/components/Sidebar/Author/Author.module.scss
@@ -1,5 +1,5 @@
-@import "../../../assets/scss/variables";
-@import "../../../assets/scss/mixins";
+@use "../../../assets/scss/variables" as *;
+@use "../../../assets/scss/mixins" as *;
 
 .author {
   .photo {
diff --git a/src/components/Sidebar/Contacts/Contacts.module.scss b/src/components/Sidebar/Contacts/Contacts.module.scss
index cb2b5ae..dc7e525 100644
--- a/src/components/Sidebar/Contacts/Contacts.module.scss
+++ b/src/components/Sidebar/Contacts/Contacts.module.scss
@@ -1,5 +1,5 @@
-@import "../../../assets/scss/variables";
-@import "../../../assets/scss/mixins";
+@use "../../../assets/scss/variables" as *;
+@use "../../../assets/scss/mixins" as *;
 
 .contacts {
   @include margin-bottom(1);
diff --git a/src/components/Sidebar/Copyright/Copyright.module.scss b/src/components/Sidebar/Copyright/Copyright.module.scss
index a14f902..620d551 100644
--- a/src/components/Sidebar/Copyright/Copyright.module.scss
+++ b/src/components/Sidebar/Copyright/Copyright.module.scss
@@ -1,7 +1,7 @@
 @use "sass:color";
 
-@import "../../../assets/scss/variables";
-@import "../../../assets/scss/mixins";
+@use "../../../assets/scss/variables" as *;
+@use "../../../assets/scss/mixins" as *;
 
 .copyright {
   color: $color-gray;
diff --git a/src/components/Sidebar/Menu/Menu.module.scss b/src/components/Sidebar/Menu/Menu.module.scss
index c00f42a..5c145cf 100644
--- a/src/components/Sidebar/Menu/Menu.module.scss
+++ b/src/components/Sidebar/Menu/Menu.module.scss
@@ -1,5 +1,5 @@
-@import "../../../assets/scss/variables";
-@import "../../../assets/scss/mixins";
+@use "../../../assets/scss/variables" as *;
+@use "../../../assets/scss/mixins" as *;
 
 .menu {
   .list {
diff --git a/src/components/Sidebar/Sidebar.module.scss b/src/components/Sidebar/Sidebar.module.scss
index 1ccd8c6..29c85d2 100644
--- a/src/components/Sidebar/Sidebar.module.scss
+++ b/src/components/Sidebar/Sidebar.module.scss
@@ -1,5 +1,5 @@
-@import "../../assets/scss/variables";
-@import "../../assets/scss/mixins";
+@use "../../assets/scss/variables" as *;
+@use "../../assets/scss/mixins" as *;
 
 .sidebar {
   width: 100%;