fix(repo): add check around math.div usage (#9850)

Co-authored-by: Abbey Hart <abbeyhrt@gmail.com>
carbon-design-system · Oct 14, 2021 · 1af03df · 1af03df
1 parent 3c9fdbc
commit 1af03df
Show file tree

Hide file tree

Showing 9 changed files with 116 additions and 39 deletions.
diff --git a/packages/components/src/globals/scss/_typography.import.scss b/packages/components/src/globals/scss/_typography.import.scss
@@ -19,6 +19,7 @@
 // compatibility file to ensure we continue to support node-sass and dart-sass
 // in v10.
 
+@use 'sass:meta';
 @use 'sass:math';
 @import 'vars'; /* stylelint-disable-line no-invalid-position-at-import-rule */
 
@@ -42,7 +43,11 @@ $base-font-size: 16px !default;
     @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
   }
 
-  @return math.div($px, $base-font-size) * 1rem;
+  @if meta.function-exists('div', 'math') {
+    @return math.div($px, $base-font-size) * 1rem;
+  } @else {
+    @return ($px / $base-font-size) * 1rem;
+  }
 }
 
 /// Convert px to em
@@ -58,7 +63,11 @@ $base-font-size: 16px !default;
     @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
   }
 
-  @return math.div($px, $base-font-size) * 1em;
+  @if meta.function-exists('div', 'math') {
+    @return math.div($px, $base-font-size) * 1em;
+  } @else {
+    @return ($px / $base-font-size) * 1em;
+  }
 }
 
 // 🔬 Experimental

diff --git a/packages/grid/scss/_mixins.import.scss b/packages/grid/scss/_mixins.import.scss
@@ -23,6 +23,7 @@
 // and often derived from, bootstrap:
 // https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_grid.scss
 
+@use 'sass:meta';
 @use 'sass:math';
 @import '@carbon/layout/scss/breakpoint'; /* stylelint-disable-line no-invalid-position-at-import-rule */
 @import 'prefix'; /* stylelint-disable-line no-invalid-position-at-import-rule */
@@ -46,21 +47,21 @@
   // always setting `width: 100%;`. This works because we use `flex` values
   // later on to override this initial width.
   width: 100%;
-  padding-right: math.div($gutter, 2);
-  padding-left: math.div($gutter, 2);
+  padding-right: $gutter * 0.5;
+  padding-left: $gutter * 0.5;
 
   // For our condensed use-case, our gutters collapse to 2px solid, 1px on each
   // side.
   .#{$prefix}--row--condensed &,
   .#{$prefix}--grid--condensed & {
-    padding-right: math.div($condensed-gutter, 2);
-    padding-left: math.div($condensed-gutter, 2);
+    padding-right: $condensed-gutter * 0.5;
+    padding-left: $condensed-gutter * 0.5;
   }
 
   // For our narrow use-case, our container hangs 16px into the gutter
   .#{$prefix}--row--narrow &,
   .#{$prefix}--grid--narrow & {
-    padding-right: math.div($gutter, 2);
+    padding-right: $gutter * 0.5;
     padding-left: 0;
   }
 }
@@ -80,8 +81,13 @@
     // Add a `max-width` to ensure content within each column does not blow out
     // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
     // do not appear to require this.
-    max-width: percentage(math.div($span, $columns));
-    flex: 0 0 percentage(math.div($span, $columns));
+    @if meta.function-exists('div', 'math') {
+      max-width: percentage(math.div($span, $columns));
+      flex: 0 0 percentage(math.div($span, $columns));
+    } @else {
+      max-width: percentage(($span / $columns));
+      flex: 0 0 percentage(($span / $columns));
+    }
   }
 }
 
@@ -91,7 +97,12 @@
 /// @access private
 /// @group @carbon/grid
 @mixin carbon--make-col-offset($span, $columns) {
-  $offset: math.div($span, $columns);
+  $offset: 0;
+  @if meta.function-exists('div', 'math') {
+    $offset: math.div($span, $columns);
+  } @else {
+    $offset: ($span / $columns);
+  }
   @if $offset == 0 {
     margin-left: 0;
   } @else {
@@ -173,8 +184,8 @@
 @mixin carbon--make-row($gutter: $carbon--grid-gutter) {
   display: flex;
   flex-wrap: wrap;
-  margin-right: -1 * math.div($gutter, 2);
-  margin-left: -1 * math.div($gutter, 2);
+  margin-right: -1 * $gutter * 0.5;
+  margin-left: -1 * $gutter * 0.5;
 }
 
 // -----------------------------------------------------------------------------
@@ -225,20 +236,20 @@
 /// @group @carbon/grid
 @mixin carbon--hang($gutter: $carbon--grid-gutter) {
   .#{$prefix}--hang--start {
-    padding-left: math.div($gutter, 2);
+    padding-left: $gutter * 0.5;
   }
 
   .#{$prefix}--hang--end {
-    padding-right: math.div($gutter, 2);
+    padding-right: $gutter * 0.5;
   }
 
   // Deprecated ☠️
   .#{$prefix}--hang--left {
-    padding-left: math.div($gutter, 2);
+    padding-left: $gutter * 0.5;
   }
 
   .#{$prefix}--hang--right {
