gerillass 2.0.1 → 2.1.1

package/package.json

@@ -16,7 +16,7 @@
     }
   },
   "license": "Apache-2.0",
-  "version": "2.0.1",
+  "version": "2.1.1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/selfishprimate/gerillass.git"

package/scss/library/_after.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 after($content: null) {
   &::after {
     @if $content == null {
       @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") {
+      // 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/_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

@@ -0,0 +1,86 @@
+@charset "UTF-8";
+
+@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;
+}
+
+// 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
+// case.
+//
+// Pass $name to query one named container rather than the nearest ancestor.
+// The container itself is declared with the `container` mixin, on an ancestor
+// of whatever this styles.
+@mixin container-query($params...) {
+  $keywords: meta.keywords($params);
+  $name: map.get($keywords, name);
+  $count: list.length($params);
+
+  @if $name != null and meta.type-of($name) != "string" {
+    @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 {
+    $condition: "(width: #{validateBreakpoint(list.nth($params, 1))})";
+  } @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))})";
+    } @else {
+      $value: list.nth($params, 2);
+      @if $mode == "only" {
+        $condition: "(width: #{validateBreakpoint($value)})";
+      } @else if $mode == "min" {
+        $condition: "(min-width: #{validateBreakpoint($value)})";
+      } @else if $mode == "max" {
+        $condition: "(max-width: #{validateBreakpoint($value)})";
+      } @else {
+        $start: list.nth($value, 1);
+        $end: list.nth($value, 2);
+        $condition: "(min-width: #{validateBreakpoint($start)}) and (max-width: #{validateBreakpoint($end)})";
+      }
+    }
+  } @else {
+    @error "`container-query` takes one or two arguments, and was given #{$count}. Pass a size, two sizes for a range, or one of `min`, `max`, `only` or `between` followed by a size.";
+  }
+
+  @if $name {
+    @container #{string.unquote($name)} #{$condition} {
+      @content;
+    }
+  } @else {
+    @container #{$condition} {
+      @content;
+    }
+  }
+}

package/scss/library/_container.scss

@@ -0,0 +1,26 @@
+@charset "UTF-8";
+
+@use "sass:list";
+@use "sass:meta";
+@use "sass:string";
+
+// Marks an element as a query container, so `container-query` can ask about its
+// width instead of the viewport's.
+//
+// The rule that asks has to sit on a descendant. An element is not matched by a
+// @container rule that reads its own container, and nothing warns you: the rule
+// is simply never applied. Measured in a browser, a 600px element with
+// `container-type: inline-size` on itself did not match `@container (min-width:
+// 400px)`, while the same query did match a child of it.
+@mixin container($name: null, $type: inline-size) {
+  @if not list.index("inline-size" "size" "normal", $type) {
+    @error "`#{$type}` is not a valid $type for `container`. Pass one of: inline-size, size, normal.";
+  }
+  @if $name != null and meta.type-of($name) != "string" {
+    @error "`#{$name}` is not a valid $name for `container`. Pass a name as a string, such as `\"card\"`, or no name at all.";
+  }
+  container-type: $type;
+  @if $name {
+    container-name: string.unquote($name);
+  }
+}

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

@@ -19,12 +19,15 @@
 @forward "circle";
 @forward "clearfix";
 @forward "columnizer";
+@forward "container";
+@forward "container-query";
 @forward "counter";
 @forward "ellipsis";
 @forward "escape-to-parent";
 @forward "except";
 @forward "font-face";
 @forward "hide";
+@forward "line-clamp";
 @forward "linear-gradient";
 @forward "loadify";
 @forward "only";