gerillass 2.1.0 → 2.1.1

package/scss/library/_triangle.scss

@@ -1,13 +1,75 @@
 @charset "UTF-8";
 
 @use "sass:list";
-@use "sass:math";
+@use "sass:meta";
+@use "sass:string";
 @use "../lists/list-of-directions" as *;
-@use "../utilities/is-color" as *;
+
+// A size Sass can use inside calc(): a number, a calculation such as calc(),
+// min() or clamp(), or var() and env(), which only the browser can resolve.
+// Anything else would pass silently through calc(): `calc(nonsense * 5)`
+// compiles.
+@function -is-size($value) {
+  @if meta.type-of($value) == "number" or meta.type-of($value) == "calculation" {
+    @return true;
+  }
+  @if meta.type-of($value) == "string" and string.slice(meta.inspect($value), 1, 1) != "\"" {
+    $open: string.index($value, "(");
+    @return $open != null and list.index("var" "env", string.to-lower-case(string.slice($value, 1, $open - 1))) != null;
+  }
+  @return false;
+}
+
+// A value CSS will take as a colour: a Sass colour, currentColor, or a function
+// that returns a colour when the browser resolves it. A list passes when every
+// item does, as it did through isColor.
+//
+// inherit, initial, unset and revert are left out on purpose. The mixin writes
+// the colour into a border-color shorthand beside `transparent`, and a CSS-wide
+// keyword is only valid as the whole value: `transparent transparent inherit`
+// is rejected by the browser. Checked with CSS.supports in Chrome 152.
+//
+// Deliberately looser than isColor, which stays strict because tint and shade
+// pass its result to color.mix, and that needs a real Sass colour. A border
+// colour does not. The functions are named rather than "anything with a
+// parenthesis", which would let url() through as a colour.
+@function -is-css-color($value) {
+  @if list.length($value) > 1 {
+    @each $item in $value {
+      @if not -is-css-color($item) {
+        @return false;
+      }
+    }
+    @return true;
+  }
+  @if meta.type-of($value) == "color" {
+    @return true;
+  }
+  @if meta.type-of($value) == "string" and string.slice(meta.inspect($value), 1, 1) != "\"" {
+    $text: string.to-lower-case($value);
+    @if $text == "currentcolor" {
+      @return true;
+    }
+    $open: string.index($text, "(");
+    @if $open and list.index("var" "color-mix" "light-dark" "env", string.slice($text, 1, $open - 1)) {
+      @return true;
+    }
+  }
+  @return false;
+}
 
 @mixin triangle($direction: "bottom", $color: black, $size: 10px 8px) {
   @if list.index($list-of-directions, $direction) {
-    @if isColor($color){
+    // Halving a size in calc() rather than math.div() keeps var() and clamp()
+    // working instead of emitting `var(--w)/2`, which is not valid CSS.
+    @each $item in $size {
+      @if not -is-size($item) {
+        @error "`#{meta.inspect($size)}` is not a valid $size for `triangle`. Pass one or two lengths, or var(), env() or a calculation in place of either.";
+      }
+    }
+    @if not -is-css-color($color) {
+      @error "`#{meta.inspect($color)}` is not a valid $color for `triangle`. Pass a colour, `currentColor`, or a CSS function such as `var(--accent)`, `color-mix(...)` or `light-dark(...)`.";
+    } @else {
       content: "";
       height: 0;
       width: 0;
@@ -15,25 +77,25 @@
       border-style: solid;
       @if $direction == "top"{
         border-color: transparent transparent $color;
-        border-width: 0 math.div(list.nth($size, 1), 2) if(list.length($size) == 2, list.nth($size, 2), list.nth($size, 1));
+        border-width: 0 calc(list.nth($size, 1) / 2) if(list.length($size) == 2, list.nth($size, 2), list.nth($size, 1));
       } @else if $direction == "top-right" {
         border-color: transparent $color transparent transparent;
         border-width: 0 list.nth($size, 1) list.nth($size, 1) 0;
       } @else if $direction == "right" {
         border-color: transparent transparent transparent $color;
-        border-width: math.div(if(list.length($size) == 2, list.nth($size, 2), list.nth($size, 1)),  2) 0 math.div(if(list.length($size) == 2, list.nth($size, 2), list.nth($size, 1)), 2) list.nth($size, 1);
+        border-width: calc(if(list.length($size) == 2, list.nth($size, 2), list.nth($size, 1)) / 2) 0 calc(if(list.length($size) == 2, list.nth($size, 2), list.nth($size, 1)) / 2) list.nth($size, 1);
       } @else if $direction == "bottom-right" {
         border-color: transparent transparent $color;
         border-width: 0 0 list.nth($size, 1) list.nth($size, 1);
       } @else if $direction == "bottom" {
         border-color: $color transparent transparent;
-        border-width: if(list.length($size) == 2, list.nth($size, 2), list.nth($size, 1)) math.div(list.nth($size, 1), 2) 0;
+        border-width: if(list.length($size) == 2, list.nth($size, 2), list.nth($size, 1)) calc(list.nth($size, 1) / 2) 0;
       } @else if $direction == "bottom-left" {
         border-color: transparent transparent transparent $color;
         border-width: list.nth($size, 1) 0 0 list.nth($size, 1);
       } @else if $direction == "left" {
         border-color: transparent $color transparent transparent;
-        border-width: math.div(if(list.length($size) == 2, list.nth($size, 2), list.nth($size, 1)), 2) list.nth($size, 1) math.div(if(list.length($size) == 2, list.nth($size, 2), list.nth($size, 1)), 2) 0;
+        border-width: calc(if(list.length($size) == 2, list.nth($size, 2), list.nth($size, 1)) / 2) list.nth($size, 1) calc(if(list.length($size) == 2, list.nth($size, 2), list.nth($size, 1)) / 2) 0;
       } @else if $direction == "top-left" {
         border-color: $color transparent transparent;
         border-width: list.nth($size, 1) list.nth($size, 1) 0 0;

package/scss/utilities/_clear-unit.scss

@@ -1,7 +1,11 @@
 @charset "UTF-8";
 
 @use "sass:math";
+@use "sass:meta";
 
 @function clearUnit($value) {
+  @if meta.type-of($value) != "number" {
+    @error "`#{meta.inspect($value)}` is not a valid $value for `clearUnit`. Pass a number, such as `24px`.";
+  }
   @return math.div($value, ($value * 0 + 1));
 }

package/scss/utilities/_convert-to-em.scss

@@ -2,8 +2,14 @@
 
 @use "sass:string";
 @use "sass:math";
+@use "sass:meta";
 
 @function convertToEm($value) {
+  // Only a pixel length converts cleanly. A unitless number or another unit
+  // compiled to `calc(1.5 / 1px)em`, and a word or var() to `var(--x)/16pxem`.
+  @if meta.type-of($value) != "number" or math.unit($value) != "px" {
+    @error "`#{meta.inspect($value)}` is not a valid $value for `convertToEm`. Pass a pixel length, such as `24px`.";
+  }
   $base-value: 16px;
   $rem-value: math.div($value, $base-value);
   @return $rem-value + string.unquote("em");

package/scss/utilities/_convert-to-number.scss

@@ -11,6 +11,21 @@
   }
 
   $string-numerals: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
+
+  // Every character has to be a digit before the parse runs. Otherwise an
+  // empty string or a sign failed with Sass's own "Undefined operation", and a
+  // letter or a space was folded into nonsense such as `40-1`. The empty case
+  // is checked first because `@for $i from 1 through 0` counts down, not zero
+  // times.
+  @if string.length($value) == 0 {
+    @error "`\"\"` is not a valid $value for `convertToNumber`. Pass a string made only of digits, such as `\"42\"`.";
+  }
+  @for $i from 1 through string.length($value) {
+    @if not list.index($string-numerals, string.slice($value, $i, $i)) {
+      @error "`#{meta.inspect($value)}` is not a valid $value for `convertToNumber`. Pass a string made only of digits, such as `\"42\"`.";
+    }
+  }
+
   $calc: 0;
 
   @for $i from 1 through string.length($value) {

package/scss/utilities/_font-sizer.scss

@@ -1,5 +1,19 @@
 @charset "UTF-8";
 
+@use "sass:math";
+@use "sass:meta";
+
 @function fontSizer($size, $time) {
+  @if meta.type-of($size) != "number" {
+    @error "`#{meta.inspect($size)}` is not a valid $size for `fontSizer`. Pass a length, such as `16px`.";
+  }
+  @if meta.type-of($time) != "number" {
+    @error "`#{meta.inspect($time)}` is not a valid $time for `fontSizer`. Pass a multiplier, such as `1.5`.";
+  }
+  // Two units multiply into a unit squared, which Sass writes as
+  // `calc(16px * 1px)`: not a length anywhere in CSS.
+  @if not math.is-unitless($size) and not math.is-unitless($time) {
+    @error "`fontSizer(#{$size}, #{$time})` multiplies two units, which is not a length. Pass the multiplier without a unit, such as `1.5`.";
+  }
   @return $size * $time;
 }

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.";