gerillass 2.3.0 → 2.3.1

package/scss/library/_font-face.scss

@@ -2,10 +2,113 @@
 
 @use "sass:list";
 @use "sass:map";
+@use "sass:math";
 @use "sass:meta";
 @use "sass:string";
 @use "../maps/map-for-font-formats" as *;
 @use "../utilities/font-source" as *;
+@use "../internal/is-condition-value" as *;
+@use "../internal/words" as *;
+
+// What a @font-face rule keeps in `font-style` and `font-weight`, measured in
+// Chrome 152 by inserting the rule and reading the descriptor back, in any
+// case. font-style kept normal, italic, auto, oblique, and oblique with one or
+// two angles from -90deg to 90deg (`oblique 10deg 20deg`, `oblique 0.2rad`),
+// and dropped a CSS-wide keyword, `oblique 100deg`, an angle without a unit
+// and a weight such as `400`. font-weight kept normal, bold, auto, a number
+// from 1 to 1000 (`450`, `400.5`, `calc(400 + 100)`) and two numbers as a range
+// in either order, and dropped bolder and lighter, a CSS-wide keyword, 0, 1001,
+// three numbers, and a keyword beside a number or another keyword.
+//
+// A quoted value is split on its spaces and checked word by word, but Sass
+// cannot turn the text of a number into one, so a quoted number is checked for
+// its shape and not its range: "1001" and "oblique 100deg" are let through.
+
+// A quoted or unquoted number, without a unit, for a weight.
+@function -is-weight-number($word) {
+  @if meta.type-of($word) == "number" {
+    @return math.is-unitless($word) and $word >= 1 and $word <= 1000;
+  }
+  @if meta.type-of($word) != "string" {
+    @return false;
+  }
+  $text: string.unquote($word);
+  $nonzero: false;
+  @for $i from 1 through string.length($text) {
+    $character: string.slice($text, $i, $i);
+    @if not string.index("0123456789.", $character) {
+      @return false;
+    }
+    @if string.index("123456789", $character) {
+      $nonzero: true;
+    }
+  }
+  @return $nonzero;
+}
+
+@function -weight-problem($weight) {
+  @if $weight == null or meta.type-of($weight) == "calculation" {
+    @return null;
+  }
+  $words: wordsOf($weight);
+  @if list.length($words) > 2 {
+    @return "a weight is one value, or two numbers for a range such as `100 900`";
+  }
+  @if list.length($words) == 1 {
+    $word: list.nth($words, 1);
+    @if meta.type-of($word) == "string" and list.index("normal" "bold" "auto", string.to-lower-case(string.unquote($word))) {
+      @return null;
+    }
+    @if -is-weight-number($word) {
+      @return null;
+    }
+    @return "a weight is normal, bold, auto or a number from 1 to 1000; bolder, lighter and the CSS-wide keywords are dropped";
+  }
+  @each $word in $words {
+    @if not -is-weight-number($word) {
+      @return "a range is two numbers from 1 to 1000, such as `100 900`";
+    }
+  }
+  @return null;
+}
+
+@function -style-problem($style) {
+  @if $style == null {
+    @return null;
+  }
+  $words: wordsOf($style);
+  $first: list.nth($words, 1);
+  $keyword: null;
+  @if meta.type-of($first) == "string" {
+    $keyword: string.to-lower-case(string.unquote($first));
+  }
+  @if list.index("normal" "italic" "auto", $keyword) {
+    @if list.length($words) > 1 {
+      @return "`#{$keyword}` takes nothing after it; only oblique takes angles";
+    }
+    @return null;
+  }
+  @if $keyword != "oblique" {
+    @return "a style is normal, italic, oblique or auto; the CSS-wide keywords are dropped";
+  }
+  @if list.length($words) > 3 {
+    @return "oblique takes at most two angles";
+  }
+  @for $i from 2 through list.length($words) {
+    $angle: list.nth($words, $i);
+    @if meta.type-of($angle) == "number" {
+      @if not isConditionValue($angle, "angle") {
+        @return "`#{$angle}` is not an angle; pass one such as `10deg`";
+      }
+      @if $angle < -90deg or $angle > 90deg {
+        @return "an oblique angle is between -90deg and 90deg";
+      }
+    } @else if not isConditionValue($angle, "angle") {
+      @return "`#{$angle}` is not an angle; pass one such as `10deg`";
+    }
+  }
+  @return null;
+}
 
 @mixin font-face(
   $font-family,
@@ -51,7 +154,10 @@
       @error "`#{meta.inspect($font-weight)}` is not a valid $font-weight for `font-face`. A custom property cannot supply it, because a @font-face rule drops var() in a descriptor. Pass the weight itself, such as `700`, or a range such as `160 700`.";
     }
 
