gerillass 0.0.6 → 3.0.0

data/scss/utilities/_fill-nulls.scss

@@ -0,0 +1,18 @@
+@charset "UTF-8";
+
+@use "sass:list";
+
+@function fillNulls($value, $seperation: comma, $skip: false) {
+  @if not list.index("comma" "space" "slash", $seperation) {
+    @error "`#{$seperation}` is not a valid $seperation for `fillNulls`. Pass `comma`, `space` or `slash`.";
+  }
+  $list: ();
+  @for $i from 1 through list.length($value) {
+    @if list.nth($value, $i) == null {
+      $list: list.append($list, if($skip, null, 0), $seperation);
+    } @else {
+      $list: list.append($list, list.nth($value, $i), $seperation);
+    }
+  }
+  @return $list;
+}

data/scss/utilities/_fluid.scss

@@ -0,0 +1,76 @@
+@charset "UTF-8";
+
+@use "sass:list";
+@use "sass:math";
+@use "sass:meta";
+@use "sass:string";
+@use "../utilities/clear-unit" as *;
+@use "../utilities/remify" as *;
+
+// A value that grows with the viewport between two widths, then stops.
+//
+// clamp() takes a floor, a preferred value and a ceiling. The preferred value
+// is the straight line through (min-viewport, min) and (max-viewport, max):
+//
+//   slope     = (max - min) / (max-viewport - min-viewport)
+//   intercept = min - slope * min-viewport
+//   preferred = intercept + slope * 100vw
+//
+// The intercept is emitted in rem rather than px deliberately. A preferred
+// value made only of vw ignores browser zoom, which fails WCAG 1.4.4, and
+// keeping a rem term in the sum is what restores it. This is the part that is
+// easy to get wrong by hand, and the reason this is a function rather than a
+// mixin: the value is the hard part, and it belongs to any property, not just
+// font-size.
+//
+// Sass cannot add rem to vw, so the sum is assembled as a string. CSS evaluates
+// it; Sass only writes it.
+
+$_fluid-root-size: 16px;
+
+@function fluid($min, $max, $min-viewport: 320px, $max-viewport: 1280px) {
+  // Pairs rather than a map: two arguments can legitimately hold the same
+  // length, and a map would reject that as a duplicate key.
+  $given: (($min, "$min"), ($max, "$max"), ($min-viewport, "$min-viewport"), ($max-viewport, "$max-viewport"));
+  @each $pair in $given {
+    $value: list.nth($pair, 1);
+    $label: list.nth($pair, 2);
+    @if meta.type-of($value) != "number" or math.is-unitless($value) {
+      @error "`#{$value}` is not a valid #{$label} for `fluid`. Pass a length in px or rem.";
+    }
+    @if math.unit($value) != "px" and math.unit($value) != "rem" {
+      @error "`#{$value}` is not a valid #{$label} for `fluid`. Pass a length in px or rem, not #{math.unit($value)}.";
+    }
+  }
+
+  // Everything is compared in px, because Sass cannot convert rem to px on its
+  // own: it has no way to know the root font size, so the assumption is stated
+  // here rather than hidden.
+  $min-px: $min;
+  $max-px: $max;
+  $from-px: $min-viewport;
+  $to-px: $max-viewport;
+  @if math.unit($min) == "rem" { $min-px: clearUnit($min) * $_fluid-root-size; }
+  @if math.unit($max) == "rem" { $max-px: clearUnit($max) * $_fluid-root-size; }
+  @if math.unit($min-viewport) == "rem" { $from-px: clearUnit($min-viewport) * $_fluid-root-size; }
+  @if math.unit($max-viewport) == "rem" { $to-px: clearUnit($max-viewport) * $_fluid-root-size; }
+
+  @if $from-px >= $to-px {
+    @error "`fluid` needs $min-viewport to be smaller than $max-viewport, and was given #{$min-viewport} and #{$max-viewport}.";
+  }
+  @if $min-px > $max-px {
+    @error "`fluid` needs $min to be no larger than $max, and was given #{$min} and #{$max}. clamp() would return the floor at every width, so the value would never grow.";
+  }
+
+  $slope: math.div($max-px - $min-px, $to-px - $from-px);
+  $intercept: $min-px - $slope * $from-px;
+
+  // Four decimals is past the point any browser renders differently, and keeps
+  // the output readable.
+  $vw: math.div(math.round($slope * 100 * 10000), 10000);
+  $floor: math.div(math.round(clearUnit(remify($min-px)) * 10000), 10000);
+  $base: math.div(math.round(clearUnit(remify($intercept)) * 10000), 10000);
+  $ceiling: math.div(math.round(clearUnit(remify($max-px)) * 10000), 10000);
+
+  @return string.unquote("clamp(#{$floor}rem, #{$base}rem + #{$vw}vw, #{$ceiling}rem)");
+}

