gerillass 1.6.0 → 1.6.1

package/SKILL.md

@@ -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

package/gerillass.json

@@ -1,6 +1,6 @@
 {
   "name": "gerillass",
-  "version": "1.6.0",
+  "version": "1.6.1",
   "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",
@@ -584,7 +595,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 +674,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 +730,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 +871,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 +1042,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 +1236,9 @@
       "examples": [
         ".a { @include text-gradient(\"top\", (red, blue)); }"
       ],
-      "rejects": []
+      "rejects": [
+        ".a { @include text-gradient(sideways, (red, blue)); }"
+      ]
     },
     {
       "name": "text-image",
@@ -1278,7 +1302,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 +1432,9 @@
       "examples": [
         ".a { content: __clearWhitespace(\"a b c\"); }"
       ],
-      "rejects": []
+      "rejects": [
+        ".a { --x: #{__clearWhitespace(42)}; }"
+      ]
     },
     {
       "name": "__convertToEm",
@@ -1445,7 +1474,9 @@
       "examples": [
         ".a { z-index: __convertToNumber(\"42\"); }"
       ],
-      "rejects": []
+      "rejects": [
+        ".a { --x: #{__convertToNumber(42)}; }"
+      ]
     },
     {
       "name": "__darken",
@@ -1690,7 +1721,9 @@
       "examples": [
         ".a { margin: __null(1px null 3px null, space); }"
       ],
-      "rejects": []
+      "rejects": [
+        ".a { --x: #{__null(1px null, nonsense)}; }"
+      ]
     },
     {
       "name": "__pixelify",
@@ -1710,7 +1743,9 @@
       "examples": [
         ".a { width: __pixelify(24); }"
       ],
-      "rejects": []
+      "rejects": [
+        ".a { --x: #{__pixelify(nonsense)}; }"
+      ]
     },
     {
       "name": "__pseudoSelector",

package/package.json

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

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;
@@ -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/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/_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/_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)) {