gerillass 1.6.1 → 2.0.0

package/package.json

@@ -16,13 +16,13 @@
     }
   },
   "license": "Apache-2.0",
-  "version": "1.6.1",
+  "version": "2.0.0",
   "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",
@@ -37,24 +37,14 @@
     "sass-toolkit",
     "sass-library",
     "sass-framework",
-    "sass-tool-set",
-    "eyeglass-module"
+    "sass-tool-set"
   ],
-  "eyeglass": {
-    "sassDir": "scss",
-    "exports": false,
-    "name": "gerillass",
-    "needs": "^3.0.0"
-  },
   "scripts": {
     "manifest": "node tools/build-manifest.js && node tools/build-skill.js",
     "test": "jest"
   },
   "devDependencies": {
     "glob": "^11.0.0",
-    "gulp": "^5.0.1",
-    "gulp-concat": "^2.6.1",
-    "gulp-replace": "^1.1.4",
     "jest": "^30.0.5",
     "sass": "^1.90.0",
     "sass-true": "^9.0.0"

package/scss/_gerillass.scss

@@ -1,98 +1,15 @@
 @charset "UTF-8";
-@use "sass:math";
 
 // https://www.gerillass.com/
 // Copyright 2020 by Halil İbrahim Çakıroğlu
 // Apache License 2.0
 
-@import "lists/list-of-anchor-pseudo-classes";
-@import "lists/list-of-buttons";
-@import "lists/list-of-counter-styles";
-@import "lists/list-of-directions";
-@import "lists/list-of-length-units";
-@import "lists/list-of-text-inputs";
-
-@import "maps/map-for-breakpoints";
-@import "maps/map-for-directions";
-@import "maps/map-for-font-formats";
-@import "maps/map-for-positions";
-@import "maps/map-for-smartphones";
-@import "maps/map-for-tablets";
-
-@import "utilities/clear-unit";
-@import "utilities/clear-whitespace";
-@import "utilities/convert-to-em";
-@import "utilities/convert-to-number";
-@import "utilities/darken";
-@import "utilities/font-sizer";
-@import "utilities/font-source";
-@import "utilities/is-color";
-@import "utilities/is-number";
-@import "utilities/is-time";
-@import "utilities/lighten";
-@import "utilities/map-deep-get";
-@import "utilities/null";
-@import "utilities/pixelify";
-@import "utilities/pseudo-selector";
-@import "utilities/remify";
-@import "utilities/shorthand-property";
-@import "utilities/validate-breakpoint";
-@import "utilities/validate-length";
-@import "utilities/validate-ratio";
-@import "utilities/validate-scissors";
-
-@import "library/adaptive";
-@import "library/after";
-@import "library/all-buttons";
-@import "library/all-text-inputs";
-@import "library/antialias";
-@import "library/background-dots";
-@import "library/background-image";
-@import "library/background-stripes";
-@import "library/before";
-@import "library/border-box";
-@import "library/border-radius";
-@import "library/brand-logo";
-@import "library/breakpoint";
-@import "library/breakpointer";
-@import "library/center";
-@import "library/circle";
-@import "library/clearfix";
-@import "library/columnizer";
-@import "library/counter";
-@import "library/ellipsis";
-@import "library/escape-to-parent";
-@import "library/except";
-@import "library/font-face";
-@import "library/hide";
-@import "library/linear-gradient";
-@import "library/loadify";
-@import "library/only";
-@import "library/placeholder-shown";
-@import "library/placeholder";
-@import "library/position";
-@import "library/radial-gradient";
-@import "library/ratio-box";
-@import "library/remove";
-@import "library/reset-css";
-@import "library/reset-figure";
-@import "library/resizable";
-@import "library/responsive-image";
-@import "library/responsive-video";
-@import "library/scissors";
-@import "library/screen-agent";
-@import "library/sizer";
-@import "library/smartphone";
-@import "library/sprite";
-@import "library/stretched-link";
-@import "library/tablet";
-@import "library/text-gradient";
-@import "library/text-image";
-@import "library/text-selection";
-@import "library/text-shadow";
-@import "library/text-stroke";
-@import "library/triangle";
-
-// Import prefixed version of Gerillass
-@import "gerillass-prefix";
+@forward "lists";
+@forward "maps";
+@forward "utilities";
+@forward "library";
 
+// The gls- prefixed half of the API. Until 2.0.0 this was a generated file:
+// gulpfile.js concatenated scss/library and rewrote "@mixin " to "@mixin gls-".
+// The module system does the same thing in one line, so the generator is gone.
+@forward "library" as gls-*;

package/scss/library/_adaptive.scss

@@ -1,7 +1,10 @@
 @charset "UTF-8";
 
+@use "sass:map";
+@use "../maps/map-for-breakpoints" as *;
+
 @mixin adaptive($gutter: 30px) {
-  $actual-breakpoints: map-remove($map-for-breakpoints, "xsmall");
+  $actual-breakpoints: map.remove($map-for-breakpoints, "xsmall");
   margin: 0 auto;
   @each $item, $value in $actual-breakpoints {
     @media (min-width: #{$value}) {

package/scss/library/_after.scss

@@ -1,13 +1,16 @@
 @charset "UTF-8";
 
+@use "sass:meta";
+@use "sass:string";
+
 @mixin after($content: null) {
   &::after {
     @if $content == null {
       @content;
-    } @else if type-of($content) != "string" {
+    } @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 {
-      $data: str-slice($content, 1, 5);
+      $data: string.slice($content, 1, 5);
       @if $data == "data-" {
         content: attr(#{$content});
         @content;

package/scss/library/_all-buttons.scss

@@ -1,13 +1,17 @@
 @charset "UTF-8";
 
+@use "sass:list";
+@use "../lists/list-of-buttons" as *;
+@use "../utilities/pseudo-selector" as *;
+
 @mixin all-buttons($pseudo: null) {
   $list: "hover", "focus", "active", "disabled";
   @if not $pseudo {
     #{$list-of-buttons} {
       @content;
     }   
-  } @else if index($list, $pseudo) {
-    $all-buttons: __pseudoSelector($list-of-buttons, $pseudo);
+  } @else if list.index($list, $pseudo) {
+    $all-buttons: pseudoSelector($list-of-buttons, $pseudo);
     #{$all-buttons} {
       @content;
     }

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

@@ -1,13 +1,17 @@
 @charset "UTF-8";
 
+@use "sass:list";
+@use "../lists/list-of-text-inputs" as *;
+@use "../utilities/pseudo-selector" as *;
+
 @mixin all-text-inputs($pseudo: null) {
   $list: "hover", "focus", "active", "invalid", "required", "disabled";
   @if not $pseudo {
     #{$list-of-text-inputs} {
       @content;
     }
-  } @else if index($list, $pseudo) {
-    $all-text-inputs: __pseudoSelector($list-of-text-inputs, $pseudo);
+  } @else if list.index($list, $pseudo) {
+    $all-text-inputs: pseudoSelector($list-of-text-inputs, $pseudo);
     #{$all-text-inputs} {
       @content;
     }

package/scss/library/_aspect-ratio.scss

@@ -0,0 +1,27 @@
+@charset "UTF-8";
+
+@use "sass:list";
+@use "../utilities/validate-ratio" as *;
+
+// Holds an element to a ratio, and closes the three gaps CSS leaves open when
+// you set `aspect-ratio` by hand. All three were measured in a browser:
+//
+//   * an <img> with a ratio but no `object-fit` is stretched, not cropped;
+//   * an <iframe> carries a 2px default border, so `width: 100%` overflows its
+//     container by 4px;
+//   * the ratio belongs on the element itself. On a wrapper it does nothing for
+//     an <iframe> inside, which keeps its intrinsic 300x150.
+//
+// Pass `null` as $fit to leave `object-fit` alone.
+@mixin aspect-ratio($ratio: null, $fit: cover) {
+  @if $fit and not list.index("fill" "contain" "cover" "none" "scale-down", $fit) {
+    @error "`#{$fit}` is not a valid $fit for `aspect-ratio`. Pass one of: fill, contain, cover, none, scale-down, or null to leave object-fit alone.";
+  }
+  display: block;
+  width: 100%;
+  aspect-ratio: validateRatio($ratio);
+  border: 0;
+  @if $fit {
+    object-fit: $fit;
+  }
+}

package/scss/library/_background-dots.scss

@@ -1,5 +1,10 @@
 @charset "UTF-8";
 
+@use "sass:list";
+@use "sass:math";
+@use "sass:meta";
+@use "sass:string";
+
 @mixin background-dots(
   $color: null,
   $size: 1em,
@@ -7,7 +12,7 @@
   $diagonal: true,
   $image: null
 ) {
-  @if $image != null and type-of($image) != "string" {
+  @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.";
   }
   @if $diagonal != true and $diagonal != false {
@@ -26,15 +31,15 @@
     }
   } @else if $color {
     @if $diagonal == true {
-      background-image: radial-gradient(nth($color, 1) $size, transparent 0),
-        radial-gradient(nth($color, length($color)) $size, transparent 0);
+      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);
     } @else if $diagonal == false {
-      background-image: radial-gradient(nth($color, 1) $size, transparent 0);
+      background-image: radial-gradient(list.nth($color, 1) $size, transparent 0);
       background-position: math.div($gutter, 2) math.div($gutter, 2);
-      @if length($color) > 1 {
-        @error "Please do not pass more than one argument when you disable 'diagonal' property! Simply remove the argument(s) after '#{nth($color, 1)}' to resolve the problem.";
+      @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.";
       }
     }
   }
@@ -50,7 +55,7 @@
       height: 100%;
       top: 0;
       left: 0;
-      background-image: url(unquote($image));
+      background-image: url(string.unquote($image));
       background-repeat: no-repeat;
       background-position: center;
       background-size: cover;

package/scss/library/_background-image.scss

@@ -1,5 +1,12 @@
 @charset "UTF-8";
 
+@use "sass:list";
+@use "sass:map";
+@use "sass:math";
+@use "sass:meta";
+@use "../library/linear-gradient" as *;
+@use "../maps/map-for-directions" as *;
+
 @mixin background-image(
   $image-url: null,
   $filter-color: null,
@@ -7,27 +14,27 @@
 ) {
   @if $image-url {
     @if $filter-color {
-      @if length($filter-color) == 1 {
+      @if list.length($filter-color) == 1 {
         background-image: linear-gradient(to top, $filter-color, $filter-color),
           url($image-url);
-      } @else if length($filter-color) > 1 {
+      } @else if list.length($filter-color) > 1 {
         $color-list: ();
-        @for $i from 1 through length($filter-color) {
-          $color-list: append($color-list, nth($filter-color, $i), comma);
+        @for $i from 1 through list.length($filter-color) {
+          $color-list: list.append($color-list, list.nth($filter-color, $i), comma);
         }
         @if $filter-direction {
-          @if map-has-key($map-for-directions, $filter-direction) {
+          @if map.has-key($map-for-directions, $filter-direction) {
             background-image: linear-gradient(
-                map-get($map-for-directions, $filter-direction),
+                map.get($map-for-directions, $filter-direction),
                 $color-list
               ),
               url($image-url);
           } @else {
-            @if type-of($filter-direction) == "number" and index("deg", unit($filter-direction)) {
+            @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);
             } @else {
-              @error "`#{$filter-direction}` is not a valid $filter-direction. Pass an angle such as `45deg`, or one of: #{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 {
@@ -48,10 +55,10 @@
       top: 0;
       width: 100%;
       height: 100%;
-      @if length($filter-color) == 1 {
+      @if list.length($filter-color) == 1 {
         background: $filter-color;
-      } @else if length($filter-color) > 1 {
-        @include gls-linear-gradient(
+      } @else if list.length($filter-color) > 1 {
+        @include linear-gradient(
           if(not $filter-direction, "top", $filter-direction),
           $filter-color
         );

package/scss/library/_background-stripes.scss

@@ -1,19 +1,24 @@
 @charset "UTF-8";
 
+@use "sass:list";
+@use "sass:math";
+@use "sass:meta";
+@use "sass:string";
+
 @mixin background-stripes(
   $color: null,
   $thickness: 1em,
   $rotation: -45deg,
   $image: null
 ) {
-  @if type-of($rotation) != "number" {
+  @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.";
   }
-  @if $image != null and type-of($image) != "string" {
+  @if $image != null and meta.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(""));
+  $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(""));
   @if not $color {
     $color: rgba(0, 0, 0, 0.1);
     background-image: repeating-linear-gradient(
@@ -28,7 +33,7 @@
       background-repeat: no-repeat;
       background-size: cover;
     }
-  } @else if length($color) == 1 {
+  } @else if list.length($color) == 1 {
     background-image: repeating-linear-gradient(
         $validate-unit,
         $color 0,
@@ -41,12 +46,12 @@
       background-repeat: no-repeat;
       background-size: cover;
     }
-  } @else if length($color) > 1 {
+  } @else if list.length($color) > 1 {
     $list: ();
-    @for $i from 1 through length($color) {
-      $index-color: nth($color, $i);
+    @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;
-      $list: append($list, $style-rule, comma);
+      $list: list.append($list, $style-rule, comma);
     }
     background-image: repeating-linear-gradient($validate-unit, $list) + $get-image;
     @if $image {

package/scss/library/_before.scss

@@ -1,13 +1,16 @@
 @charset "UTF-8";
 
+@use "sass:meta";
+@use "sass:string";
+
 @mixin before($content: null) {
   &::before {
     @if $content == null {
       @content;
-    } @else if type-of($content) != "string" {
+    } @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 {
-      $data: str-slice($content, 1, 5);
+      $data: string.slice($content, 1, 5);
       @if $data == "data-" {
         content: attr(#{$content});
         @content;

package/scss/library/_border-radius.scss

@@ -1,14 +1,18 @@
 @charset "UTF-8";
 
+@use "sass:list";
+@use "../lists/list-of-directions" as *;
+@use "../utilities/fill-nulls" as *;
+
 @mixin border-radius($args...) {
-  $list: join($list-of-directions, ("cross-left", "cross-right", "all"));
-  @if length($args) == 1 {
-    $value: nth($args, 1);
-    border-radius: __null($value, space);
-  } @else if length($args) == 2 {
-    $corner: nth($args, 1);
-    $value: nth($args, 2);
-    @if index($list, $corner) {
+  $list: list.join($list-of-directions, ("cross-left", "cross-right", "all"));
+  @if list.length($args) == 1 {
+    $value: list.nth($args, 1);
+    border-radius: fillNulls($value, space);
+  } @else if list.length($args) == 2 {
+    $corner: list.nth($args, 1);
+    $value: list.nth($args, 2);
+    @if list.index($list, $corner) {
       @if $corner == "top" {
         border-top-left-radius: $value;
         border-top-right-radius: $value;
@@ -41,13 +45,13 @@
     } @else {
       @error "Corner value must be one of the followings: #{$list}.";
     }
-  } @else if length($args) == 4 {
-    $args: __null($args, space, true);
-    border-top-left-radius: nth($args, 1);
-    border-top-right-radius: nth($args, 2);
-    border-bottom-right-radius: nth($args, 3);
-    border-bottom-left-radius: nth($args, 4);
+  } @else if list.length($args) == 4 {
+    $args: fillNulls($args, space, true);
+    border-top-left-radius: list.nth($args, 1);
+    border-top-right-radius: list.nth($args, 2);
+    border-bottom-right-radius: list.nth($args, 3);
+    border-bottom-left-radius: list.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.";
+    @error "`border-radius` takes 1, 2 or 4 arguments; you passed #{list.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/_brand-logo.scss

@@ -1,5 +1,7 @@
 @charset "UTF-8";
 
+@use "../library/stretched-link" as *;
+
 @mixin brand-logo($width, $height, $image-url: null) {
   display: inline-block;
   position: relative;
@@ -17,6 +19,6 @@
     height: 1px;
     overflow: hidden;
     text-indent: 100%;
-    @include gls-stretched-link(after);
+    @include stretched-link(after);
   }
 }

package/scss/library/_breakpoint.scss

@@ -1,10 +1,15 @@
 @charset "UTF-8";
 
+@use "sass:list";
+@use "sass:map";
+@use "../maps/map-for-breakpoints" as *;
+@use "../utilities/validate-breakpoint" as *;
+
 @mixin breakpoint($params...) {
-  @if length($params) == 1 {
-    $value: nth($params, 1);
-    @if map-has-key($map-for-breakpoints, $value) {
-      @media (width: map-get($map-for-breakpoints, $value)) {
+  @if list.length($params) == 1 {
+    $value: list.nth($params, 1);
+    @if map.has-key($map-for-breakpoints, $value) {
+      @media (width: map.get($map-for-breakpoints, $value)) {
         @content;
       }
     } @else {
@@ -12,19 +17,19 @@
         @content;
       }
     }
-  } @else if length($params) == 2 {
-    @if not index("only" "min" "max" "between", nth($params, 1)) {
-      $start: nth($params, 1);
-      $end: nth($params, 2);
-      @media (min-width: #{__validateBreakpoint($start)}) and (max-width: #{if(map-has-key($map-for-breakpoints, $end), __validateBreakpoint($end) - 1, $end)}) {
+  } @else if list.length($params) == 2 {
+    @if not list.index("only" "min" "max" "between", list.nth($params, 1)) {
+      $start: list.nth($params, 1);
+      $end: list.nth($params, 2);
+      @media (min-width: #{validateBreakpoint($start)}) and (max-width: #{if(map.has-key($map-for-breakpoints, $end), validateBreakpoint($end) - 1, $end)}) {
         @content;
       }
     } @else {
-      $mode: nth($params, 1);
-      $value: nth($params, 2);
+      $mode: list.nth($params, 1);
+      $value: list.nth($params, 2);
       @if $mode == "only" {
-        @if map-has-key($map-for-breakpoints, $value) {
-          @media (width: map-get($map-for-breakpoints, $value)) {
+        @if map.has-key($map-for-breakpoints, $value) {
+          @media (width: map.get($map-for-breakpoints, $value)) {
             @content;
           }
         } @else {
@@ -33,8 +38,8 @@
           }
         }
       } @else if $mode == "min" {
-        @if map-has-key($map-for-breakpoints, $value) {
-          @media (min-width: map-get($map-for-breakpoints, $value)) {
+        @if map.has-key($map-for-breakpoints, $value) {
+          @media (min-width: map.get($map-for-breakpoints, $value)) {
             @content;
           }
         } @else {
@@ -43,8 +48,8 @@
           }
         }
       } @else if $mode == "max" {
-        @if map-has-key($map-for-breakpoints, $value) {
-          @media (max-width: map-get($map-for-breakpoints, $value)) {
+        @if map.has-key($map-for-breakpoints, $value) {
+          @media (max-width: map.get($map-for-breakpoints, $value)) {
             @content;
           }
         } @else {
@@ -53,9 +58,9 @@
           }
         }
       } @else if $mode == "between" {
-        $start: nth($value, 1);
-        $end: nth($value, 2);
-        @media (min-width: #{__validateBreakpoint($start)}) and (max-width: #{if(map-has-key($map-for-breakpoints, $end), __validateBreakpoint($end) - 1, $end)}) {
+        $start: list.nth($value, 1);
+        $end: list.nth($value, 2);
+        @media (min-width: #{validateBreakpoint($start)}) and (max-width: #{if(map.has-key($map-for-breakpoints, $end), validateBreakpoint($end) - 1, $end)}) {
           @content;
         }
       }

package/scss/library/_breakpointer.scss

@@ -1,7 +1,10 @@
 @charset "UTF-8";
 
+@use "sass:meta";
+@use "../maps/map-for-breakpoints" as *;
+
 @mixin breakpointer($selector: null) {
-  @if $selector != null and type-of($selector) != "string" {
+  @if $selector != null and meta.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 & {

package/scss/library/_center.scss

@@ -1,7 +1,9 @@
 @charset "UTF-8";
 
+@use "sass:list";
+
 @mixin center($axis: "both") {
-  @if not index("both" "horizontal" "vertical", $axis) {
+  @if not list.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" {