gerillass 2.3.1 → 3.0.0

package/scss/library/_text-gradient.scss

@@ -1,36 +1,46 @@
 @charset "UTF-8";
 
 @use "sass:list";
-@use "sass:map";
-@use "sass:math";
 @use "sass:meta";
-@use "../maps/map-for-directions" as *;
-@use "../internal/color-stops-problem" as *;
+@use "sass:string";
+@use "../internal/gradient" as *;
 
-@mixin text-gradient($direction, $colors) {
-  // A stop the browser does not keep drops the whole gradient, and with it the
-  // text, which this mixin makes transparent; see
-  // scss/internal/_color-stops-problem.scss.
-  $problem: colorStopsProblem($colors);
-  @if $problem {
-    @error "`#{meta.inspect($colors)}` is not a valid $colors for `text-gradient`: #{$problem}. A browser drops the whole gradient, and the transparent text with it.";
-  }
-  $list: ();
-  @for $i from 1 through list.length($colors) {
-    $list: list.append($list, list.nth($colors, $i), comma);
-  }
-  @if map.has-key($map-for-directions, $direction) {
-    background: linear-gradient(
-      map.get($map-for-directions, $direction),
-      $list
-    );
-  } @else if not map.has-key($map-for-directions, $direction) {
-    @if meta.type-of($direction) != "number" or not list.index("deg", math.unit($direction)) {
-      @error "`#{$direction}` is not a valid $direction for `text-gradient`. Pass an angle such as `45deg`, or one of: #{map.keys($map-for-directions)}.";
-    } @else {
-      background: linear-gradient($direction, $list);
+// Fills the letters with a gradient: the gradient mixin's arguments, and
+// background-clip: text. The gradient is built and checked in
+// scss/internal/_gradient.scss.
+//
+// The colours come first since 3.0.0, as in gradient, so a direction, a type
+// and a colour space can all be left out. A call in the old order,
+// `text-gradient("top", (red, blue))`, would otherwise fail on `"top"` not
+// being a colour, so it is caught and answered with the new form.
+//
+// It still writes the background shorthand rather than background-image, so a
+// call in the new order compiles to exactly what the same call compiled to in
+// the old order.
+@mixin text-gradient(
+  $colors,
+  $type: linear,
+  $direction: null,
+  $shape: null,
+  $position: null,
+  $from: null,
+  $in: null,
+  $repeating: false
+) {
+  @if gradientDirection($colors) != null and not list.index("linear" "radial" "conic", string.to-lower-case("#{$type}")) {
+    $written: meta.inspect($type);
+    @if list.separator($type) == "comma" {
+      $written: "(#{$written})";
     }
+    @error "`text-gradient` takes the colours first since 3.0.0. Write `text-gradient(#{$written}, $direction: #{meta.inspect($colors)})`.";
+  }
+  $value: gradientOf($colors, $type, $direction, $shape, $position, $from, $in, $repeating, $member: "text-gradient");
+  // Written without the space first, as the gradient mixin does, for a browser
+  // that does not know `in`.
+  @if $in != null {
+    background: gradientOf($colors, $type, $direction, $shape, $position, $from, null, $repeating, $member: "text-gradient", $warn: false);
   }
+  background: $value;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;

package/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");
+}

package/scss/utilities/_index.scss

@@ -8,6 +8,7 @@
 @forward "fluid";
 @forward "font-sizer";
 @forward "font-source";
+@forward "gradient-value";
 @forward "is-color";
 @forward "is-gutter";
 @forward "is-number";

package/scss/library/_linear-gradient.scss

@@ -1,33 +0,0 @@
-@charset "UTF-8";
-
-@use "sass:list";
-@use "sass:map";
-@use "sass:math";
-@use "sass:meta";
-@use "../maps/map-for-directions" as *;
-@use "../internal/color-stops-problem" as *;
-
-@mixin linear-gradient($direction, $colors) {
-  // A stop the browser does not keep drops the whole gradient; see
-  // scss/internal/_color-stops-problem.scss for what was measured.
-  $problem: colorStopsProblem($colors);
-  @if $problem {
-    @error "`#{meta.inspect($colors)}` is not a valid $colors for `linear-gradient`: #{$problem}. A browser drops the whole gradient.";
-  }
-  $list: ();
-  @for $i from 1 through list.length($colors) {
-    $list: list.append($list, list.nth($colors, $i), comma);
-  }
-  @if map.has-key($map-for-directions, $direction) {
-    background: linear-gradient(
-      map.get($map-for-directions, $direction),
-      $list
-    );
-  } @else if not map.has-key($map-for-directions, $direction) {
-    @if meta.type-of($direction) != "number" or not list.index("deg", math.unit($direction)) {
-      @error "`#{$direction}` is not a valid $direction for `linear-gradient`. Pass an angle such as `45deg`, or one of: #{map.keys($map-for-directions)}.";
-    } @else {
-      background: linear-gradient($direction, $list);
-    }
-  }
-}

package/scss/library/_radial-gradient.scss

@@ -1,184 +0,0 @@
-@charset "UTF-8";
-
-@use "sass:list";
-@use "sass:map";
-@use "sass:meta";
-@use "sass:string";
-@use "../maps/map-for-positions" as *;
-@use "../internal/is-condition-value" as *;
-@use "../internal/words" as *;
-@use "../internal/color-stops-problem" as *;
-
-// The mixin writes `radial-gradient($shape $position, ...)`, so $shape carries
-// the shape and may carry a size, and a $position that is not a key from
-// $map-for-positions carries a size, `at` and a position, or both. Each is
-// checked against what Chrome 152 kept in `background-image`, in any case:
-//
-// - kept: circle, ellipse, an extent keyword such as closest-side, a length
-//   (`circle 10px`, `10px`), two lengths or percentages (`ellipse 10% 20%`),
-//   `at` followed by one or two keywords from left, center, right, top and
-//   bottom or up to four keywords and lengths (`at left 10px top 20px`), and
-//   var() or calc() anywhere;
-// - dropped: a word outside those (`huge`, `auto`, `inherit`), a percentage or a
-//   negative length as a circle's size (`circle 10%`, `circle -10px`), the
-//   shape twice (`circle circle`), four keywords after `at`, and the logical
-//   keywords `at x-start` and `at block-start`.
-//
-// It checks each part on its own, so a shape in one argument and a size in the
-// other that do not fit together, such as `ellipse` with a single length, are
-// not caught.
-$-extents: "closest-side" "closest-corner" "farthest-side" "farthest-corner";
-$-places: "left" "center" "right" "top" "bottom";
-
-// "extent", "length" or "percentage" for a word that can size the gradient,
-// or null.
-@function -size-kind($word) {
-  $lower: string.to-lower-case("#{$word}");
-  @if list.index($-extents, $lower) {
-    @return "extent";
-  }
-  @if string.index($lower, "-") == 1 {
-    @return null;
-  }
-  @if isConditionValue($word, "length") {
-    @return "length";
-  }
-  @if isConditionValue($word, "length-percentage") {
-    @return "percentage";
-  }
-  @return null;
-}
-
-// Checks the size words before `at`. $shape is the shape named, or null.
-@function -size-problem($words, $shape) {
-  $extents: 0;
-  $lengths: 0;
-  $percentages: 0;
-  @each $word in $words {
-    $kind: -size-kind($word);
-    @if $kind == null {
-      @return "`#{$word}` is not a shape, an extent keyword such as `closest-side`, or a length";
-    } @else if $kind == "extent" {
-      $extents: $extents + 1;
-    } @else if $kind == "length" {
-      $lengths: $lengths + 1;
-    } @else {
-      $percentages: $percentages + 1;
-    }
-  }
-  $sizes: $lengths + $percentages;
-  @if $extents > 1 or ($extents == 1 and $sizes > 0) {
-    @return "it gives the size twice";
-  }
-  @if $sizes > 2 {
-    @return "a size is one length or two";
-  }
-  @if $sizes == 1 and ($percentages == 1 or $shape == "ellipse") {
-    @return "one size is a circle's radius, which is a length and not a percentage";
-  }
-  @if $sizes == 2 and $shape == "circle" {
-    @return "a circle takes one length, not two";
-  }
-  @return null;
-}
-
-@function -shape-problem($shape) {
-  @if string.index($shape, "(") {
-    @return null;
-  }
-  $named: null;
-  $sizes: ();
-  @each $word in wordsOf($shape) {
-    $lower: string.to-lower-case($word);
-    @if list.index("circle" "ellipse", $lower) {
-      @if $named {
-        @return "it names the shape twice";
-      }
-      $named: $lower;
-    } @else {
-      $sizes: list.append($sizes, $word);
-    }
-  }
-  @return -size-problem($sizes, $named);
-}
-
-@function -position-problem($position) {
-  @if map.has-key($map-for-positions, $position) or string.index($position, "(") {
-    @return null;
-  }
-  $sizes: ();
-  $places: ();
-  $after-at: false;
-  @each $word in wordsOf($position) {
-    $lower: string.to-lower-case($word);
-    @if $lower == "at" {
-      @if $after-at {
-        @return "it has `at` twice";
-      }
-      $after-at: true;
-    } @else if $after-at {
-      $places: list.append($places, $word);
-    } @else if list.index("circle" "ellipse", $lower) {
-      @return "the shape goes in $shape, not $position";
-    } @else {
-      $sizes: list.append($sizes, $word);
-    }
-  }
-  $problem: -size-problem($sizes, null);
-  @if $problem {
-    @return "#{$problem}. Pass a position name such as `center` or `top-left`, an extent keyword such as `closest-side`, or `at` followed by a position, such as `at 30% 40%`";
-  }
-  @if $after-at and list.length($places) == 0 {
-    @return "`at` needs a position after it, such as `at center`";
-  }
-  @if list.length($places) > 4 {
-    @return "a position takes at most four values";
-  }
-  $keywords: 0;
-  @each $word in $places {
-    @if list.index($-places, string.to-lower-case($word)) {
-      $keywords: $keywords + 1;
-    } @else if not isConditionValue($word, "length-percentage") {
-      @return "`#{$word}` is not a position; after `at` pass left, center, right, top, bottom or a length";
-    }
-  }
-  @if $keywords > 2 and $keywords == list.length($places) {
-    @return "a position of keywords alone takes at most two, such as `at top left`";
-  }
-  @return null;
-}
-
-@mixin radial-gradient($shape, $position, $colors) {
-  @if meta.type-of($shape) != "string" {
-    @error "`#{$shape}` is not a valid $shape for `radial-gradient`. Pass `circle` or `ellipse`.";
-  }
-  @if meta.type-of($position) != "string" {
-    @error "`#{$position}` is not a valid $position for `radial-gradient`. Pass a position name such as `center` or `top-left`, or a raw CSS position as a string.";
-  }
-  $list: ();
-  $shape: string.unquote($shape);
-  $position: string.unquote($position);
-  $problem: -shape-problem($shape);
-  @if $problem {
-    @error "`#{$shape}` is not a valid $shape for `radial-gradient`: #{$problem}. A browser drops the whole gradient.";
-  }
-  $problem: -position-problem($position);
-  @if $problem {
-    @error "`#{$position}` is not a valid $position for `radial-gradient`: #{$problem}. A browser drops the whole gradient.";
-  }
-  $problem: colorStopsProblem($colors);
-  @if $problem {
-    @error "`#{meta.inspect($colors)}` is not a valid $colors for `radial-gradient`: #{$problem}. A browser drops the whole gradient.";
-  }
-  @for $i from 1 through list.length($colors) {
-    $list: list.append($list, list.nth($colors, $i), comma);
-  }
-  @if map.has-key($map-for-positions, $position) {
-    background: radial-gradient(
-      $shape map.get($map-for-positions, $position),
-      $list
-    );
-  } @else if not map.has-key($map-for-positions, $position) {
-    background: radial-gradient($shape $position, $list);
-  }
-}