From 0cf4ad1ca7cfd3f416ddad77459ca3996901886d Mon Sep 17 00:00:00 2001
From: Robert Kaussow <mail@thegeeklab.de>
Date: Mon, 5 Aug 2024 21:44:25 +0200
Subject: [PATCH] fix: fix sass v16 deprecation warnings (#561)

---
 src/sass/_asciidoc.scss   | 16 +++++++++-------
 src/sass/_color_mode.scss | 36 ++++++++++++++++++++----------------
 webpack.config.js         |  7 ++-----
 3 files changed, 31 insertions(+), 28 deletions(-)

diff --git a/src/sass/_asciidoc.scss b/src/sass/_asciidoc.scss
index 96cbc5d..e4e73a0 100644
--- a/src/sass/_asciidoc.scss
+++ b/src/sass/_asciidoc.scss
@@ -7,11 +7,13 @@
     }
   }
 
-  margin: $padding-16 0;
-  padding: 0;
+  & {
+    margin: $padding-16 0;
+    padding: 0;
 
-  border-left: $border-4 solid var(--accent-color);
-  border-radius: $border-radius;
+    border-left: $border-4 solid var(--accent-color);
+    border-radius: $border-radius;
+  }
 
   table {
     margin: 0 !important;
@@ -22,6 +24,9 @@
     }
 
     td {
+      display: block;
+      padding: $padding-4 $padding-16 !important;
+
       &:first-child {
         background-color: scale-color($gray-600, $alpha: -95%);
         font-weight: bold;
@@ -53,9 +58,6 @@
           }
         }
       }
-
-      display: block;
-      padding: $padding-4 $padding-16 !important;
     }
   }
 }
diff --git a/src/sass/_color_mode.scss b/src/sass/_color_mode.scss
index 4b32636..7d78411 100644
--- a/src/sass/_color_mode.scss
+++ b/src/sass/_color_mode.scss
@@ -114,27 +114,31 @@
 @mixin code_theme_dark {
   @include chroma_dark;
 
-  --code-background: #{$code-background-dark};
-  --code-accent-color: #{darken($code-background-dark, 4)};
-  --code-accent-color-lite: #{darken($code-background-dark, 2)};
-  --code-font-color: #{$code-font-color-dark};
+  & {
+    --code-background: #{$code-background-dark};
+    --code-accent-color: #{darken($code-background-dark, 4)};
+    --code-accent-color-lite: #{darken($code-background-dark, 2)};
+    --code-font-color: #{$code-font-color-dark};
 
-  --code-copy-background: #{$code-background-dark};
-  --code-copy-font-color: #{darken($code-font-color-dark, 15)};
-  --code-copy-border-color: #{darken($code-font-color-dark, 20)};
-  --code-copy-success-color: #{scale-color(map.get($hint-colors, "ok"), $alpha: -55%)};
+    --code-copy-background: #{$code-background-dark};
+    --code-copy-font-color: #{darken($code-font-color-dark, 15)};
+    --code-copy-border-color: #{darken($code-font-color-dark, 20)};
+    --code-copy-success-color: #{scale-color(map.get($hint-colors, "ok"), $alpha: -55%)};
+  }
 }
 
 @mixin code_theme_light {
   @include chroma_github;
 
-  --code-background: #{$code-background};
-  --code-accent-color: #{darken($code-background, 6)};
-  --code-accent-color-lite: #{darken($code-background, 2)};
-  --code-font-color: #{$code-font-color};
+  & {
+    --code-background: #{$code-background};
+    --code-accent-color: #{darken($code-background, 6)};
+    --code-accent-color-lite: #{darken($code-background, 2)};
+    --code-font-color: #{$code-font-color};
 
-  --code-copy-background: #{$code-background};
-  --code-copy-font-color: #{lighten($code-font-color, 15)};
-  --code-copy-border-color: #{lighten($code-font-color, 20)};
-  --code-copy-success-color: #{map.get($hint-colors, "ok")};
+    --code-copy-background: #{$code-background};
+    --code-copy-font-color: #{lighten($code-font-color, 15)};
+    --code-copy-border-color: #{lighten($code-font-color, 20)};
+    --code-copy-success-color: #{map.get($hint-colors, "ok")};
+  }
 }
diff --git a/webpack.config.js b/webpack.config.js
index 37a87f4..270b402 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -141,12 +141,9 @@ module.exports = (env, argv) => {
           {
             loader: "sass-loader",
             options: {
+              sourceMap: argv.mode === "development" ? true : false,
               sassOptions: {
-                // FIXME: https://github.com/webpack-contrib/sass-loader/issues/962#issuecomment-1002675051
-                sourceMap: argv.mode === "development" ? true : false,
-                sourceMapEmbed: argv.mode === "development" ? true : false,
-                outputStyle: argv.mode === "development" ? "expanded" : "compressed",
-                includePaths: [nodeModulesPath]
+                outputStyle: argv.mode === "development" ? "expanded" : "compressed"
               }
             }
           }