gerillass 2.3.0 → 3.0.0

package/scss/library/_circle.scss

@@ -1,6 +1,13 @@
 @charset "UTF-8";
 
+@use "sass:meta";
+@use "../internal/length-problem" as *;
+
 @mixin circle($size) {
+  $problem: sizeProblem($size);
+  @if $problem {
+    @error "`#{meta.inspect($size)}` is not a valid $size for `circle`: #{$problem}. A browser drops the width and height.";
+  }
   width: $size;
   height: $size;
   display: inline-block;

package/scss/library/_columnizer.scss

@@ -1,15 +1,75 @@
 @charset "UTF-8";
 
 @use "sass:list";
+@use "sass:math";
 @use "sass:meta";
+@use "sass:string";
 @use "../library/border-box" as *;
 @use "../utilities/is-gutter" as *;
+@use "../internal/length-problem" as *;
+
+// The count divides 100% in calc(), which in Chrome 152 kept a unitless number
+// and a function that resolves to one, var(), env() or attr(), or maths with
+// one of those inside. It dropped a count with a unit, a word and maths on
+// lengths alone, such as calc(100% - 10px): 100% divided by a length is not a
+// length.
+@function -count-problem($columns) {
+  @if meta.type-of($columns) == "number" {
+    @if math.is-unitless($columns) {
+      @return null;
+    }
+    @return "a column count has no unit";
+  }
+  // Interpolation, as in `#{$cols}`, gives the number as an unquoted string,
+  // which is written into calc() as it reads.
+  @if meta.type-of($columns) == "string" and string.slice(meta.inspect($columns), 1, 1) != "\"" and not string.index($columns, "(") {
+    $digits: 0;
+    @for $i from 1 through string.length($columns) {
+      $character: string.slice($columns, $i, $i);
+      @if string.index("0123456789", $character) {
+        $digits: $digits + 1;
+      } @else if not string.index(".+-", $character) {
+        @return "it is not a column count";
+      }
+    }
+    @if $digits > 0 {
+      @return null;
+    }
+  }
+  @if meta.type-of($columns) == "calculation" or (meta.type-of($columns) == "string" and string.index($columns, "(")) {
+    $text: string.to-lower-case(meta.inspect($columns));
+    @if string.index($text, "var(") or string.index($text, "env(") or string.index($text, "attr(") {
+      @return null;
+    }
+    @return "maths on lengths does not give a count; pass a number, or var(), env() or attr()";
+  }
+  @return "it is not a column count";
+}
+
+// The gutter is multiplied in calc() and written as a margin. Chrome 152 kept a
+// length, a percentage and a negative length, and dropped the flex-basis for a
+// unitless number, a unit that is not a length and a word. A unitless 0 made
+// `(3 - 1) * 0`, a number rather than a length, so it is written as 0px.
+@function -gutter($gutter) {
+  $problem: lengthProblem($gutter);
+  @if $problem {
+    @error "`#{meta.inspect($gutter)}` is not a valid gutter for `columnizer`: #{$problem}. A browser drops the column width.";
+  }
+  @if (meta.type-of($gutter) == "number" and math.is-unitless($gutter)) or (meta.type-of($gutter) == "string" and string.unquote($gutter) == string.unquote("0")) {
+    @return 0px;
+  }
+  @return $gutter;
+}
 
 @mixin columnizer($params...) {
   @if list.length($params) < 1 or list.length($params) > 3 {
     @error "`columnizer` takes 1 to 3 arguments; you passed #{list.length($params)}. Pass the column count, optionally a gutter length, and optionally a boolean telling the last row whether to fill.";
   }
   $columns: list.nth($params, 1);
+  $count-problem: -count-problem($columns);
+  @if $count-problem {
+    @error "`#{meta.inspect($columns)}` is not a valid column count for `columnizer`: #{$count-problem}. A browser drops the column width.";
+  }
   $gutter: null;
   $fill: false;
   display: flex;
@@ -33,7 +93,7 @@
           margin-right: 0;
         }
       } @else if isGutter(list.nth($params, 2)) {
-        $gutter: list.nth($params, list.length($params));
+        $gutter: -gutter(list.nth($params, list.length($params)));
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: calc((100% - (#{$columns} - 1) * #{$gutter}) / #{$columns});
@@ -48,7 +108,7 @@
         @error "`#{list.nth($params, 2)}` is not a valid second argument for `columnizer`. Pass a gutter length such as `20px` or `var(--gap)`, or a boolean telling the last row whether to fill.";
       }
     } @else if list.length($params) == 3 {
-      $gutter: list.nth($params, 2);
+      $gutter: -gutter(list.nth($params, 2));
       $fill: list.nth($params, list.length($params));
       flex-grow: if($fill == true, 1, 0);
       flex-shrink: 0;

package/scss/library/_container-query.scss

@@ -5,26 +5,8 @@
 @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;
-}
+@use "../internal/custom-property-in" as *;
+@use "../internal/condition-width" as *;
 
 // Characters and names a browser will not keep as the name in an @container
 // rule. Measured in Chrome 152, the rule was dropped for `var(--n)`, `none`,
@@ -88,7 +70,7 @@ $-forbidden-in-name: "." "," "/" "#" ":" ";" "(" ")" "[" "]" "{" "}" "!" "@" "$"
     }
   }
 
