gerillass 0.0.6 → 3.0.0

data/lib/gerillass/engine.rb

@@ -0,0 +1,55 @@
+# frozen_string_literal: true
+
+module Gerillass
+  # Tells Rails' Sass compiler where the library is. Each Sass setup reads its
+  # load paths from a different place, so each gets the folder where it looks.
+  #
+  # dartsass-rails, the Sass setup for Propshaft, passes its build options to
+  # Sass, so the folder goes in as --load-path. It would also accept the folder
+  # on config.assets.paths (lib/dartsass/runner.rb passes those as load paths
+  # too), but Propshaft copies everything on its asset paths into public/assets
+  # when precompiling, which published all 109 of the library's .scss sources,
+  # and Propshaft's excluded_paths cannot help: it removes the folder from
+  # config.assets.paths as well. dartsass-rails splits build options on
+  # whitespace, so a path containing a space falls back to the asset paths.
+  #
+  # dartsass-sprockets reads config.sass.load_paths on every compile
+  # (lib/sassc/rails/template.rb). Appending to config.assets.paths after
+  # initialization did not work there: sprockets-rails had already built its
+  # environment from that list in its own after_initialize.
+  #
+  # Both of those are appended after initialization, so an app that assigns
+  # config.dartsass.build_options or config.sass.load_paths in its own
+  # initializers does not overwrite them. Anything else gets the folder on
+  # config.assets.paths during initialization, before an asset environment is
+  # built from it.
+  class Engine < ::Rails::Engine
+    initializer "gerillass.assets" do |app|
+      next unless app.config.respond_to?(:assets)
+      next if Gerillass::Engine.dartsass_rails?(app) || Gerillass::Engine.sass_load_paths?(app)
+
+      app.config.assets.paths << Gerillass.load_path
+    end
+
+    config.after_initialize do |app|
+      path = Gerillass.load_path
+
+      if Gerillass::Engine.dartsass_rails?(app)
+        option = "--load-path=#{path}"
+        options = app.config.dartsass.build_options
+        options << option unless options.include?(option)
+      elsif Gerillass::Engine.sass_load_paths?(app)
+        paths = app.config.sass.load_paths
+        paths << path unless paths.map(&:to_s).include?(path)
+      end
+    end
+
+    def self.dartsass_rails?(app)
+      app.config.respond_to?(:dartsass) && !Gerillass.load_path.match?(/\s/)
+    end
+
+    def self.sass_load_paths?(app)
+      app.config.respond_to?(:sass) && app.config.sass.respond_to?(:load_paths) && app.config.sass.load_paths.is_a?(Array)
+    end
+  end
+end

data/lib/gerillass/jekyll.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+# Adds the library's scss/ folder to Jekyll's Sass load paths.
+#
+# jekyll-sass-converter reads sass.load_paths from the site configuration when
+# it first converts a stylesheet, and expands each entry with File.expand_path,
+# so an absolute path outside the site works. In safe mode it would confine
+# every path to the site source, but plugins do not run in safe mode anyway.
+Jekyll::Hooks.register :site, :after_init do |site|
+  sass = (site.config["sass"] ||= {})
+  paths = Array(sass["load_paths"])
+  sass["load_paths"] = paths + [Gerillass.load_path] unless paths.include?(Gerillass.load_path)
+end

data/lib/gerillass.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+# Gerillass is a Sass library. The Ruby in this gem only tells a project where
+# its stylesheets are, so that `@use "gerillass" as *;` resolves:
+#
+#   Rails    add the gem to the Gemfile; lib/gerillass/engine.rb puts the folder
+#            on the asset paths, which dartsass-rails and dartsass-sprockets
+#            pass to Sass as load paths.
+#   Jekyll   add the gem to the :jekyll_plugins group or to `plugins:` in
+#            _config.yml; lib/gerillass/jekyll.rb adds the folder to
+#            sass.load_paths.
+#   Ruby     pass Gerillass.load_path yourself, for example
+#            Sass.compile("app.scss", load_paths: [Gerillass.load_path]).
+module Gerillass
+  # The folder that holds _gerillass.scss.
+  def self.load_path
+    File.expand_path("../scss", __dir__)
+  end
+end
+
+# Each integration is loaded only when its framework is already loaded, so the
+# gem adds nothing to a project that uses neither. Rails is loaded before
+# Bundler.require in config/application.rb, and Jekyll requires its plugins after
+# itself, so both are defined by the time this file is required.
+require "gerillass/engine" if defined?(::Rails::Engine)
+require "gerillass/jekyll" if defined?(::Jekyll::Hooks)

data/scss/_gerillass.scss

