gerillass 2.2.1 → 2.3.1

package/scss/library/_text-gradient.scss

@@ -5,8 +5,16 @@
 @use "sass:math";
 @use "sass:meta";
 @use "../maps/map-for-directions" as *;
+@use "../internal/color-stops-problem" as *;
 
 @mixin text-gradient($direction, $colors) {
+  // A stop the browser does not keep drops the whole gradient, and with it the
+  // text, which this mixin makes transparent; see
+  // scss/internal/_color-stops-problem.scss.
+  $problem: colorStopsProblem($colors);
+  @if $problem {
+    @error "`#{meta.inspect($colors)}` is not a valid $colors for `text-gradient`: #{$problem}. A browser drops the whole gradient, and the transparent text with it.";
+  }
   $list: ();
   @for $i from 1 through list.length($colors) {
     $list: list.append($list, list.nth($colors, $i), comma);

package/scss/library/_text-image.scss

@@ -1,31 +1,10 @@
 @charset "UTF-8";
 
-@use "sass:list";
-@use "sass:meta";
-@use "sass:string";
-
-// An image path goes into url(). A var(), url(), image-set() or gradient is
-// already an image, and wrapping it produced url(var(--x)), which loads nothing.
-@function -image($value) {
-  @if -is-css-function($value, "var" "url" "image-set" "linear-gradient" "radial-gradient" "conic-gradient" "repeating-linear-gradient" "repeating-radial-gradient" "repeating-conic-gradient") {
-    @return $value;
-  }
-  @return url($value);
-}
-
-// True for an unquoted call to one of $names, such as var(--x). A quoted string
-// stays text, so `"var(--x)"` is not a call.
-@function -is-css-function($value, $names) {
-  @if meta.type-of($value) != "string" or string.slice(meta.inspect($value), 1, 1) == "\"" {
-    @return false;
-  }
-  $open: string.index($value, "(");
-  @return $open != null and list.index($names, string.to-lower-case(string.slice($value, 1, $open - 1))) != null;
-}
+@use "../internal/image-value" as *;
 
 @mixin text-image($image: null) {
   @if $image {
-    background-image: -image($image);
+    background-image: imageValue($image, "text-image", "$image");
   }
   background-size: cover;
   background-position: center;

package/scss/library/_text-stroke.scss

@@ -1,11 +1,41 @@
 @charset "UTF-8";
 
+@use "sass:meta";
+@use "../internal/color-problem" as *;
+@use "../internal/length-problem" as *;
+
+// Each colour is a declaration of its own, where Chrome 152 kept a CSS-wide
+// keyword and dropped a word that is not a colour, a quoted colour, a length and
+// two colours side by side; see scss/internal/_color-problem.scss. null leaves
+// that declaration out, as it always has.
 @mixin text-stroke(
   $fallback-color: black,
   $color: transparent,
   $stroke-color: black,
   $stroke-width: 1px
 ) {
+  $colors: (
+    "$fallback-color": $fallback-color,
+    "$color": $color,
+    "$stroke-color": $stroke-color,
+  );
+  @each $name, $value in $colors {
+    @if $value != null {
+      $problem: colorProblem($value, $css-wide: true);
+      @if $problem {
+        @error "`#{meta.inspect($value)}` is not a valid #{$name} for `text-stroke`: #{$problem}. A browser drops the declaration. Pass a colour such as `black`, `currentColor`, or a function such as `var(--stroke)`.";
+      }
+    }
+  }
+  // -webkit-text-stroke-width kept a length, 0, thin, medium or thick and a
+  // CSS-wide keyword in Chrome 152, and dropped a percentage and a negative
+  // width.
+  @if $stroke-width != null {
+    $problem: lengthProblem($stroke-width, $percent: false, $negative: false, $keywords: "thin" "medium" "thick", $css-wide: true);
+    @if $problem {
+      @error "`#{meta.inspect($stroke-width)}` is not a valid $stroke-width for `text-stroke`: #{$problem}. A browser drops the declaration.";
+    }
+  }
   color: $fallback-color;
   -webkit-text-fill-color: $color;
   -webkit-text-stroke-color: $stroke-color;

package/scss/library/_triangle.scss

@@ -2,61 +2,10 @@
 
 @use "sass:list";
 @use "sass:meta";
-@use "sass:string";
 @use "../lists/list-of-directions" 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;
-}
+@use "../internal/is-size" as *;
+@use "../internal/color-problem" as *;
+@use "../internal/length-problem" as *;
 
 // The logical directions point along the writing direction rather than a fixed
 // side: inline-end is right in a left-to-right page and left in a right-to-left
@@ -70,11 +19,31 @@ $-logical-directions: ("inline-start", "inline-end", "block-start", "block-end")
     // 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) {
+      @if not isSize($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.";
       }
+      // The sizes land in border-width, which in Chrome 152 dropped a
+      // percentage, a negative width and a unit that is not a length. isSize
+      // above takes any number, since it only guards calc().
+      $problem: lengthProblem($item, $percent: false, $negative: false);
+      @if $problem {
+        @error "`#{meta.inspect($size)}` is not a valid $size for `triangle`: #{$problem}. A browser drops the border widths, so no triangle is drawn.";
+      }
+    }
+    // The colour is checked by colorProblem in scss/internal/, each item of a
+    // list on its own, as isColor used to accept a list. CSS-wide keywords stay
+    // refused: the mixin writes the colour into a border-color shorthand beside
+    // `transparent`, and a CSS-wide keyword is only valid as the whole value, so
+    // `transparent transparent inherit` was rejected in Chrome 152. The check
+    // used to name four functions; system colours such as Canvas and
+    // contrast-color(), which a border keeps, were refused until it was shared.
+    $color-problem: null;
+    @each $item in $color {
+      @if not $color-problem {
+        $color-problem: colorProblem($item);
+      }
     }
-    @if not -is-css-color($color) {
+    @if $color-problem {
       @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: "";

package/scss/utilities/_validate-breakpoint.scss

@@ -2,14 +2,40 @@
 
 @use "sass:list";
 @use "sass:map";
+@use "sass:meta";
+@use "sass:string";
 @use "../maps/map-for-breakpoints" as *;
 
+// Returns the width of a key from $map-for-breakpoints, and anything else as it
+// is: a declaration takes a percentage or a CSS function, and the condition
+// mixins check their own sizes through scss/internal/_condition-width.scss.
+//
+// What it refuses is what cannot be a breakpoint anywhere. A word that is not a
+// key used to come back unchanged, so `breakpoint(min, huge)` compiled to
+// `@media (min-width: huge)`, which never matches, without a word; the keys are
+// case-sensitive, so `"MEDIUM"` did the same. A list used to give its first
+// item, because the loop here returned on its first pass.
+//
+// null comes back as null, as it always did, so `width: validateBreakpoint(null)`
+// still leaves the declaration out. The condition mixins refuse it themselves.
 @function validateBreakpoint($value) {
-  @for $i from 1 through list.length($value) {
-    @if map.has-key($map-for-breakpoints, $value) {
-      @return map.get($map-for-breakpoints, list.nth($value, $i));
-    } @else {
-      @return list.nth($value, $i);
-    }
+  @if $value == null {
+    @return null;
   }
+  @if map.has-key($map-for-breakpoints, $value) {
+    @return map.get($map-for-breakpoints, $value);
+  }
+  @if list.length($value) > 1 {
+    @error "`#{meta.inspect($value)}` is not a breakpoint. Pass one key from $map-for-breakpoints or one length; a range is written with `between`, such as `breakpoint(between, small large)`.";
+  }
+  // A quoted length such as "600px" starts with a digit, a dot or a sign, and a
+  // CSS function holds a parenthesis. Of the words, the sizing keywords stay
+  // accepted, because `max-width: validateBreakpoint(none)` is valid CSS; a
+  // condition mixin still refuses them through conditionWidth. Anything else is
+  // a word that cannot be a breakpoint.
+  $sizing-keywords: "auto" "none" "min-content" "max-content" "fit-content" "stretch" "inherit" "initial" "unset" "revert" "revert-layer";
+  @if meta.type-of($value) == "string" and not list.index($sizing-keywords, string.to-lower-case($value)) and not string.index($value, "(") and not string.index("0123456789.+-", string.slice($value, 1, 1)) {
+    @error "`#{$value}` is not a breakpoint. $map-for-breakpoints has #{map.keys($map-for-breakpoints)}; pass one of those, or a length such as `600px`.";
+  }
+  @return $value;
 }

package/scss/utilities/_validate-scissors.scss

@@ -4,6 +4,7 @@
 @use "sass:math";
 @use "sass:meta";
 @use "../utilities/pixelify" as *;
+@use "../internal/is-condition-value" as *;
 
 @function validateScissors($value) {
   $list: ();
@@ -14,6 +15,12 @@
     @if $item != null and meta.type-of($item) != "number" {
       @error "`#{$item}` is not a valid corner size. Pass a length such as `12px`, or a unitless number which is treated as pixels.";
     }
+    // Each size becomes a polygon() coordinate, which in Chrome 152 kept a
+    // length, a percentage and a negative length, and dropped a unit that is not
+    // a length, such as deg or x, so the clip-path was dropped.
+    @if $item != null and not math.is-unitless($item) and not isConditionValue($item, "length-percentage") {
+      @error "`#{$item}` is not a valid corner size: `#{math.unit($item)}` is not a length unit, and a browser drops the clip-path. Pass a length such as `12px`, or a unitless number which is treated as pixels.";
+    }
     @if list.nth($value, $i) == null {
       $list: list.append($list, 0px, comma);
     } @else if math.is-unitless(list.nth($value, $i)) {