Run npx sass-migrator division **/*.scss (#11753)

jzinn · tw15egan · kodiakhq[bot] · web-flow · commit 6ab2503e5d63 · 2022-07-14T16:46:20.000Z
Co-authored-by: TJ Egan &lt;tw15egan@gmail.com&gt;
Co-authored-by: kodiakhq[bot] &lt;49736102+kodiakhq[bot]@users.noreply.github.com&gt;
diff --git a/packages/grid/scss/_css-grid.scss b/packages/grid/scss/_css-grid.scss
@@ -247,21 +247,21 @@
         $span: $columns * 0.75;
         --cds-grid-columns: #{$span};
 
-        grid-column: span #{$span} / span #{$span};
+        grid-column: span list.slash($span, span) #{$span};
       }
 
       .#{$prefix}--#{$name}\:col-span-50 {
         $span: $columns * 0.5;
         --cds-grid-columns: #{$span};
 
-        grid-column: span #{$span} / span #{$span};
+        grid-column: span list.slash($span, span) #{$span};
       }
 
       .#{$prefix}--#{$name}\:col-span-25 {
         $span: $columns * 0.25;
         --cds-grid-columns: #{$span};
 
-        grid-column: span #{$span} / span #{$span};
+        grid-column: span list.slash($span, span) #{$span};
       }
     } @else {
       @include breakpoint($name) {
@@ -279,21 +279,21 @@
           $span: $columns * 0.75;
           --cds-grid-columns: #{$span};
 
-          grid-column: span #{$span} / span #{$span};
+          grid-column: span list.slash($span, span) #{$span};
         }
 
         .#{$prefix}--#{$name}\:col-span-50 {
           $span: $columns * 0.5;
           --cds-grid-columns: #{$span};
 
-          grid-column: span #{$span} / span #{$span};
+          grid-column: span list.slash($span, span) #{$span};
         }
 
         .#{$prefix}--#{$name}\:col-span-25 {
           $span: $columns * 0.25;
           --cds-grid-columns: #{$span};
 
-          grid-column: span #{$span} / span #{$span};
+          grid-column: span list.slash($span, span) #{$span};
         }
       }
     }
@@ -426,7 +426,7 @@
     @if is-smallest-breakpoint($key, $breakpoints) {
       --cds-grid-columns: #{$span};
 
-      grid-column: span #{$span} / span #{$span};
+      grid-column: span list.slash($span, span) #{$span};
     } @else {
       $previous-breakpoint: breakpoint-prev($key, $breakpoints);
       $previous-column-count: get-column-count(
@@ -439,7 +439,7 @@
         @include breakpoint($key) {
           --cds-grid-columns: #{$span};
 
-          grid-column: span #{$span} / span #{$span};
+          grid-column: span list.slash($span, span) #{$span};
         }
       }
     }
diff --git a/packages/grid/scss/_flex-grid.scss b/packages/grid/scss/_flex-grid.scss
@@ -70,13 +70,8 @@
     // 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.
-    @if meta.function-exists('div', 'math') {
-      max-width: math.percentage(math.div($span, $columns));
-      flex: 0 0 math.percentage(math.div($span, $columns));
-    } @else {
-      max-width: math.percentage(($span / $columns));
-      flex: 0 0 math.percentage(($span / $columns));
-    }
+    max-width: math.percentage(math.div($span, $columns));
+    flex: 0 0 math.percentage(math.div($span, $columns));
   }
 }
 
@@ -87,11 +82,7 @@
 /// @group @carbon/grid
 @mixin -make-col-offset($span, $columns) {
   $offset: 0;
-  @if meta.function-exists('div', 'math') {
-    $offset: math.div($span, $columns);
-  } @else {
-    $offset: ($span / $columns);
-  }
+  $offset: math.div($span, $columns);
   @if $offset == 0 {
     margin-left: 0;
   } @else {
diff --git a/packages/grid/scss/_mixins.scss b/packages/grid/scss/_mixins.scss
@@ -64,13 +64,8 @@
     // 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.
-    @if meta.function-exists('div', 'math') {
-      max-width: math.percentage(math.div($span, $columns));
-      flex: 0 0 math.percentage(math.div($span, $columns));
-    } @else {
-      max-width: math.percentage(($span / $columns));
-      flex: 0 0 math.percentage(($span / $columns));
-    }
+    max-width: math.percentage(math.div($span, $columns));
+    flex: 0 0 math.percentage(math.div($span, $columns));
   }
 }
 
@@ -81,11 +76,7 @@
 /// @group @carbon/grid
 @mixin -make-col-offset($span, $columns) {
   $offset: 0;
-  @if meta.function-exists('div', 'math') {
-    $offset: math.div($span, $columns);
-  } @else {
-    $offset: ($span / $columns);
-  }
+  $offset: math.div($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
diff --git a/packages/layout/scss/_convert.scss b/packages/layout/scss/_convert.scss
@@ -24,11 +24,7 @@ $base-font-size: 16px !default;
     @error "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
   }
 
-  @if meta.function-exists('div', 'math') {
-    @return math.div($px, $base-font-size) * 1rem;
-  } @else {
-    @return ($px / $base-font-size) * 1rem;
-  }
+  @return math.div($px, $base-font-size) * 1rem;
 }
 
 /// Convert a given px unit to a em unit
@@ -41,9 +37,5 @@ $base-font-size: 16px !default;
     @error "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
   }
 
-  @if meta.function-exists('div', 'math') {
-    @return math.div($px, $base-font-size) * 1em;
-  } @else {
-    @return ($px / $base-font-size) * 1em;
-  }
+  @return math.div($px, $base-font-size) * 1em;
 }
diff --git a/packages/layout/scss/modules/_convert.scss b/packages/layout/scss/modules/_convert.scss
@@ -24,11 +24,7 @@ $base-font-size: 16px !default;
     @error "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
   }
 
-  @if meta.function-exists('div', 'math') {
-    @return math.div($px, $base-font-size) * 1rem;
-  } @else {
-    @return ($px / $base-font-size) * 1rem;
-  }
+  @return math.div($px, $base-font-size) * 1rem;
 }
 
 /// Convert a given px unit to a em unit
@@ -41,9 +37,5 @@ $base-font-size: 16px !default;
     @error "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
   }
 
-  @if meta.function-exists('div', 'math') {
-    @return math.div($px, $base-font-size) * 1em;
-  } @else {
-    @return ($px / $base-font-size) * 1em;
-  }
+  @return math.div($px, $base-font-size) * 1em;
 }
diff --git a/packages/styles/scss/components/aspect-ratio/_aspect-ratio.scss b/packages/styles/scss/components/aspect-ratio/_aspect-ratio.scss
@@ -63,11 +63,7 @@ $aspect-ratios: (
     $height: list.nth($aspect-ratio, 2);
 
     .#{$prefix}--aspect-ratio--#{$width}x#{$height}::before {
-      @if meta.function-exists('div', 'math') {
-        padding-top: math.percentage(math.div($height, $width));
-      } @else {
-        padding-top: math.percentage(($height / $width));
-      }
+      padding-top: math.percentage(math.div($height, $width));
     }
   }
 }
diff --git a/packages/styles/scss/utilities/_convert.scss b/packages/styles/scss/utilities/_convert.scss
@@ -23,11 +23,7 @@ $base-font-size: 16px !default;
     @error "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
   }
 
-  @if meta.function-exists('div', 'math') {
-    @return math.div($px, $base-font-size) * 1rem;
-  } @else {
-    @return ($px / $base-font-size) * 1rem;
-  }
+  @return math.div($px, $base-font-size) * 1rem;
 }
 
 /// Convert a given px unit to a em unit
@@ -40,9 +36,5 @@ $base-font-size: 16px !default;
     @error "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
   }
 
-  @if meta.function-exists('div', 'math') {
-    @return math.div($px, $base-font-size) * 1em;
-  } @else {
-    @return ($px / $base-font-size) * 1em;
-  }
+  @return math.div($px, $base-font-size) * 1em;
 }

Original file line number	Diff line number	Diff line change
`@@ -247,21 +247,21 @@`
`247`	`247`	`$span: $columns * 0.75;`
`248`	`248`	`--cds-grid-columns: #{$span};`
`249`	`249`
`250`		`- grid-column: span #{$span} / span #{$span};`
	`250`	`+ grid-column: span list.slash($span, span) #{$span};`
`251`	`251`	`}`
`252`	`252`
`253`	`253`	`.#{$prefix}--#{$name}\:col-span-50 {`
`254`	`254`	`$span: $columns * 0.5;`
`255`	`255`	`--cds-grid-columns: #{$span};`
`256`	`256`
`257`		`- grid-column: span #{$span} / span #{$span};`
	`257`	`+ grid-column: span list.slash($span, span) #{$span};`
`258`	`258`	`}`
`259`	`259`
`260`	`260`	`.#{$prefix}--#{$name}\:col-span-25 {`
`261`	`261`	`$span: $columns * 0.25;`
`262`	`262`	`--cds-grid-columns: #{$span};`
`263`	`263`
`264`		`- grid-column: span #{$span} / span #{$span};`
	`264`	`+ grid-column: span list.slash($span, span) #{$span};`
`265`	`265`	`}`
`266`	`266`	`} @else {`
`267`	`267`	`@include breakpoint($name) {`
`@@ -279,21 +279,21 @@`
`279`	`279`	`$span: $columns * 0.75;`
`280`	`280`	`--cds-grid-columns: #{$span};`
`281`	`281`
`282`		`- grid-column: span #{$span} / span #{$span};`
	`282`	`+ grid-column: span list.slash($span, span) #{$span};`
`283`	`283`	`}`
`284`	`284`
`285`	`285`	`.#{$prefix}--#{$name}\:col-span-50 {`
`286`	`286`	`$span: $columns * 0.5;`
`287`	`287`	`--cds-grid-columns: #{$span};`
`288`	`288`
`289`		`- grid-column: span #{$span} / span #{$span};`
	`289`	`+ grid-column: span list.slash($span, span) #{$span};`
`290`	`290`	`}`
`291`	`291`
`292`	`292`	`.#{$prefix}--#{$name}\:col-span-25 {`
`293`	`293`	`$span: $columns * 0.25;`
`294`	`294`	`--cds-grid-columns: #{$span};`
`295`	`295`
`296`		`- grid-column: span #{$span} / span #{$span};`
	`296`	`+ grid-column: span list.slash($span, span) #{$span};`
`297`	`297`	`}`
`298`	`298`	`}`
`299`	`299`	`}`
`@@ -426,7 +426,7 @@`
`426`	`426`	`@if is-smallest-breakpoint($key, $breakpoints) {`
`427`	`427`	`--cds-grid-columns: #{$span};`
`428`	`428`
`429`		`- grid-column: span #{$span} / span #{$span};`
	`429`	`+ grid-column: span list.slash($span, span) #{$span};`
`430`	`430`	`} @else {`
`431`	`431`	`$previous-breakpoint: breakpoint-prev($key, $breakpoints);`
`432`	`432`	`$previous-column-count: get-column-count(`
`@@ -439,7 +439,7 @@`
`439`	`439`	`@include breakpoint($key) {`
`440`	`440`	`--cds-grid-columns: #{$span};`
`441`	`441`
`442`		`- grid-column: span #{$span} / span #{$span};`
	`442`	`+ grid-column: span list.slash($span, span) #{$span};`
`443`	`443`	`}`
`444`	`444`	`}`
`445`	`445`	`}`
Original file line number	Diff line number	Diff line change
`@@ -24,11 +24,7 @@ $base-font-size: 16px !default;`
`24`	`24`	@error "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
`25`	`25`	`}`
`26`	`26`
`27`		`- @if meta.function-exists('div', 'math') {`
`28`		`- @return math.div($px, $base-font-size) * 1rem;`
`29`		`- } @else {`
`30`		`- @return ($px / $base-font-size) * 1rem;`
`31`		`- }`
	`27`	`+ @return math.div($px, $base-font-size) * 1rem;`
`32`	`28`	`}`
`33`	`29`
`34`	`30`	`/// Convert a given px unit to a em unit`
`@@ -41,9 +37,5 @@ $base-font-size: 16px !default;`
`41`	`37`	@error "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
`42`	`38`	`}`
`43`	`39`
`44`		`- @if meta.function-exists('div', 'math') {`
`45`		`- @return math.div($px, $base-font-size) * 1em;`
`46`		`- } @else {`
`47`		`- @return ($px / $base-font-size) * 1em;`
`48`		`- }`
	`40`	`+ @return math.div($px, $base-font-size) * 1em;`
`49`	`41`	`}`
Original file line number	Diff line number	Diff line change
`@@ -63,11 +63,7 @@ $aspect-ratios: (`
`63`	`63`	`$height: list.nth($aspect-ratio, 2);`
`64`	`64`
`65`	`65`	`.#{$prefix}--aspect-ratio--#{$width}x#{$height}::before {`
`66`		`- @if meta.function-exists('div', 'math') {`
`67`		`- padding-top: math.percentage(math.div($height, $width));`
`68`		`- } @else {`
`69`		`- padding-top: math.percentage(($height / $width));`
`70`		`- }`
	`66`	`+ padding-top: math.percentage(math.div($height, $width));`
`71`	`67`	`}`
`72`	`68`	`}`
`73`	`69`	`}`
Original file line number	Diff line number	Diff line change
`@@ -23,11 +23,7 @@ $base-font-size: 16px !default;`
`23`	`23`	@error "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
`24`	`24`	`}`
`25`	`25`
`26`		`- @if meta.function-exists('div', 'math') {`
`27`		`- @return math.div($px, $base-font-size) * 1rem;`
`28`		`- } @else {`
`29`		`- @return ($px / $base-font-size) * 1rem;`
`30`		`- }`
	`26`	`+ @return math.div($px, $base-font-size) * 1rem;`
`31`	`27`	`}`
`32`	`28`
`33`	`29`	`/// Convert a given px unit to a em unit`
`@@ -40,9 +36,5 @@ $base-font-size: 16px !default;`
`40`	`36`	@error "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
`41`	`37`	`}`
`42`	`38`
`43`		`- @if meta.function-exists('div', 'math') {`
`44`		`- @return math.div($px, $base-font-size) * 1em;`
`45`		`- } @else {`
`46`		`- @return ($px / $base-font-size) * 1em;`
`47`		`- }`
	`39`	`+ @return math.div($px, $base-font-size) * 1em;`
`48`	`40`	`}`