gerillass 1.6.1 → 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.
 
@@ -171,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.1",
+  "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",
@@ -506,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"
           ]
@@ -519,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); }"
       ]
     },
     {
@@ -1590,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",

package/package.json

@@ -16,13 +16,13 @@
     }
   },
   "license": "Apache-2.0",
-  "version": "1.6.1",
+  "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

@@ -587,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;
@@ -600,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);

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/_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/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;
+}