gerillass 1.3.3 → 1.4.0

package/package.json

@@ -6,7 +6,7 @@
   "author": "Halil İbrahim Çakıroğlu",
   "main": "scss/_gerillass.scss",
   "license": "Apache-2.0",
-  "version": "1.3.3",
+  "version": "1.4.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/selfishprimate/gerillass.git"

package/scss/_gerillass-prefix.scss

@@ -961,27 +961,7 @@
   &::before {
     content: "";
     display: block;
-    @if not $ratio {
-      padding-top: 56.25%;
-    } @else if $ratio {
-      @if type-of($ratio) == string {
-        $width: null;
-        $height: null;
-        @if str-index($ratio, "/") {
-          $fslash-index: str-index($ratio, "/");
-          $width: __convertToNumber(str-slice($ratio, 1, $fslash-index - 1));
-          $height: __convertToNumber(str-slice($ratio, $fslash-index + 1));
-        } @else if str-index($ratio, ":") {
-          $colon-index: str-index($ratio, ":");
-          $width: __convertToNumber(str-slice($ratio, 1, $colon-index - 1));
-          $height: __convertToNumber(str-slice($ratio, $colon-index + 1));
-        }
-        $calc: math.div($height, $width) * 100;
-        padding-top: #{$calc * 1%};
-      } @else if type-of($ratio) == number {
-        padding-top: math.div(1, $ratio) * 100%;
-      }
-    }
+    padding-top: __validateRatio($ratio);
   }
   & > * {
     width: 100%;
@@ -1115,27 +1095,7 @@
   &::before {
     content: "";
     display: block;
-    @if not $ratio {
-      padding-top: 56.25%;
-    } @else if $ratio {
-      @if type-of($ratio) == string {
-        $width: null;
-        $height: null;
-        @if str-index($ratio, "/") {
-          $fslash-index: str-index($ratio, "/");
-          $width: __convertToNumber(str-slice($ratio, 1, $fslash-index - 1));
-          $height: __convertToNumber(str-slice($ratio, $fslash-index + 1));
-        } @else if str-index($ratio, ":") {
-          $colon-index: str-index($ratio, ":");
-          $width: __convertToNumber(str-slice($ratio, 1, $colon-index - 1));
-          $height: __convertToNumber(str-slice($ratio, $colon-index + 1));
-        }
-        $calc: math.div($height, $width) * 100;
-        padding-top: #{$calc * 1%};
-      } @else if type-of($ratio) == number {
-        padding-top: math.div(1, $ratio) * 100%;
-      }
-    }
+    padding-top: __validateRatio($ratio);
   }
   & > * {
     width: 100%;

package/scss/_gerillass.scss

@@ -38,6 +38,7 @@
 @import "utilities/shorthand-property";
 @import "utilities/validate-breakpoint";
 @import "utilities/validate-length";
+@import "utilities/validate-ratio";
 @import "utilities/validate-scissors";
 
 @import "library/adaptive";

package/scss/library/_ratio-box.scss

@@ -5,27 +5,7 @@
   &::before {
     content: "";
     display: block;
-    @if not $ratio {
-      padding-top: 56.25%;
-    } @else if $ratio {
-      @if type-of($ratio) == string {
-        $width: null;
-        $height: null;
-        @if str-index($ratio, "/") {
-          $fslash-index: str-index($ratio, "/");
-          $width: __convertToNumber(str-slice($ratio, 1, $fslash-index - 1));
-          $height: __convertToNumber(str-slice($ratio, $fslash-index + 1));
-        } @else if str-index($ratio, ":") {
-          $colon-index: str-index($ratio, ":");
-          $width: __convertToNumber(str-slice($ratio, 1, $colon-index - 1));
-          $height: __convertToNumber(str-slice($ratio, $colon-index + 1));
-        }
-        $calc: math.div($height, $width) * 100;
-        padding-top: #{$calc * 1%};
-      } @else if type-of($ratio) == number {
-        padding-top: math.div(1, $ratio) * 100%;
-      }
-    }
+    padding-top: __validateRatio($ratio);
   }
   & > * {
     width: 100%;

package/scss/library/_responsive-video.scss

@@ -5,27 +5,7 @@
   &::before {
     content: "";
     display: block;
-    @if not $ratio {
-      padding-top: 56.25%;
-    } @else if $ratio {
-      @if type-of($ratio) == string {
-        $width: null;
-        $height: null;
-        @if str-index($ratio, "/") {
-          $fslash-index: str-index($ratio, "/");
-          $width: __convertToNumber(str-slice($ratio, 1, $fslash-index - 1));
-          $height: __convertToNumber(str-slice($ratio, $fslash-index + 1));
-        } @else if str-index($ratio, ":") {
-          $colon-index: str-index($ratio, ":");
-          $width: __convertToNumber(str-slice($ratio, 1, $colon-index - 1));
-          $height: __convertToNumber(str-slice($ratio, $colon-index + 1));
-        }
-        $calc: math.div($height, $width) * 100;
-        padding-top: #{$calc * 1%};
-      } @else if type-of($ratio) == number {
-        padding-top: math.div(1, $ratio) * 100%;
-      }
-    }
+    padding-top: __validateRatio($ratio);
   }
   & > * {
     width: 100%;

package/scss/utilities/_validate-ratio.scss

@@ -0,0 +1,42 @@
+@charset "UTF-8";
+
+@function __validateRatio($ratio) {
+  // No argument at all keeps the 16/9 default.
+  @if $ratio == null {
+    @return 56.25%;
+  }
+
+  @if type-of($ratio) == "number" {
+    @if not unitless($ratio) {
+      @error "`#{$ratio}` is not a valid ratio. A numeric ratio must be unitless, like `1.77`.";
+    }
+    @if $ratio <= 0 {
+      @error "`#{$ratio}` is not a valid ratio. A numeric ratio must be greater than zero.";
+    }
+    @return math.div(1, $ratio) * 100%;
+  }
+
+  @if type-of($ratio) == "string" {
+    $separator: null;
+    @if str-index($ratio, "/") {
+      $separator: str-index($ratio, "/");
+    } @else if str-index($ratio, ":") {
+      $separator: str-index($ratio, ":");
+    } @else {
+      @error "`#{$ratio}` is not a valid ratio. A string ratio must separate width and height with `/` or `:`, like `\"16/9\"` or `\"16:9\"`.";
+    }
+
+    $width: __convertToNumber(str-slice($ratio, 1, $separator - 1));
+    $height: __convertToNumber(str-slice($ratio, $separator + 1));
+
+    @if $width == 0 {
+      @error "`#{$ratio}` is not a valid ratio. The width must be greater than zero.";
+    }
+    @return math.div($height, $width) * 100%;
+  }
+
+  // Anything else -- most commonly a list, which is what `16/9` becomes once
+  // Dart Sass 2.0.0 removes slash division. Without this the mixin would emit
+  // no padding-top at all and silently produce a ratio box with no ratio.
+  @error "`#{$ratio}` is not a valid ratio. Pass a string like `\"16/9\"` or `\"16:9\"`, a unitless number like `1.77`, or no argument at all for the 16/9 default. You passed a #{type-of($ratio)}.";
+}