gerillass 1.4.0 → 1.6.0

package/package.json

@@ -5,8 +5,18 @@
   "homepage": "https://gerillass.com",
   "author": "Halil İbrahim Çakıroğlu",
   "main": "scss/_gerillass.scss",
+  "exports": {
+    ".": {
+      "sass": "./scss/_gerillass.scss",
+      "default": "./scss/_gerillass.scss"
+    },
+    "./*": {
+      "sass": "./*",
+      "default": "./*"
+    }
+  },
   "license": "Apache-2.0",
-  "version": "1.4.0",
+  "version": "1.6.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/selfishprimate/gerillass.git"
@@ -37,6 +47,7 @@
     "needs": "^3.0.0"
   },
   "scripts": {
+    "manifest": "node tools/build-manifest.js && node tools/build-skill.js",
     "test": "jest"
   },
   "devDependencies": {

package/scss/_gerillass-prefix.scss

@@ -43,7 +43,7 @@
       @content;
     }
   } @else {
-    @error "The argument must be `null` or one of the followings: #{quote($list)}.";
+    @error "The argument must be `null` or one of the followings: #{$list}.";
   }
 }
 
@@ -60,7 +60,7 @@
       @content;
     }
   } @else {
-    @error "The argument must be `null` or one of the followings: #{quote($list)}";
+    @error "The argument must be `null` or one of the followings: #{$list}";
   }
 }
 
@@ -91,6 +91,10 @@
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
     }
+  } @else if not & and $value == "only" {
+    @error "`only` has no meaning at the root of a stylesheet, because there is no selector to limit the effect to. Call `antialias(\"only\")` inside a selector, or pass no argument at all.";
+  } @else {
+    @error "`#{$value}` is not a valid argument for `antialias`. Pass `\"only\"` inside a selector to affect just that element, or pass no argument at all.";
   }
 }
 
@@ -103,6 +107,9 @@
   $diagonal: true,
   $image: null
 ) {
+  @if $diagonal != true and $diagonal != false {
+    @error "`#{$diagonal}` is not a valid $diagonal for `background-dots`. Pass `true` or `false`.";
+  }
   @if not $color {
     $color: rgba(0, 0, 0, 0.1);
     @if $diagonal == true {
@@ -174,11 +181,11 @@
               ),
               url($image-url);
           } @else {
-            @if index("deg", unit($filter-direction)) {
+            @if type-of($filter-direction) == "number" and index("deg", unit($filter-direction)) {
               background-image: linear-gradient($filter-direction, $color-list),
                 url($image-url);
             } @else {
-              @error "#{$filter-direction} is a wrong value for the $filter-direction parameter. The value must be either a number followed by the 'deg' unit or one of the following pre-defined values: #{quote(map-keys($map-for-directions))}.";
+              @error "`#{$filter-direction}` is not a valid $filter-direction. Pass an angle such as `45deg`, or one of: #{map-keys($map-for-directions)}.";
             }
           }
         } @else {
@@ -314,6 +321,10 @@
     *::after {
       box-sizing: border-box;
     }
+  } @else if not & and $value == "only" {
+    @error "`only` has no meaning at the root of a stylesheet, because there is no selector to limit the effect to. Call `border-box(\"only\")` inside a selector, or pass no argument at all.";
+  } @else {
+    @error "`#{$value}` is not a valid argument for `border-box`. Pass `\"only\"` inside a selector to affect just that element, or pass no argument at all.";
   }
 }
 
@@ -358,7 +369,7 @@
         border-bottom-left-radius: $value;
       }
     } @else {
-      @error "Corner value must be one of the followings: #{quote($list)}.";
+      @error "Corner value must be one of the followings: #{$list}.";
     }
   } @else if length($args) == 4 {
     $args: __null($args, space, true);
@@ -366,6 +377,8 @@
     border-top-right-radius: nth($args, 2);
     border-bottom-right-radius: nth($args, 3);
     border-bottom-left-radius: nth($args, 4);
+  } @else {
+    @error "`border-radius` takes 1, 2 or 4 arguments; you passed #{length($args)}. Use one radius for every corner, a corner name plus a radius, or four radii in top-left, top-right, bottom-right, bottom-left order.";
   }
 }
 
