gmi-web/css.js

import { readFileSync, existsSync } from "fs";
// TODO import.meta.resolve is supposed to accomplish this without "path"
import path from "path";
import { stringify, parse } from "css";

export function style(options) {
  if (options.inline || options.css === "none") return "";
  const rules = load(options);
  const schemes = rules.find(({ media }) => media === "preferes-color-scheme")
    ? `<meta name="color-scheme" content="dark light">\n`
    : "";
  return `<style>${stringify(
    {
      stylesheet: { rules: reduceVariables(rules, options) },
    },
    { compress: true }
  )}</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 function load(options) {
  console.log("load:", options.css);
  options.css =
    options.css || (!options.body || !options.inline ? "web" : "core");
  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(
        readFileSync(
          path.resolve(
            ["gmi-web.css", "web"].includes(options.css)
              ? packageRoot("gmi-web.css")
              : ["gmi.css", "gmi"].includes(options.css)
              ? packageRoot("gmi.css")
              : resolve(options.css)
          ),
          "utf-8"
        )
      ).stylesheet.rules
    );
  } else {
    throw new Error(`Cannot find file ${options.css}.`);
  }
}

export function rootVariables(rules) {
  const root = rules.find(
    ({ selectors }) => selectors && selectors.includes(":root")
  );
  if (!root) return {};
  return root.declarations.reduce(
    (obj, { property, value }) =>
      !/^\-\-/.test(property) ? obj : Object.assign(obj, { [property]: value }),
    {}
  );
}

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>.+))/;
  return rules
    .filter(({ selectors }) => selectors && !selectors.includes(":root"))
    .map((rule) => {
      return Object.assign(rule, {
        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;
          return Object.assign(declaration, {
            value: key ? options[key] || defaultVariables[key] : declaration.value,
          });
        }),
      });
    });
}