fix(@clayui/css): Adds division polyfill clay-div a function that u…

…ses `/` as a division operation if the function `div()` does not exist Dart Sass 1.33.0 changed `/` from a division operation to a list separator. Clay CSS will default to to using `/` as a division operation unless `@use 'sass:math' as *;` is declared to load the math module. fix(@clayui/css): Convert `/` to `clay-div` where CSS `calc` or multiplication isn't possible
liferay · Oct 25, 2021 · 87aec12 · 87aec12
1 parent f9948ec
commit 87aec12
Show file tree

Hide file tree

Showing 7 changed files with 52 additions and 26 deletions.
diff --git a/packages/clay-css/src/scss/components/_custom-forms.scss b/packages/clay-css/src/scss/components/_custom-forms.scss
@@ -320,8 +320,8 @@ label.custom-control-label {
 							$font-size-base *
 								$line-height-base -
 								$custom-control-indicator-size
-						) /
-						2,
+						) *
+						0.5,
 					$custom-control-indicator-border-width * 2
 				);
 				width: $custom-switch-indicator-size;
@@ -571,8 +571,8 @@ label.custom-control-label {
 			height: $custom-range-thumb-height;
 			margin-top: (
 					$custom-range-track-height - $custom-range-thumb-height
-				) /
-				2; // Webkit specific
+				) *
+				0.5; // Webkit specific
 
 			@include transition($custom-forms-transition);
 

diff --git a/packages/clay-css/src/scss/components/_utilities-functional-important.scss b/packages/clay-css/src/scss/components/_utilities-functional-important.scss
@@ -218,9 +218,10 @@
 
 	.embed-responsive-#{$embed-responsive-aspect-ratio-x}by#{$embed-responsive-aspect-ratio-y} {
 		&::before {
-			padding-top: percentage(
-				$embed-responsive-aspect-ratio-y /
-					$embed-responsive-aspect-ratio-x
+			padding-top: calc(
+				#{$embed-responsive-aspect-ratio-y} /
+					#{$embed-responsive-aspect-ratio-x} *
+					100%
 			);
 		}
 	}

diff --git a/packages/clay-css/src/scss/functions/_global-functions.scss b/packages/clay-css/src/scss/functions/_global-functions.scss
@@ -2,6 +2,8 @@
 /// @group globals
 ////
 
+@import '_polyfills.scss';
+
 @import '_color-functions.scss';
 @import '_lx-icons-generated.scss';
 @import '_type-conversion-functions.scss';
@@ -140,10 +142,10 @@
 @function clay-px-to-rem($number, $add-unit: false, $base: 16) {
 	@if type-of($number) == 'number' {
 		@if unit($number) == 'px' {
-			$number: $number / 1px;
-			$number: $number / $base;
+			$number: clay-div($number, 1px);
+			$number: clay-div($number, $base);
 		} @else if unitless($number) {
-			$number: $number / $base;
+			$number: clay-div($number, $base);
 		} @else {
 			@debug 'Unable to convert: #{$number} should be a `px` value.';
 		}
@@ -739,7 +741,7 @@
 	$index: 0;
 	$slice: 2000;
 
-	$loops: ceil(str-length($svg) / $slice);
+	$loops: ceil(clay-div(str-length($svg), $slice));
 
 	@for $i from 1 through $loops {
 		$chunk: str-slice($svg, $index, $index + $slice - 1);

diff --git a/packages/clay-css/src/scss/functions/_polyfills.scss b/packages/clay-css/src/scss/functions/_polyfills.scss
@@ -0,0 +1,17 @@
+////
+/// @group polyfills
+////
+
+/// A function that uses `/` as a division operation if the function `div()` does not exist. Dart Sass 1.33.0 changed `/` from a division operation to a list separator. Clay CSS will default to to using `/` as a division operation unless `@use 'sass:math' as *;` is declared to load the math module.
+/// @param {Number} $numerator - The number to divide or dividend
+/// @param {Number} $denominator - The number that divides the $numerator or divisor
+
+@function clay-div($numerator, $denominator) {
+	$division-function: if(
+		function-exists(div),
+		div($numerator, $denominator),
+		$numerator / $denominator
+	);
+
+	@return $division-function;
+}
diff --git a/packages/clay-css/src/scss/functions/_type-conversion-functions.scss b/packages/clay-css/src/scss/functions/_type-conversion-functions.scss
@@ -88,7 +88,7 @@
 			$result: $result * 10 + map-get($numbers, $character);
 		} @else {
 			$digits: $digits * 10;
-			$result: $result + map-get($numbers, $character) / $digits;
+			$result: $result + clay-div(map-get($numbers, $character), $digits);
 		}
 	}
 
@@ -177,7 +177,8 @@
 			);
 		} @else {
 			@if index('e' '.' ' ' ',' ']' '}', $token) {
-				@return $pointer, if($result != null, $result / $runs, $result);
+				@return $pointer,
+					if($result != null, clay-div($result, $runs), $result);
 			}
 
 			@return throw('Unexpected token `#{$token}`.', $pointer);
@@ -186,7 +187,7 @@
 		$pointer: $pointer + 1;
 	}
 