data/scss/utilities/_font-sizer.scss

@@ -0,0 +1,19 @@
+@charset "UTF-8";
+
+@use "sass:math";
+@use "sass:meta";
+
+@function fontSizer($size, $time) {
+  @if meta.type-of($size) != "number" {
+    @error "`#{meta.inspect($size)}` is not a valid $size for `fontSizer`. Pass a length, such as `16px`.";
+  }
+  @if meta.type-of($time) != "number" {
+    @error "`#{meta.inspect($time)}` is not a valid $time for `fontSizer`. Pass a multiplier, such as `1.5`.";
+  }
+  // Two units multiply into a unit squared, which Sass writes as
+  // `calc(16px * 1px)`: not a length anywhere in CSS.
+  @if not math.is-unitless($size) and not math.is-unitless($time) {
+    @error "`fontSizer(#{$size}, #{$time})` multiplies two units, which is not a length. Pass the multiplier without a unit, such as `1.5`.";
+  }
+  @return $size * $time;
+}

data/scss/utilities/_font-source.scss

@@ -0,0 +1,23 @@
+@charset "UTF-8";
+
+@use "sass:list";
+@use "sass:map";
+@use "../maps/map-for-font-formats" as *;
+@use "../utilities/clear-whitespace" as *;
+
+@function fontSource($font-family, $file-path, $file-formats) {
+  $list: ();
+  @if map.has-key($map-for-font-formats, $file-formats) {
+    @if list.index(eot woff2 woff ttf, $file-formats) {
+      $src-value: url('#{$file-path}.#{if(not list.index(eot, $file-formats), $file-formats, $file-formats+"?#iefix")}')
+        #{map.get($map-for-font-formats, $file-formats)};
+      $list: list.append($list, $src-value, comma);
+    } @else if list.index(svg, $file-formats) {
+      $font-family: clearWhitespace($font-family);
+      $src-value: url('#{$file-path}.#{$file-formats + "#" + $font-family}')
+        #{map.get($map-for-font-formats, $file-formats)};
+      $list: list.append($list, $src-value, comma);
+    }
+  }
+  @return $list;
+}

data/scss/utilities/_gradient-value.scss

@@ -0,0 +1,24 @@
+@charset "UTF-8";
+
+@use "../internal/gradient" as *;
+
+// The gradient mixin's gradient as a value, for where a mixin cannot write the
+// whole declaration: layered with an image in one background-image, or as a
+// mask-image or border-image. It takes the same arguments and refuses the same
+// input; see scss/internal/_gradient.scss.
+//
+// A function returns one value, so unlike the mixin it cannot write a fallback
+// before a gradient with $in. Write one yourself if an old browser matters:
+// the same call with $in left out, in a declaration before it.
+@function gradientValue(
+  $colors,
+  $type: linear,
+  $direction: null,
+  $shape: null,
+  $position: null,
+  $from: null,
+  $in: null,
+  $repeating: false
+) {
+  @return gradientOf($colors, $type, $direction, $shape, $position, $from, $in, $repeating, $member: "gradientValue");
+}

data/scss/utilities/_index.scss