-    padding-right: math.div($gutter, 2);
+    padding-right: $gutter * 0.5;
   }
 }
 
@@ -299,7 +310,11 @@ $carbon--aspect-ratios: (
     $height: nth($aspect-ratio, 2);
 
     .#{$prefix}--aspect-ratio--#{$width}x#{$height}::before {
-      padding-top: percentage(math.div($height, $width));
+      @if meta.function-exists('div', 'math') {
+        padding-top: percentage(math.div($height, $width));
+      } @else {
+        padding-top: percentage(($height / $width));
+      }
     }
   }
 
@@ -336,14 +351,14 @@ $carbon--aspect-ratios: (
       $prev-margin: map-get($prev-breakpoint, margin);
       @if $prev-margin != $margin {
         @include carbon--breakpoint($name) {
-          padding-right: #{math.div($carbon--grid-gutter, 2) + $margin};
-          padding-left: #{math.div($carbon--grid-gutter, 2) + $margin};
+          padding-right: #{($carbon--grid-gutter * 0.5) + $margin};
+          padding-left: #{($carbon--grid-gutter * 0.5) + $margin};
         }
       }
     } @else {
       @include carbon--breakpoint($name) {
-        padding-right: #{math.div($carbon--grid-gutter, 2) + $margin};
-        padding-left: #{math.div($carbon--grid-gutter, 2) + $margin};
+        padding-right: #{($carbon--grid-gutter * 0.5) + $margin};
+        padding-left: #{($carbon--grid-gutter * 0.5) + $margin};
       }
     }
   }
@@ -400,13 +415,13 @@ $carbon--aspect-ratios: (
 
   .#{$prefix}--row-padding [class*='#{$prefix}--col'],
   .#{$prefix}--col-padding {
-    padding-top: math.div($grid-gutter, 2);
-    padding-bottom: math.div($grid-gutter, 2);
+    padding-top: $grid-gutter * 0.5;
+    padding-bottom: $grid-gutter * 0.5;
   }
 
   .#{$prefix}--grid--condensed [class*='#{$prefix}--col'] {
-    padding-top: math.div($condensed-gutter, 2);
-    padding-bottom: math.div($condensed-gutter, 2);
+    padding-top: $condensed-gutter * 0.5;
+    padding-bottom: $condensed-gutter * 0.5;
   }
 
   @include carbon--make-grid-columns($breakpoints, $grid-gutter);

diff --git a/packages/grid/scss/modules/_css-grid.scss b/packages/grid/scss/modules/_css-grid.scss
@@ -5,6 +5,7 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+@use 'sass:meta';
 @use "sass:math";
 
 @use 'sass:map';
@@ -405,7 +406,11 @@ $carbon--aspect-ratios: (
     $height: nth($aspect-ratio, 2);
 
     .#{$prefix}--aspect-ratio--#{$width}x#{$height}::before {
-      padding-top: percentage(math.div($height, $width));
+      @if meta.function-exists('div', 'math') {
+        padding-top: percentage(math.div($height, $width));
+      } @else {
+        padding-top: percentage(($height / $width));
+      }
     }
   }
 }

diff --git a/packages/grid/scss/modules/_mixins.scss b/packages/grid/scss/modules/_mixins.scss
@@ -5,6 +5,7 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+@use 'sass:meta';
 @use "sass:math";
 
 @use 'config' as *;
@@ -63,8 +64,13 @@
     // Add a `max-width` to ensure content within each column does not blow out
     // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
     // do not appear to require this.
-    max-width: percentage(math.div($span, $columns));
-    flex: 0 0 percentage(math.div($span, $columns));
+    @if meta.function-exists('div', 'math') {
+      max-width: percentage(math.div($span, $columns));
+      flex: 0 0 percentage(math.div($span, $columns));
+    } @else {
+      max-width: percentage(($span / $columns));
+      flex: 0 0 percentage(($span / $columns));
+    }
   }
 }
 
@@ -74,7 +80,12 @@
 /// @access private
 /// @group @carbon/grid
 @mixin -make-col-offset($span, $columns) {
-  $offset: math.div($span, $columns);
+  $offset: 0;
+  @if meta.function-exists('div', 'math') {
+    $offset: math.div($span, $columns);
+  } @else {
+    $offset: ($span / $columns);
+  }
   @if $offset == 0 {
     margin-left: 0;
   } @else {

diff --git a/packages/layout/scss/_convert.import.scss b/packages/layout/scss/_convert.import.scss
@@ -19,6 +19,7 @@
 // compatibility file to ensure we continue to support node-sass and dart-sass
 // in v10.
 
+@use 'sass:meta';
 @use 'sass:math';
 
 /// Default font size
@@ -38,7 +39,11 @@ $carbon--base-font-size: 16px !default;
     @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
   }
 
-  @return math.div($px, $carbon--base-font-size) * 1rem;
+  @if meta.function-exists('div', 'math') {
+    @return math.div($px, $carbon--base-font-size) * 1rem;
+  } @else {
+    @return ($px / $carbon--base-font-size) * 1rem;
+  }
 }
 
 /// Convert a given px unit to a em unit
