gerillass 1.6.0 → 1.6.2

package/README.md

@@ -31,6 +31,7 @@ Hope you’ll enjoy using it!
   - [Using with Grunt](#using-with-grunt)
   - [Cloning the Repository from Github](#cloning-the-repository-from-github)
   - [Versions these examples were tested with](#versions-these-examples-were-tested-with)
+- [Using Gerillass with an AI coding agent](#using-gerillass-with-an-ai-coding-agent)
 - [Namespace Usage](#namespace-usage)
 - [Vendor Prefix Support](#vendor-prefix-support)
 - [Experimenting](#experimenting)
@@ -186,6 +187,24 @@ Including to the project:
 | Gulp / gulp-sass | 5.0.1 / 6.0.1 |
 | Grunt / grunt-sass | 1.6.3 / 4.1.0 |
 
+## Using Gerillass with an AI coding agent
+
+Gerillass ships two files that let a coding agent use the library correctly instead of guessing at it. Both are inside the installed package, so an agent working in your project can read them straight out of `node_modules/gerillass/`.
+
+**`gerillass.json`** describes every mixin and function: its signature, what each argument accepts, examples that compile, and inputs that are refused.
+
+    const api = require("gerillass/gerillass.json");
+
+**`SKILL.md`** is a written guide generated from that manifest — how to load the library, the full catalogue, and the argument forms that are easy to get wrong. If your agent supports [Agent Skills](https://code.claude.com/docs/en/skills), copy it into your skills folder:
+
+    mkdir -p .claude/skills/gerillass
+    cp node_modules/gerillass/SKILL.md .claude/skills/gerillass/
+
+Otherwise, point your agent at the file and it will read it as plain Markdown.
+
+Neither file is generated by hand: signatures are parsed from the Sass sources, and every example and refusal in the manifest is executed by the test suite. What the manifest says the library does is what the library does.
+
+
 ## Namespace Usage
 
 You can use Gerillass with or without `gls-` namespace. It is optional, but I strongly recommend you to use it to prevent having conflicts with other Sass libraries or frameworks like Bootstrap.

package/SKILL.md

@@ -5,7 +5,7 @@ description: Use the Gerillass Sass mixin library — loading it, the mixin cata
 
 # Gerillass
 
-A Sass mixin library: 51 mixins and 21 functions that emit CSS from
+A Sass mixin library: 51 mixins and 22 functions that emit CSS from
 semantic declarations. It is Sass source only — there is no runtime and no
 utility classes, so styles live in your stylesheet and your markup stays clean.
 
@@ -65,20 +65,27 @@ a dropped declaration rather than an error.
 
 | Mixin | Rejects, for example |
 |---|---|
+| `after` | `.a { @include after(42) { color: red; } }` |
 | `all-buttons` | `@include all-buttons(nonsense) { color: red; }` |
 | `all-text-inputs` | `@include all-text-inputs(nonsense) { color: red; }` |
 | `antialias` | `@include antialias(only);` |
 | `background-dots` | `.a { @include background-dots(red, 1em, 5em, maybe); }` |
 | `background-image` | `.a { @include background-image("/img/a.png", (red, blue), sideways); }` |
+| `background-stripes` | `.a { @include background-stripes(red, 2em, nonsense); }` |
+| `before` | `.a { @include before(42) { color: red; } }` |
 | `border-box` | `@include border-box(only);` |
 | `border-radius` | `.a { @include border-radius(1px, 2px, 3px); }` |
+| `breakpointer` | `.a { @include breakpointer(42); }` |
 | `center` | `.modal { @include center(diagonal); }` |
 | `columnizer` | `.grid { @include columnizer(3, 20px, true, 9); }` |
+| `escape-to-parent` | `.a { @include escape-to-parent(42) { color: red; } }` |
 | `except` | `.a { @include except(#ff0000) { margin: 0; } }` |
 | `font-face` | `.a { @include font-face("Inter", "/fonts/inter"); }` |
 | `hide` | `.a { @include hide(nonsense); }` |
+| `linear-gradient` | `.a { @include linear-gradient(sideways, (red, blue)); }` |
 | `loadify` | `@include loadify(nonsense);` |
 | `only` | `.a { @include only(#ff0000) { margin: 0; } }` |
+| `radial-gradient` | `.a { @include radial-gradient(42, "center", (red, blue)); }` |
 | `ratio-box` | `.hero { @include ratio-box(16 9); }` |
 | `remove` | `.a { @include remove(a, b, c); }` |
 | `reset-css` | `.a { @include reset-css; }` |
@@ -88,7 +95,9 @@ a dropped declaration rather than an error.
 | `sprite` | `.icon { @include sprite("/img/sprite.txt"); }` |
 | `stretched-link` | `.card a { @include stretched-link(middle); }` |
 | `tablet` | `.a { @include tablet(Surface) { display: none; } }` |
+| `text-gradient` | `.a { @include text-gradient(sideways, (red, blue)); }` |
 | `text-selection` | `.a { @include text-selection(bogus) { background: yellow; } }` |
+| `text-shadow` | `.a { @include text-shadow(42); }` |
 | `triangle` | `.caret { @include triangle(sideways); }` |
 
 ## Mixins
@@ -162,6 +171,7 @@ functions rather than mixins; they are public API.
 | `__fontSizer($size, $time)` | Multiplies a size by a factor. Handy for a modular scale. |
 | `__fontSource($font-family, $file-path, $file-formats)` | Builds one src entry for an @font-face rule. |
 | `__isColor($value)` | Returns the value if every item in it is a colour, and errors otherwise. |
+| `__isGutter($value)` | True for anything that can sit where a CSS length is expected: a number, a calculation, or a CSS function such as var(). |
 | `__isNumber($value)` | Returns the value if it is a number. |
 | `__isTime($value)` | Returns the value if it is a time in s or ms, and errors otherwise. |
 | `__lighten($color, $percentage)` | Mixes a colour towards white by a percentage. |

package/gerillass.json

@@ -1,6 +1,6 @@
 {
   "name": "gerillass",
-  "version": "1.6.0",
+  "version": "1.6.2",
   "description": "Gerillass is an open-source toolkit that contains a set of Sass mixins to help designers and developers to create better, faster and consistent user interfaces.",
   "homepage": "https://gerillass.com",
   "documentation": "https://docs.gerillass.com",
@@ -54,7 +54,10 @@
         ".a { @include after(\"data-label\") { color: red; } }",
         ".a { @include after { content: \"x\"; } }"
       ],
-      "rejects": []
+      "rejects": [
+        ".a { @include after(42) { color: red; } }",
+        ".a { @include after(16 9) { color: red; } }"
+      ]
     },
     {
       "name": "all-buttons",
@@ -188,7 +191,8 @@
         ".a { @include background-dots(red, 1em, 5em, false); }"
       ],
       "rejects": [
-        ".a { @include background-dots(red, 1em, 5em, maybe); }"
+        ".a { @include background-dots(red, 1em, 5em, maybe); }",
+        ".a { @include background-dots(red, 1em, 5em, true, 42); }"
       ]
     },
     {
@@ -272,7 +276,10 @@
         ".a { @include background-stripes; }",
         ".a { @include background-stripes(red, 2em, -30deg); }"
       ],
-      "rejects": []
+      "rejects": [
+        ".a { @include background-stripes(red, 2em, nonsense); }",
+        ".a { @include background-stripes(red, 2em, -45deg, 42); }"
+      ]
     },
     {
       "name": "before",
@@ -295,7 +302,9 @@
         ".a { @include before(\"→\") { color: red; } }",
         ".a { @include before(\"data-label\") { color: red; } }"
       ],
-      "rejects": []
+      "rejects": [
+        ".a { @include before(42) { color: red; } }"
+      ]
     },
     {
       "name": "border-box",
@@ -428,7 +437,9 @@
         "@include breakpointer;",
         ".a { @include breakpointer; }"
       ],
-      "rejects": []
+      "rejects": [
+        ".a { @include breakpointer(42); }"
+      ]
     },
     {
       "name": "center",
@@ -495,8 +506,8 @@
           "name": "$params",
           "variadic": true,
           "accepts": [
-            "a column count",
-            "a column count plus a gutter length",
+            "a column count, which may be a CSS function such as var(--cols)",
+            "a column count plus a gutter length, which may also be a CSS function",
             "a column count plus a boolean fill flag",
             "a column count, a gutter and a fill flag"
           ]
@@ -508,10 +519,13 @@
       "examples": [
         ".grid { @include columnizer(3); }",
         ".grid { @include columnizer(3, 20px); }",
-        ".grid { @include columnizer(3, 20px, true); }"
+        ".grid { @include columnizer(3, 20px, true); }",
+        ".grid { @include columnizer(3, var(--gap)); }",
+        ".grid { @include columnizer(var(--cols)); }"
       ],
       "rejects": [
-        ".grid { @include columnizer(3, 20px, true, 9); }"
+        ".grid { @include columnizer(3, 20px, true, 9); }",
+        ".grid { @include columnizer(3, nonsense); }"
       ]
     },
     {
@@ -584,7 +598,9 @@
       "examples": [
         ".a { @include escape-to-parent(\".theme-dark\") { color: white; } }"
       ],
-      "rejects": []
+      "rejects": [
+        ".a { @include escape-to-parent(42) { color: red; } }"
+      ]
     },
     {
       "name": "except",
@@ -661,7 +677,9 @@
         "@include font-face(\"Inter\", \"/fonts/inter\", italic, 700, woff2 woff);"
       ],
       "rejects": [
-        ".a { @include font-face(\"Inter\", \"/fonts/inter\"); }"
+        ".a { @include font-face(\"Inter\", \"/fonts/inter\"); }",
+        "@include font-face(42, \"/fonts/x\");",
+        "@include font-face(\"Inter\", 42);"
       ]
     },
     {
@@ -715,7 +733,10 @@
         ".a { @include linear-gradient(\"top\", (red, blue)); }",
         ".a { @include linear-gradient(45deg, (red, blue)); }"
       ],
-      "rejects": []
+      "rejects": [
+        ".a { @include linear-gradient(sideways, (red, blue)); }",
+        ".a { @include linear-gradient(true, (red, blue)); }"
+      ]
     },
     {
       "name": "loadify",
@@ -853,7 +874,10 @@
       "examples": [
         ".a { @include radial-gradient(circle, \"center\", (red, blue)); }"
       ],
-      "rejects": []
+      "rejects": [
+        ".a { @include radial-gradient(42, \"center\", (red, blue)); }",
+        ".a { @include radial-gradient(circle, 42, (red, blue)); }"
+      ]
     },
     {
       "name": "ratio-box",
@@ -1021,7 +1045,8 @@
         ".a { @include scissors(4px 8px 12px 16px); }"
       ],
       "rejects": [
-        ".a { @include scissors(5px 10px); }"
+        ".a { @include scissors(5px 10px); }",
+        ".a { @include scissors(nonsense); }"
       ]
     },
     {
@@ -1214,7 +1239,9 @@
       "examples": [
         ".a { @include text-gradient(\"top\", (red, blue)); }"
       ],
-      "rejects": []
+      "rejects": [
+        ".a { @include text-gradient(sideways, (red, blue)); }"
+      ]
     },
     {
       "name": "text-image",
@@ -1278,7 +1305,10 @@
       "examples": [
         ".a { @include text-shadow(bottom-right red 5px); }"
       ],
-      "rejects": []
+      "rejects": [
+        ".a { @include text-shadow(42); }",
+        ".a { @include text-shadow(top red); }"
+      ]
     },
     {
       "name": "text-stroke",
@@ -1405,7 +1435,9 @@
       "examples": [
         ".a { content: __clearWhitespace(\"a b c\"); }"
       ],
-      "rejects": []
+      "rejects": [
+        ".a { --x: #{__clearWhitespace(42)}; }"
+      ]
     },
     {
       "name": "__convertToEm",
@@ -1445,7 +1477,9 @@
       "examples": [
         ".a { z-index: __convertToNumber(\"42\"); }"
       ],
-      "rejects": []
+      "rejects": [
+        ".a { --x: #{__convertToNumber(42)}; }"
+      ]
     },
     {
       "name": "__darken",
@@ -1559,6 +1593,27 @@
         ".a { color: __isColor(nonsense); }"
       ]
     },