-    @if list.index(100 200 300 400 500 600 700 800 900, $font-style) {
+    // A number in $font-style is a weight. Only the hundreds used to be read
+    // that way, so `font-face("I", "/f/i", 450)` wrote `font-style: 450`, which
+    // a @font-face rule drops; any weight a rule keeps, 1 to 1000, is read so.
+    @if meta.type-of($font-style) == "number" and math.is-unitless($font-style) and $font-style >= 1 and $font-style <= 1000 {
       $font-weight: $font-style;
       $font-style: normal;
     } @else if not
@@ -71,6 +177,16 @@
       }
     }
 
+    // Checked after the reinterpretation above, on the values that are written.
+    $problem: -style-problem($font-style);
+    @if $problem {
+      @error "`#{meta.inspect($font-style)}` is not a valid $font-style for `font-face`: #{$problem}. A @font-face rule drops the descriptor.";
+    }
+    $problem: -weight-problem($font-weight);
+    @if $problem {
+      @error "`#{meta.inspect($font-weight)}` is not a valid $font-weight for `font-face`: #{$problem}. A @font-face rule drops the descriptor.";
+    }
+
     // $font-display comes last so the reinterpretation of $font-style above is
     // left alone, and it is written only when given: the browser's default is
     // what a call without it has always had. Measured in Chrome 152, a

package/scss/library/_line-clamp.scss

@@ -1,19 +1,8 @@
 @charset "UTF-8";
 
-@use "sass:list";
 @use "sass:math";
 @use "sass:meta";
-@use "sass:string";
-
-// 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/is-css-function" as *;
 
 // Truncates text after a number of lines. `ellipsis` does one line; this does
 // several, and needs five declarations rather than one because -webkit-line-clamp
