gerillass 2.1.0 → 2.1.1

package/scss/library/_background-dots.scss

@@ -1,17 +1,63 @@
 @charset "UTF-8";
 
 @use "sass:list";
-@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;
+}
+
 @mixin background-dots(
   $color: null,
   $size: 1em,
-  $gutter: $size * 5,
+  $gutter: null,
   $diagonal: true,
   $image: null
 ) {
+  // The gutter defaults to five times the size. Deriving it here rather than in
+  // 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) {
+    @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) {
+    @error "`#{meta.inspect($gutter)}` is not a valid $gutter for `background-dots`. Pass a length, or var(), env() or a calculation such as `calc()`.";
+  }
   @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.";
   }
@@ -23,21 +69,21 @@
     @if $diagonal == true {
       background-image: radial-gradient($color $size, transparent 0),
         radial-gradient($color $size, transparent 0);
-      background-position: math.div($gutter, 2) math.div($gutter, 2),
-        ($gutter * 2) ($gutter * 2);
+      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-position: math.div($gutter, 2) math.div($gutter, 2);
+      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-position: math.div($gutter, 2) math.div($gutter, 2),
-        ($gutter * 2) ($gutter * 2);
+      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-position: math.div($gutter, 2) math.div($gutter, 2);
+      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.";
       }
@@ -55,7 +101,7 @@
       height: 100%;
       top: 0;
       left: 0;
-      background-image: url(string.unquote($image));
+      background-image: -image($image);
       background-repeat: no-repeat;
       background-position: center;
       background-size: cover;

package/scss/library/_background-image.scss

@@ -4,19 +4,45 @@
 @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;
+}
+
 @mixin background-image(
   $image-url: null,
   $filter-color: null,
   $filter-direction: null
 ) {
+  // 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 $image-url {
     @if $filter-color {
       @if list.length($filter-color) == 1 {
         background-image: linear-gradient(to top, $filter-color, $filter-color),
-          url($image-url);
+          -image($image-url);
       } @else if list.length($filter-color) > 1 {
         $color-list: ();
         @for $i from 1 through list.length($filter-color) {
@@ -28,22 +54,22 @@
                 map.get($map-for-directions, $filter-direction),
                 $color-list
               ),
-              url($image-url);
+              -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),
-                url($image-url);
+                -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),
-            url($image-url);
+            -image($image-url);
         }
       }
     } @else {
-      background-image: url($image-url);
+      background-image: -image($image-url);
     }
   } @else {
     position: relative;

package/scss/library/_background-stripes.scss

@@ -5,12 +5,51 @@
 @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;
+}
+
 @mixin background-stripes(
   $color: null,
   $thickness: 1em,
   $rotation: -45deg,
   $image: null
 ) {
+  // 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) {
+    @error "`#{meta.inspect($thickness)}` is not a valid $thickness for `background-stripes`. Pass a length, or var(), env() or a calculation such as `clamp()`.";
+  }
   @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.";
   }
@@ -18,7 +57,7 @@
     @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(", ") + url(string.unquote($image)), string.unquote(""));
