From 7c38255205b46cb2fcbce136970a695eaa14a1f3 Mon Sep 17 00:00:00 2001
From: Talon Poole <code@talon.computer>
Date: Wed, 24 Feb 2021 21:51:23 +0000
Subject: [PATCH] css.spec.js

---
 css.js       |  6 +++---
 css.spec.js  | 55 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 html.js      |  4 +++-
 html.spec.js | 16 +++++++--------
 4 files changed, 69 insertions(+), 12 deletions(-)
 create mode 100644 css.spec.js

diff --git a/css.js b/css.js
index 8046951..4dc99a9 100644
--- a/css.js
+++ b/css.js
@@ -17,7 +17,7 @@ export function style(options) {
   )}</style>`;
 }
 
-export const inline = (options) => {
+export function inline(options) {
   const rules = load(options);
   return function inlineCSS(tag) {
     if ((options.body || options.inline) && options.css !== "none") {
@@ -34,7 +34,7 @@ export const inline = (options) => {
       return "";
     }
   };
-};
+}
 
 export function load(options) {
   if (options.css === "none") return [];
@@ -76,7 +76,7 @@ export function rootVariables(rules) {
   );
 }
 
-function reduceVariables(rules, options) {
+function reduceVariables(rules, options = {}) {
   const defaultVariables = rootVariables(rules);
   const CSS_VAR = /(^var\((?<key>.+)\)|(?<val>.+))/;
   const reduce = (rule) =>
diff --git a/css.spec.js b/css.spec.js
new file mode 100644
index 0000000..f1497d9
--- /dev/null
+++ b/css.spec.js
@@ -0,0 +1,55 @@
+import { readFileSync } from "fs";
+import { resolve } from "path";
+import { load, rootVariables, style } from "./css.js";
+
+test("rootVariables", () => {
+  expect(rootVariables(load({ css: "gmi-web.css" }))).toMatchInlineSnapshot(`
+    Object {
+      "--a-decoration": "underline",
+      "--a-family": "var(--serif)",
+      "--a-height": "1.5",
+      "--a-size": "var(--p-size)",
+      "--a-style": "normal",
+      "--background": "white",
+      "--body-width": "48rem",
+      "--foreground": "black",
+      "--h1-family": "var(--sans-serif)",
+      "--h1-height": "1.25",
+      "--h1-size": "3rem",
+      "--h2-family": "var(--sans-serif)",
+      "--h2-height": "1.25",
+      "--h2-size": "2.25rem",
+      "--h3-family": "var(--sans-serif)",
+      "--h3-height": "1.25",
+      "--h3-size": "1.5rem",
+      "--hyphens": "manual",
+      "--mono": "consolas, monaco, monospace",
+      "--p-family": "var(--serif)",
+      "--p-height": "1.5",
+      "--p-indent": "0rem",
+      "--p-size": "1.25rem",
+      "--pre-family": "var(--mono)",
+      "--pre-height": "1",
+      "--pre-size": "1rem",
+      "--quote-family": "var(--serif)",
+      "--quote-height": "1.25",
+      "--quote-size": "var(--p-size)",
+      "--quote-style": "italic",
+      "--sans-serif": "avenir, helvetica, arial, sans-serif",
+      "--serif": "georgia, times, serif",
+      "--ul-family": "var(--serif)",
+      "--ul-height": "1.25",
+      "--ul-size": "var(--p-size)",
+      "--ul-style": "circle",
+    }
+  `);
+});
+
+test("style with variable overrides", () => {
+  expect(style({ css: "gmi-web.css", foreground: "#137752" }))
+    .toMatchInlineSnapshot(`
+    "
+    <meta name=\\"color-scheme\\" content=\\"dark light\\">
+    <style>p,pre,ul,blockquote,h1,h2,h3{margin-top:0;margin-bottom:0;overflow-wrap:break-word;}p:empty{padding-bottom:20px;}a{display:block;}pre{overflow-y:auto;}img,audio,video{display:block;max-width:100%;}body{margin:0 auto;padding:0.5rem;max-width:48rem;hyphens:manual;}p{font-family:georgia, times, serif;font-size:1.25rem;line-height:1.5;text-indent:0rem;}a{font-size:1.25rem;font-style:normal;font-family:georgia, times, serif;line-height:1.5;text-decoration:underline;}pre{padding:1rem;font-family:consolas, monaco, monospace;font-size:1rem;line-height:1;}h1{font-family:avenir, helvetica, arial, sans-serif;font-size:3rem;line-height:1.25;}h2{font-family:avenir, helvetica, arial, sans-serif;font-size:2.25rem;line-height:1.25;}h3{font-family:avenir, helvetica, arial, sans-serif;font-size:1.5rem;line-height:1.25;}ul{padding-left:1rem;list-style-type:circle;font-size:1.25rem;font-family:georgia, times, serif;line-height:1.25;}blockquote{margin-left:0;margin-right:0;padding-left:0.5rem;border-left-width:0.5rem;border-left-style:solid;font-family:georgia, times, serif;font-size:1.25rem;font-style:italic;line-height:1.25;}html,body,h1,h2,h3,p,a,ul,blockquote,pre::selection{color:#137752;background-color:white;}blockquote{border-color:#137752;}pre,::selection,a:hover{color:white;background-color:#137752;}@media (prefers-color-scheme: dark){html,body,h1,h2,h3,p,a,ul,blockquote,pre::selection{color:white;background-color:#137752;}blockquote{border-color:white;}pre,::selection,a:hover{color:#137752;background-color:white;}}</style>"
+  `);
+});
diff --git a/html.js b/html.js
index d2b0619..3aed862 100644
--- a/html.js
+++ b/html.js
@@ -63,7 +63,9 @@ export function block(
     }
   }
   if (options.body || options.inline)
-    props += options.inlineCSS(type === "p" && content === "" ? "p:empty" : type)
+    props += options.inlineCSS(
+      type === "p" && content === "" ? "p:empty" : type
+    );
 
   return `<${type}${props}>${escape(content)}</${type}>`;
 }
diff --git a/html.spec.js b/html.spec.js
index a896372..9237cc9 100644
--- a/html.spec.js
+++ b/html.spec.js
@@ -10,9 +10,9 @@ test("--body", () => {
     <blockquote style=\\"margin-top:0;margin-bottom:0;overflow-wrap:break-word;\\">a bridge between HTML and Gemini</blockquote>
     <a href=\\"https://codeberg.org/talon/gmi-web\\" style=\\"display:block;\\">https://codeberg.org/talon/gmi-web</a>
     <a href=\\"https://www.npmjs.com/package/gmi-web-cli\\" style=\\"display:block;\\">on NPM </a>
-    <p></p>
+    <p style=\\"padding-bottom:20px;\\"></p>
     <h2 style=\\"margin-top:0;margin-bottom:0;overflow-wrap:break-word;\\">line-types</h2>
-    <p></p>
+    <p style=\\"padding-bottom:20px;\\"></p>
     <p style=\\"margin-top:0;margin-bottom:0;overflow-wrap:break-word;\\">gmi-web makes writing HTML documents as simple as learning the handful of Gemini line-types:</p>
     <ul style=\\"margin-top:0;margin-bottom:0;overflow-wrap:break-word;\\">
     <li>paragraphs </li>
@@ -21,7 +21,7 @@ test("--body", () => {
     <li>quotes </li>
     <li>headings </li>
     </ul>
-    <p></p>
+    <p style=\\"padding-bottom:20px;\\"></p>
     <pre title=\\"if you are familiar with markdown it's kinda like that but even simpler\\" style=\\"margin-top:0;margin-bottom:0;overflow-wrap:break-word;overflow-y:auto;\\">
     if you are
        familiar with markdown
@@ -30,7 +30,7 @@ test("--body", () => {
 
     but even simpler
     </pre>
-    <p></p>
+    <p style=\\"padding-bottom:20px;\\"></p>
     <h3 style=\\"margin-top:0;margin-bottom:0;overflow-wrap:break-word;\\">inline media</h3>
     <a href=\\"video.mp4\\" style=\\"display:block;\\">video with title prop</a>
     <a href=\\"image.jpg\\" style=\\"display:block;\\">image with title prop</a>
@@ -146,9 +146,9 @@ test("--image, --audio, --video", () => {
     <blockquote style=\\"margin-top:0;margin-bottom:0;overflow-wrap:break-word;\\">a bridge between HTML and Gemini</blockquote>
     <a href=\\"https://codeberg.org/talon/gmi-web\\" style=\\"display:block;\\">https://codeberg.org/talon/gmi-web</a>
     <a href=\\"https://www.npmjs.com/package/gmi-web-cli\\" style=\\"display:block;\\">on NPM </a>
-    <p></p>
+    <p style=\\"padding-bottom:20px;\\"></p>
     <h2 style=\\"margin-top:0;margin-bottom:0;overflow-wrap:break-word;\\">line-types</h2>
-    <p></p>
+    <p style=\\"padding-bottom:20px;\\"></p>
     <p style=\\"margin-top:0;margin-bottom:0;overflow-wrap:break-word;\\">gmi-web makes writing HTML documents as simple as learning the handful of Gemini line-types:</p>
     <ul style=\\"margin-top:0;margin-bottom:0;overflow-wrap:break-word;\\">
     <li>paragraphs </li>
@@ -157,7 +157,7 @@ test("--image, --audio, --video", () => {
     <li>quotes </li>
     <li>headings </li>
     </ul>
-    <p></p>
+    <p style=\\"padding-bottom:20px;\\"></p>
     <pre title=\\"if you are familiar with markdown it's kinda like that but even simpler\\" style=\\"margin-top:0;margin-bottom:0;overflow-wrap:break-word;overflow-y:auto;\\">
     if you are
        familiar with markdown
@@ -166,7 +166,7 @@ test("--image, --audio, --video", () => {
 
     but even simpler
     </pre>
-    <p></p>
+    <p style=\\"padding-bottom:20px;\\"></p>
     <h3 style=\\"margin-top:0;margin-bottom:0;overflow-wrap:break-word;\\">inline media</h3>
     <video controls src=\\"video.mp4\\" title=\\"video with title prop\\"></video>
     <img src=\\"image.jpg\\" title=\\"image with title prop\\"></img>