gerillass 2.2.1 → 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.1",
+  "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",
@@ -1131,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.1",
+  "version": "2.3.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/selfishprimate/gerillass.git"

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;
     }
   }
 }