@@ -0,0 +1,15 @@
+@charset "UTF-8";
+
+// https://www.gerillass.com/
+// Copyright 2020 by Halil İbrahim Çakıroğlu
+// Apache License 2.0
+
+@forward "lists";
+@forward "maps";
+@forward "utilities";
+@forward "library";
+
+// The gls- prefixed half of the API. Until 2.0.0 this was a generated file:
+// gulpfile.js concatenated scss/library and rewrote "@mixin " to "@mixin gls-".
+// The module system does the same thing in one line, so the generator is gone.
+@forward "library" as gls-*;

data/scss/internal/_color-problem.scss

@@ -0,0 +1,99 @@
+@charset "UTF-8";
+
+@use "sass:list";
+@use "sass:meta";
+@use "sass:string";
+
+// Shared by the mixins and not public API; see _is-css-function.scss.
+
+// What a browser keeps as a colour, measured in Chrome 152 in `color`,
+// `-webkit-text-stroke-color`, `outline: 2px solid ...`, `background` and a
+// gradient's colour stop:
+//
+// - kept: a colour Sass knows (red, #333, rgba(), hsl(), oklch(), color()),
+//   currentColor in any case, every system colour, deprecated ones included
+//   (Canvas, AccentColor, ActiveBorder), a vendor colour such as -webkit-link,
+//   var() and env(), and the colour functions Sass leaves as text: rgb() with
+//   var() in it, rgb(from ...), color-mix(), light-dark() and contrast-color();
+// - dropped: a word that is none of those (huge, auto, none), a quoted colour,
+//   a length, a number, calc(), and two colours side by side;
+// - CSS-wide keywords were kept in a declaration of their own and dropped inside
+//   `outline` and inside a gradient, so $css-wide says which this is.
+//
+// device-cmyk() is in the specification and Chrome drops it; it is let through,
+// as `run-in` is for display, because refusing it would refuse valid CSS once a
+// browser ships it.
+//
+// Deliberately looser than isColor, which stays strict because tint and shade
+// pass its result to color.mix, and that needs a real Sass colour.
+$-system-colors: "canvas" "canvastext" "linktext" "visitedtext" "activetext" "buttonface" "buttontext" "buttonborder" "field" "fieldtext" "highlight" "highlighttext" "selecteditem" "selecteditemtext" "mark" "marktext" "graytext" "accentcolor" "accentcolortext" "activeborder" "activecaption" "appworkspace" "background" "buttonhighlight" "buttonshadow" "captiontext" "inactiveborder" "inactivecaption" "inactivecaptiontext" "infobackground" "infotext" "menu" "menutext" "scrollbar" "threeddarkshadow" "threedface" "threedhighlight" "threedlightshadow" "threedshadow" "window" "windowframe" "windowtext";
+$-functions: "var" "env" "attr" "rgb" "rgba" "hsl" "hsla" "hwb" "lab" "lch" "oklab" "oklch" "color" "color-mix" "light-dark" "contrast-color" "device-cmyk";
+$-css-wide: "inherit" "initial" "unset" "revert" "revert-layer";
+
+// The CSS named colours and transparent, for a colour that reaches the check as
+// an unquoted string rather than as a Sass colour.
+$-named-colors: "transparent" "aliceblue" "antiquewhite" "aqua" "aquamarine" "azure" "beige" "bisque" "black" "blanchedalmond" "blue" "blueviolet" "brown" "burlywood" "cadetblue" "chartreuse" "chocolate" "coral" "cornflowerblue" "cornsilk" "crimson" "cyan" "darkblue" "darkcyan" "darkgoldenrod" "darkgray" "darkgreen" "darkgrey" "darkkhaki" "darkmagenta" "darkolivegreen" "darkorange" "darkorchid" "darkred" "darksalmon" "darkseagreen" "darkslateblue" "darkslategray" "darkslategrey" "darkturquoise" "darkviolet" "deeppink" "deepskyblue" "dimgray" "dimgrey" "dodgerblue" "firebrick" "floralwhite" "forestgreen" "fuchsia" "gainsboro" "ghostwhite" "gold" "goldenrod" "gray" "green" "greenyellow" "grey" "honeydew" "hotpink" "indianred" "indigo" "ivory" "khaki" "lavender" "lavenderblush" "lawngreen" "lemonchiffon" "lightblue" "lightcoral" "lightcyan" "lightgoldenrodyellow" "lightgray" "lightgreen" "lightgrey" "lightpink" "lightsalmon" "lightseagreen" "lightskyblue" "lightslategray" "lightslategrey" "lightsteelblue" "lightyellow" "lime" "limegreen" "linen" "magenta" "maroon" "mediumaquamarine" "mediumblue" "mediumorchid" "mediumpurple" "mediumseagreen" "mediumslateblue" "mediumspringgreen" "mediumturquoise" "mediumvioletred" "midnightblue" "mintcream" "mistyrose" "moccasin" "navajowhite" "navy" "oldlace" "olive" "olivedrab" "orange" "orangered" "orchid" "palegoldenrod" "palegreen" "paleturquoise" "palevioletred" "papayawhip" "peachpuff" "peru" "pink" "plum" "powderblue" "purple" "rebeccapurple" "red" "rosybrown" "royalblue" "saddlebrown" "salmon" "sandybrown" "seagreen" "seashell" "sienna" "silver" "skyblue" "slateblue" "slategray" "slategrey" "snow" "springgreen" "steelblue" "tan" "teal" "thistle" "tomato" "turquoise" "violet" "wheat" "white" "whitesmoke" "yellow" "yellowgreen";
+
+// A hex colour written as text: # and then 3, 4, 6 or 8 hex digits.
+@function -is-hex($text) {
+  @if string.index($text, "#") != 1 or not list.index(4 5 7 9, string.length($text)) {
+    @return false;
+  }
+  @for $i from 2 through string.length($text) {
+    @if not string.index("0123456789abcdef", string.slice($text, $i, $i)) {
+      @return false;
+    }
+  }
+  @return true;
+}
+
+// Returns what is wrong with $value as one colour, or null when a browser keeps
+// it. null itself is the caller's to decide, since it means a default in some
+// mixins and leaving a declaration out in others.
+@function colorProblem($value, $css-wide: false) {
+  @if meta.type-of($value) == "color" {
+    @return null;
+  }
+  @if meta.type-of($value) == "list" and list.length($value) > 1 {
+    @return "it is several values where one colour is meant";
+  }
+  @if meta.type-of($value) != "string" {
+    @return "it is not a colour";
+  }
+  @if string.slice(meta.inspect($value), 1, 1) == "\"" {
+    @return "a colour in quotes is text, not a colour";
+  }
+  $lower: string.to-lower-case($value);
+  $open: string.index($lower, "(");
+  @if $open {
+    @if list.index($-functions, string.slice($lower, 1, $open - 1)) {
+      @return null;
+    }
+    @return "`#{string.slice($value, 1, $open - 1)}()` is not a colour function";
+  }
+  @if $lower == "currentcolor" or list.index($-system-colors, $lower) {
+    @return null;
+  }
+  // Interpolation, such as `#{$name}` or `#{$hex}`, gives an unquoted string
+  // rather than a colour, and it is written into the CSS as it reads, so a
+  // named or hex colour in one works exactly as the colour itself does.
+  @if list.index($-named-colors, $lower) or -is-hex($lower) {
+    @return null;
+  }
+  // Vendor colours are named rather than matched by prefix. Measured in Chrome
+  // 152, `-webkit-link` and `-webkit-activelink` were kept as colours while
+  // `-webkit-fill-available`, `-webkit-box` and `-webkit-text` were dropped, and
+  // the prefix rule this replaced had let those through. `-webkit-focus-ring-color`
+  // is Safari's, and `-moz-` colours are Firefox's; neither could be measured
+  // here, so they are let through rather than refused unseen.
+  @if list.index("-webkit-link" "-webkit-activelink" "-webkit-focus-ring-color", $lower) or string.index($lower, "-moz-") == 1 {
+    @return null;
+  }
+  @if list.index($-css-wide, $lower) {
+    @if $css-wide {
+      @return null;
+    }
+    @return "a CSS-wide keyword only works as a whole declaration, not inside this value";
+  }
+  @return "it is not a colour";
+}

