gerillass 2.2.0 → 2.2.1

package/gerillass.json

@@ -1,6 +1,6 @@
 {
   "name": "gerillass",
-  "version": "2.2.0",
+  "version": "2.2.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",
@@ -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);"
       ]
     },
     {

package/package.json

@@ -16,7 +16,7 @@
     }
   },
   "license": "Apache-2.0",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "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: ();