ditch import stuff

cli.js

@@ -81,7 +81,7 @@ const cli = yargs(process.argv.slice(2))
     },
   });
 
-const CSS_VARS = CSS.rootVariables(CSS.load({ css: "web" }));
+const CSS_VARS = CSS.rootVariables(CSS.load({ css: "gmi-web.css" }));
 Object.keys(CSS_VARS).map((key) => {
   cli.option(key, { default: CSS_VARS[key] });
   cli.conflicts(key, "core");

css.js

@@ -17,31 +17,34 @@ export function style(options) {
   )}</style>`;
 }
 
-export function inline(options, tag) {
-  if (!options.inline || options.css === "none") return "";
-  const styles = reduceVariables(load(options), options)
-    .filter(({ selectors }) => selectors && selectors.includes(tag))
-    .reduce((style, { declarations }) => {
-      declarations.forEach(({ property, value }) => {
-        style = `${style}${property}:${value};`;
-      });
-      return style;
-    }, "");
-  return styles !== "" ? ` style="${styles}"` : "";
-}
+export const inline = (options) => {
+  const rules = load(options);
+  return (tag) => {
+    if (!options.inline || options.css === "none") return "";
+    const styles = reduceVariables(rules, options)
+      .filter(({ selectors }) => selectors && selectors.includes(tag))
+      .reduce((style, { declarations }) => {
+        declarations.forEach(({ property, value }) => {
+          style = `${style}${property}:${value};`;
+        });
+        return style;
+      }, "");
+    return styles !== "" ? ` style="${styles}"` : "";
+  };
+};
 
 export function load(options) {
-  console.log("load:", options.css);
   options.css =
-    options.css || (!options.body || !options.inline ? "web" : "core");
+    options.css ||
+    (!options.body || !options.inline ? "gmi-web.css" : "gmi.css");
+  console.log("load:", options.css);
   if (
     ["gmi", "web", "gmi.css", "gmi-web.css"].includes(options.css) ||
     existsSync(options.css)
   ) {
     const packageRoot = (file) =>
       path.resolve(path.dirname(new URL(import.meta.url).pathname), file);
-    return resolveImports(
-      parse(
+    return parse(
         readFileSync(
           path.resolve(
             ["gmi-web.css", "web"].includes(options.css)
@@ -53,7 +56,6 @@ export function load(options) {
           "utf-8"
         )
       ).stylesheet.rules
-    );
   } else {
     throw new Error(`Cannot find file ${options.css}.`);
   }
@@ -71,16 +73,6 @@ export function rootVariables(rules) {
   );
 }
 
-function resolveImports(rules) {
-  const imports = rules
-    .filter(({ type }) => type === "import")
-    .map((rule) => load({ css: rule.import.replace(/\"/g, "") }));
-
-  return []
-    .concat(...imports)
-    .concat(rules.filter(({ type }) => type !== "import"));
-}
-
 function reduceVariables(rules, options) {
   const defaultVariables = rootVariables(rules);
   const CSS_VAR = /(^var\((?<key>.+)\)|(?<val>.+))/;
@@ -91,9 +83,13 @@ function reduceVariables(rules, options) {
         declarations: rule.declarations.map((declaration) => {
           let { key, val } = CSS_VAR.exec(declaration.value).groups;
           // only one level of variable referencing is supported
-          key = CSS_VAR.exec(options[key] || defaultVariables[key]).groups.key || key;
+          key =
+            CSS_VAR.exec(options[key] || defaultVariables[key]).groups.key ||
+            key;
           return Object.assign(declaration, {
-            value: key ? options[key] || defaultVariables[key] : declaration.value,
+            value: key
+              ? options[key] || defaultVariables[key]
+              : declaration.value,
           });
         }),
       });

gmi-web.css

@@ -1,4 +1,26 @@
-@import "gmi.css";
+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,
@@ -115,6 +137,8 @@ blockquote {
   margin-left: 0;
   margin-right: 0;
   padding-left: 0.5rem;
+  border-left-width: 0.5rem;
+  border-left-style: solid;
   font-family: var(--quote-family);
   font-size: var(--quote-size);
   font-style: var(--quote-style);

html.js

@@ -56,7 +56,7 @@ export function block(
     }
   }
   if (options.body || options.inline)
-    content !== "" ? (props += CSS.inline(options, type)) : "";
+    content !== "" ? (props += options.inlineCSS(type)) : "";
 
   return `<${type}${props}>${escape(content)}</${type}>`;
 }
@@ -68,7 +68,7 @@ export function body(tokens, options) {
     if (cursor.pre) {
       blocks.push(
         `<pre${cursor.alt ? ` title="${cursor.alt}"` : ""}${
-          options.body || options.inline ? CSS.inline(options, "pre") : ""
+          options.body || options.inline ? options.inlineCSS("pre") : ""
         }>`
       );
       const closing = tokens.findIndex((token) => token.pre);
@@ -77,7 +77,7 @@ export function body(tokens, options) {
       tokens = tokens.slice(closing + 1);
     } else if (cursor.li) {
       blocks.push(
-        `<ul${options.body || options.inline ? CSS.inline(options, "ul") : ""}>`
+        `<ul${options.body || options.inline ? options.inlineCSS("ul") : ""}>`
       );
       const closing = tokens.findIndex((token) => !token.li);
       blocks = blocks
@@ -95,22 +95,21 @@ export function body(tokens, options) {
 
 export function toHTML(gemtext, options) {
   const tokens = tokenize(gemtext);
+  options.inlineCSS = CSS.inline(options);
 
   if (options.body) return body(tokens, options);
 
-  console.log(options)
   return `<!DOCTYPE html>
-<html lang="${options.language}" dir="${options.dir}" style='${CSS.inline(
-    options,
-    "html"
-  )}'>
+<html lang="${options.language}" dir="${
+    options.dir
+  }" style='${options.inlineCSS("html")}'>
 <head>${head(
     Object.assign(options, {
       title: tokens[0].h1,
       description: description(tokens, options),
     })
   )}</head>
-<body${CSS.inline(options, "body")}>
+<body${options.inlineCSS("body")}>
 ${body(tokens, options)}
 </body>
 </html>