gerillass 2.3.0 → 3.0.0

package/scss/library/_background-dots.scss

@@ -3,40 +3,11 @@
 @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(string.unquote($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;
-}
-
-// 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;
-}
+@use "../internal/is-size" as *;
+@use "../internal/image-value" as *;
+@use "../internal/color-problem" as *;
+@use "../internal/length-problem" as *;
+@use "../internal/gradient" as *;
 
 @mixin background-dots(
   $color: null,
@@ -49,40 +20,62 @@
   // the signature lets $size be checked first, and doing the arithmetic in
   // calc() lets var() and clamp() through: Sass simplifies calc() on plain
   // numbers back to a number, so a call with lengths emits the same CSS.
-  @if not -is-size($size) {
+  @if not isSize($size) {
     @error "`#{meta.inspect($size)}` is not a valid $size for `background-dots`. Pass a length, or var(), env() or a calculation such as `clamp()`.";
   }
   @if $gutter == null {
     $gutter: calc($size * 5);
   }
-  @if not -is-size($gutter) {
+  @if not isSize($gutter) {
     @error "`#{meta.inspect($gutter)}` is not a valid $gutter for `background-dots`. Pass a length, or var(), env() or a calculation such as `calc()`.";
   }
+  // isSize takes any number, since it only guards the arithmetic. The size is a
+  // colour stop's position and the gutter a background-size, which in Chrome
+  // 152 kept a percentage and dropped a negative length, a unitless number
+  // other than 0 and a unit that is not a length, so no dots were drawn.
+  @each $name, $value in ("$size": $size, "$gutter": $gutter) {
+    $problem: lengthProblem($value, $negative: false);
+    @if $problem {
+      @error "`#{meta.inspect($value)}` is not a valid #{$name} for `background-dots`: #{$problem}. A browser drops the pattern.";
+    }
+  }
   @if $image != null and meta.type-of($image) != "string" {
     @error "`#{$image}` is not a valid $image for `background-dots`. Pass an image path as a string.";
   }
   @if $diagonal != true and $diagonal != false {
     @error "`#{$diagonal}` is not a valid $diagonal for `background-dots`. Pass `true` or `false`.";
   }
+  // Each colour goes into a radial gradient as `radial-gradient($color $size,
+  // ...)`. Measured in Chrome 152, a word or a quoted colour there drops the
+  // gradient, and a length is read as the gradient's size instead, so neither
+  // draws the dots meant; see scss/internal/_color-problem.scss.
+  @if $color != null {
+    @each $item in $color {
+      $problem: colorProblem($item);
+      @if $problem {
+        @error "`#{meta.inspect($item)}` is not a valid colour in $color for `background-dots`: #{$problem}. Pass one colour, or two for the diagonal variant, such as `red` or `var(--dot)`.";
+      }
+    }
+  }
   @if not $color {
     $color: rgba(0, 0, 0, 0.1);
     @if $diagonal == true {
-      background-image: radial-gradient($color $size, transparent 0),
-        radial-gradient($color $size, transparent 0);
+      background-image: gradientOf(($color $size, transparent 0), radial, $member: "background-dots"),
+        gradientOf(($color $size, transparent 0), radial, $member: "background-dots");
       background-position: calc($gutter / 2) calc($gutter / 2),
         calc($gutter * 2) calc($gutter * 2);
     } @else if $diagonal == false {
-      background-image: radial-gradient($color $size, transparent 0);
+      background-image: gradientOf(($color $size, transparent 0), radial, $member: "background-dots");
       background-position: calc($gutter / 2) calc($gutter / 2);
     }
   } @else if $color {
     @if $diagonal == true {
-      background-image: radial-gradient(list.nth($color, 1) $size, transparent 0),
-        radial-gradient(list.nth($color, list.length($color)) $size, transparent 0);
+      background-image: gradientOf((list.nth($color, 1) $size, transparent 0), radial, $member: "background-dots"),
+        gradientOf((list.nth($color, list.length($color)) $size, transparent 0), radial, $member: "background-dots");
       background-position: calc($gutter / 2) calc($gutter / 2),
         calc($gutter * 2) calc($gutter * 2);
     } @else if $diagonal == false {
-      background-image: radial-gradient(list.nth($color, 1) $size, transparent 0);
+      background-image: gradientOf((list.nth($color, 1) $size, transparent 0), radial, $member: "background-dots");
       background-position: calc($gutter / 2) calc($gutter / 2);
       @if list.length($color) > 1 {
         @error "Please do not pass more than one argument when you disable 'diagonal' property! Simply remove the argument(s) after '#{list.nth($color, 1)}' to resolve the problem.";
@@ -101,7 +94,7 @@
       height: 100%;
       top: 0;
       left: 0;
-      background-image: -image($image);
+      background-image: imageValue($image, "background-dots", "$image", $unquote: true);
       background-repeat: no-repeat;
       background-position: center;
       background-size: cover;

package/scss/library/_background-image.scss

@@ -4,28 +4,12 @@
 @use "sass:map";
 @use "sass:math";
 @use "sass:meta";
-@use "sass:string";
-@use "../library/linear-gradient" as *;
 @use "../maps/map-for-directions" as *;
-
-// 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 *;
+@use "../internal/color-problem" as *;
+@use "../internal/color-stops-problem" as *;
+@use "../internal/gradient" as *;
+@use "../internal/is-css-function" as *;
 
 @mixin background-image(
   $image-url: null,
@@ -35,41 +19,48 @@
   // The direction used to be read only when there were two or more colours,
   // so with one colour any value was dropped without a word, a typo included.
   // Check it first, against what the gradient branches accept.
-  @if $filter-direction and not map.has-key($map-for-directions, $filter-direction) and not (meta.type-of($filter-direction) == "number" and math.unit($filter-direction) == "deg") {
-    @error "`#{$filter-direction}` is not a valid $filter-direction. Pass an angle such as `45deg`, or one of: #{map.keys($map-for-directions)}.";
+  @if $filter-direction and gradientDirection($filter-direction) == null {
+    @error "`#{meta.inspect($filter-direction)}` is not a valid $filter-direction for `background-image`. Pass an angle such as `45deg` or `0.25turn`, `\"to top right\"`, or one of: #{map.keys($map-for-directions)}.";
+  }
+  // One filter colour is written into `linear-gradient(to top, $c, $c)` over an
+  // image, or into `background` when there is none; several are the stops of a
+  // gradient. Measured in Chrome 152, a word or a quoted colour drops either, and
+  // a length in `background` is read as a position, so none of them is a filter.
+  // CSS-wide keywords are refused, since they drop the gradient.
+  // With no $image-url the image sits in the markup and the filter is written
+  // as an ::after layer's `background`, where an image is as valid as a colour.
+  // Measured in Chrome 152 over an image in a style attribute, a
+  // linear-gradient drew a scrim, a radial-gradient a vignette and url() a
+  // pattern, so those are accepted there. `inherit` drew the same image over
+  // itself and `10px` an empty layer, so they stay refused. With an image the
+  // filter goes inside linear-gradient(), where a gradient dropped the whole
+  // declaration, image included.
+  // paint(), image() and -webkit-cross-fade() were kept as images in Chrome 152;
+  // cross-fade(), element() and -moz-element() are in the specification or other
+  // engines and are let through on the same grounds.
+  $overlay-image: not $image-url and isCssFunction($filter-color, "url" "image-set" "var" "linear-gradient" "radial-gradient" "conic-gradient" "repeating-linear-gradient" "repeating-radial-gradient" "repeating-conic-gradient" "paint" "image" "cross-fade" "-webkit-cross-fade" "element" "-moz-element");
+  @if $filter-color != null and not $overlay-image {
+    $problem: null;
+    @if list.length($filter-color) == 1 {
+      $problem: colorProblem($filter-color);
+    } @else {
+      $problem: colorStopsProblem($filter-color);
+    }
+    @if $problem {
+      @error "`#{meta.inspect($filter-color)}` is not a valid $filter-color for `background-image`: #{$problem}. Pass a colour, such as `rgba(0, 0, 0, 0.5)`, or several for a gradient.";
+    }
   }
   @if $image-url {
     @if $filter-color {
       @if list.length($filter-color) == 1 {
         background-image: linear-gradient(to top, $filter-color, $filter-color),
-          -image($image-url);
+          imageValue($image-url, "background-image", "$image-url");
       } @else if list.length($filter-color) > 1 {
-        $color-list: ();
-        @for $i from 1 through list.length($filter-color) {
-          $color-list: list.append($color-list, list.nth($filter-color, $i), comma);
-        }
-        @if $filter-direction {
-          @if map.has-key($map-for-directions, $filter-direction) {
-            background-image: linear-gradient(
-                map.get($map-for-directions, $filter-direction),
-                $color-list
-              ),
-              -image($image-url);
-          } @else {
-            @if meta.type-of($filter-direction) == "number" and list.index("deg", math.unit($filter-direction)) {
-              background-image: linear-gradient($filter-direction, $color-list),
-                -image($image-url);
-            } @else {
-              @error "`#{$filter-direction}` is not a valid $filter-direction. Pass an angle such as `45deg`, or one of: #{map.keys($map-for-directions)}.";
-            }
-          }
-        } @else {
-          background-image: linear-gradient(to top, $color-list),
-            -image($image-url);
-        }
+        background-image: gradientOf($filter-color, linear, $filter-direction or "top", $member: "background-image", $colors-name: "$filter-color", $direction-name: "$filter-direction"),
+          imageValue($image-url, "background-image", "$image-url");
       }
     } @else {
-      background-image: -image($image-url);
+      background-image: imageValue($image-url, "background-image", "$image-url");
     }
   } @else {
     position: relative;
@@ -84,10 +75,7 @@
       @if list.length($filter-color) == 1 {
         background: $filter-color;
       } @else if list.length($filter-color) > 1 {
-        @include linear-gradient(
-          if(not $filter-direction, "top", $filter-direction),
-          $filter-color
-        );
+        background: gradientOf($filter-color, linear, $filter-direction or "top", $member: "background-image", $colors-name: "$filter-color", $direction-name: "$filter-direction");
       }
     }
     & > * {

package/scss/library/_background-stripes.scss

@@ -4,40 +4,11 @@
 @use "sass:math";
 @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(string.unquote($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;
-}
-
-// 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;
-}
+@use "../internal/is-size" as *;
+@use "../internal/image-value" as *;
+@use "../internal/color-problem" as *;
+@use "../internal/length-problem" as *;
+@use "../internal/gradient" as *;
 
 @mixin background-stripes(
   $color: null,
@@ -47,39 +18,54 @@
 ) {
   // The arithmetic below runs in calc() so var() and clamp() work; on plain
   // lengths Sass simplifies it back to the same number.
-  @if not -is-size($thickness) {
+  @if not isSize($thickness) {
     @error "`#{meta.inspect($thickness)}` is not a valid $thickness for `background-stripes`. Pass a length, or var(), env() or a calculation such as `clamp()`.";
   }
+  // isSize takes any number. The thickness is a colour stop's position, which
+  // in Chrome 152 kept a percentage and a negative length and dropped a unitless
+  // number other than 0 and a unit that is not a length.
+  $thickness-problem: lengthProblem($thickness);
+  @if $thickness-problem {
+    @error "`#{meta.inspect($thickness)}` is not a valid $thickness for `background-stripes`: #{$thickness-problem}. A browser drops the gradient.";
+  }
   @if meta.type-of($rotation) != "number" {
     @error "`#{$rotation}` is not a valid $rotation for `background-stripes`. Pass an angle such as `-45deg`, or a unitless number which is treated as degrees.";
   }
   @if $image != null and meta.type-of($image) != "string" {
     @error "`#{$image}` is not a valid $image for `background-stripes`. Pass an image path as a string.";
   }
-  $validate-unit: if(not list.index("deg", math.unit($rotation)), $rotation + deg, $rotation);
-  $get-image: if($image, string.unquote(", ") + -image($image), string.unquote(""));
+  // A unitless rotation is read as degrees. `deg` used to be added to any unit
+  // that was not deg, so a valid `0.25turn` became `0.25turndeg` and `-10px`
+  // became `-10pxdeg`, both dropped. Measured in Chrome 152, a gradient kept
+  // deg, grad, rad and turn in any case (`10DEG`, `0.25TURN`) and a unitless 0,
+  // and dropped a unitless 45, `-10px` and `10%`.
+  // Each colour becomes a stripe in a repeating gradient, where a word or a
+  // quoted colour drops the whole pattern; see scss/internal/_color-problem.scss.
+  @if $color != null {
+    @each $item in $color {
+      $problem: colorProblem($item);
+      @if $problem {
+        @error "`#{meta.inspect($item)}` is not a valid colour in $color for `background-stripes`: #{$problem}. Pass one colour or several, such as `red` or `red var(--stripe)`.";
+      }
+    }
+  }
+  $validate-unit: $rotation;
+  @if math.is-unitless($rotation) {
+    $validate-unit: $rotation + deg;
+  } @else if not list.index("deg" "grad" "rad" "turn", string.to-lower-case(math.unit($rotation))) {
+    @error "`#{meta.inspect($rotation)}` is not a valid $rotation for `background-stripes`: `#{math.unit($rotation)}` is not an angle unit, and a browser drops the gradient. Pass an angle in deg, grad, rad or turn, such as `-45deg`, or a unitless number, which is read as degrees.";
+  }
+  $get-image: if($image, string.unquote(", ") + imageValue($image, "background-stripes", "$image", $unquote: true), string.unquote(""));
   @if not $color {
     $color: rgba(0, 0, 0, 0.1);
-    background-image: repeating-linear-gradient(
-        $validate-unit,
-        $color 0,
-        $color $thickness,
-        transparent $thickness,
-        transparent calc($thickness * 2)
-      ) + $get-image;
+    background-image: gradientOf(($color 0, $color $thickness, transparent $thickness, transparent calc($thickness * 2)), linear, $validate-unit, $repeating: true, $member: "background-stripes") + $get-image;
     @if $image {
       background-position: center;
       background-repeat: no-repeat;
       background-size: cover;
     }
   } @else if list.length($color) == 1 {
-    background-image: repeating-linear-gradient(
-        $validate-unit,
-        $color 0,
-        $color $thickness,
-        transparent $thickness,
-        transparent calc($thickness * 2)
-      ) + $get-image;
+    background-image: gradientOf(($color 0, $color $thickness, transparent $thickness, transparent calc($thickness * 2)), linear, $validate-unit, $repeating: true, $member: "background-stripes") + $get-image;
     @if $image {
       background-position: center;
       background-repeat: no-repeat;
@@ -89,10 +75,10 @@
     $list: ();
     @for $i from 1 through list.length($color) {
       $index-color: list.nth($color, $i);
-      $style-rule: $index-color calc($thickness * $i - $thickness), $index-color calc($thickness * $i);
-      $list: list.append($list, $style-rule, comma);
+      $list: list.append($list, $index-color calc($thickness * $i - $thickness), comma);
+      $list: list.append($list, $index-color calc($thickness * $i), comma);
     }
-    background-image: repeating-linear-gradient($validate-unit, $list) + $get-image;
+    background-image: gradientOf($list, linear, $validate-unit, $repeating: true, $member: "background-stripes") + $get-image;
     @if $image {
       background-position: center;
       background-repeat: no-repeat;

package/scss/library/_before.scss

@@ -1,18 +1,8 @@
 @charset "UTF-8";
 
-@use "sass:list";
 @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 *;
 
 @mixin before($content: null) {
   &::before {
@@ -20,7 +10,7 @@
       @content;
     } @else if meta.type-of($content) != "string" {
       @error "`#{$content}` is not a valid $content for `before`. Pass a string to use as the content value, a data- attribute name such as `\"data-label\"` to render it with attr(), or no argument at all and write the content yourself.";
-    } @else if -is-css-function($content, "var" "attr" "counter" "counters") {
+    } @else if isCssFunction($content, "var" "attr" "counter" "counters") {
       // Quoting would turn the call into text: content: "var(--label)".
       content: $content;
       @content;

package/scss/library/_border-radius.scss

@@ -1,8 +1,77 @@
 @charset "UTF-8";
 
 @use "sass:list";
+@use "sass:meta";
+@use "sass:string";
 @use "../lists/list-of-directions" as *;
 @use "../utilities/fill-nulls" as *;
+@use "../internal/length-problem" as *;
+
+// The parts of $text between the separator, empty parts left out.
+@function -split($text, $separator) {
+  $parts: ();
+  $at: string.index($text, $separator);
+  @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, $separator);
+  }
+  @if string.length($text) > 0 {
+    $parts: list.append($parts, string.unquote($text));
+  }
+  @return $parts;
+}
+
+// What is wrong with $value as the radii of one declaration, or null. Measured
+// in Chrome 152: border-radius kept one to four radii, and a slash between two
+// such sets; a corner's own property kept one or two radii and no slash. Both
+// kept a length, 0, a percentage and a CSS-wide keyword alone, and dropped a
+// negative radius, a keyword such as auto, and more radii than that.
+// Interpolation, as in `#{$a}/#{$b}`, gives the same value as a string, so a
+// string is read by its parts. null is a corner left out, as fillNulls has it.
+@function -radii-problem($value, $max, $slash: false) {
+  @if $value == null {
+    @return null;
+  }
+  $is-text: meta.type-of($value) == "string" and string.slice(meta.inspect($value), 1, 1) != "\"" and not string.index($value, "(");
+  @if ($is-text and string.index($value, "/")) or (meta.type-of($value) == "list" and list.separator($value) == "slash") {
+    $sets: $value;
+    @if $is-text {
+      $sets: -split($value, "/");
+    }
+    @if not $slash {
+      @return "a slash only works in the one-argument form, between two sets of radii";
+    }
+    @if list.length($sets) != 2 {
+      @return "a slash goes between exactly two sets of radii";
+    }
+    @each $set in $sets {
+      $problem: -radii-problem($set, $max);
+      @if $problem {
+        @return $problem;
+      }
+    }
+    @return null;
+  }
+  $radii: $value;
+  @if $is-text and string.index($value, " ") {
+    $radii: -split($value, " ");
+  }
+  @if list.length($radii) > $max {
+    @return "it is #{list.length($radii)} radii where at most #{$max} are meant";
+  }
+  @each $radius in $radii {
+    @if $radius != null {
+      $problem: lengthProblem($radius, $negative: false, $css-wide: list.length($radii) == 1);
+      @if $problem {
+        @return $problem;
+      }
+    }
+  }
+  @return null;
+}
 
 @mixin border-radius($args...) {
   // Logical corners are named block side first, inline side second, like the
@@ -12,11 +81,19 @@
   $list: list.join(list.join($list-of-directions, ("cross-left", "cross-right", "all")), $logical);
   @if list.length($args) == 1 {
     $value: list.nth($args, 1);
+    $problem: -radii-problem($value, 4, $slash: true);
+    @if $problem {
+      @error "`#{meta.inspect($value)}` is not a valid radius for `border-radius`: #{$problem}. A browser drops the declaration.";
+    }
     border-radius: fillNulls($value, space);
   } @else if list.length($args) == 2 {
     $corner: list.nth($args, 1);
     $value: list.nth($args, 2);
     @if list.index($list, $corner) {
+      $problem: -radii-problem($value, 2);
+      @if $problem {
+        @error "`#{meta.inspect($value)}` is not a valid radius for `border-radius`: #{$problem}. A browser drops the declaration.";
+      }
       @if $corner == "top" {
         border-top-left-radius: $value;
         border-top-right-radius: $value;
@@ -70,6 +147,12 @@
       @error "Corner value must be one of the followings: #{$list}.";
     }
   } @else if list.length($args) == 4 {
+    @each $value in $args {
+      $problem: -radii-problem($value, 2);
+      @if $problem {
+        @error "`#{meta.inspect($value)}` is not a valid radius for `border-radius`: #{$problem}. A browser drops the declaration.";
+      }
+    }
     $args: fillNulls($args, space, true);
     border-top-left-radius: list.nth($args, 1);
     border-top-right-radius: list.nth($args, 2);

package/scss/library/_brand-logo.scss

@@ -1,37 +1,23 @@
 @charset "UTF-8";
 
-@use "sass:list";
-@use "sass:meta";
-@use "sass:string";
-
 @use "../library/stretched-link" as *;
-
-// 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 "sass:meta";
+@use "../internal/image-value" as *;
+@use "../internal/length-problem" as *;
 
 @mixin brand-logo($width, $height, $image-url: null) {
+  @each $name, $value in ("$width": $width, "$height": $height) {
+    $problem: sizeProblem($value);
+    @if $problem {
+      @error "`#{meta.inspect($value)}` is not a valid #{$name} for `brand-logo`: #{$problem}. A browser drops the declaration.";
+    }
+  }
   display: inline-block;
   position: relative;
   width: $width;
   height: $height;
   @if $image-url {
-    background-image: -image($image-url);
+    background-image: imageValue($image-url, "brand-logo", "$image-url");
   }
   background-position: center;
   background-repeat: no-repeat;

package/scss/library/_breakpoint.scss

@@ -2,42 +2,30 @@
 
 @use "sass:list";
 @use "sass:map";
-@use "sass:meta";
-@use "sass:string";
 @use "../maps/map-for-breakpoints" as *;
 @use "../utilities/validate-breakpoint" as *;
+@use "../internal/custom-property-in" as *;
+@use "../internal/condition-width" as *;
 
-// 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;
-}
-
+// Every size goes through conditionWidth before a query is written, so a size no
+// width condition can match raises instead of compiling into one. The queries
+// themselves are written as they always were, and the checks in the branches
+// below are called only for the error they raise, so a call that worked writes
+// the same CSS.
 @mixin breakpoint($params...) {
-  $custom-property: -custom-property-in($params);
+  $custom-property: customPropertyIn($params);
   @if $custom-property {
     @error "`#{$custom-property}` cannot be used in a breakpoint: custom properties are not evaluated in a @media condition, so the rule would never apply. Pass a length or a key from $map-for-breakpoints.";
   }
   @if list.length($params) == 1 {
     $value: list.nth($params, 1);
-    $width: if(map.has-key($map-for-breakpoints, $value), map.get($map-for-breakpoints, $value), $value);
+    // Checked before the warning below, so a size that is wrong outright is
+    // refused rather than described as a single pixel.
+    $width: conditionWidth($value, "breakpoint");
     // One argument matches a single pixel, which two agent trials took for
-    // "from this width up". Still emitted, so no stylesheet changes, but said
-    // out loud until 3.0.0 refuses it.
-    @warn "`breakpoint(#{$value})` matches only a viewport exactly #{$width} wide, `(width: #{$width})`. Write `breakpoint(only, #{$value})` for that width, or `breakpoint(min, #{$value})` from it upwards. The one-argument form will be refused in 3.0.0.";
+    // "from this width up". Still emitted, and said out loud,
+    // but not refused: the CSS is valid and matches that one width.
+    @warn "`breakpoint(#{$value})` matches only a viewport exactly #{$width} wide, `(width: #{$width})`. Write `breakpoint(only, #{$value})` for that width, or `breakpoint(min, #{$value})` from it upwards.";
     @if map.has-key($map-for-breakpoints, $value) {
       @media (width: map.get($map-for-breakpoints, $value)) {
         @content;
@@ -51,12 +39,16 @@
     @if not list.index("only" "min" "max" "between", list.nth($params, 1)) {
       $start: list.nth($params, 1);
       $end: list.nth($params, 2);
+      $checked: conditionWidth($start, "breakpoint") conditionWidth($end, "breakpoint");
       @media (min-width: #{validateBreakpoint($start)}) and (max-width: #{if(map.has-key($map-for-breakpoints, $end), validateBreakpoint($end) - 1, $end)}) {
         @content;
       }
     } @else {
       $mode: list.nth($params, 1);
       $value: list.nth($params, 2);
+      @if $mode != "between" {
+        $checked: conditionWidth($value, "breakpoint");
+      }
       @if $mode == "only" {
         @if map.has-key($map-for-breakpoints, $value) {
           @media (width: map.get($map-for-breakpoints, $value)) {
@@ -90,6 +82,7 @@
       } @else if $mode == "between" {
         $start: list.nth($value, 1);
         $end: list.nth($value, 2);
+        $checked: conditionWidth($start, "breakpoint") conditionWidth($end, "breakpoint");
         @media (min-width: #{validateBreakpoint($start)}) and (max-width: #{if(map.has-key($map-for-breakpoints, $end), validateBreakpoint($end) - 1, $end)}) {
           @content;
         }