Add pseudo selector, dark mode, and responsive generators and test suite

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "shunit2"]
+	path = shunit2
+	url = git@github.com:kward/shunit2.git

Makefile

@@ -1,5 +1,5 @@
 .EXPORT_ALL_VARIABLES:
-.PHONY: help dev build
+.PHONY: help dev build test
 
 help: #: show this help menu
 	@grep "#:" Makefile* | grep -v "@grep" | sed "s/\([A-Za-z_ -]*\):.*#\(.*\)/$$(tput setaf 3)\1$$(tput sgr0)\2/g"
@@ -9,3 +9,6 @@ dev: #: watch the source files and rebuild when they change
 
 build: #: build the final output file
 	@sass index.scss:index.min.css --style=compressed
+
+test: #: run the test suite
+	@cd tests && sh ./tests.sh

index.scss

@@ -1,4 +1,4 @@
 @forward "lib/variables"; // MUST COME FIRST
-@forward "lib/breakpoints";
+@forward "lib/media";
 @forward "lib/prefixer";
 @forward "lib/index";

lib/generators/alignment.scss

@@ -0,0 +1,6 @@
+@mixin generate($pre, $app) {
+  .#{$pre}baseline#{$app} { vertical-align: baseline; }
+  .#{$pre}middle#{$app} { vertical-align: middle; }
+  .#{$pre}top#{$app} { vertical-align: top; }
+  .#{$pre}bottom#{$app} { vertical-align: bottom; }
+}

lib/generators/color.scss

@@ -23,12 +23,12 @@ $-default-colors: (
   "violet", "wheat", "whitesmoke", "yellowgreen", "rebeccapurple", "transparent"
 );
 
-@mixin generate($prefix) {
-  .#{$prefix}current { color: currentColor; }
-  .#{$prefix}bg-current { background-color: currentColor; }
+@mixin generate($pre, $app) {
+  .#{$pre}current#{$app} { color: currentColor; }
+  .#{$pre}bg-current#{$app} { background-color: currentColor; }
 
   @each $value in $-default-colors {
-    .#{$prefix}#{$value} { color: unquote($value); }
-    .#{$prefix}bg-#{$value} { background-color: unquote($value); }
+    .#{$pre}#{$value}#{$app} { color: unquote($value); }
+    .#{$pre}bg-#{$value}#{$app} { background-color: unquote($value); }
   }
 }

lib/generators/tester.scss

@@ -0,0 +1,7 @@
+//
+// This is a special generater that is only used for unit testing.
+//
+
+@mixin generate($pre, $app) {
+  .#{$pre}tester#{$app} { color: red; }
+}

lib/generators/typography.scss

@@ -0,0 +1,64 @@
+@use "sass:map" as map;
+
+@use "../variables" as variables;
+
+@mixin generate($pre, $app) {
+  .#{$pre}regular#{$app} { font-weight: normal; }
+  .#{$pre}bold#{$app} { font-weight: bold; }
+  .#{$pre}bolder#{$app} { font-weight: bolder; }
+  .#{$pre}lighter#{$app} { font-weight: lighter; }
+
+  .#{$pre}italic#{$app} { font-style: italic; }
+  .#{$pre}no-italic#{$app} { font-style: normal; }
+
+  .#{$pre}strike#{$app} { text-decoration: line-through; }
+  .#{$pre}underline#{$app} { text-decoration: underline; }
+  .#{$pre}no-underline#{$app} { text-decoration: none; }
+
+  .#{$pre}small-caps#{$app} { font-variant: small-caps; }
+  .#{$pre}capitalize#{$app} { text-transform: capitalize; }
+  .#{$pre}lowercase#{$app} { text-transform: lowercase; }
+  .#{$pre}uppercase#{$app} { text-transform: uppercase; }
+  .#{$pre}no-case#{$app} { text-transform: none; }
+
+  .#{$pre}text-left#{$app} { text-align: left; }
+  .#{$pre}text-right#{$app} { text-align: right; }
+  .#{$pre}text-center#{$app} { text-align: center; }
+  .#{$pre}text-justify#{$app} { text-align: justify; }
+
+  .#{$pre}pre#{$app} { white-space: pre; }
+  .#{$pre}wrap#{$app} { white-space: normal; }
+  .#{$pre}no-wrap#{$app} { white-space: nowrap; }
+
+  .#{$pre}indent#{$app} {
+    text-indent: variables.$text-indent;
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  .#{$pre}truncate#{$app} {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  @each $key, $value in variables.$font-stacks {
+    .#{$pre}#{$key}#{$app} { font-family: $value; }
+  }
+
+  @each $key, $value in variables.$font-weights {
+    .#{$pre}#{$key}#{$app} { font-weight: $value; }
+  }
+
+  @each $key, $value in variables.$font-sizes {
+    .#{$pre}text-#{$key}#{$app} { font-size: $value; }
+  }
+
+  @each $key, $value in variables.$font-leading {
+    .#{$pre}lead-#{$key}#{$app} { line-height: $value; }
+  }
+
+  @each $key, $value in variables.$font-tracking {
+    .#{$pre}track-#{$key}#{$app} { letter-spacing: $value; }
+  }
+}

