gerillass 2.1.0 → 2.2.0

package/scss/utilities/_remify.scss

@@ -1,8 +1,15 @@
 @charset "UTF-8";
 
 @use "sass:math";
+@use "sass:meta";
 
 @function remify($value) {
+  // Only a pixel length converts cleanly. Anything else used to reach the
+  // arithmetic unchecked: a word failed with Sass's own "Undefined operation",
+  // and a unitless number or another unit compiled to `calc(1.5rem / 1px)`.
+  @if meta.type-of($value) != "number" or math.unit($value) != "px" {
+    @error "`#{meta.inspect($value)}` is not a valid $value for `remify`. Pass a pixel length, such as `24px`.";
+  }
   $base-value: 16px;
   $rem-value: math.div($value, $base-value);
   @return $rem-value * 1rem;

package/scss/utilities/_validate-length.scss

@@ -6,6 +6,13 @@
 @use "sass:string";
 
 @function validateLength($value) {
+  // null means "leave this out": `position` skips an edge given null, as its
+  // documentation shows. It is not a mistake to warn about, and the warning
+  // printed empty backticks, because null interpolates to nothing.
+  @if $value == null {
+    @return null;
+  }
+
   $keywords: ("auto", "inherit", "initial", "unset", "revert", 0);
 
   @if list.index($keywords, $value) {

package/scss/utilities/_validate-ratio.scss

@@ -28,6 +28,13 @@
     @return $ratio;
   }
 
+  // var() is resolved by the browser. Checked inline rather than through a
+  // helper function, which tools/build-manifest.js would take for this file's
+  // member in place of validateRatio.
+  @if meta.type-of($ratio) == "string" and string.slice(meta.inspect($ratio), 1, 1) != "\"" and string.index(string.to-lower-case($ratio), "var(") == 1 {
+    @return $ratio;
+  }
+
   @if meta.type-of($ratio) == "string" {
     $separator: null;
     @if string.index($ratio, "/") {
@@ -38,8 +45,24 @@
       @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(string.slice($ratio, 1, $separator - 1));
-    $height: convertToNumber(string.slice($ratio, $separator + 1));
+    $width-text: string.slice($ratio, 1, $separator - 1);
+    $height-text: string.slice($ratio, $separator + 1);
+
+    // Checked here so a malformed ratio is reported as a ratio, rather than as
+    // a bad argument to convertToNumber, which the caller never called.
+    @each $part in ($width-text, $height-text) {
+      @if string.length($part) == 0 {
+        @error "`#{$ratio}` is not a valid ratio. Width and height must both be whole numbers, like `\"16/9\"` or `\"16:9\"`.";
+      }
+      @for $i from 1 through string.length($part) {
+        @if not list.index("0" "1" "2" "3" "4" "5" "6" "7" "8" "9", string.slice($part, $i, $i)) {
+          @error "`#{$ratio}` is not a valid ratio. Width and height must both be whole numbers, like `\"16/9\"` or `\"16:9\"`.";
+        }
+      }
+    }
+
+    $width: convertToNumber($width-text);
+    $height: convertToNumber($height-text);
 
     @if $width == 0 {
       @error "`#{$ratio}` is not a valid ratio. The width must be greater than zero.";