@@ -52,5 +57,9 @@ $carbon--base-font-size: 16px !default;
     @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
   }
 
-  @return math.div($px, $carbon--base-font-size) * 1em;
+  @if meta.function-exists('div', 'math') {
+    @return math.div($px, $carbon--base-font-size) * 1em;
+  } @else {
+    @return ($px / $carbon--base-font-size) * 1em;
+  }
 }
diff --git a/packages/layout/scss/_key-height.import.scss b/packages/layout/scss/_key-height.import.scss
@@ -19,6 +19,7 @@
 // compatibility file to ensure we continue to support node-sass and dart-sass
 // in v10.
 
+@use 'sass:meta';
 @use "sass:math";
 @import 'breakpoint'; /* stylelint-disable-line no-invalid-position-at-import-rule */
 @import 'utilities'; /* stylelint-disable-line no-invalid-position-at-import-rule */
@@ -39,7 +40,11 @@
     $margin: map-get($values, margin);
     $columns: map-get($values, columns);
 
-    @return math.div($width - (2 * $margin), $columns);
+    @if meta.function-exists('div', 'math') {
+      @return math.div($width - (2 * $margin), $columns);
+    } @else {
+      @return (($width - (2 * $margin)) / $columns);
+    }
   } @else {
     @warn 'Breakpoint: `#{$breakpoint}` is not a valid breakpoint.';
   }

diff --git a/packages/layout/scss/modules/_convert.scss b/packages/layout/scss/modules/_convert.scss
@@ -5,6 +5,7 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+@use 'sass:meta';
 @use 'sass:math';
 
 /// Default font size
@@ -24,7 +25,11 @@ $base-font-size: 16px !default;
     @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
   }
 
-  @return math.div($px, $base-font-size) * 1rem;
+  @if meta.function-exists('div', 'math') {
+    @return math.div($px, $base-font-size) * 1rem;
+  } @else {
+    @return ($px / $base-font-size) * 1rem;
+  }
 }
 
 /// Convert a given px unit to a em unit
@@ -38,5 +43,9 @@ $base-font-size: 16px !default;
     @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
   }
 
-  @return math.div($px, $base-font-size) * 1em;
+  @if meta.function-exists('div', 'math') {
+    @return math.div($px, $base-font-size) * 1em;
+  } @else {
+    @return ($px / $base-font-size) * 1em;
+  }
 }
diff --git a/packages/styles/scss/utilities/_convert.scss b/packages/styles/scss/utilities/_convert.scss
@@ -5,11 +5,12 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+@use 'sass:meta';
+@use "sass:math";
+
 /// Default font size
 /// @type Number
 /// @access public
-@use "sass:math";
-
 $base-font-size: 16px !default;
 
 /// Convert a given px unit to a rem unit
@@ -23,7 +24,11 @@ $base-font-size: 16px !default;
     @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
   }
 
-  @return math.div($px, $base-font-size) * 1rem;
+  @if meta.function-exists('div', 'math') {
+    @return math.div($px, $base-font-size) * 1rem;
+  } @else {
+    @return ($px / $base-font-size) * 1rem;
+  }
 }
 
 /// Convert a given px unit to a em unit
@@ -37,5 +42,9 @@ $base-font-size: 16px !default;
     @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
   }
 
-  @return math.div($px, $base-font-size) * 1em;
+  @if meta.function-exists('div', 'math') {
+    @return math.div($px, $base-font-size) * 1em;
+  } @else {
+    @return ($px / $base-font-size) * 1em;
+  }
 }
diff --git a/packages/type/scss/_styles.import.scss b/packages/type/scss/_styles.import.scss
@@ -19,6 +19,7 @@
 // compatibility file to ensure we continue to support node-sass and dart-sass
 // in v10.
 
+@use "sass:meta";
 @use "sass:math";
 @import '@carbon/layout/scss/breakpoint'; /* stylelint-disable-line no-invalid-position-at-import-rule */
 @import 'font-family'; /* stylelint-disable-line no-invalid-position-at-import-rule */
@@ -582,7 +583,11 @@ $tokens: (
 /// @access public
 /// @group @carbon/type
 @function strip-unit($value) {
-  @return math.div($value, $value * 0 + 1);
+  @if meta.function-exists('div', 'math') {
+    @return math.div($value, $value * 0 + 1);
+  } @else {
+    @return $value / ($value * 0 + 1);
+  }
 }
 
 /// This helper includes fluid type styles for the given token value. Fluid type