lib/generators/width.scss

@@ -0,0 +1,31 @@
+@mixin generate($pre, $app) {
+  .#{$pre}w-0#{$app} { width: 0px; }
+  .#{$pre}w-px#{$app} { width: 1px; }
+  .#{$pre}w-full#{$app} { width: 100%; }
+  .#{$pre}w-screen#{$app} { width: 100vw; }
+  .#{$pre}w-min#{$app} { width: min-content; }
+  .#{$pre}w-max#{$app} { width: max-content; }
+  .#{$pre}w-fit#{$app} { width: fit-content; }
+
+  .#{$pre}mw-0#{$app} { max-width: none; }
+  .#{$pre}mw-full#{$app} { max-width: 100%; }
+  .#{$pre}mw-min#{$app} { max-width: min-content; }
+  .#{$pre}mw-max#{$app} { max-width: max-content; }
+  .#{$pre}mw-fit#{$app} { max-width: fit-content; }
+
+  // .#{$pre}h-full#{$app} { height: 100%; }
+  // .#{$pre}mh-full#{$app} { max-height: 100%; }
+
+  // @if variable-exists("sizes") and type-of($sizes) == list {
+  //   @each $v in $sizes {
+  //     $i: index($sizes, $v);
+
+  //     .#{$pre}w-#{$i}#{$app} { width: $v; }
+  //     .#{$pre}mw-#{$i}#{$app} { max-width: $v; }
+  //   }
+  // }
+
+  // @each $key, $value in variables.$measures {
+  //   .#{$pre}measure-#{$key}#{$app} { max-width: $value; }
+  // }
+}

lib/index.scss

@@ -1,46 +1,151 @@
-@use "breakpoints" as breakpoints;
-@use "variables" as variables;
+@use "sass:list" as list;
+@use "sass:map" as map;
+
+@use "media" as media;
 @use "normalize" as normalize;
+@use "variables" as vars;
+
+@use "generators/alignment" as alignment;
 @use "generators/color" as color;
-@use "generators/font-family" as family;
-@use "generators/font-weight" as weight;
+@use "generators/tester" as tester;
+@use "generators/typography" as typography;
+@use "generators/width" as width;
 