data/scss/internal/_color-stops-problem.scss

@@ -0,0 +1,94 @@
+@charset "UTF-8";
+
+@use "sass:list";
+@use "sass:meta";
+@use "sass:string";
+@use "color-problem" as *;
+@use "is-condition-value" as *;
+
+// Shared by the mixins and not public API; see _is-css-function.scss.
+
+// Returns what is wrong with a list of gradient colour stops, or null. The items
+// are read the way the mixins write them, one per comma in the gradient.
+// Measured in Chrome 152 in linear-gradient():
+//
+// - kept: a colour on its own, even a single one (`linear-gradient(to top,
+//   red)`), a colour with one or two positions (`red 0 10%`), a position between
+//   two colours as a hint (`red, 30%, blue`), and var() as a whole stop;
+// - dropped: a position first or last, two positions in a row, a colour with
+//   three positions, a position that is not a length or a percentage
+//   (`red 10deg`), a colour and another colour in one stop (`red 10% blue`), and
+//   anything colorProblem refuses, CSS-wide keywords included.
+
+// True for a value a stop takes as a position: a length, a percentage, 0 or a
+// calculation.
+@function -is-position($value) {
+  @return isConditionValue($value, "length-percentage");
+}
+
+// True for var(), env() or attr(), which may stand for a whole stop or a list of
+// them, so nothing around it can be judged.
+@function -is-substitution($value) {
+  @if meta.type-of($value) != "string" or string.slice(meta.inspect($value), 1, 1) == "\"" {
+    @return false;
+  }
+  $lower: string.to-lower-case($value);
+  @return string.index($lower, "var(") == 1 or string.index($lower, "env(") == 1 or string.index($lower, "attr(") == 1;
+}
+
+@function colorStopsProblem($colors) {
+  @if $colors == null or list.length($colors) == 0 {
+    @return "a gradient needs at least one colour";
+  }
+  $count: list.length($colors);
+  $previous: null;
+  $colors-seen: 0;
+  @for $i from 1 through $count {
+    $item: list.nth($colors, $i);
+    $kind: null;
+    @if -is-substitution($item) {
+      $kind: "substitution";
+    } @else if meta.type-of($item) != "list" and -is-position($item) {
+      $kind: "hint";
+    } @else if meta.type-of($item) == "list" and list.length($item) > 1 {
+      $problem: colorProblem(list.nth($item, 1));
+      @if $problem {
+        @return "`#{meta.inspect($item)}` does not start with a colour: #{$problem}";
+      }
+      @if list.length($item) > 3 {
+        @return "`#{meta.inspect($item)}` has more than two positions, and a colour stop takes at most two";
+      }
+      @for $j from 2 through list.length($item) {
+        @if not -is-position(list.nth($item, $j)) and not -is-substitution(list.nth($item, $j)) {
+          @return "in `#{meta.inspect($item)}`, `#{meta.inspect(list.nth($item, $j))}` is not a position; a stop is a colour followed by up to two lengths or percentages";
+        }
+      }
+      $kind: "stop";
+    } @else {
+      $problem: colorProblem($item);
+      @if $problem {
+        @return "`#{meta.inspect($item)}` is not a colour stop: #{$problem}";
+      }
+      $kind: "stop";
+    }
+
+    @if $kind == "hint" {
+      @if $i == 1 {
+        @return "it starts with the position `#{meta.inspect($item)}`; a position on its own goes between two colours";
+      }
+      @if $i == $count {
+        @return "it ends with the position `#{meta.inspect($item)}`; a position on its own goes between two colours";
+      }
+      @if $previous == "hint" {
+        @return "it has two positions in a row; a position on its own goes between two colours";
+      }
+    } @else {
+      $colors-seen: $colors-seen + 1;
+    }
+    $previous: $kind;
+  }
+  @if $colors-seen == 0 {
+    @return "a gradient needs at least one colour";
+  }
+  @return null;
+}