@@ -495,6 +508,9 @@
 
 
 @mixin gls-center($axis: "both") {
+  @if not index("both" "horizontal" "vertical", $axis) {
+    @error "`#{$axis}` is not a valid $axis for `center`. Pass one of: both, horizontal, vertical.";
+  }
   @if $axis == "both" or $axis == "vertical" {
     top: 50%;
   }
@@ -529,6 +545,9 @@
 
 
 @mixin gls-columnizer($params...) {
+  @if length($params) < 1 or length($params) > 3 {
+    @error "`columnizer` takes 1 to 3 arguments; you passed #{length($params)}. Pass the column count, optionally a gutter length, and optionally a boolean telling the last row whether to fill.";
+  }
   $columns: nth($params, 1);
   $gutter: null;
   $fill: false;
@@ -564,6 +583,8 @@
         &:nth-child(#{$columns}n) {
           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.";
       }
     } @else if length($params) == 3 {
       $gutter: nth($params, 2);
@@ -686,6 +707,8 @@
           @content;
         }
       }
+    } @else {
+      @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 length($params) > 1 {
     $items: "";
@@ -877,6 +900,8 @@
           @content;
         }
       }
+    } @else {
+      @error "`#{$value}` is not a valid argument for `only`. Pass a positive or negative number, one of `first`, `last`, `odd`, `even`, or a selector such as `.foo`.";
     }
   } @else if length($params) > 1 {
     $list: ();
@@ -1005,7 +1030,7 @@
       }
     }
   } @else {
-    @error "Error!";
+    @error "`remove` takes at most 2 arguments; you passed #{length($params)}. Pass nothing to hide the element outright, one breakpoint, `min`/`max` plus a breakpoint, or a start and an end breakpoint.";
   }
 }
 
@@ -1135,6 +1160,8 @@
       #{nth($corners, 4)} 100%,
       0 calc(100% - #{nth($corners, 4)})
     );
+  } @else {
+    @error "`scissors` takes either 1 corner size or 4; you passed #{length($corners)}. Pass one length to cut every corner equally, or four lengths in top-left, top-right, bottom-right, bottom-left order.";
   }
 }
 
@@ -1185,9 +1212,11 @@
       and (orientation: landscape) {
         @content;
       }
+    } @else {
+      @error "`#{$orientation}` is not a valid $orientation for `smartphone`. Pass `portrait`, `landscape`, or no orientation at all.";
     }
   } @else {
-    @warn "#{$device} is a wrong device name! The argument must be one of the followings: #{map-keys($map-for-smartphones)}";
+    @error "`#{$device}` is not a device known to `smartphone`. Pass one of: #{map-keys($map-for-smartphones)}.";
   }
 }
 
@@ -1203,6 +1232,8 @@
         display: inline-block;
         background-image: url($image-url);
         background-repeat: no-repeat;
+      } @else {
+        @error "`#{nth($params, 1)}` is not a valid image path for `sprite`. The path must end in .png, .jpg or .svg.";
       }
     } @else {
       $position: nth($params, 1);
@@ -1215,6 +1246,8 @@
     background-image: url($image-url);
     background-position: $position;
     background-repeat: no-repeat;
+  } @else {
+    @error "`sprite` takes 1 or 2 arguments; you passed #{length($params)}. Pass an image path, a background position, or both in that order.";
   }
   @content;
 }
@@ -1257,9 +1290,11 @@
       and (orientation: landscape) {
         @content;
       }
+    } @else {
+      @error "`#{$orientation}` is not a valid $orientation for `tablet`. Pass `portrait`, `landscape`, or no orientation at all.";
     }
   } @else {
-    @warn "#{$device} is a wrong device name! The argument must be one of the followings: #{map-keys($map-for-tablets)}";
+    @error "`#{$device}` is not a device known to `tablet`. Pass one of: #{map-keys($map-for-tablets)}.";
   }
 }
 
@@ -1318,6 +1353,10 @@
     *::selection {
       @content;
     }
+  } @else if not & and $value == "only" {
+    @error "`only` has no meaning at the root of a stylesheet, because there is no selector to limit the effect to. Call `text-selection(\"only\")` inside a selector, or pass no argument at all.";
+  } @else {
+    @error "`#{$value}` is not a valid argument for `text-selection`. Pass `\"only\"` inside a selector to affect just that element, or pass no argument at all.";
   }
 }
 
