From cb5b746bbb72669e11c20093326d638d3e10ea5f Mon Sep 17 00:00:00 2001
From: Jarek Zgoda <jarek.zgoda@gmail.com>
Date: Wed, 18 Aug 2021 12:44:54 +0200
Subject: [PATCH 1/2] Use sass division function instead of deprecated operator

This effectively make the SCSS code processable only by dart-sass
because neither libsass (and node-sass in consequence) nor ruby-sass
supports new syntax. See
https://sass-lang.com/documentation/breaking-changes/slash-div for more
information.

This fixes #27
---
 scss/components/_accordion.scss         |  6 +++---
 scss/components/_card.scss              |  4 +++-
 scss/components/_nav.scss               | 16 +++++++++-------
 scss/components/_progress.scss          |  2 +-
 scss/content/_form-alt-input-types.scss | 14 +++++++-------
 scss/content/_form-checkbox-radio.scss  |  2 +-
 scss/content/_form.scss                 |  4 ++--
 scss/content/_typography.scss           |  4 ++--
 scss/layout/_scroller.scss              |  2 +-
 scss/utilities/_loading.scss            |  2 +-
 10 files changed, 30 insertions(+), 26 deletions(-)

diff --git a/scss/components/_accordion.scss b/scss/components/_accordion.scss
index 75632b09..48487d9d 100644
--- a/scss/components/_accordion.scss
+++ b/scss/components/_accordion.scss
@@ -6,7 +6,7 @@
 details {
   display: block;
   margin-bottom: var(--spacing);
-  padding-bottom: calc(var(--spacing) / 2);
+  padding-bottom: calc(var(--spacing) * 0.5);
   border-bottom: var(--border-width) solid var(--accordion-border-color);
 
   summary {
@@ -57,7 +57,7 @@ details {
     }
 
     ~ * {
-      margin-top: calc(var(--spacing) / 2);
+      margin-top: calc(var(--spacing) * 0.5);
 
       ~ * {
         margin-top: 0;
@@ -69,7 +69,7 @@ details {
   &[open] {
 
     > summary {
-      margin-bottom: calc(var(--spacing) / 4);
+      margin-bottom: calc(var(--spacing) * 0.25);
 
       &:not(:focus) {
         color: var(--accordion-open-summary-color);
diff --git a/scss/components/_card.scss b/scss/components/_card.scss
index 2a9aec17..d4fe4712 100644
--- a/scss/components/_card.scss
+++ b/scss/components/_card.scss
@@ -1,3 +1,5 @@
+@use "sass:math";
+
 /**
  * Card (<article>)
  */
@@ -15,7 +17,7 @@ article {
   > pre {
     margin-right: calc(var(--block-spacing-horizontal) * -1);
     margin-left: calc(var(--block-spacing-horizontal) * -1);
-    padding: calc(var(--block-spacing-vertical) / 1.5) var(--block-spacing-horizontal);
+    padding: calc(math.div(var(--block-spacing-vertical), 1.5)) var(--block-spacing-horizontal);
     background-color: var(--card-sectionning-background-color);
   }
 
diff --git a/scss/components/_nav.scss b/scss/components/_nav.scss
index ea6fe6a6..66e9dd28 100644
--- a/scss/components/_nav.scss
+++ b/scss/components/_nav.scss
@@ -1,3 +1,5 @@
+@use "sass:math";
+
 /**
  * Nav
  */
@@ -19,17 +21,17 @@ nav {
     list-style: none;
 
     &:first-of-type {
-      margin-left: calc(var(--spacing) * -0.5);
+      margin-left: calc(math.div(var(--spacing), -0.5));
     }
     &:last-of-type {
-      margin-right: calc(var(--spacing) * -0.5);
+      margin-right: calc(math.div(var(--spacing), -0.5));
     }
   }
 
   li {
     display: inline-block;
     margin: 0;
-    padding: var(--spacing) calc(var(--spacing) / 2);
+    padding: var(--spacing) calc(var(--spacing) * 0.5);
 
     // HACK: Input & Button inside Nav
     > *,
@@ -40,8 +42,8 @@ nav {
 
   a {
     display: block;
-    margin: calc(var(--spacing) * -1) calc(var(--spacing) * -0.5);
-    padding: var(--spacing) calc(var(--spacing) / 2);
+    margin: calc(var(--spacing) * -1) calc(math.div(var(--spacing), -0.5));
+    padding: var(--spacing) calc(var(--spacing) * 0.5);
     border-radius: var(--border-radius);
     text-decoration: none;
 
@@ -64,11 +66,11 @@ aside {
   }
 
   li {
-    padding: calc(var(--spacing) / 2);
+    padding: calc(var(--spacing) * 0.5);
 
     a {
       margin: calc(var(--spacing) * -0.5);
-      padding: calc(var(--spacing) / 2);
+      padding: calc(var(--spacing) * 0.5);
     }
   }
 }
diff --git a/scss/components/_progress.scss b/scss/components/_progress.scss
index 751ce24d..121fa156 100644
--- a/scss/components/_progress.scss
+++ b/scss/components/_progress.scss
@@ -30,7 +30,7 @@ progress {
   display: inline-block;
   width: 100%;
   height: .5rem;
-  margin-bottom: calc(var(--spacing) / 2);
+  margin-bottom: calc(var(--spacing) * 0.5);
   overflow: hidden;
 
   // Remove Firefox and Opera border
diff --git a/scss/content/_form-alt-input-types.scss b/scss/content/_form-alt-input-types.scss
index 8446c6ec..6043ebd9 100644
--- a/scss/content/_form-alt-input-types.scss
+++ b/scss/content/_form-alt-input-types.scss
@@ -18,12 +18,12 @@
   // Swatch
   &::-webkit-color-swatch {
     border: none;
-    border-radius: calc(var(--border-radius) / 2);
+    border-radius: calc(var(--border-radius) * 0.5);
   }
 
   &::-moz-color-swatch {
     border: none;
-    border-radius: calc(var(--border-radius) / 2);
+    border-radius: calc(var(--border-radius) * 0.5);
   }
 }
 
@@ -51,7 +51,7 @@
 // File
 [type="file"] {
   --color: var(--muted-color);
-  padding: calc(var(--form-element-spacing-vertical)/2) 0;
+  padding: calc(var(--form-element-spacing-vertical) * 0.5) 0;
   border: none;
   border-radius: 0;
   background: none;
@@ -61,7 +61,7 @@
     --border-color: var(--secondary);
     --color: var(--secondary-inverse);
     margin-right: calc(var(--spacing) / 2);
-    padding: calc(var(--form-element-spacing-vertical) / 2) calc(var(--form-element-spacing-horizontal) / 2);
+    padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
     border: var(--border-width) solid var(--border-color);
     border-radius: var(--border-radius);
     outline: none;
@@ -162,7 +162,7 @@
     -webkit-appearance: none;
     width: $height-thumb;
     height: $height-thumb;
-    margin-top: #{(-($height-thumb/2) + ($height-track/2))};
+    margin-top: #{(-($height-thumb * 0.5) + ($height-track * 0.5))};
     border: $border-thumb solid var(--range-thumb-border-color);
     border-radius: 50%;
     background-color: var(--range-thumb-color);
@@ -179,7 +179,7 @@
     -webkit-appearance: none;
     width: $height-thumb;
     height: $height-thumb;
-    margin-top: #{(-($height-thumb/2) + ($height-track/2))};
+    margin-top: #{(-($height-thumb * 0.5) + ($height-track * 0.5))};
     border: $border-thumb solid var(--range-thumb-border-color);
     border-radius: 50%;
     background-color: var(--range-thumb-color);
@@ -196,7 +196,7 @@
     -webkit-appearance: none;
     width: $height-thumb;
     height: $height-thumb;
-    margin-top: #{(-($height-thumb/2) + ($height-track/2))};
+    margin-top: #{(-($height-thumb * 0.5) + ($height-track * 0.5))};
     border: $border-thumb solid var(--range-thumb-border-color);
     border-radius: 50%;
     background-color: var(--range-thumb-color);
diff --git a/scss/content/_form-checkbox-radio.scss b/scss/content/_form-checkbox-radio.scss
index 7e74a6c2..5e56915f 100644
--- a/scss/content/_form-checkbox-radio.scss
+++ b/scss/content/_form-checkbox-radio.scss
@@ -112,7 +112,7 @@
 
     &::before {
       margin-right: 0;
-      margin-left: calc(#{$switch-width / 2} - var(--border-width));
+      margin-left: calc(#{$switch-width * 0.5} - var(--border-width));
     }
   }
 }
diff --git a/scss/content/_form.scss b/scss/content/_form.scss
index ee0fb226..4956f7e9 100644
--- a/scss/content/_form.scss
+++ b/scss/content/_form.scss
@@ -131,7 +131,7 @@ fieldset {
 label,
 fieldset legend {
   display: block;
-  margin-bottom: calc(var(--spacing) / 4);
+  margin-bottom: calc(var(--spacing) * 0.25);
   vertical-align: middle;
 }
 
@@ -315,6 +315,6 @@ label {
   & > input,
   & > select,
   & > textarea {
-    margin-top: calc(var(--spacing) / 4);
+    margin-top: calc(var(--spacing) * 0.25);
   }
 }
diff --git a/scss/content/_typography.scss b/scss/content/_typography.scss
index abf2b298..07bce5bf 100644
--- a/scss/content/_typography.scss
+++ b/scss/content/_typography.scss
@@ -217,7 +217,7 @@ ol {
   padding-left: var(--spacing);
 
   li {
-    margin-bottom: calc(var(--typography-spacing-vertical) / 4);
+    margin-bottom: calc(var(--typography-spacing-vertical) * 0.25);
   }
 }
 
@@ -241,7 +241,7 @@ blockquote {
   border-left: .25rem solid var(--blockquote-border-color);
 
   footer {
-    margin-top: calc(var(--typography-spacing-vertical) / 2);
+    margin-top: calc(var(--typography-spacing-vertical) * 0.5);
     color: var(--blockquote-footer-color);
   }
 }
diff --git a/scss/layout/_scroller.scss b/scss/layout/_scroller.scss
index b3f6ef9a..cad78c6a 100644
--- a/scss/layout/_scroller.scss
+++ b/scss/layout/_scroller.scss
@@ -10,7 +10,7 @@ figure {
   overflow-x: auto;
 
   figcaption {
-    padding: calc(var(--spacing) / 2) 0;
+    padding: calc(var(--spacing) * 0.5) 0;
     color: var(--muted-color);
   }
 }
diff --git a/scss/utilities/_loading.scss b/scss/utilities/_loading.scss
index ba2ec171..3923c53c 100644
--- a/scss/utilities/_loading.scss
+++ b/scss/utilities/_loading.scss
@@ -27,7 +27,7 @@
 
   &:not(:empty) {
     &::before {
-      margin-right: calc(var(--spacing) / 2);
+      margin-right: calc(var(--spacing) * 0.5);
     }
   }
 

From 41d93e3268018da74d816f534db1703781e0b994 Mon Sep 17 00:00:00 2001
From: Jarek Zgoda <jarek.zgoda@gmail.com>
Date: Wed, 18 Aug 2021 12:52:59 +0200
Subject: [PATCH 2/2] Wrong ops

---
 scss/components/_nav.scss | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/scss/components/_nav.scss b/scss/components/_nav.scss
index 66e9dd28..4c880e5c 100644
--- a/scss/components/_nav.scss
+++ b/scss/components/_nav.scss
@@ -1,5 +1,3 @@
-@use "sass:math";
-
 /**
  * Nav
  */
@@ -21,10 +19,10 @@ nav {
     list-style: none;
 
     &:first-of-type {
-      margin-left: calc(math.div(var(--spacing), -0.5));
+      margin-left: calc(var(--spacing) * -0.5);
     }
     &:last-of-type {
-      margin-right: calc(math.div(var(--spacing), -0.5));
+      margin-right: calc(var(--spacing) * -0.5);
     }
   }
 
@@ -42,7 +40,7 @@ nav {
 
   a {
     display: block;
-    margin: calc(var(--spacing) * -1) calc(math.div(var(--spacing), -0.5));
+    margin: calc(var(--spacing) * -1) calc(var(--spacing) * -0.5);
     padding: var(--spacing) calc(var(--spacing) * 0.5);
     border-radius: var(--border-radius);
     text-decoration: none;