+  $get-image: if($image, string.unquote(", ") + -image($image), string.unquote(""));
   @if not $color {
     $color: rgba(0, 0, 0, 0.1);
     background-image: repeating-linear-gradient(
@@ -26,7 +65,7 @@
         $color 0,
         $color $thickness,
         transparent $thickness,
-        transparent $thickness * 2
+        transparent calc($thickness * 2)
       ) + $get-image;
     @if $image {
       background-position: center;
@@ -39,7 +78,7 @@
         $color 0,
         $color $thickness,
         transparent $thickness,
-        transparent $thickness * 2
+        transparent calc($thickness * 2)
       ) + $get-image;
     @if $image {
       background-position: center;
@@ -50,7 +89,7 @@
     $list: ();
     @for $i from 1 through list.length($color) {
       $index-color: list.nth($color, $i);
-      $style-rule: $index-color ($thickness * $i) - $thickness, $index-color $thickness * $i;
+      $style-rule: $index-color calc($thickness * $i - $thickness), $index-color calc($thickness * $i);
       $list: list.append($list, $style-rule, comma);
     }
     background-image: repeating-linear-gradient($validate-unit, $list) + $get-image;

package/scss/library/_before.scss

@@ -1,14 +1,29 @@
 @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;
+}
+
 @mixin before($content: null) {
   &::before {
     @if $content == null {
       @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") {
+      // Quoting would turn the call into text: content: "var(--label)".
+      content: $content;
+      @content;
     } @else {
       $data: string.slice($content, 1, 5);
       @if $data == "data-" {

package/scss/library/_brand-logo.scss

@@ -1,14 +1,37 @@
 @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;
+}
+
 @mixin brand-logo($width, $height, $image-url: null) {
   display: inline-block;
   position: relative;
   width: $width;
   height: $height;
   @if $image-url {
-    background-image: url($image-url);
+    background-image: -image($image-url);
   }
   background-position: center;
   background-repeat: no-repeat;

package/scss/library/_breakpoint.scss

@@ -2,10 +2,35 @@
 
 @use "sass:list";
 @use "sass:map";
+@use "sass:meta";
+@use "sass:string";
 @use "../maps/map-for-breakpoints" as *;
 @use "../utilities/validate-breakpoint" 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;
+}
+
 @mixin breakpoint($params...) {
+  $custom-property: -custom-property-in($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);
     @if map.has-key($map-for-breakpoints, $value) {
@@ -65,5 +90,9 @@
         }
       }
     }
+  } @else {
+    // Anything else used to match no branch and emit nothing, so a three
+    // argument range such as `between, medium, large` failed without a sound.
+    @error "`breakpoint` takes one or two arguments; you passed #{list.length($params)}. For a range, pass `between` with a space-separated pair, `between, medium large`, or two sizes, `medium, large`.";
   }
 }

package/scss/library/_container-query.scss

@@ -7,6 +7,25 @@
 @use "../maps/map-for-breakpoints" as *;
 @use "../utilities/validate-breakpoint" 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;
+}
+
 // A @container rule, taking the same argument shapes as `breakpoint` so the two
 // read alike. Sizes may be a key from $map-for-breakpoints or a raw length; a
 // container is usually narrower than the viewport, so a length is the common
@@ -24,6 +43,10 @@
     @error "`#{$name}` is not a valid $name for `container-query`. Pass a container name as a string, such as `\"card\"`.";
   }
 
+  $custom-property: -custom-property-in($params);
+  @if $custom-property {
+    @error "`#{$custom-property}` cannot be used in a container query: custom properties are not evaluated in a @container condition, so the rule would never apply. Pass a length or a key from $map-for-breakpoints.";
+  }
   $condition: null;
 
   @if $count == 1 {

package/scss/library/_counter.scss

@@ -1,8 +1,20 @@
 @charset "UTF-8";
 
 @use "sass:list";
+@use "sass:meta";
+@use "sass:string";
 @use "../lists/list-of-counter-styles" as *;
 
+// 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;
+}
+
 @mixin counter($params...) {
   $counter: null;
   $counter-before: null;
@@ -33,15 +45,25 @@
     }
   }
 
+  // A prefix or suffix is quoted into text, except a call CSS resolves, which
+  // quoting would turn into the literal characters.
+  $quote-before: '"';
+  $quote-after: '"';
+  @if -is-css-function($counter-before, "var" "attr" "counter" "counters") {
+    $quote-before: "";
+  }
+  @if -is-css-function($counter-after, "var" "attr" "counter" "counters") {
+    $quote-after: "";
+  }
   &.counter-start {
     counter-reset: glsCounter;
   }
   &.counter-start .counter-item::before,
   &.counter-continue .counter-item::before {
-    content: #{if($counter-before, '"' + $counter-before + '"' + " ", null)}counter(
+    content: #{if($counter-before, $quote-before + $counter-before + $quote-before + " ", null)}counter(
         glsCounter#{if($counter, ", " + $counter, null)}
       )
-      #{if($counter-after, " " + '"' + $counter-after + '"', null)};
+      #{if($counter-after, " " + $quote-after + $counter-after + $quote-after, null)};
     counter-increment: glsCounter;
     @content;
   }

package/scss/library/_font-face.scss

@@ -1,8 +1,10 @@
 @charset "UTF-8";
 
 @use "sass:list";