@@ -1506,6 +1545,6 @@
       @content;
     }
   } @else {
-    @error "The argument for direction must be one of the followings: #{quote($list-of-directions)}";
+    @error "The argument for direction must be one of the followings: #{$list-of-directions}";
   }
 }

package/scss/library/_all-buttons.scss

@@ -12,6 +12,6 @@
       @content;
     }
   } @else {
-    @error "The argument must be `null` or one of the followings: #{quote($list)}.";
+    @error "The argument must be `null` or one of the followings: #{$list}.";
   }
 }

package/scss/library/_all-text-inputs.scss

@@ -12,6 +12,6 @@
       @content;
     }
   } @else {
-    @error "The argument must be `null` or one of the followings: #{quote($list)}";
+    @error "The argument must be `null` or one of the followings: #{$list}";
   }
 }

package/scss/library/_antialias.scss

@@ -25,5 +25,9 @@
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
     }
+  } @else if not & and $value == "only" {
+    @error "`only` has no meaning at the root of a stylesheet, because there is no selector to limit the effect to. Call `antialias(\"only\")` inside a selector, or pass no argument at all.";
+  } @else {
+    @error "`#{$value}` is not a valid argument for `antialias`. Pass `\"only\"` inside a selector to affect just that element, or pass no argument at all.";
   }
 }

package/scss/library/_background-dots.scss

@@ -7,6 +7,9 @@
   $diagonal: true,
   $image: null
 ) {
+  @if $diagonal != true and $diagonal != false {
+    @error "`#{$diagonal}` is not a valid $diagonal for `background-dots`. Pass `true` or `false`.";
+  }
   @if not $color {
     $color: rgba(0, 0, 0, 0.1);
     @if $diagonal == true {

package/scss/library/_background-image.scss

@@ -23,11 +23,11 @@
               ),
               url($image-url);
           } @else {
-            @if index("deg", unit($filter-direction)) {
+            @if type-of($filter-direction) == "number" and index("deg", unit($filter-direction)) {
               background-image: linear-gradient($filter-direction, $color-list),
                 url($image-url);
             } @else {
-              @error "#{$filter-direction} is a wrong value for the $filter-direction parameter. The value must be either a number followed by the 'deg' unit or one of the following pre-defined values: #{quote(map-keys($map-for-directions))}.";
+              @error "`#{$filter-direction}` is not a valid $filter-direction. Pass an angle such as `45deg`, or one of: #{map-keys($map-for-directions)}.";
             }
           }
         } @else {

package/scss/library/_border-box.scss

@@ -22,5 +22,9 @@
     *::after {
       box-sizing: border-box;
     }
+  } @else if not & and $value == "only" {
+    @error "`only` has no meaning at the root of a stylesheet, because there is no selector to limit the effect to. Call `border-box(\"only\")` inside a selector, or pass no argument at all.";
+  } @else {
+    @error "`#{$value}` is not a valid argument for `border-box`. Pass `\"only\"` inside a selector to affect just that element, or pass no argument at all.";
   }
 }

package/scss/library/_border-radius.scss

@@ -39,7 +39,7 @@
         border-bottom-left-radius: $value;
       }
     } @else {
-      @error "Corner value must be one of the followings: #{quote($list)}.";
+      @error "Corner value must be one of the followings: #{$list}.";
     }
   } @else if length($args) == 4 {
     $args: __null($args, space, true);
@@ -47,5 +47,7 @@
     border-top-right-radius: nth($args, 2);
     border-bottom-right-radius: nth($args, 3);
     border-bottom-left-radius: nth($args, 4);
+  } @else {
+    @error "`border-radius` takes 1, 2 or 4 arguments; you passed #{length($args)}. Use one radius for every corner, a corner name plus a radius, or four radii in top-left, top-right, bottom-right, bottom-left order.";
   }
 }

package/scss/library/_center.scss

@@ -1,6 +1,9 @@
 @charset "UTF-8";
 
 @mixin center($axis: "both") {
+  @if not index("both" "horizontal" "vertical", $axis) {
+    @error "`#{$axis}` is not a valid $axis for `center`. Pass one of: both, horizontal, vertical.";
+  }
   @if $axis == "both" or $axis == "vertical" {
     top: 50%;
   }

package/scss/library/_columnizer.scss

@@ -1,6 +1,9 @@
 @charset "UTF-8";
 
 @mixin columnizer($params...) {
+  @if length($params) < 1 or length($params) > 3 {
+    @error "`columnizer` takes 1 to 3 arguments; you passed #{length($params)}. Pass the column count, optionally a gutter length, and optionally a boolean telling the last row whether to fill.";
+  }
   $columns: nth($params, 1);
   $gutter: null;
   $fill: false;
@@ -36,6 +39,8 @@
         &:nth-child(#{$columns}n) {
           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.";
       }
     } @else if length($params) == 3 {
       $gutter: nth($params, 2);

package/scss/library/_except.scss

@@ -37,6 +37,8 @@
           @content;
         }
       }