+    {
+      "name": "__isGutter",
+      "kind": "function",
+      "arguments": [
+        {
+          "name": "$value",
+          "required": true,
+          "accepts": [
+            "any value"
+          ]
+        }
+      ],
+      "file": "scss/utilities/_is-gutter.scss",
+      "signature": "__isGutter($value)",
+      "summary": "True for anything that can sit where a CSS length is expected: a number, a calculation, or a CSS function such as var().",
+      "examples": [
+        ".a { --x: #{__isGutter(20px)}; }",
+        ".a { --x: #{__isGutter(var(--gap))}; }"
+      ],
+      "rejects": []
+    },
     {
       "name": "__isNumber",
       "kind": "function",
@@ -1690,7 +1745,9 @@
       "examples": [
         ".a { margin: __null(1px null 3px null, space); }"
       ],
-      "rejects": []
+      "rejects": [
+        ".a { --x: #{__null(1px null, nonsense)}; }"
+      ]
     },
     {
       "name": "__pixelify",
@@ -1710,7 +1767,9 @@
       "examples": [
         ".a { width: __pixelify(24); }"
       ],
-      "rejects": []
+      "rejects": [
+        ".a { --x: #{__pixelify(nonsense)}; }"
+      ]
     },
     {
       "name": "__pseudoSelector",

package/package.json

@@ -16,13 +16,13 @@
     }
   },
   "license": "Apache-2.0",