+@use "sass:map";
 @use "sass:meta";
 @use "sass:string";
+@use "../maps/map-for-font-formats" as *;
 @use "../utilities/font-source" as *;
 
 @mixin font-face(
@@ -18,6 +20,10 @@
     @error "`#{$font-family}` is not a valid $font-family for `font-face`. Pass the family name as a string, such as `\"Inter\"`.";
   } @else if meta.type-of($file-path) != "string" {
     @error "`#{$file-path}` is not a valid $file-path for `font-face`. Pass the path to the font files without an extension, as a string.";
+  } @else if string.slice(meta.inspect($file-path), 1, 1) != "\"" and string.index($file-path, "var(") {
+    // The path is written into url("..."), where var() is only text: the
+    // browser would request a file literally named var(--x).woff2.
+    @error "`#{$file-path}` is not a valid $file-path for `font-face`. A custom property cannot supply a font path, because the path is written into url() as text. Pass the path as a string.";
   } @else {
     
     $list: ();
@@ -42,6 +48,14 @@
       }
     }
 
+    // fontSource returns nothing for a format it does not know, so a typo
+    // dropped that source and a list of nothing but typos dropped `src`.
+    @each $format in $file-formats {
+      @if not map.has-key($map-for-font-formats, $format) {
+        @error "`#{meta.inspect($format)}` is not a valid file format for `font-face`. Pass one or more of: #{map.keys($map-for-font-formats)}.";
+      }
+    }
+
     @font-face {
       font-family: $font-family;
       @if list.index($file-formats, eot) {

package/scss/library/_line-clamp.scss

@@ -1,7 +1,19 @@
 @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;
+}
 
 // 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
@@ -20,7 +32,8 @@
 // So the standard property is emitted for the future and the prefixed trio is
 // what actually does the work today.
 @mixin line-clamp($lines: 3) {
-  @if $lines != none {
+  // 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 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/_loadify.scss

@@ -4,6 +4,13 @@
 @use "sass:meta";
 @use "../utilities/is-time" as *;
 
+// `init` defines the %loadify placeholder, and every call extends it. Under the
+// module system a selector can only extend a placeholder from a module it
+// loads, so the file with the call must be the file that calls `init`, or must
+// `@use` it. Anything else fails with "The target selector was not found".
+// An entry file calling `init` does not help a partial it loads, since the
+// partial does not load the entry file. Stylesheets using @import share one
+// scope and are unaffected.
 @mixin loadify($params...) {
   @if not & {
     @if list.length($params) == 0 or (list.length($params) == 1 and list.nth($params, 1) == "init") {

package/scss/library/_reset-css.scss

@@ -4,10 +4,12 @@
     @if & {
         @error "Please call the mixin at the root of your style sheet.";
     } @else {
-    /* http://meyerweb.com/eric/tools/css/reset/ 
-    v2.0 | 20110126
-    License: none (public domain)
-    */
+    // http://meyerweb.com/eric/tools/css/reset/
+    // v2.0 | 20110126
+    // License: none (public domain)
+    //
+    // Comments in this file are `//`: a /* */ comment inside a mixin is emitted
+    // into the stylesheet of everyone who includes it.
     html, body, div, span, applet, object, iframe,
     h1, h2, h3, h4, h5, h6, p, blockquote, pre,
     a, abbr, acronym, address, big, cite, code,
@@ -28,7 +30,7 @@
       font: inherit;
       vertical-align: baseline;
     }
-    /* HTML5 display-role reset for older browsers */
+    // HTML5 display-role reset for older browsers
     article, aside, details, figcaption, figure, 
     footer, header, hgroup, menu, main, nav, section {
       display: block;

package/scss/library/_screen-agent.scss

@@ -1,6 +1,33 @@
 @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;
+}
+
 @mixin screen-agent($resolution) {
+  $custom-property: -custom-property-in($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`.";
+  }
   @if $resolution == "1x" {
     @media (min-resolution: 96dpi) {
       @content;

package/scss/library/_text-image.scss

@@ -1,8 +1,31 @@
 @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;
+}
+
 @mixin text-image($image: null) {
   @if $image {
-    background-image: url($image);
+    background-image: -image($image);
   }
   background-size: cover;
   background-position: center;