-	@return $pointer, if($result != null, $result / $runs, $result);
+	@return $pointer, if($result != null, clay-div($result, $runs), $result);
 }
 
 /// Parses a JSON encoded number to find the exponent part
@@ -258,7 +259,7 @@
 		}
 	} @else {
 		@for $i from $n to 0 {
-			$ret: $ret / $x;
+			$ret: clay-div($ret, $x);
 		}
 	}
 

diff --git a/packages/clay-css/src/scss/mixins/_navbar.scss b/packages/clay-css/src/scss/mixins/_navbar.scss
@@ -55,8 +55,8 @@
 	$link-margin-x: map-get($map, link-margin-x);
 	$link-margin-y: setter(
 		map-get($map, link-margin-y),
-		(($height - $border-bottom-width - $border-top-width) - $link-height) /
-			2
+		(($height - $border-bottom-width - $border-top-width) - $link-height) *
+			0.5
 	);
 	$link-padding-x: setter(
 		map-get($map, link-padding-x),

diff --git a/packages/clay-css/src/scss/mixins/_rfs.scss b/packages/clay-css/src/scss/mixins/_rfs.scss
@@ -51,10 +51,15 @@ $rfs-base-font-size-unit: unit($rfs-base-font-size);
 // Remove px-unit from $rfs-base-font-size for calculations
 
 @if $rfs-base-font-size-unit == 'px' {
-	$rfs-base-font-size: $rfs-base-font-size / ($rfs-base-font-size * 0 + 1);
+	$rfs-base-font-size: clay-div(
+		$rfs-base-font-size,
+		($rfs-base-font-size * 0 + 1)
+	);
 } @else if $rfs-base-font-size-unit == 'rem' {
-	$rfs-base-font-size: $rfs-base-font-size /
-		($rfs-base-font-size * 0 + 1 / $rfs-rem-value);
+	$rfs-base-font-size: clay-div(
+		$rfs-base-font-size,
+		($rfs-base-font-size * 0 + clay-div(1, $rfs-rem-value))
+	);
 }
 
 // Cache $rfs-breakpoint unit to prevent multiple calls
@@ -64,15 +69,15 @@ $rfs-breakpoint-unit-cache: unit($rfs-breakpoint);
 // Remove unit from $rfs-breakpoint for calculations
 
 @if $rfs-breakpoint-unit-cache == 'px' {
-	$rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1);
+	$rfs-breakpoint: clay-div($rfs-breakpoint, ($rfs-breakpoint * 0 + 1));
 } @else if
 	$rfs-breakpoint-unit-cache ==
 	'rem' or
 	$rfs-breakpoint-unit-cache ==
 	'em'
 {
 	$rfs-breakpoint: $rfs-breakpoint /
-		($rfs-breakpoint * 0 + 1 / $rfs-rem-value);
+		($rfs-breakpoint * 0 + clay-div(1, $rfs-rem-value));
 }
 
 // Responsive font-size mixin
@@ -109,15 +114,15 @@ $rfs-breakpoint-unit-cache: unit($rfs-breakpoint);
 		// Remove px-unit from $fs for calculations
 
 		@if $fs-unit == 'px' {
-			$fs: $fs / ($fs * 0 + 1);
+			$fs: clay-div($fs, ($fs * 0 + 1));
 		} @else if $fs-unit == 'rem' {
-			$fs: $fs / ($fs * 0 + 1 / $rfs-rem-value);
+			$fs: clay-div($fs, ($fs * 0 + clay-div(1, $rfs-rem-value)));
 		}
 
 		// Set default font-size
 
 		@if $rfs-font-size-unit == rem {
-			$rfs-static: #{$fs / $rfs-rem-value}rem#{$rfs-suffix};
+			$rfs-static: #{clay-div($fs, $rfs-rem-value)}rem#{$rfs-suffix};
 		} @else if $rfs-font-size-unit == px {
 			$rfs-static: #{$fs}px#{$rfs-suffix};
 		} @else {
@@ -146,7 +151,7 @@ $rfs-breakpoint-unit-cache: unit($rfs-breakpoint);
 
 			$min-width: if(
 				$rfs-font-size-unit == rem,
-				#{$fs-min / $rfs-rem-value}rem,
+				#{clay-div($fs-min, $rfs-rem-value)}rem,
 				#{$fs-min}px
 			);