WIP | remove slash division

.stylelintrc

@@ -25,7 +25,9 @@
                     "mixin",
                     "warn",
                     "content",
-                    "at-root"
+                    "at-root", 
+                    "use", 
+                    "forward"
                 ]
             }
         ],

components/_form-select.scss

@@ -1,5 +1,4 @@
 @import '../settings/form';
-@import '~sass-svg-uri/svg-uri';
 
 .form-select {
     display: block;
@@ -47,7 +46,7 @@
     .has-error & {
         padding-right: 2.25rem;
         border-color: $form-group-error-color;
-        background-image: svg-uri($form-group-error-icon);
+        background-image: url('data:image/svg+xml;utf8,#{$form-group-error-icon}');
         background-repeat: no-repeat;
         background-position: center right 0.563rem;
         background-size: 1.125rem 1.125rem;

layout/_container.scss

@@ -1,3 +1,4 @@
+@use 'sass:math';
 @import '../settings/breakpoints';
 @import '../settings/layout';
 
@@ -19,7 +20,7 @@
 // Except for if the container is 0px and if the container is larger than the max-width set in the settings.
 // Or when the container is fluid
 @each $breakpoint-name, $container-width in $breakpoints {
-    @if ($container-width != 0px and ($container-width/1px) <= ($layout-container-max-width/1px)) { /* stylelint-disable-line */
+    @if ($container-width != 0px and (math.div($container-width,1px)) <= (math.div($layout-container-max-width, 1px))) { /* stylelint-disable-line */
         @include mq($from: $breakpoint-name) {
             .container:not(.container--fluid) {
                 max-width: $container-width;

layout/_layout-offset.scss

@@ -1,10 +1,11 @@
+@use 'sass:math';
 @import '../settings/breakpoints';
 @import '../settings/layout';
 
 @mixin _make-offset($totalColumnCount) {
     @for $i from 1 through $totalColumnCount {
         &-#{$i} {
-            margin-left: percentage($i / $totalColumnCount);
+            margin-left: percentage(math.div($i, $totalColumnCount));
         }
     }
 }

layout/_layout-sizing.scss

@@ -1,11 +1,12 @@
+@use 'sass:math';
 @import '../settings/breakpoints';
 @import '../settings/layout';
 
 @mixin _make-column($totalColumnCount) {
     @for $i from 1 through $totalColumnCount {
         &-#{$i} {
-            width: percentage($i / $totalColumnCount);
-            max-width: percentage($i / $totalColumnCount); // Needed for IE10+ and Firefox
+            width: percentage(math.div($i, $totalColumnCount));
+            max-width: percentage(math.div($i, $totalColumnCount)); // Needed for IE10+ and Firefox
         }
     }
 }

layout/_layout.scss

@@ -1,3 +1,4 @@
+@use 'sass:math';
 @import '../settings/breakpoints';
 @import '../settings/layout';
 
@@ -8,8 +9,8 @@
     // compensate gutters for each breakpoint
     @each $breakpoint-name, $gutter-width in $layout-gutter-widths {
         @include mq($from: $breakpoint-name) {
-            margin-left: -$gutter-width / 2;
-            margin-right: -$gutter-width / 2;
+            margin-left: math.div($gutter-width, 2) * -1;
+            margin-right: math.div($gutter-width, 2) * -1;
         }
     }
 }
@@ -35,8 +36,8 @@
     // set gutter width for each breakpoint
     @each $breakpoint-name, $gutter-width in $layout-gutter-widths {
         @include mq($from: $breakpoint-name) {
-            padding-left: $gutter-width / 2;
-            padding-right: $gutter-width / 2;
+            padding-left: math.div($gutter-width, 2);
+            padding-right: math.div($gutter-width, 2);
         }
     }