@@ -0,0 +1,26 @@
+@charset "UTF-8";
+
+@forward "clear-unit";
+@forward "clear-whitespace";
+@forward "convert-to-em";
+@forward "convert-to-number";
+@forward "fill-nulls";
+@forward "fluid";
+@forward "font-sizer";
+@forward "font-source";
+@forward "gradient-value";
+@forward "is-color";
+@forward "is-gutter";
+@forward "is-number";
+@forward "is-time";
+@forward "map-deep-get";
+@forward "pixelify";
+@forward "pseudo-selector";
+@forward "remify";
+@forward "shade";
+@forward "shorthand-property";
+@forward "tint";
+@forward "validate-breakpoint";
+@forward "validate-length";
+@forward "validate-ratio";
+@forward "validate-scissors";

data/scss/utilities/_is-color.scss

@@ -0,0 +1,16 @@
+@charset "UTF-8";
+
+@use "sass:list";
+@use "sass:meta";
+
+@function isColor($value) {
+  $list: ();
+  @for $i from 1 through list.length($value) {
+    @if meta.type-of(list.nth($value, $i)) == "color" {
+      $list: list.append($list, list.nth($value, $i), comma);
+    } @else {
+      @error "'#{list.nth($value, $i)}' is not a color value, please replace it with a valid one.";
+    }
+  }
+  @return $list;
+}

data/scss/utilities/_is-gutter.scss

@@ -0,0 +1,24 @@
+@charset "UTF-8";
+
+@use "sass:meta";
+@use "sass:string";
+
+// True for anything that can legally sit where a CSS length is expected: a
+// number, a Sass calculation such as calc() or clamp(), or an unquoted string
+// holding a parenthesis, which is how var() and env() arrive.
+//
+// Written because `meta.type-of($value) == number` rejects `var(--gap)`, and a
+// gutter expressed as a custom property is perfectly reasonable CSS.
+
+@function isGutter($value) {
+  @if meta.type-of($value) == "number" {
+    @return true;
+  }
+  @if meta.type-of($value) == "calculation" {
+    @return true;
+  }
+  @if meta.type-of($value) == "string" and string.index(string.quote($value), "(") {
+    @return true;
+  }
+  @return false;
+}

data/scss/utilities/_is-number.scss

@@ -0,0 +1,11 @@
+@charset "UTF-8";
+
+@use "sass:meta";
+
+@function isNumber($value) {
+  @if meta.type-of($value) == "number" {
+    @return $value;
+  } @else {
+    @warn "Please make sure you pass a valid number!";
+  }
+}

data/scss/utilities/_is-time.scss

@@ -0,0 +1,14 @@
+
+@use "sass:list";
+@use "sass:math";
+@use "sass:meta";
+
+@function isTime($value) {
+  @for $i from 1 through list.length($value) {
+    @if (meta.type-of($value) == "number" and list.index("ms" "s", math.unit($value)) != null) or $value == 0 {
+      @return $value;
+    } @else {
+      @error "'#{$value}' is not a valid time value. Time values must be specified in either seconds (s) or milliseconds (ms). Please try one of the following forms: '1s', '0.2s', or '3ms'";
+    }
+  }
+}

data/scss/utilities/_map-deep-get.scss

@@ -0,0 +1,10 @@
+@charset "UTF-8";
+
+@use "sass:map";
+
+@function mapDeepGet($map, $keys...) {
+  @each $key in $keys {
+    $map: map.get($map, $key);
+  }
+  @return $map;
+}

data/scss/utilities/_pixelify.scss

@@ -0,0 +1,20 @@
+@charset "UTF-8";
+
+@use "sass:math";
+@use "sass:meta";
+@use "../utilities/clear-unit" as *;
+
+// This function checks if the argument has a px unit. If not, it adds a px unit to the end of the argument.
+
+@function pixelify($value) {
+  @if meta.type-of($value) != "number" {
+    @error "`#{$value}` is not a valid $value for `pixelify`. Pass a number, with or without a unit.";
+  }
+  @if math.unit($value) == "px" {
+    @return $value;
+  } @else if math.unit($value) != "px" {
+    @return clearUnit($value) * 1px;
+  } @else if math.is-unitless($value) == true {
+    @return $value * 1px;
+  }
+}