data/scss/internal/_condition-width.scss

@@ -0,0 +1,22 @@
+@charset "UTF-8";
+
+@use "sass:meta";
+@use "../utilities/validate-breakpoint" as *;
+@use "is-condition-value" as *;
+
+// Shared by the mixins and not public API; see _is-css-function.scss.
+
+// Resolves a size for a width condition and refuses one no condition can match.
+// validateBreakpoint turns a key into its width and refuses a word that is not a
+// key; it passes a percentage or a bare number through, because a declaration
+// takes them. A width condition does not: `(min-width: 50%)` and
+// `(min-width: 768)` never matched in Chrome 152, so they are refused here.
+// Returns the same value validateBreakpoint does, so a call that worked writes
+// the same query.
+@function conditionWidth($value, $mixin, $at-rule: "@media") {
+  $width: validateBreakpoint($value);
+  @if not isConditionValue($width, "length") {
+    @error "`#{meta.inspect($value)}` cannot be used as a size in `#{$mixin}`: a width condition takes a length, and one written with `#{meta.inspect($width)}` would never match in #{$at-rule}. Pass a length such as `600px`, `40em` or `calc(30em + 1px)`, or a key from $map-for-breakpoints.";
+  }
+  @return $width;
+}

data/scss/internal/_custom-property-in.scss

@@ -0,0 +1,25 @@
+@charset "UTF-8";
+
+@use "sass:meta";
+@use "sass:string";
+
+// Shared by the mixins and not public API; see _is-css-function.scss.
+
+// Returns the first value in $value that holds var(), looking inside lists and
+// calculations, or null. Custom properties are not evaluated in a @media or
+// @container condition, so a rule built from one never applies, and nothing
+// warns. Measured in Chrome 152: `(min-width: var(--wide))` did not match with
+// `--wide: 200px`, while `(min-width: 200px)` did.
+@function customPropertyIn($value) {
+  @each $item in $value {
+    @if meta.type-of($item) == "list" or meta.type-of($item) == "arglist" {
+      $found: customPropertyIn($item);
+      @if $found {
+        @return $found;
+      }
+    } @else if string.index(meta.inspect($item), "var(") {
+      @return $item;
+    }
+  }
+  @return null;
+}