-  "version": "1.6.0",
+  "version": "1.6.2",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/selfishprimate/gerillass.git"
   },
   "bugs": {
-    "url": "https://github.com/selfihsprimate/gerillass/issues"
+    "url": "https://github.com/selfishprimate/gerillass/issues"
   },
   "keywords": [
     "gerillass",

package/scss/_gerillass-prefix.scss

@@ -17,7 +17,9 @@
   &::after {
     @if $content == null {
       @content;
-    } @else if $content != null {
+    } @else if 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 {
       $data: str-slice($content, 1, 5);
       @if $data == "data-" {
         content: attr(#{$content});
@@ -107,6 +109,9 @@
   $diagonal: true,
   $image: null
 ) {
+  @if $image != null and 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`.";
   }
@@ -233,6 +238,12 @@
   $rotation: -45deg,
   $image: null
 ) {
+  @if 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 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 index("deg", unit($rotation)), $rotation + deg, $rotation);
   $get-image: if($image, unquote(", ") + url(unquote($image)), unquote(""));
   @if not $color {
@@ -284,7 +295,9 @@
   &::before {
     @if $content == null {
       @content;
-    } @else if $content != null {
+    } @else if 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 {
       $data: str-slice($content, 1, 5);
       @if $data == "data-" {
         content: attr(#{$content});
@@ -473,6 +486,9 @@
 
 
 @mixin gls-breakpointer($selector: null) {
+  @if $selector != null and type-of($selector) != "string" {
+    @error "`#{$selector}` is not a valid $selector for `breakpointer`. Pass a selector as a string, such as `\".debug\"`, or no argument at all to attach it to body.";
+  }
   @if & {
     &::before {
       @content;
@@ -571,7 +587,7 @@
         &:not(:last-child) {
           margin-right: 0;
         }
-      } @else if type-of(nth($params, 2)) == number {
+      } @else if __isGutter(nth($params, 2)) {
         $gutter: nth($params, length($params));
         flex-grow: 0;
         flex-shrink: 0;
@@ -584,7 +600,7 @@
           margin-right: 0;
         }
       } @else {
-        @error "`#{nth($params, 2)}` is not a valid second argument for `columnizer`. Pass a gutter length such as `20px`, or a boolean telling the last row whether to fill.";
+        @error "`#{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 length($params) == 3 {
       $gutter: nth($params, 2);
@@ -663,6 +679,9 @@
 
 
 @mixin gls-escape-to-parent($selector: null) {
+  @if $selector != null and type-of($selector) != "string" {
+    @error "`#{$selector}` is not a valid $selector for `escape-to-parent`. Pass a selector as a string, such as `\".theme-dark\"`.";
+  }
   @at-root #{$selector}#{&} {
     @content;
   }
@@ -732,6 +751,10 @@
 ) {
   @if & {
     @error "You must call the mixin at the root level of your style sheet, not in the `#{&+'{'+'}'}` selector.";
+  } @else if type-of($font-family) != "string" {
+    @error "`#{$font-family}` is not a valid $font-family for `font-face`. Pass the family name as a string, such as `\"Inter\"`.";
+  } @else if 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 {
     
     $list: ();
@@ -811,8 +834,8 @@
       $list
     );
   } @else if not map-has-key($map-for-directions, $direction) {
-    @if not index("deg", unit($direction)) {
-      @error "#{$direction} is a wrong value for the $direction parameter. The value must be eighter a number followed by the 'deg' unit or one of the followings: #{map-keys($map-for-directions)}.";
+    @if type-of($direction) != "number" or not index("deg", unit($direction)) {
+      @error "`#{$direction}` is not a valid $direction for `linear-gradient`. Pass an angle such as `45deg`, or one of: #{map-keys($map-for-directions)}.";
     } @else {
       background: linear-gradient($direction, $list);
     }
@@ -963,6 +986,12 @@
 
 
 @mixin gls-radial-gradient($shape, $position, $colors) {
+  @if type-of($shape) != "string" {
+    @error "`#{$shape}` is not a valid $shape for `radial-gradient`. Pass `circle` or `ellipse`.";
+  }
+  @if type-of($position) != "string" {
+    @error "`#{$position}` is not a valid $position for `radial-gradient`. Pass a position name such as `center` or `top-left`, or a raw CSS position as a string.";
+  }
   $list: ();
   $shape: unquote($shape);
   $position: unquote($position);
@@ -1311,8 +1340,8 @@
       $list
     );
   } @else if not map-has-key($map-for-directions, $direction) {
-    @if not index("deg", unit($direction)) {
-      @error "#{$direction} is a wrong value for the $direction parameter. The value must be eighter a number followed by the 'deg' unit or one of the followings: #{map-keys($map-for-directions)}.";
+    @if type-of($direction) != "number" or not index("deg", unit($direction)) {
+      @error "`#{$direction}` is not a valid $direction for `text-gradient`. Pass an angle such as `45deg`, or one of: #{map-keys($map-for-directions)}.";
     } @else {
       background: linear-gradient($direction, $list);
     }
@@ -1369,6 +1398,13 @@
     // Takes each items come from $params.
     $item: nth($params, $i);
 
+    // Each group must carry at least a direction, a colour and a size. Without
+    // this the nth() calls below fail with "Invalid index", which says nothing
+    // about what the mixin wanted.
+    @if length($item) < 3 {
+      @error "`#{$item}` is not a valid shadow for `text-shadow`. Each group needs a direction, a colour and a size, such as `bottom-right red 5px`. An optional blur and a fill flag may follow.";
+    }
+
     // The first value comes from the $item is direction.
     // This will be used in the @if, @else statements with $size to control the offset of the shadows.
     $direction: nth($item, 1);

package/scss/_gerillass.scss

@@ -27,6 +27,7 @@
 @import "utilities/font-sizer";
 @import "utilities/font-source";
 @import "utilities/is-color";
+@import "utilities/is-gutter";
 @import "utilities/is-number";
 @import "utilities/is-time";
 @import "utilities/lighten";

package/scss/library/_after.scss

@@ -4,7 +4,9 @@
   &::after {
     @if $content == null {
       @content;
-    } @else if $content != null {
+    } @else if 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 {
       $data: str-slice($content, 1, 5);
       @if $data == "data-" {
         content: attr(#{$content});

package/scss/library/_background-dots.scss

@@ -7,6 +7,9 @@
   $diagonal: true,
   $image: null
 ) {
+  @if $image != null and 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`.";
   }

package/scss/library/_background-stripes.scss

@@ -6,6 +6,12 @@
   $rotation: -45deg,
   $image: null
 ) {
+  @if 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 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 index("deg", unit($rotation)), $rotation + deg, $rotation);
   $get-image: if($image, unquote(", ") + url(unquote($image)), unquote(""));
   @if not $color {

package/scss/library/_before.scss

@@ -4,7 +4,9 @@
   &::before {
     @if $content == null {
       @content;
-    } @else if $content != null {
+    } @else if 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 {
       $data: str-slice($content, 1, 5);
       @if $data == "data-" {
         content: attr(#{$content});

package/scss/library/_breakpointer.scss

@@ -1,6 +1,9 @@
 @charset "UTF-8";
 
 @mixin breakpointer($selector: null) {
+  @if $selector != null and type-of($selector) != "string" {
+    @error "`#{$selector}` is not a valid $selector for `breakpointer`. Pass a selector as a string, such as `\".debug\"`, or no argument at all to attach it to body.";
+  }
   @if & {
     &::before {
       @content;

package/scss/library/_columnizer.scss

@@ -27,7 +27,7 @@
         &:not(:last-child) {
           margin-right: 0;
         }
-      } @else if type-of(nth($params, 2)) == number {
+      } @else if __isGutter(nth($params, 2)) {
         $gutter: nth($params, length($params));
         flex-grow: 0;
         flex-shrink: 0;
@@ -40,7 +40,7 @@
           margin-right: 0;
         }
       } @else {
-        @error "`#{nth($params, 2)}` is not a valid second argument for `columnizer`. Pass a gutter length such as `20px`, or a boolean telling the last row whether to fill.";
+        @error "`#{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 length($params) == 3 {
       $gutter: nth($params, 2);

package/scss/library/_escape-to-parent.scss

@@ -1,6 +1,9 @@
 @charset "UTF-8";
 
 @mixin escape-to-parent($selector: null) {
+  @if $selector != null and type-of($selector) != "string" {
+    @error "`#{$selector}` is not a valid $selector for `escape-to-parent`. Pass a selector as a string, such as `\".theme-dark\"`.";
+  }
   @at-root #{$selector}#{&} {
     @content;
   }

package/scss/library/_font-face.scss

@@ -9,6 +9,10 @@
 ) {
   @if & {
     @error "You must call the mixin at the root level of your style sheet, not in the `#{&+'{'+'}'}` selector.";
+  } @else if type-of($font-family) != "string" {
+    @error "`#{$font-family}` is not a valid $font-family for `font-face`. Pass the family name as a string, such as `\"Inter\"`.";
+  } @else if 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 {
     
     $list: ();

package/scss/library/_linear-gradient.scss

@@ -11,8 +11,8 @@
       $list
     );
   } @else if not map-has-key($map-for-directions, $direction) {
-    @if not index("deg", unit($direction)) {
-      @error "#{$direction} is a wrong value for the $direction parameter. The value must be eighter a number followed by the 'deg' unit or one of the followings: #{map-keys($map-for-directions)}.";
+    @if type-of($direction) != "number" or not index("deg", unit($direction)) {
+      @error "`#{$direction}` is not a valid $direction for `linear-gradient`. Pass an angle such as `45deg`, or one of: #{map-keys($map-for-directions)}.";
     } @else {
       background: linear-gradient($direction, $list);
     }

package/scss/library/_radial-gradient.scss

@@ -1,6 +1,12 @@
 @charset "UTF-8";
 
 @mixin radial-gradient($shape, $position, $colors) {
+  @if type-of($shape) != "string" {
+    @error "`#{$shape}` is not a valid $shape for `radial-gradient`. Pass `circle` or `ellipse`.";
+  }
+  @if type-of($position) != "string" {
+    @error "`#{$position}` is not a valid $position for `radial-gradient`. Pass a position name such as `center` or `top-left`, or a raw CSS position as a string.";
+  }
   $list: ();
   $shape: unquote($shape);
   $position: unquote($position);

package/scss/library/_text-gradient.scss

@@ -11,8 +11,8 @@
       $list
     );
   } @else if not map-has-key($map-for-directions, $direction) {
-    @if not index("deg", unit($direction)) {
-      @error "#{$direction} is a wrong value for the $direction parameter. The value must be eighter a number followed by the 'deg' unit or one of the followings: #{map-keys($map-for-directions)}.";
+    @if type-of($direction) != "number" or not index("deg", unit($direction)) {
+      @error "`#{$direction}` is not a valid $direction for `text-gradient`. Pass an angle such as `45deg`, or one of: #{map-keys($map-for-directions)}.";
     } @else {
       background: linear-gradient($direction, $list);
     }

package/scss/library/_text-shadow.scss

@@ -7,6 +7,13 @@
     // Takes each items come from $params.
     $item: nth($params, $i);
 
+    // Each group must carry at least a direction, a colour and a size. Without
+    // this the nth() calls below fail with "Invalid index", which says nothing
+    // about what the mixin wanted.
+    @if length($item) < 3 {
+      @error "`#{$item}` is not a valid shadow for `text-shadow`. Each group needs a direction, a colour and a size, such as `bottom-right red 5px`. An optional blur and a fill flag may follow.";
+    }
+
     // The first value comes from the $item is direction.
     // This will be used in the @if, @else statements with $size to control the offset of the shadows.
     $direction: nth($item, 1);

package/scss/utilities/_clear-whitespace.scss

@@ -1,6 +1,9 @@
 @charset "UTF-8";
 
 @function __clearWhitespace($string) {
+  @if type-of($string) != "string" {
+    @error "`#{$string}` is not a valid $string for `__clearWhitespace`. Pass a string.";
+  }
   @while (str-index($string, " ") != null) {
     $index: str-index($string, " ");
     $string: "#{str-slice($string, 0, $index - 1)}#{str-slice($string, $index + 1)}";

package/scss/utilities/_convert-to-number.scss

@@ -2,6 +2,10 @@
 
 @function __convertToNumber($value) {
 
+  @if type-of($value) != "string" {
+    @error "`#{$value}` is not a valid $value for `__convertToNumber`. Pass a string made only of digits, such as `\"42\"`.";
+  }
+
   $string-numerals: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
   $calc: 0;
 

package/scss/utilities/_is-gutter.scss

@@ -0,0 +1,21 @@
+@charset "UTF-8";
+
+// True for anything that can legally sit where a CSS length is expected: a
+// number, a Sass calculation such as calc() or clamp(), or an unquoted string
+// holding a parenthesis, which is how var() and env() arrive.
+//
+// Written because `type-of($value) == number` rejects `var(--gap)`, and a
+// gutter expressed as a custom property is perfectly reasonable CSS.
+
+@function __isGutter($value) {
+  @if type-of($value) == "number" {
+    @return true;
+  }
+  @if type-of($value) == "calculation" {
+    @return true;
+  }
+  @if type-of($value) == "string" and str-index(quote($value), "(") {
+    @return true;
+  }
+  @return false;
+}

package/scss/utilities/_null.scss

@@ -1,6 +1,9 @@
 @charset "UTF-8";
 
 @function __null($value, $seperation: comma, $skip: false) {
+  @if not index("comma" "space" "slash", $seperation) {
+    @error "`#{$seperation}` is not a valid $seperation for `__null`. Pass `comma`, `space` or `slash`.";
+  }
   $list: ();
   @for $i from 1 through length($value) {
     @if nth($value, $i) == null {

package/scss/utilities/_pixelify.scss

@@ -3,6 +3,9 @@
 // This function checks if the argument has a px unit. If not, it adds a px unit to the end of the argument.
 
 @function __pixelify($value) {
+  @if type-of($value) != "number" {
+    @error "`#{$value}` is not a valid $value for `__pixelify`. Pass a number, with or without a unit.";
+  }
   @if unit($value) == "px" {
     @return $value;
   } @else if unit($value) != "px" {

package/scss/utilities/_validate-length.scss

@@ -1,13 +1,25 @@
 @charset "UTF-8";
 
 @function __validateLength($value) {
-  $list: ("auto", "inherit", "initial", 0);
-  @if index($list, $value) {
+  $keywords: ("auto", "inherit", "initial", "unset", "revert", 0);
+
+  @if index($keywords, $value) {
+    @return $value;
+  }
+  @if type-of($value) == "number" and not unitless($value) {
     @return $value;
-  } @else if type-of($value) == "number" and not unitless($value) {
+  }
+  // calc(), clamp(), min() and max() arrive as Sass calculations; var() and
+  // env() arrive as unquoted strings holding a parenthesis. Both are valid
+  // lengths, and warning about them means warning about correct modern CSS,
+  // which this function used to do.
+  @if type-of($value) == "calculation" {
     @return $value;
-  } @else {
-    @warn "Please pass some values with unit like `#{$value}px`, `#{$value}em`, or `#{$value}%` etc. or pass one of the following arguments: `auto`, ìnherit`, ìnitial` or `0`.";
+  }
+  @if type-of($value) == "string" and str-index(quote($value), "(") {
     @return $value;
   }
+
+  @warn "`#{$value}` does not look like a length. Pass a number with a unit such as `20px`, a CSS function such as `var(--gap)` or `calc(1rem + 2px)`, or one of: auto, inherit, initial, unset, revert, 0.";
+  @return $value;
 }

package/scss/utilities/_validate-scissors.scss

@@ -3,6 +3,12 @@
 @function __validateScissors($value) {
   $list: ();
   @for $i from 1 through length($value) {
+    $item: nth($value, $i);
+    // unitless() below throws on anything that is not a number, and its message
+    // names its own parameter rather than the corner that was wrong.
+    @if $item != null and type-of($item) != "number" {
+      @error "`#{$item}` is not a valid corner size. Pass a length such as `12px`, or a unitless number which is treated as pixels.";
+    }
     @if nth($value, $i) == null {
       $list: append($list, 0px, comma);
     } @else if unitless(nth($value, $i)) {