fix: fix sass v16 deprecation warnings (#561)

thegeeklab · Aug 5, 2024 · 0cf4ad1 · 0cf4ad1
1 parent 9bb6d7d
commit 0cf4ad1
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 29 deletions.
diff --git 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
@@ -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-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-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%)};
+  }
 }
 
 @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
@@ -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"
               }
             }
           }