specter/gmi-web
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

rootVariables does not include -- part

Browse source
This commit is contained in:
Talon Poole 2021-02-25 17:11:25 +00:00
parent 62d529a633
commit 267576aa4d
3 changed files with 72 additions and 75 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
cli.js
View file

@ -85,13 +85,12 @@ const css =
yargs(process.argv.slice(2)).exitProcess(false).argv.css || "gmi-web.css"; yargs(process.argv.slice(2)).exitProcess(false).argv.css || "gmi-web.css";
const CSS_VARS = CSS.rootVariables(CSS.load({ css })); const CSS_VARS = CSS.rootVariables(CSS.load({ css }));
Object.keys(CSS_VARS).forEach((key) => { Object.keys(CSS_VARS).forEach((key) => {
const opt = key.replace("--", ""); cli.option(key, { default: CSS_VARS[key] });
cli.option(opt, { default: CSS_VARS[key] }); cli.conflicts(key, "core");
cli.conflicts(opt, "core"); cli.conflicts(key, "none");
cli.conflicts(opt, "none");
}); });
cli.group( cli.group(
Object.keys(CSS_VARS).map((key) => key.replace("--", "")), Object.keys(CSS_VARS),
`${css}:` `${css}:`
); );

66
css.js
View file

@ -5,6 +5,7 @@ import { stringify, parse } from "css";
export function style(options) { export function style(options) {
if (options.inline || options.css === "none") return ""; if (options.inline || options.css === "none") return "";
const rules = load(options); const rules = load(options);
const schemes = rules.find(({ media }) => media) const schemes = rules.find(({ media }) => media)
? `<meta name="color-scheme" content="dark light">` ? `<meta name="color-scheme" content="dark light">`
@ -20,19 +21,17 @@ export function style(options) {
export function inline(options) { export function inline(options) {
const rules = load(options); const rules = load(options);
return function inlineCSS(tag) { return function inlineCSS(tag) {
if ((options.body || options.inline) && options.css !== "none") { if (options.css === "none" || !(options.inline || options.body)) return "";
const styles = reduceVariables(rules, options)
.filter(({ selectors }) => selectors && selectors.includes(tag)) const styles = reduceVariables(rules, options)
.reduce((style, { declarations }) => { .filter(({ selectors }) => selectors && selectors.includes(tag))
declarations.forEach(({ property, value }) => { .reduce((style, { declarations }) => {
style = `${style}${property}:${value};`; declarations.forEach(({ property, value }) => {
}); style = `${style}${property}:${value};`;
return style; });
}, ""); return style;
return styles !== "" ? ` style="${styles}"` : ""; }, "");
} else { return styles !== "" ? ` style="${styles}"` : "";
return "";
}
}; };
} }
@ -43,25 +42,24 @@ export function load(options) {
: options.body : options.body
? "gmi.css" ? "gmi.css"
: "gmi-web.css"; : "gmi-web.css";
if ( if (
["gmi.css", "gmi-web.css"].includes(options.css) || !["gmi.css", "gmi-web.css"].includes(options.css) ||
existsSync(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); const internal = (file) =>
return parse( path.resolve(path.dirname(new URL(import.meta.url).pathname), file);
readFileSync( return parse(
path.resolve( readFileSync(
["gmi-web.css", "gmi.css"].includes(options.css) path.resolve(
? internal(options.css) ["gmi-web.css", "gmi.css"].includes(options.css)
: resolve(options.css) ? internal(options.css)
), : resolve(options.css)
"utf-8" ),
) "utf-8"
).stylesheet.rules; )
} else { ).stylesheet.rules;
throw new Error(`Cannot find file ${options.css}.`);
}
} }
export function rootVariables(rules) { export function rootVariables(rules) {
@ -71,14 +69,14 @@ export function rootVariables(rules) {
if (!root) return {}; if (!root) return {};
return root.declarations.reduce( return root.declarations.reduce(
(obj, { property, value }) => (obj, { property, value }) =>
!/^\-\-/.test(property) ? obj : Object.assign(obj, { [property]: value }), !/^\-\-/.test(property) ? obj : Object.assign(obj, { [property.replace("--", "")]: value }),
{} {}
); );
} }
function reduceVariables(rules, options = {}) { function reduceVariables(rules, options = {}) {
const defaultVariables = rootVariables(rules); const defaultVariables = rootVariables(rules);
const CSS_VAR = /(^var\((?<key>.+)\)|(?<val>.+))/; const CSS_VAR = /(^var\(\-\-(?<key>.+)\)|(?<val>.+))/;
const reduce = (rule) => const reduce = (rule) =>
Object.assign( Object.assign(
rule, rule,
@ -92,7 +90,7 @@ function reduceVariables(rules, options = {}) {
.key || key; .key || key;
return Object.assign(declaration, { return Object.assign(declaration, {
value: key value: key
? options[key.replace("--", "")] || defaultVariables[key] ? options[key] || defaultVariables[key]
: declaration.value, : declaration.value,
}); });
}), }),

72
css.spec.js
View file

@ -5,42 +5,42 @@ import { load, rootVariables, style } from "./css.js";
test("rootVariables", () => { test("rootVariables", () => {
expect(rootVariables(load({ css: "gmi-web.css" }))).toMatchInlineSnapshot(` expect(rootVariables(load({ css: "gmi-web.css" }))).toMatchInlineSnapshot(`
Object { Object {
"--a-decoration": "underline", "a-decoration": "underline",
"--a-family": "var(--serif)", "a-family": "var(--serif)",
"--a-height": "1.5", "a-height": "1.5",
"--a-size": "var(--p-size)", "a-size": "var(--p-size)",
"--a-style": "normal", "a-style": "normal",
"--background": "white", "background": "white",
"--body-width": "48rem", "body-width": "48rem",
"--foreground": "black", "foreground": "black",
"--h1-family": "var(--sans-serif)", "h1-family": "var(--sans-serif)",
"--h1-height": "1.25", "h1-height": "1.25",
"--h1-size": "3rem", "h1-size": "3rem",
"--h2-family": "var(--sans-serif)", "h2-family": "var(--sans-serif)",
"--h2-height": "1.25", "h2-height": "1.25",
"--h2-size": "2.25rem", "h2-size": "2.25rem",
"--h3-family": "var(--sans-serif)", "h3-family": "var(--sans-serif)",
"--h3-height": "1.25", "h3-height": "1.25",
"--h3-size": "1.5rem", "h3-size": "1.5rem",
"--hyphens": "manual", "hyphens": "manual",
"--mono": "consolas, monaco, monospace", "mono": "consolas, monaco, monospace",
"--p-family": "var(--serif)", "p-family": "var(--serif)",
"--p-height": "1.5", "p-height": "1.5",
"--p-indent": "0rem", "p-indent": "0rem",
"--p-size": "1.25rem", "p-size": "1.25rem",
"--pre-family": "var(--mono)", "pre-family": "var(--mono)",
"--pre-height": "1", "pre-height": "1",
"--pre-size": "1rem", "pre-size": "1rem",
"--quote-family": "var(--serif)", "quote-family": "var(--serif)",
"--quote-height": "1.25", "quote-height": "1.25",
"--quote-size": "var(--p-size)", "quote-size": "var(--p-size)",
"--quote-style": "italic", "quote-style": "italic",
"--sans-serif": "avenir, helvetica, arial, sans-serif", "sans-serif": "avenir, helvetica, arial, sans-serif",
"--serif": "georgia, times, serif", "serif": "georgia, times, serif",
"--ul-family": "var(--serif)", "ul-family": "var(--serif)",
"--ul-height": "1.25", "ul-height": "1.25",
"--ul-size": "var(--p-size)", "ul-size": "var(--p-size)",
"--ul-style": "circle", "ul-style": "circle",
} }
`); `);
}); });