gerillass 1.3.2 → 1.4.0

package/README.md

@@ -139,7 +139,7 @@ So, feel free to use any tool to support that. My suggestion is Autoprefixer. If
 
 ## Experimenting
 
-Experimentation with Gerillass is easy: If you're processing Sass files on your computer already, [download the Gerillass Sass library](https://github.com/selfishprimate/gerillass/archive/master.zip), include it in your project, and start using it. If not, use [Gerillass Play](https://github.com/selfishprimate/gerillass-play)! Gerillass Play is a Gulp based playground, built for you to get started with [Sass](https://sass-lang.com/) and [Gerillass](https://gerillass.com/) quickly.
+Experimentation with Gerillass is easy: If you're processing Sass files on your computer already, [download the Gerillass Sass library](https://github.com/selfishprimate/gerillass/archive/main.zip), include it in your project, and start using it. If not, use [Gerillass Play](https://github.com/selfishprimate/gerillass-play)! Gerillass Play is a Gulp based playground, built for you to get started with [Sass](https://sass-lang.com/) and [Gerillass](https://gerillass.com/) quickly.
 
 **Important Note**: Don't forget that you must have [Node.js](https://nodejs.org/en/) and [Gulp CLI](https://gulpjs.com/docs/en/getting-started/quick-start) installed on your machine to work with Gerillass Play.
 
@@ -157,7 +157,7 @@ Please read the [contribution details](CONTRIBUTING.md) and feel free to contrib
 
 ## License
 
-Gerillass is licensed under the Apache License, Version 2.0. For more [see the license content](https://github.com/selfishprimate/gerillass/blob/master/LICENSE.md).
+Gerillass is licensed under the Apache License, Version 2.0. For more [see the license content](https://github.com/selfishprimate/gerillass/blob/main/LICENSE.md).
 
 ## Additional Info
 

package/package.json

@@ -6,10 +6,10 @@
   "author": "Halil İbrahim Çakıroğlu",
   "main": "scss/_gerillass.scss",
   "license": "Apache-2.0",
-  "version": "1.3.2",
+  "version": "1.4.0",
   "repository": {
     "type": "git",
-    "url": "https://github.com/selfishprimate/gerillass"
+    "url": "git+https://github.com/selfishprimate/gerillass.git"
   },
   "bugs": {
     "url": "https://github.com/selfihsprimate/gerillass/issues"
@@ -39,18 +39,15 @@
   "scripts": {
     "test": "jest"
   },
-  "dependencies": {
+  "devDependencies": {
     "glob": "^11.0.0",
+    "gulp": "^5.0.1",
+    "gulp-concat": "^2.6.1",
+    "gulp-replace": "^1.1.4",
     "jest": "^30.0.5",
     "sass": "^1.90.0",
-    "sass-loader": "^16.0.3",
     "sass-true": "^9.0.0"
   },
-  "devDependencies": {
-    "gulp": "^5.0.1",
-    "gulp-concat": "^2.6.1",
-    "gulp-replace": "^1.1.4"
-  },
   "resolutions": {
     "braces": ">=3.0.3",
     "micromatch": ">=4.0.8"

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)}.";
+}