gerillass 2.3.0 → 2.3.1

package/scss/internal/_length-problem.scss

@@ -0,0 +1,127 @@
+@charset "UTF-8";
+
+@use "sass:list";
+@use "sass:math";
+@use "sass:meta";
+@use "sass:string";
+@use "is-condition-value" as *;
+
+// Shared by the mixins and not public API; see _is-css-function.scss.
+
+// Maths functions a browser resolves to a length, and the substitutions whose
+// value only the browser knows. Sass reduces most maths on plain numbers before
+// they get here (`round(10.5px, 1px)` arrives as 11px), so these are the forms
+// it leaves as text.
+$-functions: "var" "env" "attr" "calc" "clamp" "min" "max" "round" "abs" "sign" "mod" "rem" "hypot" "sqrt" "pow" "exp" "log";
+$-css-wide: "inherit" "initial" "unset" "revert" "revert-layer";
+
+// Returns what is wrong with $value as one length for a property, or null when
+// a browser keeps it. Each caller passes what its property takes, measured in
+// Chrome 152 (see todos/silent-values-plan.md, S7):
+//
+// - $percent: whether a percentage works (width yes, outline-width no);
+// - $negative: whether a negative length works (outline-offset yes, width no);
+// - $keywords: the words the property takes, such as auto or thin;
+// - $functions: sizing functions beyond maths, such as anchor-size;
+// - $css-wide: whether a CSS-wide keyword works, which is only as a whole
+//   declaration;
+// - $quoted: whether a quoted length works, which is only where the mixin
+//   interpolates it; written raw, `width: "10px"` is dropped.
+//
+// A unitless 0 is accepted; a caller whose output breaks on it handles it.
+// A calculation is taken on trust, since Sass keeps it only when it cannot
+// reduce it.
+@function lengthProblem($value, $percent: true, $negative: true, $keywords: (), $functions: (), $css-wide: false, $quoted: false) {
+  @if meta.type-of($value) == "calculation" {
+    @return null;
+  }
+  @if meta.type-of($value) == "list" and list.length($value) > 1 {
+    @return "it is several values where one length is meant";
+  }
+  @if meta.type-of($value) == "number" {
+    @if math.is-unitless($value) {
+      @if $value == 0 {
+        @return null;
+      }
+      @return "a unitless number is not a length; add a unit, such as `#{$value}px`";
+    }
+    @if math.unit($value) == "%" and not $percent {
+      @return "a percentage does not work here";
+    }
+    @if not isConditionValue($value, "length-percentage") {
+      @return "`#{math.unit($value)}` is not a length unit";
+    }
+    @if not $negative and $value < 0 {
+      @return "a length below zero does not work here";
+    }
+    @return null;
+  }
+  @if meta.type-of($value) != "string" {
+    @return "it is not a length";
+  }
+  $kind: "length";
+  @if $percent {
+    $kind: "length-percentage";
+  }
+  @if string.slice(meta.inspect($value), 1, 1) == "\"" {
+    @if $quoted and isConditionValue($value, $kind) {
+      @return null;
+    }
+    @return "a length in quotes is text here; write it without quotes";
+  }
+  $lower: string.to-lower-case($value);
+  $open: string.index($lower, "(");
+  @if $open {
+    $name: string.slice($lower, 1, $open - 1);
+    @if list.index($-functions, $name) or list.index($functions, $name) {
+      @return null;
+    }
+    @return "`#{$name}()` does not give a length here";
+  }
+  @if string.index($lower, " ") {
+    @return "it is several values where one length is meant";
+  }
+  // Interpolation, such as `#{$n}px`, gives an unquoted string rather than a
+  // number, and it is written into the CSS as it reads, so its content decides.
+  @if isConditionValue($value, $kind) {
+    @if not $negative and string.index($lower, "-") == 1 {
+      @return "a length below zero does not work here";
+    }
+    @return null;
+  }
+  @if string.index($lower, "%") and isConditionValue($value, "length-percentage") {
+    @return "a percentage does not work here";
+  }
+  @if list.index($keywords, $lower) {
+    @return null;
+  }
+  @if list.index($-css-wide, $lower) {
+    @if $css-wide {
+      @return null;
+    }
+    @return "a CSS-wide keyword only works as a whole declaration, not here";
+  }
+  @if list.length($keywords) > 0 {
+    @return "it is not a length or one of: #{list.join($keywords, (), $separator: comma)}";
+  }
+  @return "it is not a length";
+}
+
+// lengthProblem for a width or height, and for max-width with $max. Measured in
+// Chrome 152: width and height keep the intrinsic keywords, stretch,
+// -webkit-fill-available, anchor-size(), calc-size() and a CSS-wide keyword;
+// max-width keeps none where width keeps auto, and drops calc-size(). Both drop
+// a negative length. -moz-available is Firefox's spelling of stretch; Chrome
+// drops it, and it is let through like the other vendor keywords.
+//
+// null is accepted, since Sass leaves the declaration out, as it always has.
+@function sizeProblem($value, $max: false) {
+  @if $value == null {
+    @return null;
+  }
+  $keywords: "min-content" "max-content" "fit-content" "stretch" "-webkit-fill-available" "-moz-available";
+  @if $max {
+    @return lengthProblem($value, $negative: false, $keywords: list.append($keywords, "none"), $functions: ("anchor-size",), $css-wide: true);
+  }
+  @return lengthProblem($value, $negative: false, $keywords: list.append($keywords, "auto"), $functions: "anchor-size" "calc-size", $css-wide: true);
+}

