gerillass 2.3.0 → 3.0.0

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/_remove.scss

@@ -13,7 +13,7 @@
     @include breakpoint(only, $value) {
       display: none;
     }
-    @warn "`remove(#{$value})` hides the element only at a viewport exactly that wide, a single pixel. Write `remove(only, #{$value})` for that width, or `remove(min, #{$value})` from it upwards. The one-argument form will be refused in 3.0.0.";
+    @warn "`remove(#{$value})` hides the element only at a viewport exactly that wide, a single pixel. Write `remove(only, #{$value})` for that width, or `remove(min, #{$value})` from it upwards.";
   } @else if list.length($params) == 2 {
     @if list.index("min" "max", list.nth($params, 1)) {
       $mode: list.nth($params, 1);

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

@@ -1,28 +1,46 @@
 @charset "UTF-8";
 
 @use "sass:list";
-@use "sass:map";
-@use "sass:math";
 @use "sass:meta";
-@use "../maps/map-for-directions" as *;
+@use "sass:string";
+@use "../internal/gradient" as *;
 
-@mixin text-gradient($direction, $colors) {
-  $list: ();
-  @for $i from 1 through list.length($colors) {
-    $list: list.append($list, list.nth($colors, $i), comma);
-  }
-  @if map.has-key($map-for-directions, $direction) {
-    background: linear-gradient(
-      map.get($map-for-directions, $direction),
-      $list
-    );
-  } @else if not map.has-key($map-for-directions, $direction) {
-    @if meta.type-of($direction) != "number" or not list.index("deg", math.unit($direction)) {
-      @error "`#{$direction}` is not a valid $direction for `text-gradient`. Pass an angle such as `45deg`, or one of: #{map.keys($map-for-directions)}.";
-    } @else {
-      background: linear-gradient($direction, $list);
+// Fills the letters with a gradient: the gradient mixin's arguments, and
+// background-clip: text. The gradient is built and checked in
+// scss/internal/_gradient.scss.
+//
+// The colours come first since 3.0.0, as in gradient, so a direction, a type
+// and a colour space can all be left out. A call in the old order,
+// `text-gradient("top", (red, blue))`, would otherwise fail on `"top"` not
+// being a colour, so it is caught and answered with the new form.
+//
+// It still writes the background shorthand rather than background-image, so a
+// call in the new order compiles to exactly what the same call compiled to in
+// the old order.
+@mixin text-gradient(
+  $colors,
+  $type: linear,
+  $direction: null,
+  $shape: null,
+  $position: null,
+  $from: null,
+  $in: null,
+  $repeating: false
+) {
+  @if gradientDirection($colors) != null and not list.index("linear" "radial" "conic", string.to-lower-case("#{$type}")) {
+    $written: meta.inspect($type);
+    @if list.separator($type) == "comma" {
+      $written: "(#{$written})";
     }
+    @error "`text-gradient` takes the colours first since 3.0.0. Write `text-gradient(#{$written}, $direction: #{meta.inspect($colors)})`.";
+  }
+  $value: gradientOf($colors, $type, $direction, $shape, $position, $from, $in, $repeating, $member: "text-gradient");
+  // Written without the space first, as the gradient mixin does, for a browser
+  // that does not know `in`.
+  @if $in != null {
+    background: gradientOf($colors, $type, $direction, $shape, $position, $from, null, $repeating, $member: "text-gradient", $warn: false);
   }
+  background: $value;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;

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/_gradient-value.scss

@@ -0,0 +1,24 @@
+@charset "UTF-8";
+
+@use "../internal/gradient" as *;
+
+// The gradient mixin's gradient as a value, for where a mixin cannot write the
+// whole declaration: layered with an image in one background-image, or as a
+// mask-image or border-image. It takes the same arguments and refuses the same
+// input; see scss/internal/_gradient.scss.
+//
+// A function returns one value, so unlike the mixin it cannot write a fallback
+// before a gradient with $in. Write one yourself if an old browser matters:
+// the same call with $in left out, in a declaration before it.
+@function gradientValue(
+  $colors,
+  $type: linear,
+  $direction: null,
+  $shape: null,
+  $position: null,
+  $from: null,
+  $in: null,
+  $repeating: false
+) {
+  @return gradientOf($colors, $type, $direction, $shape, $position, $from, $in, $repeating, $member: "gradientValue");
+}

package/scss/utilities/_index.scss

@@ -8,6 +8,7 @@
 @forward "fluid";
 @forward "font-sizer";
 @forward "font-source";
+@forward "gradient-value";
 @forward "is-color";
 @forward "is-gutter";
 @forward "is-number";

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