gerillass 2.2.0 → 2.3.0

package/SKILL.md

@@ -92,6 +92,7 @@ a dropped declaration rather than an error.
 | `loadify` | `@include loadify(nonsense);` |
 | `motion-safe` | `.card { @include motion-safe; }` |
 | `only` | `.a { @include only(#ff0000) { margin: 0; } }` |
+| `position` | `.badge { @include position(absolute, 0, $logical: yes); }` |
 | `radial-gradient` | `.a { @include radial-gradient(42, "center", (red, blue)); }` |
 | `remove` | `.a { @include remove(a, b, c); }` |
 | `reset-css` | `.a { @include reset-css; }` |
@@ -190,7 +191,7 @@ a dropped declaration rather than an error.
 | `only($params...)` | Selects only the siblings named. |
 | `placeholder-shown` | Styles an input while its placeholder is visible. |
 | `placeholder` | Styles the placeholder text of an input across vendor prefixes. |
-| `position($position: absolute, $offsets: 0)` | Sets position and offsets in one call, using shorthand order. |
+| `position($position: absolute, $offsets: 0, $logical: false)` | Sets position and offsets in one call, using shorthand order. |
 | `radial-gradient($shape, $position, $colors)` | Radial gradient background from a shape and a position. |
 | `remove($params...)` | Hides an element outright, or within a media query: from a breakpoint up with min, up to it with max, or between two breakpoints. One breakpoint on its own hides the element at exactly that width, a single pixel, and prints a warning: pass only for that. |
 | `reset-css` | Meyer reset. Must be called at the root of the stylesheet. |

package/gerillass.json

@@ -1,6 +1,6 @@
 {
   "name": "gerillass",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "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",
@@ -705,7 +705,9 @@
       ],
       "rejects": [
         ".card { @include container(\"card\", sideways); }",
-        ".card { @include container(42); }"
+        ".card { @include container(42); }",
+        ".card { @include container(\"and\"); }",
+        ".card { @include container(\"1card\"); }"
       ]
     },
     {
@@ -921,7 +923,10 @@
         "@include font-face(var(--font-family), \"/fonts/inter\", $file-formats: woff2);",
         "@include font-face(\"Inter\", \"/fonts/inter\", var(--font-style), $file-formats: woff2);",
         "@include font-face(\"Inter\", \"/fonts/inter\", $font-weight: var(--font-weight), $file-formats: woff2);",
-        "@include font-face(\"Inter\", \"/fonts/inter\", $font-weight: 100 var(--max-weight), $file-formats: woff2);"
+        "@include font-face(\"Inter\", \"/fonts/inter\", $font-weight: 100 var(--max-weight), $file-formats: woff2);",
+        "@include font-face(sans-serif, \"/fonts/inter\", $file-formats: woff2);",
+        "@include font-face(inherit, \"/fonts/inter\", $file-formats: woff2);",
+        "@include font-face(env(--font-family), \"/fonts/inter\", $file-formats: woff2);"
       ]
     },
     {
@@ -1126,18 +1131,31 @@
             "one to four lengths in shorthand order, or auto/inherit/initial/0",
             "null in any position to leave that edge out"
           ]
+        },
+        {
+          "name": "$logical",
+          "default": "false",
+          "accepts": [
+            "false, the default, for top, right, bottom and left",
+            "null, read as false",
+            "true for inset-block-start, inset-inline-end, inset-block-end and inset-inline-start, which follow the writing direction"
+          ]
         }
       ],
       "file": "scss/library/_position.scss",
-      "signature": "position($position: absolute, $offsets: 0)",
+      "signature": "position($position: absolute, $offsets: 0, $logical: false)",
       "summary": "Sets position and offsets in one call, using shorthand order.",
       "examples": [
         ".a { @include position(absolute, 0); }",
         ".a { @include position(fixed, 0 10px); }",
         ".a { @include position(absolute, null 16px 16px 16px); }",
-        ".a { @include position(absolute, 0 null null 0); }"
+        ".a { @include position(absolute, 0 null null 0); }",
+        ".badge { @include position(absolute, 0 auto auto 1rem, $logical: true); }",
+        ".a { @include position(absolute, 0, $logical: null); }"
       ],