package/scss/internal/_sibling-index.scss

@@ -0,0 +1,51 @@
+@charset "UTF-8";
+
+@use "sass:math";
+@use "sass:meta";
+
+// Shared by the mixins and not public API; see _is-css-function.scss.
+
+// Returns what is wrong with $value as a sibling position for `only` or
+// `except`, or null when it is a whole number other than 0. Measured in Chrome
+// 152 on six siblings:
+//
+// - a number with any unit or a fraction, `:nth-of-type(10deg)`,
+//   `:nth-of-type(10px)`, `:nth-of-type(1.5)`, is an invalid selector, and the
+//   browser drops the whole rule. In a selector list that takes every other
+//   selector with it: `.a:nth-of-type(1), .a:nth-of-type(10deg)` was dropped.
+// - `:nth-of-type(0)` is valid and matched none of the six, and
+//   `:not(:nth-of-type(0))` matched all six, since positions count from 1.
+// - a negative number, `+3` and `99999` were kept; `only` and `except` turn a
+//   negative position into :nth-last-of-type.
+//
+// $several is true when the value is one of several arguments, where only
+// positions are taken; alone, a word is a keyword or a selector.
+@function siblingIndexProblem($value, $mixin, $several: false) {
+  @if meta.type-of($value) != "number" {
+    @if $several {
+      @return "several arguments are all positions, whole numbers such as `1` or `-2`. Pass a keyword such as `first`, or a selector such as `.foo`, on its own";
+    }
+    @return null;
+  }
+  // A multiple of n, such as `3n`, reaches here as a number whose unit is n.
+  // Measured in Chrome 152, :nth-of-type(3n) is valid and matched two of six
+  // siblings, and main compiled only(3n) to it, so it is accepted. Its
+  // coefficient is checked like a position: `1.5n` was dropped and `0n`
+  // matched nothing.
+  $coefficient: $value;
+  @if math.unit($value) == "n" {
+    $coefficient: math.div($value, 1n);
+  } @else if not math.is-unitless($value) {
+    @return "a position is a whole number such as `2`, or a multiple of n such as `3n`, and `:nth-of-type(#{math.abs($value)})` is an invalid selector, so the browser would drop the rule. Pass a number such as `2`, or `-2` to count from the end";
+  }
+  @if math.round($coefficient) != $coefficient {
+    @return "a position is a whole number, and `:nth-of-type(#{math.abs($value)})` is an invalid selector, so the browser would drop the rule. Pass a number such as `2`, or `-2` to count from the end";
+  }
+  @if $coefficient == 0 {
+    @if $mixin == "except" {
+      @return "positions count from 1, so `:not(:nth-of-type(0))` excludes nothing. Pass `1` for the first, or `-1` for the last";
+    }
+    @return "positions count from 1, so `:nth-of-type(0)` matches nothing. Pass `1` for the first, or `-1` for the last";
+  }
+  @return null;
+}

