feat(lib): support bulma v0.9.3

Author: wtho

demo/package-lock.json

@@ -34,9 +34,9 @@
     "html-webpack-plugin": "^5.0.0-alpha.14",
     "json-loader": "^0.5.7",
     "mini-css-extract-plugin": "^1.2.1",
-    "sass": "^1.26.11",
-    "sass-loader": "^10.0.2",
-    "style-loader": "^2.0.0",
+    "sass": "^1.35.2",
+    "sass-loader": "^12.1.0",
+    "style-loader": "^3.0.0",
     "ts-loader": "^8.0.4",
     "typescript": "^4.0.3",
     "webpack": "^5.3.2",

demo/package.json

@@ -62,7 +62,7 @@
       $value: $value * $number
   @else if $exp < 0
     @for $i from 1 through -$exp
-      $value: $value / $number
+      $value: divide($value, $number)
   @return $value
 
 @function colorLuminance($color)
@@ -71,11 +71,11 @@
   $color-rgb: ('red': red($color),'green': green($color),'blue': blue($color))
   @each $name, $value in $color-rgb
     $adjusted: 0
-    $value: $value / 255
+    $value: divide($value, 255)
     @if $value < 0.03928
-      $value: $value / 12.92
+      $value: divide($value, 12.92)
     @else
-      $value: ($value + .055) / 1.055
+      $value: divide(($value + .055), 1.055)
       $value: powerNumber($value, 2)
     $color-rgb: map-merge($color-rgb, ($name: $value))
   @return (map-get($color-rgb, 'red') * .2126) + (map-get($color-rgb, 'green') * .7152) + (map-get($color-rgb, 'blue') * .0722)
@@ -195,11 +195,11 @@
   $color-rgb: ('red': red($color),'green': green($color),'blue': blue($color))
   @each $name, $value in $color-rgb
     $adjusted: 0
-    $value: $value / 255
+    $value: divide($value, 255)
     @if $value < 0.03928
-      $value: $value / 12.92
+      $value: divide($value, 12.92)
     @else
-      $value: ($value + .055) / 1.055
+      $value: divide(($value + .055), 1.055)
       $value: powerNumber($value, 2)
     $color-rgb: map-merge($color-rgb, ($name: $value))
   @return (map-get($color-rgb, 'red') * .2126) + (map-get($color-rgb, 'green') * .7152) + (map-get($color-rgb, 'blue') * .0722)
@@ -242,3 +242,24 @@
   @if type-of($color) != 'color'
     @return $color
   @return lighten($color, $amount)
+
+  // Custom divide function by @mdo from https://github.com/twbs/bootstrap/pull/34245
+// Replaces old slash division deprecated in Dart Sass
+@function divide($dividend, $divisor, $precision: 10)
+  $sign: if($dividend > 0 and $divisor > 0, 1, -1)
+  $dividend: abs($dividend)
+  $divisor: abs($divisor)
+  $quotient: 0
+  $remainder: $dividend
+  @if $dividend == 0
+    @return 0
+  @if $divisor == 0
+    @error "Cannot divide by 0"
+  @if $divisor == 1
+    @return $dividend
+  @while $remainder >= $divisor
+    $quotient: $quotient + 1
+    $remainder: $remainder - $divisor
+  @if $remainder > 0 and $precision > 0
+    $remainder: divide($remainder * 10, $divisor, $precision - 1) * .1
+  @return ($quotient + $remainder) * $sign