-      "rejects": []
+      "rejects": [
+        ".badge { @include position(absolute, 0, $logical: yes); }"
+      ]
     },
     {
       "name": "radial-gradient",

package/package.json

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

package/scss/library/_container.scss

@@ -4,6 +4,63 @@
 @use "sass:meta";
 @use "sass:string";
 
+// What a browser will not keep in `container-name`. Measured in Chrome 152, the
+// declaration was dropped for `and`, `or`, `not` and `default` in any case, a
+// name starting with a digit or a hyphen and a digit, and a name holding `.`,
+// `#` or `!`; and for a list with any one of those in it, such as `card and`,
+// and for `none` or a CSS-wide keyword beside another name, such as `NONE card`
+// or `card inherit`. `none`, `inherit`, `revert` and the other CSS-wide
+// keywords were kept on their own, as were several valid names,
+// `-card`, and `var()`, which a container can take its name from.
+$-reserved-names: "and" "or" "not" "default";
+$-alone-names: "none" "inherit" "initial" "unset" "revert" "revert-layer";
+$-forbidden-in-name: "." "," "/" "#" ":" ";" "(" ")" "[" "]" "{" "}" "!" "@" "$" "%" "^" "&" "*" "+" "=" "<" ">" "?" "\\" "|" "~" "`" "'" "\"";
+
+@function -words($text) {
+  $words: ();
+  $rest: $text;
+  $at: string.index($rest, " ");
+  @while $at {
+    $word: string.slice($rest, 1, $at - 1);
+    @if string.length($word) > 0 {
+      $words: list.append($words, $word);
+    }
+    $rest: string.slice($rest, $at + 1);
+    $at: string.index($rest, " ");
+  }
+  @if string.length($rest) > 0 {
+    $words: list.append($words, $rest);
+  }
+  @return $words;
+}
+
+@function -name-problem($name) {
+  $text: "#{$name}";
+  @if string.index($text, "var(") {
+    @return null;
+  }
+  $words: -words($text);
+  @each $word in $words {
+    $lower: string.to-lower-case($word);
+    @if list.index($-alone-names, $lower) and list.length($words) > 1 {
+      @return "`#{$word}` only works as the whole value, not beside another name";
+    }
+    @if list.index($-reserved-names, $lower) {
+      @return "`and`, `or`, `not` and `default` cannot name a container";
+    }
+    $first: string.slice($word, 1, 1);
+    @if string.index("0123456789", $first) or ($first == "-" and string.length($word) > 1 and string.index("0123456789", string.slice($word, 2, 2))) {
+      @return "a container name cannot start with a digit, or with a hyphen and a digit";
+    }
+    @each $character in $-forbidden-in-name {
+      @if string.index($word, $character) {
+        @return "a container name cannot contain `#{$character}`";
+      }
+    }
+  }
+  @return null;
+}
+
 // Marks an element as a query container, so `container-query` can ask about its
 // width instead of the viewport's.
 //
@@ -19,6 +76,12 @@
   @if $name != null and meta.type-of($name) != "string" {
     @error "`#{$name}` is not a valid $name for `container`. Pass a name as a string, such as `\"card\"`, or no name at all.";
   }
+  @if $name != null {
+    $problem: -name-problem($name);
+    @if $problem {
+      @error "`#{$name}` is not a valid $name for `container`: #{$problem}, and a browser drops the whole declaration. Pass a name such as `\"card\"`.";
+    }
+  }
   container-type: $type;
   @if $name {
     container-name: string.unquote($name);

package/scss/library/_font-face.scss

@@ -30,6 +30,13 @@
     // and a rule with no family is never used. A quoted "var(--f)" is only a
     // name, which the browser kept, so it is left alone like a quoted path.
     @error "`#{$font-family}` is not a valid $font-family for `font-face`. A custom property cannot supply it, because a @font-face rule drops var() in a descriptor, and without a family the font is never used. Pass the family name as a string, such as `\"Inter\"`.";
+  } @else if string.slice(meta.inspect($font-family), 1, 1) != "\"" and (list.index("serif" "sans-serif" "monospace" "cursive" "fantasy" "system-ui" "math" "inherit" "initial" "unset" "revert" "revert-layer" "default", string.to-lower-case($font-family)) or string.index($font-family, "env(") or string.index($font-family, "attr(")) {
+    // Measured in Chrome 152, a @font-face rule dropped an unquoted `serif`,
+    // `sans-serif`, `monospace`, `cursive`, `fantasy`, `system-ui`, `math`,
+    // `default` or CSS-wide keyword, in any case, and `env()` and `attr()`. The
+    // same words quoted are names and were kept, as were `emoji`, `fangsong` and
+    // the `ui-` families unquoted.
+    @error "`#{$font-family}` is not a valid $font-family for `font-face`. A @font-face rule drops a generic family, a CSS-wide keyword or a function as its family, and without a family the font is never used. Pass the family name as a quoted string, such as `\"Inter\"`.";
   } @else {
     
     $list: ();

package/scss/library/_position.scss

@@ -1,21 +1,41 @@
 @charset "UTF-8";
 
 @use "sass:list";
+@use "sass:meta";
 @use "../utilities/shorthand-property" as *;
 @use "../utilities/validate-length" as *;
 
-@mixin position($position: absolute, $offsets: 0) {
+// Sets position and its four offsets in shorthand order: top, right, bottom,
+// left, as `margin` and `padding` take them.
+//
+// Pass $logical: true for the offsets that follow the writing direction, the
+// same choice `triangle` and `border-radius` offer with their logical names.
+// The shorthand order stays the same and each position maps to its logical
+// twin: top to inset-block-start, right to inset-inline-end, bottom to
+// inset-block-end, left to inset-inline-start. Measured in Chrome 152: under
+// dir="ltr" each logical offset put the box where its physical twin did, and
+// under dir="rtl" where the mirrored twin did, while a physical `left: 16px`
+// stayed 16px from the left in both. For one offset, writing inset-* by hand is
+// as short; the argument is here so the library behaves the same way
+// everywhere.
+@mixin position($position: absolute, $offsets: 0, $logical: false) {
+  // null is read as false, as a null argument means "not set" across the
+  // library, so a caller can pass a variable that may be unset.
+  @if $logical != true and $logical != false and $logical != null {
+    @error "`#{meta.inspect($logical)}` is not a valid $logical for `position`. Pass true for offsets that follow the writing direction, or false for top, right, bottom and left.";
+  }
+
   $offsets: shorthandProperty($offsets);
-  $positioning-offsets: (
-    top: list.nth($offsets, 1),
-    right: list.nth($offsets, 2),
-    bottom: list.nth($offsets, 3),
-    left: list.nth($offsets, 4),
-  );
+  $edges: top right bottom left;
+  @if $logical {
+    $edges: inset-block-start inset-inline-end inset-block-end inset-inline-start;
+  }
+
   position: $position;
-  @each $offset, $value in $positioning-offsets {
+  @for $i from 1 through 4 {
+    $value: list.nth($offsets, $i);
     @if validateLength($value) {
-      #{$offset}: $value;
+      #{list.nth($edges, $i)}: $value;
     }
   }
 }