package/scss/internal/_words.scss

@@ -0,0 +1,35 @@
+@charset "UTF-8";
+
+@use "sass:list";
+@use "sass:meta";
+@use "sass:string";
+
+// Shared by the mixins and not public API; see _is-css-function.scss.
+
+// The words of a value, as a space-separated list. A quoted string such as
+// "block flow-root" is split on its spaces, the way the browser reads it once
+// the quotes are gone; a space-separated list gives its items; anything else is
+// one word. Empty words from repeated spaces are skipped.
+@function wordsOf($value) {
+  @if meta.type-of($value) == "list" and list.separator($value) != "comma" {
+    @return $value;
+  }
+  @if meta.type-of($value) != "string" {
+    @return ($value,);
+  }
+  $words: ();
+  $rest: $value;
+  $at: string.index($rest, " ");
+  @while $at {
+    $word: string.slice($rest, 1, $at - 1);
+    @if string.length($word) > 0 {
+      $words: list.append($words, $word);
+    }
+    $rest: string.slice($rest, $at + 1);
+    $at: string.index($rest, " ");
+  }
+  @if string.length($rest) > 0 {
+    $words: list.append($words, $rest);
+  }
+  @return $words;
+}

package/scss/library/_adaptive.scss

@@ -1,9 +1,26 @@
 @charset "UTF-8";
 
 @use "sass:map";
+@use "sass:math";
+@use "sass:meta";
+@use "sass:string";
 @use "../maps/map-for-breakpoints" as *;
+@use "../internal/length-problem" as *;
 
 @mixin adaptive($gutter: 30px) {
+  // The gutter is subtracted twice inside calc(), which in Chrome 152 kept a
+  // length, a percentage, a negative length and var(), and dropped the
+  // max-width for a word, a CSS-wide keyword, a unitless number and a unit that
+  // is not a length. A quoted length works, since it is interpolated.
+  $problem: lengthProblem($gutter, $functions: ("anchor-size",), $quoted: true);
+  @if $problem {
+    @error "`#{meta.inspect($gutter)}` is not a valid $gutter for `adaptive`: #{$problem}. A browser drops the max-width at every breakpoint.";
+  }
+  // A unitless 0 made `calc(576px - 0 * 2)`, a length minus a number, which was
+  // dropped; 0px is kept.
+  @if (meta.type-of($gutter) == "number" and math.is-unitless($gutter)) or (meta.type-of($gutter) == "string" and string.unquote($gutter) == string.unquote("0")) {
+    $gutter: 0px;
+  }
   $actual-breakpoints: map.remove($map-for-breakpoints, "xsmall");
   margin: 0 auto;
   @each $item, $value in $actual-breakpoints {

package/scss/library/_after.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 after($content: null) {
   &::after {
@@ -20,7 +10,7 @@
       @content;
     } @else if meta.type-of($content) != "string" {
       @error "`#{$content}` is not a valid $content for `after`. 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/_background-dots.scss

@@ -3,40 +3,10 @@
 @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 *;
 
 @mixin background-dots(
   $color: null,
@@ -49,21 +19,43 @@
   // 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 {
@@ -101,7 +93,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/is-css-function" as *;
 
 @mixin background-image(
   $image-url: null,
@@ -38,11 +22,39 @@
   @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)}.";
   }
+  // 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) {
@@ -54,22 +66,22 @@
                 map.get($map-for-directions, $filter-direction),
                 $color-list
               ),
-              -image($image-url);
+              imageValue($image-url, "background-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);
+                imageValue($image-url, "background-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);
+            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;

package/scss/library/_background-stripes.scss

@@ -4,40 +4,10 @@
 @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 *;
 
 @mixin background-stripes(
   $color: null,
@@ -47,17 +17,44 @@
 ) {
   // 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(

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;