fix: fix sass v16 deprecation warnings (#858)

xoxys · web-flow · commit bb0daae793d0 · 2024-08-05T21:44:18.000+02:00
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
@@ -110,27 +110,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/src/sass/_markdown.scss b/src/sass/_markdown.scss
@@ -186,6 +186,7 @@
   }
 
   &__align {
+    text-align: left;
     &--left {
       h1,
       h2,
@@ -195,10 +196,10 @@
       h6 {
         justify-content: flex-start;
       }
-      text-align: left;
     }
 
     &--center {
+      text-align: center;
       h1,
       h2,
       h3,
@@ -207,10 +208,10 @@
       h6 {
         justify-content: center;
       }
-      text-align: center;
     }
 
     &--right {
+      text-align: right;
       h1,
       h2,
       h3,
@@ -219,7 +220,6 @@
       h6 {
         justify-content: flex-end;
       }
-      text-align: right;
     }
   }
 }
diff --git a/webpack.config.js b/webpack.config.js
@@ -142,12 +142,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"
               }
             }
           }

Original file line number	Diff line number	Diff line change
`@@ -7,11 +7,13 @@`
`7`	`7`	`}`
`8`	`8`	`}`
`9`	`9`
`10`		`- margin: $padding-16 0;`
`11`		`- padding: 0;`
	`10`	`+ & {`
	`11`	`+ margin: $padding-16 0;`
	`12`	`+ padding: 0;`
`12`	`13`
`13`		`- border-left: $border-4 solid var(--accent-color);`
`14`		`- border-radius: $border-radius;`
	`14`	`+ border-left: $border-4 solid var(--accent-color);`
	`15`	`+ border-radius: $border-radius;`
	`16`	`+ }`
`15`	`17`
`16`	`18`	`table {`
`17`	`19`	`margin: 0 !important;`
`@@ -22,6 +24,9 @@`
`22`	`24`	`}`
`23`	`25`
`24`	`26`	`td {`
	`27`	`+ display: block;`
	`28`	`+ padding: $padding-4 $padding-16 !important;`
	`29`	`+`
`25`	`30`	`&:first-child {`
`26`	`31`	`background-color: scale-color($gray-600, $alpha: -95%);`
`27`	`32`	`font-weight: bold;`
`@@ -53,9 +58,6 @@`
`53`	`58`	`}`
`54`	`59`	`}`
`55`	`60`	`}`
`56`		`-`
`57`		`- display: block;`
`58`		`- padding: $padding-4 $padding-16 !important;`
`59`	`61`	`}`
`60`	`62`	`}`
`61`	`63`	`}`
Original file line number	Diff line number	Diff line change
`@@ -186,6 +186,7 @@`
`186`	`186`	`}`
`187`	`187`
`188`	`188`	`&__align {`
	`189`	`+ text-align: left;`
`189`	`190`	`&--left {`
`190`	`191`	`h1,`
`191`	`192`	`h2,`
`@@ -195,10 +196,10 @@`
`195`	`196`	`h6 {`
`196`	`197`	`justify-content: flex-start;`
`197`	`198`	`}`
`198`		`- text-align: left;`
`199`	`199`	`}`
`200`	`200`
`201`	`201`	`&--center {`
	`202`	`+ text-align: center;`
`202`	`203`	`h1,`
`203`	`204`	`h2,`
`204`	`205`	`h3,`
`@@ -207,10 +208,10 @@`
`207`	`208`	`h6 {`
`208`	`209`	`justify-content: center;`
`209`	`210`	`}`
`210`		`- text-align: center;`
`211`	`211`	`}`
`212`	`212`
`213`	`213`	`&--right {`
	`214`	`+ text-align: right;`
`214`	`215`	`h1,`
`215`	`216`	`h2,`
`216`	`217`	`h3,`
`@@ -219,7 +220,6 @@`
`219`	`220`	`h6 {`
`220`	`221`	`justify-content: flex-end;`
`221`	`222`	`}`
`222`		`- text-align: right;`
`223`	`223`	`}`
`224`	`224`	`}`
`225`	`225`	`}`
Original file line number	Diff line number	Diff line change
`@@ -142,12 +142,9 @@ module.exports = (env, argv) => {`
`142`	`142`	`{`
`143`	`143`	`loader: "sass-loader",`
`144`	`144`	`options: {`
	`145`	`+ sourceMap: argv.mode === "development" ? true : false,`
`145`	`146`	`sassOptions: {`
`146`		`- // FIXME: https://github.com/webpack-contrib/sass-loader/issues/962#issuecomment-1002675051`
`147`		`- sourceMap: argv.mode === "development" ? true : false,`
`148`		`- sourceMapEmbed: argv.mode === "development" ? true : false,`
`149`		`- outputStyle: argv.mode === "development" ? "expanded" : "compressed",`
`150`		`- includePaths: [nodeModulesPath]`
	`147`	`+ outputStyle: argv.mode === "development" ? "expanded" : "compressed"`
`151`	`148`	`}`
`152`	`149`	`}`
`153`	`150`	`}`