-  $custom-property: -custom-property-in($params);
+  $custom-property: customPropertyIn($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.";
   }
@@ -96,27 +78,29 @@ $-forbidden-in-name: "." "," "/" "#" ":" ";" "(" ")" "[" "]" "{" "}" "!" "@" "$"
 
   @if $count == 1 {
     $value: list.nth($params, 1);
-    $width: validateBreakpoint($value);
+    // Checked before the warning, as in `breakpoint`. conditionWidth returns
+    // what validateBreakpoint did, so a working call writes the same condition.
+    $width: conditionWidth($value, "container-query", "@container");
     $condition: "(width: #{$width})";
-    // A single pixel, as in `breakpoint`; still emitted until 3.0.0 refuses it.
-    @warn "`container-query(#{$value})` matches only a container exactly #{$width} wide, `(width: #{$width})`. Write `container-query(only, #{$value})` for that width, or `container-query(min, #{$value})` from it upwards. The one-argument form will be refused in 3.0.0.";
+    // A single pixel, as in `breakpoint`; still emitted, with a warning.
+    @warn "`container-query(#{$value})` matches only a container exactly #{$width} wide, `(width: #{$width})`. Write `container-query(only, #{$value})` for that width, or `container-query(min, #{$value})` from it upwards.";
   } @else if $count == 2 {
     $mode: list.nth($params, 1);
     @if not list.index("only" "min" "max" "between", $mode) {
       // Two bare sizes mean a range, as they do in `breakpoint`.
-      $condition: "(min-width: #{validateBreakpoint($mode)}) and (max-width: #{validateBreakpoint(list.nth($params, 2))})";
+      $condition: "(min-width: #{conditionWidth($mode, "container-query", "@container")}) and (max-width: #{conditionWidth(list.nth($params, 2), "container-query", "@container")})";
     } @else {
       $value: list.nth($params, 2);
       @if $mode == "only" {
-        $condition: "(width: #{validateBreakpoint($value)})";
+        $condition: "(width: #{conditionWidth($value, "container-query", "@container")})";
       } @else if $mode == "min" {
-        $condition: "(min-width: #{validateBreakpoint($value)})";
+        $condition: "(min-width: #{conditionWidth($value, "container-query", "@container")})";
       } @else if $mode == "max" {
-        $condition: "(max-width: #{validateBreakpoint($value)})";
+        $condition: "(max-width: #{conditionWidth($value, "container-query", "@container")})";
       } @else {
         $start: list.nth($value, 1);
         $end: list.nth($value, 2);
-        $condition: "(min-width: #{validateBreakpoint($start)}) and (max-width: #{validateBreakpoint($end)})";
+        $condition: "(min-width: #{conditionWidth($start, "container-query", "@container")}) and (max-width: #{conditionWidth($end, "container-query", "@container")})";
       }
     }
   } @else {

package/scss/library/_container.scss

@@ -3,6 +3,7 @@
 @use "sass:list";
 @use "sass:meta";
 @use "sass:string";
+@use "../internal/words" as *;
 
 // What a browser will not keep in `container-name`. Measured in Chrome 152, the
 // declaration was dropped for `and`, `or`, `not` and `default` in any case, a
@@ -16,30 +17,12 @@ $-reserved-names: "and" "or" "not" "default";
 $-alone-names: "none" "inherit" "initial" "unset" "revert" "revert-layer";
 $-forbidden-in-name: "." "," "/" "#" ":" ";" "(" ")" "[" "]" "{" "}" "!" "@" "$" "%" "^" "&" "*" "+" "=" "<" ">" "?" "\\" "|" "~" "`" "'" "\"";
 
-@function -words($text) {
-  $words: ();
-  $rest: $text;
-  $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;
-}
-
 @function -name-problem($name) {
   $text: "#{$name}";
   @if string.index($text, "var(") {
     @return null;
   }
-  $words: -words($text);
+  $words: wordsOf($text);
   @each $word in $words {
     $lower: string.to-lower-case($word);
     @if list.index($-alone-names, $lower) and list.length($words) > 1 {

package/scss/library/_counter.scss

@@ -1,19 +1,8 @@
 @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;
-}
+@use "../internal/is-css-function" as *;
 
 @mixin counter($params...) {
   $counter: null;
@@ -49,10 +38,10 @@
   // quoting would turn into the literal characters.
   $quote-before: '"';
   $quote-after: '"';
-  @if -is-css-function($counter-before, "var" "attr" "counter" "counters") {
+  @if isCssFunction($counter-before, "var" "attr" "counter" "counters") {
     $quote-before: "";
   }
-  @if -is-css-function($counter-after, "var" "attr" "counter" "counters") {
+  @if isCssFunction($counter-after, "var" "attr" "counter" "counters") {
     $quote-after: "";
   }
   &.counter-start {

package/scss/library/_ellipsis.scss

@@ -1,7 +1,84 @@
 @charset "UTF-8";
 
+@use "sass:list";
+@use "sass:meta";
+@use "sass:string";
+@use "../internal/keyword-value" as *;
+@use "../internal/length-problem" as *;
+@use "../internal/words" as *;
+
+// The display keywords, sorted by the part of the value each one fills.
+// Measured in Chrome 152, one keyword, or two or three in any order, were kept
+// when they named at most one outer type, one inner type and one list-item:
+// `inline flex`, `flex block`, `block flow list-item`, `list-item inline flow`.
+// These were dropped: two of a kind (`block inline`, `flex grid`,
+// `block block`), `list-item` beside an inner type other than flow or
+// flow-root (`list-item flex`), and a compound keyword such as `inline-block`
+// beside anything. Chrome also dropped `run-in`, the ruby-base family and the
+// -moz- and -ms- boxes; they are in the specification or used by other
+// engines, so they are let through.
+$-outer: "block" "inline" "run-in";
+$-inner: "flow" "flow-root" "table" "flex" "grid" "ruby" "math";
+$-alone: "none" "contents" "inline-block" "inline-table" "inline-flex" "inline-grid" "table-row-group" "table-header-group" "table-footer-group" "table-row" "table-cell" "table-column-group" "table-column" "table-caption" "ruby-base" "ruby-text" "ruby-base-container" "ruby-text-container";
+
+@function -display-problem($display) {
+  $keywords: list.join(list.join(list.join($-outer, $-inner), $-alone), ("list-item",));
+  $problem: keywordProblem($display, $keywords, 3, $vendor: true);
+  @if $problem or $display == null {
+    @return $problem;
+  }
+  $words: wordsOf($display);
+  $outer: 0;
+  $inner: null;
+  $inners: 0;
+  $list-items: 0;
+  @each $word in $words {
+    @if string.index($word, "(") {
+      @return null;
+    }
+    $lower: string.to-lower-case(string.unquote($word));
+    @if list.length($words) > 1 and not list.index($-outer, $lower) and not list.index($-inner, $lower) and $lower != "list-item" {
+      @return "`#{$lower}` only works as the whole value";
+    }
+    @if list.index($-outer, $lower) {
+      $outer: $outer + 1;
+    } @else if list.index($-inner, $lower) {
+      $inners: $inners + 1;
+      $inner: $lower;
+    } @else if $lower == "list-item" {
+      $list-items: $list-items + 1;
+    }
+  }
+  @if $outer > 1 {
+    @return "it names two outer display types; pass one of block, inline or run-in";
+  }
+  @if $inners > 1 {
+    @return "it names two inner display types; pass one of flow, flow-root, table, flex, grid, ruby or math";
+  }
+  @if $list-items > 1 {
+    @return "it names list-item twice";
+  }
+  @if $list-items == 1 and $inner and not list.index("flow" "flow-root", $inner) {
+    @return "`list-item` only goes with flow or flow-root, not `#{$inner}`";
+  }
+  @return null;
+}
+
 @mixin ellipsis($width: 100%, $display: inline-block) {
-  display: $display;
+  $problem: -display-problem($display);
+  @if $problem {
+    @error "`#{meta.inspect($display)}` is not a valid $display for `ellipsis`: #{$problem}. A browser drops the declaration.";
+  }
+  $problem: sizeProblem($width, $max: true);
+  @if $problem {
+    @error "`#{meta.inspect($width)}` is not a valid $width for `ellipsis`, which sets max-width: #{$problem}. A browser drops the declaration.";
+  }
+  // Written without quotes, since `display: "block"` was dropped.
+  @if meta.type-of($display) == "string" {
+    display: string.unquote($display);
+  } @else {
+    display: $display;
+  }
   max-width: $width;
   text-overflow: ellipsis;
   white-space: nowrap;

package/scss/library/_except.scss

@@ -3,6 +3,7 @@
 @use "sass:list";
 @use "sass:meta";
 @use "sass:string";
+@use "../internal/sibling-index" as *;
 
 @mixin except($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 excludes
+      // nothing; see scss/internal/_sibling-index.scss.
+      $problem: siblingIndexProblem($value, "except");
+      @if $problem {
+        @error "`#{meta.inspect($value)}` is not a valid position for `except`: #{$problem}.";
+      }
       @if $value < 0 {
         &:not(:nth-last-of-type(#{$value * -1})) {
           @content;
@@ -45,6 +52,14 @@
       @error "`#{$value}` is not a valid argument for `except`. 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 dropped the whole rule.
+    @each $item in $params {
+      $problem: siblingIndexProblem($item, "except", true);
+      @if $problem {
+        @error "`#{meta.inspect($item)}` is not a valid position for `except`: #{$problem}.";
+      }
+    }
     $items: "";
     @for $i from 1 through list.length($params) {
       $items: $items + if(list.nth($params, $i) < 0, string.unquote(":not(:nth-last-of-type(#{list.nth($params, $i) * -1}))"), string.unquote(":not(:nth-of-type(#{list.nth($params, $i)}))"));

package/scss/library/_focus-ring.scss

@@ -1,5 +1,9 @@
 @charset "UTF-8";
 
+@use "sass:meta";
+@use "../internal/color-problem" as *;
+@use "../internal/length-problem" as *;
+
 // Draws a focus ring for keyboard users. Two things are usually got wrong by
 // hand, and this writes the version that avoids both.
 //
@@ -26,6 +30,31 @@
   @if not & {
     @error "`focus-ring` styles the element it is called in, so call it inside a selector, such as `.button { @include focus-ring; }`.";
   }
+  // The colour goes into the outline shorthand, where Chrome 152 dropped a word
+  // that is not a colour, a quoted colour, a length and a CSS-wide keyword, so
+  // the ring was not drawn at all. null leaves the colour to the browser.
+  @if $color != null {
+    $problem: colorProblem($color);
+    @if $problem {
+      @error "`#{meta.inspect($color)}` is not a valid $color for `focus-ring`: #{$problem}. A browser drops the outline, so no ring is drawn. Pass a colour such as `#1a73e8`, `currentColor`, or a function such as `var(--focus)`.";
+    }
+  }
+  // The width goes into the same shorthand, which in Chrome 152 kept a length,
+  // 0 and thin, medium or thick, and dropped a percentage, a negative width and
+  // a CSS-wide keyword. The offset is a declaration of its own: it kept a
+  // negative length and a CSS-wide keyword, and dropped a percentage and thin.
+  @if $width != null {
+    $problem: lengthProblem($width, $percent: false, $negative: false, $keywords: "thin" "medium" "thick");
+    @if $problem {
+      @error "`#{meta.inspect($width)}` is not a valid $width for `focus-ring`: #{$problem}. A browser drops the outline, so no ring is drawn.";
+    }
+  }
+  @if $offset != null {
+    $problem: lengthProblem($offset, $percent: false, $css-wide: true);
+    @if $problem {
+      @error "`#{meta.inspect($offset)}` is not a valid $offset for `focus-ring`: #{$problem}. A browser drops the declaration.";
+    }
+  }
 
   &:focus-visible {
     outline: $width solid $color;

package/scss/library/_font-face.scss

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

package/scss/library/_gradient.scss

@@ -0,0 +1,31 @@
+@charset "UTF-8";
+
+@use "../internal/gradient" as *;
+
+// One mixin for linear, radial and conic gradients, plain or repeating, with an
+// optional colour interpolation space. It replaced linear-gradient and
+// radial-gradient in 3.0.0; MIGRATION.md has each old call's new form.
+//
+// It writes background-image, not the background shorthand: measured in Chrome
+// 152, the shorthand reset a background-color set before it to transparent.
+// What each argument takes, and what was measured, is in
+// scss/internal/_gradient.scss.
+@mixin gradient(
+  $colors,
+  $type: linear,
+  $direction: null,
+  $shape: null,
+  $position: null,
+  $from: null,
+  $in: null,
+  $repeating: false
+) {
+  $value: gradientOf($colors, $type, $direction, $shape, $position, $from, $in, $repeating);
+  // Written without the space first. A browser that does not know `in` drops
+  // the second declaration and keeps this one; measured in Chrome by giving it
+  // a space name it does not know.
+  @if $in != null {
+    background-image: gradientOf($colors, $type, $direction, $shape, $position, $from, null, $repeating, $warn: false);
+  }
+  background-image: $value;
+}

package/scss/library/_index.scss

@@ -27,16 +27,15 @@
 @forward "except";
 @forward "focus-ring";
 @forward "font-face";
+@forward "gradient";
 @forward "hide";
 @forward "line-clamp";
-@forward "linear-gradient";
 @forward "loadify";
 @forward "motion-safe";
 @forward "only";
 @forward "placeholder";
 @forward "placeholder-shown";
 @forward "position";
-@forward "radial-gradient";
 @forward "remove";
 @forward "reset-css";
 @forward "reset-figure";

package/scss/library/_line-clamp.scss

@@ -1,19 +1,8 @@
 @charset "UTF-8";
 
-@use "sass:list";
 @use "sass:math";
 @use "sass:meta";
-@use "sass:string";
-
-// True for an unquoted call to one of $names, such as var(--x). A quoted string
-// stays text, so `"var(--x)"` is not a call.
-@function -is-css-function($value, $names) {
-  @if meta.type-of($value) != "string" or string.slice(meta.inspect($value), 1, 1) == "\"" {
-    @return false;
-  }
-  $open: string.index($value, "(");
-  @return $open != null and list.index($names, string.to-lower-case(string.slice($value, 1, $open - 1))) != null;
-}
+@use "../internal/is-css-function" as *;
 
 // Truncates text after a number of lines. `ellipsis` does one line; this does
 // several, and needs five declarations rather than one because -webkit-line-clamp
@@ -33,7 +22,7 @@
 // what actually does the work today.
 @mixin line-clamp($lines: 3) {
   // var() is resolved by the browser, so only a literal count is checked.
-  @if $lines != none and not -is-css-function($lines, "var" "env") {
+  @if $lines != none and not isCssFunction($lines, "var" "env") {
     @if meta.type-of($lines) != "number" or not math.is-unitless($lines) {
       @error "`#{$lines}` is not a valid $lines for `line-clamp`. Pass a whole number of lines, or `none` to undo a clamp.";
     }