data/scss/utilities/_pseudo-selector.scss

@@ -0,0 +1,12 @@
+@charset "UTF-8";
+
+@use "sass:list";
+
+@function pseudoSelector($elements, $pseudo: null) {
+  $list: ();
+  @each $element in $elements {
+    $element: if($pseudo, $element + ":" + $pseudo, $element);
+    $list: list.append($list, $element, comma);
+  }
+  @return $list;
+}

data/scss/utilities/_remify.scss

@@ -0,0 +1,16 @@
+@charset "UTF-8";
+
+@use "sass:math";
+@use "sass:meta";
+
+@function remify($value) {
+  // Only a pixel length converts cleanly. Anything else used to reach the
+  // arithmetic unchecked: a word failed with Sass's own "Undefined operation",
+  // and a unitless number or another unit compiled to `calc(1.5rem / 1px)`.
+  @if meta.type-of($value) != "number" or math.unit($value) != "px" {
+    @error "`#{meta.inspect($value)}` is not a valid $value for `remify`. Pass a pixel length, such as `24px`.";
+  }
+  $base-value: 16px;
+  $rem-value: math.div($value, $base-value);
+  @return $rem-value * 1rem;
+}

data/scss/utilities/_shade.scss

@@ -0,0 +1,10 @@
+@charset "UTF-8";
+
+@use "sass:color";
+@use "../utilities/is-color" as *;
+
+@function shade($color, $percentage) {
+  @if isColor($color) {
+    @return color.mix(black, $color, $percentage);
+  }
+}

data/scss/utilities/_shorthand-property.scss

@@ -0,0 +1,17 @@
+@charset "UTF-8";
+
+@use "sass:list";
+
+@function shorthandProperty($value) {
+  @if list.length($value) == 1 {
+    @return list.nth($value, 1) list.nth($value, 1) list.nth($value, 1) list.nth($value, 1);
+  } @else if list.length($value) == 2 {
+    @return list.nth($value, 1) list.nth($value, 2) list.nth($value, 1) list.nth($value, 2);
+  } @else if list.length($value) == 3 {
+    @return list.nth($value, 1) list.nth($value, 2) list.nth($value, 3) list.nth($value, 2);
+  } @else if list.length($value) == 4 {
+    @return list.nth($value, 1) list.nth($value, 2) list.nth($value, 3) list.nth($value, 4);
+  } @else if list.length($value) > 4 {
+    @error "You've passed #{list.length($value)} arguments. Please do not pass more than 4.";
+  }
+}

data/scss/utilities/_tint.scss

@@ -0,0 +1,10 @@
+@charset "UTF-8";
+
+@use "sass:color";
+@use "../utilities/is-color" as *;
+
+@function tint($color, $percentage) {
+  @if isColor($color) {
+    @return color.mix(white, $color, $percentage);
+  }
+}

data/scss/utilities/_validate-breakpoint.scss

