css.spec.js

2021-02-24 21:51:23 +00:00 · 2021-02-24 21:51:23 +00:00 · 7c38255205
parent bce416a9cf
commit 7c38255205
4 changed files with 69 additions and 12 deletions
--- 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) =>
--- a/css.spec.js
+++ 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>"
+  `);
+});
--- 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}>`;
 }
--- 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>