+    } @else {
+      @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 length($params) > 1 {
     $items: "";

package/scss/library/_only.scss

@@ -38,6 +38,8 @@
           @content;
         }
       }
+    } @else {
+      @error "`#{$value}` is not a valid argument for `only`. Pass a positive or negative number, one of `first`, `last`, `odd`, `even`, or a selector such as `.foo`.";
     }
   } @else if length($params) > 1 {
     $list: ();

package/scss/library/_remove.scss

@@ -29,6 +29,6 @@
       }
     }
   } @else {
-    @error "Error!";
+    @error "`remove` takes at most 2 arguments; you passed #{length($params)}. Pass nothing to hide the element outright, one breakpoint, `min`/`max` plus a breakpoint, or a start and an end breakpoint.";
   }
 }

package/scss/library/_scissors.scss

@@ -25,5 +25,7 @@
       #{nth($corners, 4)} 100%,
       0 calc(100% - #{nth($corners, 4)})
     );
+  } @else {
+    @error "`scissors` takes either 1 corner size or 4; you passed #{length($corners)}. Pass one length to cut every corner equally, or four lengths in top-left, top-right, bottom-right, bottom-left order.";
   }
 }

package/scss/library/_smartphone.scss

@@ -16,8 +16,10 @@
       and (orientation: landscape) {
         @content;
       }
+    } @else {
+      @error "`#{$orientation}` is not a valid $orientation for `smartphone`. Pass `portrait`, `landscape`, or no orientation at all.";
     }
   } @else {
-    @warn "#{$device} is a wrong device name! The argument must be one of the followings: #{map-keys($map-for-smartphones)}";
+    @error "`#{$device}` is not a device known to `smartphone`. Pass one of: #{map-keys($map-for-smartphones)}.";
   }
 }

package/scss/library/_sprite.scss

@@ -10,6 +10,8 @@
         display: inline-block;
         background-image: url($image-url);
         background-repeat: no-repeat;
+      } @else {
+        @error "`#{nth($params, 1)}` is not a valid image path for `sprite`. The path must end in .png, .jpg or .svg.";
       }
     } @else {
       $position: nth($params, 1);
@@ -22,6 +24,8 @@
     background-image: url($image-url);
     background-position: $position;
     background-repeat: no-repeat;
+  } @else {
+    @error "`sprite` takes 1 or 2 arguments; you passed #{length($params)}. Pass an image path, a background position, or both in that order.";
   }
   @content;
 }

package/scss/library/_tablet.scss

@@ -16,8 +16,10 @@
       and (orientation: landscape) {
         @content;
       }
+    } @else {
+      @error "`#{$orientation}` is not a valid $orientation for `tablet`. Pass `portrait`, `landscape`, or no orientation at all.";
     }
   } @else {
-    @warn "#{$device} is a wrong device name! The argument must be one of the followings: #{map-keys($map-for-tablets)}";
+    @error "`#{$device}` is not a device known to `tablet`. Pass one of: #{map-keys($map-for-tablets)}.";
   }
 }

package/scss/library/_text-selection.scss

@@ -14,5 +14,9 @@
     *::selection {
       @content;
     }
+  } @else if not & and $value == "only" {
+    @error "`only` has no meaning at the root of a stylesheet, because there is no selector to limit the effect to. Call `text-selection(\"only\")` inside a selector, or pass no argument at all.";
+  } @else {
+    @error "`#{$value}` is not a valid argument for `text-selection`. Pass `\"only\"` inside a selector to affect just that element, or pass no argument at all.";
   }
 }

package/scss/library/_triangle.scss

@@ -36,6 +36,6 @@
       @content;
     }
   } @else {
-    @error "The argument for direction must be one of the followings: #{quote($list-of-directions)}";
+    @error "The argument for direction must be one of the followings: #{$list-of-directions}";
   }
 }