@@ -0,0 +1,41 @@
+@charset "UTF-8";
+
+@use "sass:list";
+@use "sass:map";
+@use "sass:meta";
+@use "sass:string";
+@use "../maps/map-for-breakpoints" as *;
+
+// Returns the width of a key from $map-for-breakpoints, and anything else as it
+// is: a declaration takes a percentage or a CSS function, and the condition
+// mixins check their own sizes through scss/internal/_condition-width.scss.
+//
+// What it refuses is what cannot be a breakpoint anywhere. A word that is not a
+// key used to come back unchanged, so `breakpoint(min, huge)` compiled to
+// `@media (min-width: huge)`, which never matches, without a word; the keys are
+// case-sensitive, so `"MEDIUM"` did the same. A list used to give its first
+// item, because the loop here returned on its first pass.
+//
+// null comes back as null, as it always did, so `width: validateBreakpoint(null)`
+// still leaves the declaration out. The condition mixins refuse it themselves.
+@function validateBreakpoint($value) {
+  @if $value == null {
+    @return null;
+  }
+  @if map.has-key($map-for-breakpoints, $value) {
+    @return map.get($map-for-breakpoints, $value);
+  }
+  @if list.length($value) > 1 {
+    @error "`#{meta.inspect($value)}` is not a breakpoint. Pass one key from $map-for-breakpoints or one length; a range is written with `between`, such as `breakpoint(between, small large)`.";
+  }
+  // A quoted length such as "600px" starts with a digit, a dot or a sign, and a
+  // CSS function holds a parenthesis. Of the words, the sizing keywords stay
+  // accepted, because `max-width: validateBreakpoint(none)` is valid CSS; a
+  // condition mixin still refuses them through conditionWidth. Anything else is
+  // a word that cannot be a breakpoint.
+  $sizing-keywords: "auto" "none" "min-content" "max-content" "fit-content" "stretch" "inherit" "initial" "unset" "revert" "revert-layer";
+  @if meta.type-of($value) == "string" and not list.index($sizing-keywords, string.to-lower-case($value)) and not string.index($value, "(") and not string.index("0123456789.+-", string.slice($value, 1, 1)) {
+    @error "`#{$value}` is not a breakpoint. $map-for-breakpoints has #{map.keys($map-for-breakpoints)}; pass one of those, or a length such as `600px`.";
+  }
+  @return $value;
+}

data/scss/utilities/_validate-length.scss

@@ -0,0 +1,37 @@
+@charset "UTF-8";
+
+@use "sass:list";
+@use "sass:math";
+@use "sass:meta";
+@use "sass:string";
+
+@function validateLength($value) {
+  // null means "leave this out": `position` skips an edge given null, as its
+  // documentation shows. It is not a mistake to warn about, and the warning
+  // printed empty backticks, because null interpolates to nothing.
+  @if $value == null {
+    @return null;
+  }
+
+  $keywords: ("auto", "inherit", "initial", "unset", "revert", 0);
+
+  @if list.index($keywords, $value) {
+    @return $value;
+  }
+  @if meta.type-of($value) == "number" and not math.is-unitless($value) {
+    @return $value;
+  }
+  // calc(), clamp(), min() and max() arrive as Sass calculations; var() and
+  // env() arrive as unquoted strings holding a parenthesis. Both are valid
+  // lengths, and warning about them means warning about correct modern CSS,
+  // which this function used to do.
+  @if meta.type-of($value) == "calculation" {
+    @return $value;
+  }
+  @if meta.type-of($value) == "string" and string.index(string.quote($value), "(") {
+    @return $value;
+  }
+
+  @warn "`#{$value}` does not look like a length. Pass a number with a unit such as `20px`, a CSS function such as `var(--gap)` or `calc(1rem + 2px)`, or one of: auto, inherit, initial, unset, revert, 0.";
+  @return $value;
+}

data/scss/utilities/_validate-ratio.scss