@@ -33,7 +22,7 @@
 // what actually does the work today.
 @mixin line-clamp($lines: 3) {
   // var() is resolved by the browser, so only a literal count is checked.
-  @if $lines != none and not -is-css-function($lines, "var" "env") {
+  @if $lines != none and not isCssFunction($lines, "var" "env") {
     @if meta.type-of($lines) != "number" or not math.is-unitless($lines) {
       @error "`#{$lines}` is not a valid $lines for `line-clamp`. Pass a whole number of lines, or `none` to undo a clamp.";
     }

package/scss/library/_linear-gradient.scss

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

package/scss/library/_only.scss

@@ -3,6 +3,7 @@
 @use "sass:list";
 @use "sass:meta";
 @use "sass:string";
+@use "../internal/sibling-index" as *;
 
 @mixin only($params...) {
   @if list.length($params) == 0 {
@@ -10,6 +11,12 @@
   } @else if list.length($params) == 1 {
     $value: list.nth($params, 1);
     @if meta.type-of($value) == "number" {
+      // A unit or a fraction makes a selector the browser drops, and 0 matches
+      // nothing; see scss/internal/_sibling-index.scss.
+      $problem: siblingIndexProblem($value, "only");
+      @if $problem {
+        @error "`#{meta.inspect($value)}` is not a valid position for `only`: #{$problem}.";
+      }
       @if $value < 0 {
         &:nth-last-of-type(#{$value * -1}) {
           @content;
@@ -46,6 +53,15 @@
       @error "`#{$value}` is not a valid argument for `only`. Pass a positive or negative number, one of `first`, `last`, `odd`, `even`, or a selector such as `.foo`.";
     }
   } @else if list.length($params) > 1 {
+    // Every item is checked first. A word used to fail with Sass's own
+    // `Undefined operation`, and one bad position emptied the whole selector
+    // list, taking the good positions with it.
+    @each $item in $params {
+      $problem: siblingIndexProblem($item, "only", true);
+      @if $problem {
+        @error "`#{meta.inspect($item)}` is not a valid position for `only`: #{$problem}.";
+      }
+    }
     $list: ();
     @for $i from 1 through list.length($params) {
       $list: list.append($list, if(list.nth($params, $i) < 0, string.unquote("&:nth-last-of-type(#{list.nth($params, $i) * -1})"), string.unquote("&:nth-of-type(#{list.nth($params, $i)})")), comma);

package/scss/library/_position.scss

@@ -2,8 +2,10 @@
 
 @use "sass:list";
 @use "sass:meta";
+@use "sass:string";
 @use "../utilities/shorthand-property" as *;
-@use "../utilities/validate-length" as *;
+@use "../internal/keyword-value" as *;
+@use "../internal/length-problem" as *;
 
 // Sets position and its four offsets in shorthand order: top, right, bottom,
 // left, as `margin` and `padding` take them.
@@ -24,17 +26,46 @@
   @if $logical != true and $logical != false and $logical != null {
     @error "`#{meta.inspect($logical)}` is not a valid $logical for `position`. Pass true for offsets that follow the writing direction, or false for top, right, bottom and left.";
   }
+  // Measured in Chrome 152, `position` kept the five keywords in any case, the
+  // CSS-wide keywords and var(), and dropped anything else, a quoted keyword
+  // included. A vendor keyword is let through: Chrome drops `-webkit-sticky`,
+  // which Safari uses. null leaves position out, as it always has.
+  $problem: keywordProblem($position, "static" "relative" "absolute" "fixed" "sticky", $vendor: true);
+  @if $problem {
+    @error "`#{meta.inspect($position)}` is not a valid $position for `position`: #{$problem}. A browser drops the declaration.";
+  }
 
   $offsets: shorthandProperty($offsets);
+  // Each offset is a declaration of its own. Measured in Chrome 152, top, left
+  // and the inset-* properties kept a length, a negative length, a percentage,
+  // 0, auto and a CSS-wide keyword in any case, var(), maths functions, anchor()
+  // and anchor-size(), and dropped any other word, a unitless number, a unit
+  // that is not a length, a colour, an image and a quoted length. This used to
+  // go through validateLength, which only warns, and warned about working
+  // values such as AUTO and revert-layer while saying nothing about 10deg or
+  // url(); validateLength itself is unchanged, for callers who want a warning.
+  @each $value in $offsets {
+    @if $value != null {
+      $problem: lengthProblem($value, $keywords: ("auto",), $functions: "anchor" "anchor-size", $css-wide: true);
+      @if $problem {
+        @error "`#{meta.inspect($value)}` is not a valid offset for `position`: #{$problem}. A browser drops the declaration.";
+      }
+    }
+  }
   $edges: top right bottom left;
   @if $logical {
     $edges: inset-block-start inset-inline-end inset-block-end inset-inline-start;
   }
 
-  position: $position;
+  // Written without quotes, since `position: "sticky"` was dropped.
+  @if meta.type-of($position) == "string" {
+    position: string.unquote($position);
+  } @else {
+    position: $position;
+  }
   @for $i from 1 through 4 {
     $value: list.nth($offsets, $i);
-    @if validateLength($value) {
+    @if $value != null {
       #{list.nth($edges, $i)}: $value;
     }
   }

package/scss/library/_radial-gradient.scss

@@ -5,6 +5,148 @@
 @use "sass:meta";
 @use "sass:string";
 @use "../maps/map-for-positions" as *;
+@use "../internal/is-condition-value" as *;
+@use "../internal/words" as *;
+@use "../internal/color-stops-problem" as *;
+
+// The mixin writes `radial-gradient($shape $position, ...)`, so $shape carries
+// the shape and may carry a size, and a $position that is not a key from
+// $map-for-positions carries a size, `at` and a position, or both. Each is
+// checked against what Chrome 152 kept in `background-image`, in any case:
+//
+// - kept: circle, ellipse, an extent keyword such as closest-side, a length
+//   (`circle 10px`, `10px`), two lengths or percentages (`ellipse 10% 20%`),
+//   `at` followed by one or two keywords from left, center, right, top and
+//   bottom or up to four keywords and lengths (`at left 10px top 20px`), and
+//   var() or calc() anywhere;
+// - dropped: a word outside those (`huge`, `auto`, `inherit`), a percentage or a
+//   negative length as a circle's size (`circle 10%`, `circle -10px`), the
+//   shape twice (`circle circle`), four keywords after `at`, and the logical
+//   keywords `at x-start` and `at block-start`.
+//
+// It checks each part on its own, so a shape in one argument and a size in the
+// other that do not fit together, such as `ellipse` with a single length, are
+// not caught.
+$-extents: "closest-side" "closest-corner" "farthest-side" "farthest-corner";
+$-places: "left" "center" "right" "top" "bottom";
+
+// "extent", "length" or "percentage" for a word that can size the gradient,
+// or null.
+@function -size-kind($word) {
+  $lower: string.to-lower-case("#{$word}");
+  @if list.index($-extents, $lower) {
+    @return "extent";
+  }
+  @if string.index($lower, "-") == 1 {
+    @return null;
+  }
+  @if isConditionValue($word, "length") {
+    @return "length";
+  }
+  @if isConditionValue($word, "length-percentage") {
+    @return "percentage";
+  }
+  @return null;
+}
+
+// Checks the size words before `at`. $shape is the shape named, or null.
+@function -size-problem($words, $shape) {
+  $extents: 0;
+  $lengths: 0;
+  $percentages: 0;
+  @each $word in $words {
+    $kind: -size-kind($word);
+    @if $kind == null {
+      @return "`#{$word}` is not a shape, an extent keyword such as `closest-side`, or a length";
+    } @else if $kind == "extent" {
+      $extents: $extents + 1;
+    } @else if $kind == "length" {
+      $lengths: $lengths + 1;
+    } @else {
+      $percentages: $percentages + 1;
+    }
+  }
+  $sizes: $lengths + $percentages;
+  @if $extents > 1 or ($extents == 1 and $sizes > 0) {
+    @return "it gives the size twice";
+  }
+  @if $sizes > 2 {
+    @return "a size is one length or two";
+  }
+  @if $sizes == 1 and ($percentages == 1 or $shape == "ellipse") {
+    @return "one size is a circle's radius, which is a length and not a percentage";
+  }
+  @if $sizes == 2 and $shape == "circle" {
+    @return "a circle takes one length, not two";
+  }
+  @return null;
+}
+
+@function -shape-problem($shape) {
+  @if string.index($shape, "(") {
+    @return null;
+  }
+  $named: null;
+  $sizes: ();
+  @each $word in wordsOf($shape) {
+    $lower: string.to-lower-case($word);
+    @if list.index("circle" "ellipse", $lower) {
+      @if $named {
+        @return "it names the shape twice";
+      }
+      $named: $lower;
+    } @else {
+      $sizes: list.append($sizes, $word);
+    }
+  }
+  @return -size-problem($sizes, $named);
+}
+
+@function -position-problem($position) {
+  @if map.has-key($map-for-positions, $position) or string.index($position, "(") {
+    @return null;
+  }
+  $sizes: ();
+  $places: ();
+  $after-at: false;
+  @each $word in wordsOf($position) {
+    $lower: string.to-lower-case($word);
+    @if $lower == "at" {
+      @if $after-at {
+        @return "it has `at` twice";
+      }
+      $after-at: true;
+    } @else if $after-at {
+      $places: list.append($places, $word);
+    } @else if list.index("circle" "ellipse", $lower) {
+      @return "the shape goes in $shape, not $position";
+    } @else {
+      $sizes: list.append($sizes, $word);
+    }
+  }
+  $problem: -size-problem($sizes, null);
+  @if $problem {
+    @return "#{$problem}. Pass a position name such as `center` or `top-left`, an extent keyword such as `closest-side`, or `at` followed by a position, such as `at 30% 40%`";
+  }
+  @if $after-at and list.length($places) == 0 {
+    @return "`at` needs a position after it, such as `at center`";
+  }
+  @if list.length($places) > 4 {
+    @return "a position takes at most four values";
+  }
+  $keywords: 0;
+  @each $word in $places {
+    @if list.index($-places, string.to-lower-case($word)) {
+      $keywords: $keywords + 1;
+    } @else if not isConditionValue($word, "length-percentage") {
+      @return "`#{$word}` is not a position; after `at` pass left, center, right, top, bottom or a length";
+    }
+  }
+  @if $keywords > 2 and $keywords == list.length($places) {
+    @return "a position of keywords alone takes at most two, such as `at top left`";
+  }
+  @return null;
+}
 
 @mixin radial-gradient($shape, $position, $colors) {
   @if meta.type-of($shape) != "string" {
@@ -16,6 +158,18 @@
   $list: ();
   $shape: string.unquote($shape);
   $position: string.unquote($position);
+  $problem: -shape-problem($shape);
+  @if $problem {
+    @error "`#{$shape}` is not a valid $shape for `radial-gradient`: #{$problem}. A browser drops the whole gradient.";
+  }
+  $problem: -position-problem($position);
+  @if $problem {
+    @error "`#{$position}` is not a valid $position for `radial-gradient`: #{$problem}. A browser drops the whole gradient.";
+  }
+  $problem: colorStopsProblem($colors);
+  @if $problem {
+    @error "`#{meta.inspect($colors)}` is not a valid $colors for `radial-gradient`: #{$problem}. A browser drops the whole gradient.";
+  }
   @for $i from 1 through list.length($colors) {
     $list: list.append($list, list.nth($colors, $i), comma);
   }

package/scss/library/_resizable.scss

@@ -1,7 +1,34 @@
 @charset "UTF-8";
 
+@use "sass:meta";
+@use "sass:string";
+@use "../internal/keyword-value" as *;
+
+// Measured in Chrome 152, `resize` kept none, both, horizontal, vertical, block,
+// inline and auto, and `overflow` one or two of visible, hidden, clip, scroll,
+// auto and overlay, all in any case, with the CSS-wide keywords on their own and
+// var(). Both dropped a quoted keyword, three overflow values, and a CSS-wide
+// keyword beside another, such as `overflow: inherit auto`. null leaves the
+// declaration out, as it always has.
 @mixin resizable($direction: both, $overflow: auto) {
-  resize: $direction;
-  overflow: $overflow;
+  $problem: keywordProblem($direction, "none" "both" "horizontal" "vertical" "block" "inline" "auto");
+  @if $problem {
+    @error "`#{meta.inspect($direction)}` is not a valid $direction for `resizable`: #{$problem}. A browser drops the declaration.";
+  }
+  $problem: keywordProblem($overflow, "visible" "hidden" "clip" "scroll" "auto" "overlay", 2);
+  @if $problem {
+    @error "`#{meta.inspect($overflow)}` is not a valid $overflow for `resizable`: #{$problem}. A browser drops the declaration.";
+  }
+  // Written without quotes, since `resize: "both"` was dropped.
+  @if meta.type-of($direction) == "string" {
+    resize: string.unquote($direction);
+  } @else {
+    resize: $direction;
+  }
+  @if meta.type-of($overflow) == "string" {
+    overflow: string.unquote($overflow);
+  } @else {
+    overflow: $overflow;
+  }
   max-width: 100%;
 }

package/scss/library/_screen-agent.scss

@@ -1,30 +1,11 @@
 @charset "UTF-8";
 
-@use "sass:list";
 @use "sass:meta";
-@use "sass:string";
-
-// Returns the first value in $value that holds var(), looking inside lists and
-// calculations, or null. Custom properties are not evaluated in a @media or
-// @container condition, so a rule built from one never applies, and nothing
-// warns. Measured in Chrome 152: `(min-width: var(--wide))` did not match with
-// `--wide: 200px`, while `(min-width: 200px)` did.
-@function -custom-property-in($value) {
-  @each $item in $value {
-    @if meta.type-of($item) == "list" or meta.type-of($item) == "arglist" {
-      $found: -custom-property-in($item);
-      @if $found {
-        @return $found;
-      }
-    } @else if string.index(meta.inspect($item), "var(") {
-      @return $item;
-    }
-  }
-  @return null;
-}
+@use "../internal/custom-property-in" as *;
+@use "../internal/is-condition-value" as *;
 
 @mixin screen-agent($resolution) {
-  $custom-property: -custom-property-in($resolution);
+  $custom-property: customPropertyIn($resolution);
   @if $custom-property {
     @error "`#{$custom-property}` cannot be used as a resolution: custom properties are not evaluated in a @media condition, so the rule would never apply. Pass `1x`, `2x`, `3x` or a resolution such as `2dppx`.";
   }
@@ -41,6 +22,11 @@
       @content;
     }
   } @else {
+    // Measured in Chrome 152, `(min-resolution: huge)`, `(min-resolution: 2)`,
+    // `(min-resolution: 10px)` and `(min-resolution: -1dppx)` never match.
+    @if not isConditionValue($resolution, "resolution") {
+      @error "`#{meta.inspect($resolution)}` is not a valid $resolution for `screen-agent`: `(min-resolution: #{meta.inspect($resolution)})` would never match. Pass `1x`, `2x`, `3x`, or a resolution such as `2dppx`, `192dpi` or `38dpcm`.";
+    }
     @media (min-resolution: #{$resolution}) {
       @content;
     }

package/scss/library/_sizer.scss

@@ -1,6 +1,15 @@
 @charset "UTF-8";
 
+@use "sass:meta";
+@use "../internal/length-problem" as *;
+
 @mixin sizer($width, $height: $width) {
+  @each $name, $value in ("$width": $width, "$height": $height) {
+    $problem: sizeProblem($value);
+    @if $problem {
+      @error "`#{meta.inspect($value)}` is not a valid #{$name} for `sizer`: #{$problem}. A browser drops the declaration.";
+    }
+  }
   width: $width;
   height: $height;
 }

package/scss/library/_sprite.scss

@@ -3,6 +3,55 @@
 @use "sass:list";
 @use "sass:meta";
 @use "sass:string";
+@use "../internal/length-problem" as *;
+
+$-places: "left" "center" "right" "top" "bottom";
+
+// What is wrong with $position as a background-position, or null. Measured in
+// Chrome 152, background-position kept one or two lengths, percentages or
+// place keywords, keywords with offsets such as `left 10px top 5px`, var(),
+// maths functions and a CSS-wide keyword alone. It dropped a unitless number
+// other than 0, a unit that is not a length, any other word or colour, an image,
+// and three or four lengths with no keyword. Interpolation, as in
+// `#{$x}px #{$y}px`, gives the same value as strings, so each part is read.
+@function -position-problem($position) {
+  $parts: $position;
+  @if meta.type-of($position) == "string" and string.slice(meta.inspect($position), 1, 1) != "\"" and not string.index($position, "(") and string.index($position, " ") {
+    $parts: ();
+    $text: $position;
+    $at: string.index($text, " ");
+    @while $at {
+      @if $at > 1 {
+        $parts: list.append($parts, string.unquote(string.slice($text, 1, $at - 1)));
+      }
+      $text: string.slice($text, $at + 1);
+      $at: string.index($text, " ");
+    }
+    $parts: list.append($parts, string.unquote($text));
+  } @else if meta.type-of($position) != "list" {
+    $parts: ($position,);
+  }
+  @if list.length($parts) > 4 {
+    @return "a background position takes at most four values";
+  }
+  $keywords: 0;
+  @each $part in $parts {
+    @if meta.type-of($part) == "string" and list.index($-places, string.to-lower-case($part)) {
+      $keywords: $keywords + 1;
+    } @else {
+      $problem: lengthProblem($part, $css-wide: list.length($parts) == 1);
+      @if $problem == "it is not a length" {
+        @return "`#{meta.inspect($part)}` is not a length or one of left, center, right, top or bottom";
+      } @else if $problem {
+        @return "in `#{meta.inspect($part)}`, #{$problem}";
+      }
+    }
+  }
+  @if list.length($parts) > 2 and $keywords == 0 {
+    @return "three or four values need place keywords, such as `left 10px top 5px`";
+  }
+  @return null;
+}
 
 @mixin sprite($params...) {
   @if list.length($params) == 1 {
@@ -19,11 +68,27 @@
       }
     } @else {
       $position: list.nth($params, 1);
+      $problem: -position-problem($position);
+      @if $problem {
+        @error "`#{meta.inspect($position)}` is not a valid position for `sprite`: #{$problem}. A browser drops the declaration.";
+      }
       background-position: $position;
     }
   } @else if list.length($params) == 2 {
     $image-url: list.nth($params, 1);
     $position: list.nth($params, 2);
+    // The one-argument form checks its path; this one did not, so a list was
+    // written into url(), which a browser drops, and a number asked for a file
+    // of that name. Measured in Chrome 152: `url(16 9)` was dropped.
+    @if meta.type-of($image-url) != "string" {
+      @error "`#{meta.inspect($image-url)}` is not a valid image path for `sprite`: with two arguments the first is one path as a string, and a browser drops a list in `url()`. Pass a path such as `\"/img/sprite.png\"`, then the position.";
+    }
+    @if $position != null {
+      $problem: -position-problem($position);
+      @if $problem {
+        @error "`#{meta.inspect($position)}` is not a valid position for `sprite`: #{$problem}. A browser drops the declaration.";
+      }
+    }
     display: inline-block;
     background-image: url($image-url);
     background-position: $position;

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);