From 267576aa4dccdf1ea45c8119df582b9df15212ab Mon Sep 17 00:00:00 2001 From: Talon Poole Date: Thu, 25 Feb 2021 17:11:25 +0000 Subject: [PATCH] rootVariables does not include -- part --- cli.js | 9 +++---- css.js | 66 ++++++++++++++++++++++++------------------------ css.spec.js | 72 ++++++++++++++++++++++++++--------------------------- 3 files changed, 72 insertions(+), 75 deletions(-) diff --git a/cli.js b/cli.js index cc27ae8..f07f9b7 100755 --- a/cli.js +++ b/cli.js @@ -85,13 +85,12 @@ const css = yargs(process.argv.slice(2)).exitProcess(false).argv.css || "gmi-web.css"; const CSS_VARS = CSS.rootVariables(CSS.load({ css })); Object.keys(CSS_VARS).forEach((key) => { - const opt = key.replace("--", ""); - cli.option(opt, { default: CSS_VARS[key] }); - cli.conflicts(opt, "core"); - cli.conflicts(opt, "none"); + cli.option(key, { default: CSS_VARS[key] }); + cli.conflicts(key, "core"); + cli.conflicts(key, "none"); }); cli.group( - Object.keys(CSS_VARS).map((key) => key.replace("--", "")), + Object.keys(CSS_VARS), `${css}:` ); diff --git a/css.js b/css.js index 4dc99a9..953da6f 100644 --- a/css.js +++ b/css.js @@ -5,6 +5,7 @@ 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) ? `` @@ -20,19 +21,17 @@ export function style(options) { export function inline(options) { const rules = load(options); return function inlineCSS(tag) { - if ((options.body || options.inline) && options.css !== "none") { - 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}"` : ""; - } else { - return ""; - } + if (options.css === "none" || !(options.inline || options.body)) 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}"` : ""; }; } @@ -43,25 +42,24 @@ export function load(options) { : options.body ? "gmi.css" : "gmi-web.css"; + if ( - ["gmi.css", "gmi-web.css"].includes(options.css) || - existsSync(options.css) - ) { - const internal = (file) => - path.resolve(path.dirname(new URL(import.meta.url).pathname), file); - return parse( - readFileSync( - path.resolve( - ["gmi-web.css", "gmi.css"].includes(options.css) - ? internal(options.css) - : resolve(options.css) - ), - "utf-8" - ) - ).stylesheet.rules; - } else { - throw new Error(`Cannot find file ${options.css}.`); - } + !["gmi.css", "gmi-web.css"].includes(options.css) || + !existsSync(options.css) + ) throw new Error(`Cannot find file ${options.css}.`); + + const internal = (file) => + path.resolve(path.dirname(new URL(import.meta.url).pathname), file); + return parse( + readFileSync( + path.resolve( + ["gmi-web.css", "gmi.css"].includes(options.css) + ? internal(options.css) + : resolve(options.css) + ), + "utf-8" + ) + ).stylesheet.rules; } export function rootVariables(rules) { @@ -71,14 +69,14 @@ export function rootVariables(rules) { if (!root) return {}; return root.declarations.reduce( (obj, { property, value }) => - !/^\-\-/.test(property) ? obj : Object.assign(obj, { [property]: value }), + !/^\-\-/.test(property) ? obj : Object.assign(obj, { [property.replace("--", "")]: value }), {} ); } function reduceVariables(rules, options = {}) { const defaultVariables = rootVariables(rules); - const CSS_VAR = /(^var\((?.+)\)|(?.+))/; + const CSS_VAR = /(^var\(\-\-(?.+)\)|(?.+))/; const reduce = (rule) => Object.assign( rule, @@ -92,7 +90,7 @@ function reduceVariables(rules, options = {}) { .key || key; return Object.assign(declaration, { value: key - ? options[key.replace("--", "")] || defaultVariables[key] + ? options[key] || defaultVariables[key] : declaration.value, }); }), diff --git a/css.spec.js b/css.spec.js index f1497d9..dd43358 100644 --- a/css.spec.js +++ b/css.spec.js @@ -5,42 +5,42 @@ 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", + "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", } `); });