@@ -0,0 +1,77 @@
+@charset "UTF-8";
+
+@use "sass:list";
+@use "sass:math";
+@use "sass:meta";
+@use "sass:string";
+@use "../utilities/convert-to-number" as *;
+
+// Returns a value for the CSS aspect-ratio property.
+//
+// Before 2.0.0 this returned the padding-top percentage the old ratio hack
+// needed -- 56.25% for 16/9. aspect-ratio is Baseline Widely Available, so the
+// hack is gone and this returns the ratio itself: `16 / 9`.
+@function validateRatio($ratio) {
+  // No argument at all keeps the 16/9 default.
+  @if $ratio == null {
+    @return list.slash(16, 9);
+  }
+
+  @if meta.type-of($ratio) == "number" {
+    @if not math.is-unitless($ratio) {
+      @error "`#{$ratio}` is not a valid ratio. A numeric ratio must be unitless, like `1.77`.";
+    }
+    @if $ratio <= 0 {
+      @error "`#{$ratio}` is not a valid ratio. A numeric ratio must be greater than zero.";
+    }
+    // aspect-ratio takes a bare number, where 1.77 means 1.77 / 1.
+    @return $ratio;
+  }
+
+  // var() is resolved by the browser. Checked inline rather than through a
+  // helper function, which tools/build-manifest.js would take for this file's
+  // member in place of validateRatio.
+  @if meta.type-of($ratio) == "string" and string.slice(meta.inspect($ratio), 1, 1) != "\"" and string.index(string.to-lower-case($ratio), "var(") == 1 {
+    @return $ratio;
+  }
+
+  @if meta.type-of($ratio) == "string" {
+    $separator: null;
+    @if string.index($ratio, "/") {
+      $separator: string.index($ratio, "/");
+    } @else if string.index($ratio, ":") {
+      $separator: string.index($ratio, ":");
+    } @else {
+      @error "`#{$ratio}` is not a valid ratio. A string ratio must separate width and height with `/` or `:`, like `\"16/9\"` or `\"16:9\"`.";
+    }
+
+    $width-text: string.slice($ratio, 1, $separator - 1);
+    $height-text: string.slice($ratio, $separator + 1);
+
+    // Checked here so a malformed ratio is reported as a ratio, rather than as
+    // a bad argument to convertToNumber, which the caller never called.
+    @each $part in ($width-text, $height-text) {
+      @if string.length($part) == 0 {
+        @error "`#{$ratio}` is not a valid ratio. Width and height must both be whole numbers, like `\"16/9\"` or `\"16:9\"`.";
+      }
+      @for $i from 1 through string.length($part) {
+        @if not list.index("0" "1" "2" "3" "4" "5" "6" "7" "8" "9", string.slice($part, $i, $i)) {
+          @error "`#{$ratio}` is not a valid ratio. Width and height must both be whole numbers, like `\"16/9\"` or `\"16:9\"`.";
+        }
+      }
+    }
+
+    $width: convertToNumber($width-text);
+    $height: convertToNumber($height-text);
+
+    @if $width == 0 {
+      @error "`#{$ratio}` is not a valid ratio. The width must be greater than zero.";
+    }
+    @return list.slash($width, $height);
+  }
+
+  // Anything else -- most commonly a list, which is what `16/9` becomes once
+  // Dart Sass 2.0.0 removes slash division. Without this the mixin would emit
+  // no aspect-ratio at all and silently produce a box with no ratio.
+  @error "`#{$ratio}` is not a valid ratio. Pass a string like `\"16/9\"` or `\"16:9\"`, a unitless number like `1.77`, or no argument at all for the 16/9 default. You passed a #{meta.type-of($ratio)}.";
+}

data/scss/utilities/_validate-scissors.scss

@@ -0,0 +1,34 @@
+@charset "UTF-8";
+
+@use "sass:list";
+@use "sass:math";
+@use "sass:meta";
+@use "../utilities/pixelify" as *;
+@use "../internal/is-condition-value" as *;
+
+@function validateScissors($value) {
+  $list: ();
+  @for $i from 1 through list.length($value) {
+    $item: list.nth($value, $i);
+    // math.is-unitless() below throws on anything that is not a number, and its message
+    // names its own parameter rather than the corner that was wrong.
+    @if $item != null and meta.type-of($item) != "number" {
+      @error "`#{$item}` is not a valid corner size. Pass a length such as `12px`, or a unitless number which is treated as pixels.";
+    }
+    // Each size becomes a polygon() coordinate, which in Chrome 152 kept a
+    // length, a percentage and a negative length, and dropped a unit that is not
+    // a length, such as deg or x, so the clip-path was dropped.
+    @if $item != null and not math.is-unitless($item) and not isConditionValue($item, "length-percentage") {
+      @error "`#{$item}` is not a valid corner size: `#{math.unit($item)}` is not a length unit, and a browser drops the clip-path. Pass a length such as `12px`, or a unitless number which is treated as pixels.";
+    }
+    @if list.nth($value, $i) == null {
+      $list: list.append($list, 0px, comma);
+    } @else if math.is-unitless(list.nth($value, $i)) {
+      $pixelified: pixelify(list.nth($value, $i));
+      $list: list.append($list, $pixelified, comma);
+    } @else {
+      $list: list.append($list, list.nth($value, $i), comma);
+    }
+  }
+  @return $list;
+}