-@if variables.$normalize {
+@if vars.$normalize {
   @include normalize.modern();
   @include normalize.custom();
 }
 
-$-prefix: variables.$class-prefix;
+$-pseudo-selectors: (
+  hover: ":hover",
+  focus: ":focus",
+  focus-within: ":focus-within",
+  focus-visible: ":focus-visible",
+  active: ":active",
+  visited: ":visited",
+  target: ":target",
+  first: ":first-child",
+  last: ":last-child",
+  only: ":only-child",
+  odd: ":nth-child(odd)",
+  even: ":nth-child(even)",
+  first-of-type: ":first-of-type",
+  last-of-type: ":last-of-type",
+  only-of-type: ":only-of-type",
+  empty: ":empty",
+  disabled: ":disabled",
+  checked: ":checked",
+  indeterminate: ":indeterminate",
+  default: ":default",
+  required: ":required",
+  valid: ":valid",
+  invalid: ":invalid",
+  in-range: ":in-range",
+  out-of-range: ":out-of-range",
+  placeholder-shown: ":placeholder-shown",
+  autofill: ":autofill",
+  read-only: ":read-only",
+  rtl: ":dir(rtl)",
+  ltr: ":dir(ltr)",
+  before: "::before",
+  after: "::after",
+  first-letter: "::first-letter",
+  first-line: "::first-line",
+  marker: "::marker",
+  selection: "::selection",
+  file: "::file-selector-button",
+  placeholder: "::placeholder",
+);
+
+@function -prefix($values) {
+  $prefix: "";
+
+  @each $value in $values {
+    $prefix: $prefix + $value + vars.$separator;
+  }
+
+  @return $prefix;
+}
+
+@mixin -generate($generators, $prepend: null, $append: null) {
+  @if list.index($generators, "alignment") {
+    @include alignment.generate($prepend, $append);
+  }
 
-/**
- * Puts all prefixed classes into one media query rather than repeating for every generator.
- */
-@mixin -prefixes() {
-  @content;
+  @if list.index($generators, "color") {
+    @include color.generate($prepend, $append);
+  }
 
-  @each $name, $value in variables.$screens {
-    $-prefix: variables.$class-prefix + $name + variables.$separator !global;
+  // special generator used only for unit tests
+  @if list.index($generators, "tester") and vars.$tester {
+    @include tester.generate($prepend, $append);
+  }
 
-    @include breakpoints.media-up-to($name) { @content }
+  @if list.index($generators, "typography") {
+    @include typography.generate($prepend, $append);
   }
 
-  $-prefix: variables.$class-prefix + "dark" + variables.$separator !global;
+  @if list.index($generators, "width") {
+    @include width.generate($prepend, $append);
+  }
+}
 
-  @if variables.$dark-mode == "media" {
-    @media (prefers-color-scheme: dark) {
+@mixin -with-dark-mode {
+  @if vars.$dark-mode == "media" {
+    @include media.media-dark {
       @content;
     }
   }
 
-  @if variables.$dark-mode == "class" {
+  @if vars.$dark-mode == "class" {
     .dark {
       @content;
     }
   }
 }
 
-@include -prefixes {
-  @include color.generate($-prefix);
-  @include family.generate($-prefix);
-  @include weight.generate($-prefix);
+@mixin -with-pseudo($prefix...) {
+  @each $selector, $generators in vars.$selectors {
+    @if map.get($-pseudo-selectors, $selector) {
+      $pseudo: map.get($-pseudo-selectors, $selector);
+      @include -generate($generators, -prefix(list.join($prefix, ($selector))), $pseudo);
+    }
+  }
+}
+
+@each $selector, $generators in vars.$selectors {
+  // base styles
+  @if $selector == "base" {
+    @include -generate($generators);
+  }
+
+  // dark styles
+  @if $selector == "dark" {
+    @include -with-dark-mode {
+      @include -generate($generators, -prefix("dark"));
+      @include -with-pseudo("dark");
+    }
+  }
+
+  // responsive styles
+  @else if $selector == "responsive" {
+    @each $name, $value in vars.$screens {
+      @include media.media-up-to($name) {
+        @include -generate($generators, -prefix($name));
+        @include -with-pseudo($name);
+
+        // responsive dark styles
+        @include -with-dark-mode {
+          @include -generate($generators, -prefix(($name, "dark")));
+          @include -with-pseudo($name, "dark");
+        }
+      }
+    }
+  }
+
+  // pseudo styles
+  @else if map.get($-pseudo-selectors, $selector) {
+    $pseudo: map.get($-pseudo-selectors, $selector);
+    @include -generate($generators, -prefix($selector), $pseudo);
+  }
 }