rootVariables does not include -- part
This commit is contained in:
Talon Poole
parent
62d529a633
commit
267576aa4d
9
cli.js
9
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}:`
|
||||
);
|
||||
|
||||
|
|
|
|||
66
css.js
66
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)
|
||||
? `<meta name="color-scheme" content="dark light">`
|
||||
|
|
@ -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\((?<key>.+)\)|(?<val>.+))/;
|
||||
const CSS_VAR = /(^var\(\-\-(?<key>.+)\)|(?<val>.+))/;
|
||||
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,
|
||||
});
|
||||
}),
|
||||
|
|
|
|||
72
css.spec.js
72
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",
|
||||
}
|
||||
`);
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in a new issue