@samva/markup 0.13.1 → 0.15.0

package/dist/{ir-C-ubz6N3.js → ir-DNL6H7jA.js}

@@ -1,6 +1,7 @@
 import { n as isObject } from "./guards-eV1qLbf2.js";
-import { a as kebab, n as declarationValue, r as escapeAttribute } from "./html-eOZfDwVf.js";
+import { a as kebab, n as declarationValue, r as escapeAttribute } from "./html-BvRFepeO.js";
 import { t as EmailNode } from "./jsx-runtime-CBlexoeR.js";
+import { i as withinDarkScheme, t as DARK_SCHEME_MEDIA } from "./dark-scheme-CbCwGDWH.js";
 //#region src/email/font-stacks.ts
 /** Generic families every email client understands as the last resort in a stack. */
 const GENERIC_FAMILIES = /* @__PURE__ */ new Set([
@@ -90,6 +91,73 @@ const fontFallbackDiagnostic = (value) => ({
 	message: `font-family ${JSON.stringify(value)} uses a project font without a generic fallback. Clients that drop webfonts (Gmail, classic Outlook) render this stack as written, so end it with sans-serif, serif or monospace.`
 });
 //#endregion
+//#region src/email/selectors.ts
+const classListOf = (element) => {
+	const value = element.props.class ?? element.props.className;
+	return typeof value === "string" ? value.split(/\s+/).filter((name) => name !== "") : [];
+};
+const attributeOf = (element, name) => {
+	const value = element.props[name];
+	if (value === void 0 || value === null || value === false) return void 0;
+	if (value === true) return "";
+	return typeof value === "string" || typeof value === "number" ? String(value) : void 0;
+};
+const matchesAttribute = (element, test) => {
+	const actual = test.name === "class" ? classListOf(element).join(" ") : attributeOf(element, test.name);
+	if (actual === void 0) return false;
+	if (test.operator === void 0 || test.value === void 0) return true;
+	switch (test.operator) {
+		case "=": return actual === test.value;
+		case "~=": return actual.split(/\s+/).includes(test.value);
+		case "^=": return actual.startsWith(test.value);
+		case "$=": return actual.endsWith(test.value);
+		case "*=": return actual.includes(test.value);
+		case "|=": return actual === test.value || actual.startsWith(`${test.value}-`);
+		default: return false;
+	}
+};
+const matchesCompound = (element, compound) => {
+	if (compound.opaque) return false;
+	if (compound.tag !== void 0 && compound.tag !== element.tag) return false;
+	if (compound.id !== void 0 && attributeOf(element, "id") !== compound.id) return false;
+	if (compound.classes.length > 0) {
+		const classes = classListOf(element);
+		if (!compound.classes.every((name) => classes.includes(name))) return false;
+	}
+	return compound.attributes.every((test) => matchesAttribute(element, test));
+};
+const matchesFrom = (selector, index, ancestry) => {
+	if (ancestry === void 0) return false;
+	const part = selector.parts[index];
+	if (part === void 0) return false;
+	if (!matchesCompound(ancestry.element, part.compound)) return false;
+	const left = selector.parts[index - 1];
+	if (left === void 0) return true;
+	switch (left.after ?? "descendant") {
+		case "child": return matchesFrom(selector, index - 1, ancestry.parent);
+		case "descendant":
+			for (let parent = ancestry.parent; parent !== void 0; parent = parent.parent) if (matchesFrom(selector, index - 1, parent)) return true;
+			return false;
+		case "adjacent": {
+			const sibling = ancestry.previous.at(-1);
+			return sibling === void 0 ? false : matchesFrom(selector, index - 1, {
+				element: sibling,
+				parent: ancestry.parent,
+				previous: ancestry.previous.slice(0, -1)
+			});
+		}
+		case "sibling":
+			for (let position = ancestry.previous.length - 1; position >= 0; position--) if (matchesFrom(selector, index - 1, {
+				element: ancestry.previous[position],
+				parent: ancestry.parent,
+				previous: ancestry.previous.slice(0, position)
+			})) return true;
+			return false;
+	}
+};
+/** Match a compiled selector against one element in its tree position. */
+const matchesSelector = (selector, ancestry) => selector === void 0 || selector.parts.length === 0 ? false : matchesFrom(selector, selector.parts.length - 1, ancestry);
+//#endregion
 //#region src/email/css-values.ts
 const MAX_RESOLVED_VALUE_LENGTH = 65536;
 const MAX_RESOLUTION_WORK = 262144;
@@ -253,8 +321,12 @@ const downlevelMediaQuery = (condition) => condition.replace(RANGE_FEATURE, (who
 	return `(${comparison.startsWith(">") ? "min-" : "max-"}${feature}:${bound})`;
 });
 /** Render the rules that could not be inlined as one `<style>` body. */
-const renderHeadCss = (rules, headAtRules, variables) => {
+const renderHeadCss = (rules, headAtRules, variables, darkVariables = {}) => {
 	const blocks = [...headAtRules];
+	const darkScope = {
+		...variables,
+		...darkVariables
+	};
 	const grouped = /* @__PURE__ */ new Map();
 	for (const rule of rules) {
 		const conditions = rule.conditions.map(downlevelMediaQuery);
@@ -267,8 +339,9 @@ const renderHeadCss = (rules, headAtRules, variables) => {
 		else bucket.rules.push(rule);
 	}
 	for (const { conditions, rules: bucket } of grouped.values()) {
+		const scope = withinDarkScheme(conditions) ? darkScope : variables;
 		const body = bucket.map((rule) => {
-			const declarations = rule.declarations.filter((declaration) => !declaration.property.startsWith("--")).map((declaration) => `${declaration.property}:${finalizeValue(declaration.value, variables)}!important`).join(";");
+			const declarations = rule.declarations.filter((declaration) => !declaration.property.startsWith("--")).map((declaration) => `${declaration.property}:${finalizeValue(declaration.value, scope)}!important`).join(";");
 			return declarations === "" ? "" : `${rule.selector}{${declarations}}`;
 		}).filter((block) => block !== "").join("");
 		if (body === "") continue;
@@ -277,73 +350,6 @@ const renderHeadCss = (rules, headAtRules, variables) => {
 	return blocks.join("");
 };
 //#endregion
-//#region src/email/selectors.ts
-const classListOf = (element) => {
-	const value = element.props.class ?? element.props.className;
-	return typeof value === "string" ? value.split(/\s+/).filter((name) => name !== "") : [];
-};
-const attributeOf = (element, name) => {
-	const value = element.props[name];
-	if (value === void 0 || value === null || value === false) return void 0;
-	if (value === true) return "";
-	return typeof value === "string" || typeof value === "number" ? String(value) : void 0;
-};
-const matchesAttribute = (element, test) => {
-	const actual = test.name === "class" ? classListOf(element).join(" ") : attributeOf(element, test.name);
-	if (actual === void 0) return false;
-	if (test.operator === void 0 || test.value === void 0) return true;
-	switch (test.operator) {
-		case "=": return actual === test.value;
-		case "~=": return actual.split(/\s+/).includes(test.value);
-		case "^=": return actual.startsWith(test.value);
-		case "$=": return actual.endsWith(test.value);
-		case "*=": return actual.includes(test.value);
-		case "|=": return actual === test.value || actual.startsWith(`${test.value}-`);
-		default: return false;
-	}
-};
-const matchesCompound = (element, compound) => {
-	if (compound.opaque) return false;
-	if (compound.tag !== void 0 && compound.tag !== element.tag) return false;
-	if (compound.id !== void 0 && attributeOf(element, "id") !== compound.id) return false;
-	if (compound.classes.length > 0) {
-		const classes = classListOf(element);
-		if (!compound.classes.every((name) => classes.includes(name))) return false;
-	}
-	return compound.attributes.every((test) => matchesAttribute(element, test));
-};
-const matchesFrom = (selector, index, ancestry) => {
-	if (ancestry === void 0) return false;
-	const part = selector.parts[index];
-	if (part === void 0) return false;
-	if (!matchesCompound(ancestry.element, part.compound)) return false;
-	const left = selector.parts[index - 1];
-	if (left === void 0) return true;
-	switch (left.after ?? "descendant") {
-		case "child": return matchesFrom(selector, index - 1, ancestry.parent);
-		case "descendant":
-			for (let parent = ancestry.parent; parent !== void 0; parent = parent.parent) if (matchesFrom(selector, index - 1, parent)) return true;
-			return false;
-		case "adjacent": {
-			const sibling = ancestry.previous.at(-1);
-			return sibling === void 0 ? false : matchesFrom(selector, index - 1, {
-				element: sibling,
-				parent: ancestry.parent,
-				previous: ancestry.previous.slice(0, -1)
-			});
-		}
-		case "sibling":
-			for (let position = ancestry.previous.length - 1; position >= 0; position--) if (matchesFrom(selector, index - 1, {
-				element: ancestry.previous[position],
-				parent: ancestry.parent,
-				previous: ancestry.previous.slice(0, position)
-			})) return true;
-			return false;
-	}
-};
-/** Match a compiled selector against one element in its tree position. */
-const matchesSelector = (selector, ancestry) => selector === void 0 || selector.parts.length === 0 ? false : matchesFrom(selector, selector.parts.length - 1, ancestry);
-//#endregion
 //#region src/email/cascade.ts
 const VARIABLE_REFERENCE = /var\(\s*--[\w-]+\s*(?:,[^()]*)?\)/g;
 /**
@@ -434,12 +440,98 @@ const physicalPadding = (property, value, context) => {
 	if (match[2] !== void 0) return [[`padding-${sides[match[2] === "start" ? 0 : 1]}`, values[0]]];
 	return [[`padding-${sides[0]}`, values[0]], [`padding-${sides[1]}`, values[1] ?? values[0]]];
 };
+/** Generated dark-mode classes share this prefix; it is reserved for the compiler. */
+const DARK_CLASS_PREFIX = "sml-dark-";
+/** A class named for its declarations, so equal sets share one rule and builds are stable. */
+const darkClassName = (body) => {
+	let hash = 2166136261;
+	for (let index = 0; index < body.length; index++) {
+		hash ^= body.charCodeAt(index);
+		hash = Math.imul(hash, 16777619) >>> 0;
+	}
+	return `${DARK_CLASS_PREFIX}${hash.toString(36)}`;
+};
+const SIDES = [
+	"top",
+	"right",
+	"bottom",
+	"left"
+];
+const BORDER_PARTS = [
+	"width",
+	"style",
+	"color"
+];
+const CORNERS = [
+	"top-left",
+	"top-right",
+	"bottom-right",
+	"bottom-left"
+];
+const BORDER_IMAGE = [
+	"source",
+	"slice",
+	"width",
+	"outset",
+	"repeat"
+].map((part) => `border-image-${part}`);
+/**
+* The longhands a border property writes: `border` writes the twelve per-side longhands and
+* resets the border image, `border-top` the top three, `border-color` the four colors,
+* `border-radius` the four corners.
+* `undefined` for a property outside the border box.
+*/
+const borderLonghands = (property) => {
+	if (property === "border") return [...SIDES.flatMap((side) => BORDER_PARTS.map((part) => `border-${side}-${part}`)), ...BORDER_IMAGE];
+	if (property === "border-image") return BORDER_IMAGE;
+	if (property === "border-radius") return CORNERS.map((corner) => `border-${corner}-radius`);
+	const side = /^border-(top|right|bottom|left)$/.exec(property)?.[1];
+	if (side !== void 0) return BORDER_PARTS.map((part) => `border-${side}-${part}`);
+	const part = /^border-(width|style|color)$/.exec(property)?.[1];
+	if (part !== void 0) return SIDES.map((each) => `border-${each}-${part}`);
+	return property.startsWith("border-") ? [property] : void 0;
+};
+/**
+* Whether two declarations can override one another because they write a property in common:
+* `background` and `background-color`, `border-color` and `border-top`, `font` and `line-height`.
+* `border-radius` shares nothing with `border-color`.
+*/
+const overlaps = (left, right) => {
+	if (left === right) return true;
+	const leftBorder = borderLonghands(left);
+	const rightBorder = borderLonghands(right);
+	if (leftBorder !== void 0 || rightBorder !== void 0) return leftBorder !== void 0 && rightBorder !== void 0 && leftBorder.some((longhand) => rightBorder.includes(longhand));
+	const sets = (shorthand, longhand) => longhand.startsWith(`${shorthand}-`) || shorthand === "font" && longhand === "line-height";
+	return sets(left, right) || sets(right, left);
+};
+/** Add a class to an element's props, whichever of `class` and `className` it uses. */
+const withClass = (props, name) => {
+	const key = typeof props.class === "string" || props.className === void 0 ? "class" : "className";
+	const current = props[key];
+	return {
+		...props,
+		[key]: typeof current === "string" && current.trim() !== "" ? `${current} ${name}` : name
+	};
+};
+/** The generated dark-mode classes as one `@media (prefers-color-scheme:dark)` block, written as the head CSS writes its media queries. */
+const renderDarkRules = (rules) => rules.size === 0 ? "" : `${DARK_SCHEME_MEDIA.replace(": ", ":")}{${[...rules].sort(([left], [right]) => left.localeCompare(right)).map(([name, body]) => `.${name}{${body}}`).join("")}}`;
 /**
 * Resolve every stylesheet against the tree: inline what a client will honor on
-* the element, and keep the rest for `<head>`.
+* the element, and keep the rest for `<head>`. Where the sheet has a dark-mode
+* theme, an element whose inlined styles read a color it redefines also gets a
+* generated class whose dark-mode rule restates those styles at their dark
+* values.
 */
 const applyStylesheet = (root, sheet, options = {}) => {
 	const diagnostics = [...sheet.diagnostics];
+	const hasDarkTheme = Object.keys(sheet.darkVariables).length > 0;
+	const darkRules = /* @__PURE__ */ new Map();
+	const darkClassFor = (declarations) => {
+		const body = declarations.map(([property, value]) => `${property}:${value}!important`).join(";");
+		const name = darkClassName(body);
+		darkRules.set(name, body);
+		return name;
+	};
 	const inlinable = [];
 	const retained = [];
 	const styledClasses = /* @__PURE__ */ new Set();
@@ -462,7 +554,7 @@ const applyStylesheet = (root, sheet, options = {}) => {
 	* A fragment is not an element in the serialized document, so its children
 	* join that same list rather than starting a new one.
 	*/
-	const visitChildren = (children, ancestry, variables, writing) => {
+	const visitChildren = (children, ancestry, variables, darkScope, writing) => {
 		const previous = [];
 		const visit = (nodes) => nodes.map((child) => {
 			if (child.type === "Element") {
@@ -470,7 +562,7 @@ const applyStylesheet = (root, sheet, options = {}) => {
 					element: child,
 					parent: ancestry,
 					previous: [...previous]
-				}, variables, writing);
+				}, variables, darkScope, writing);
 				previous.push(child);
 				return result;
 			}
@@ -489,7 +581,7 @@ const applyStylesheet = (root, sheet, options = {}) => {
 	* cascade like any other declaration and then inherit, so a `--brand` declared
 	* on `.card` has to reach `var(--brand)` on `.card` and everything under it.
 	*/
-	const applyTo = (element, ancestry, inherited, inheritedWriting) => {
+	const applyTo = (element, ancestry, inherited, inheritedDark, inheritedWriting) => {
 		const conditionalWriting = conditionalWritingRules.some((rule) => {
 			if (rule.matcher === void 0 || rule.matcher.parts.length === 0 || rule.matcher.parts.some((part) => part.compound.opaque)) return true;
 			for (let context = ancestry; context !== void 0; context = context.parent) if (matchesSelector(rule.matcher, context)) return true;
@@ -519,6 +611,10 @@ const applyStylesheet = (root, sheet, options = {}) => {
 			...inherited,
 			...declared
 		};
+		const darkScope = Object.keys(declared).length === 0 ? inheritedDark : {
+			...inheritedDark,
+			...declared
+		};
 		const inheritedValue = (property, parent, initial, fallback = parent) => {
 			const value = winners.get(property)?.value;
 			if (value === void 0) return fallback;
@@ -537,24 +633,51 @@ const applyStylesheet = (root, sheet, options = {}) => {
 			physical.set(name, lowered);
 		}
 		const bgcolor = element.props.bgcolor;
-		const props = typeof bgcolor === "string" && bgcolor.includes("var(") ? {
+		const lightProps = typeof bgcolor === "string" && bgcolor.includes("var(") ? {
 			...element.props,
 			bgcolor: finalizeValue(bgcolor, variables)
 		} : element.props;
+		const dark = [];
+		if (hasDarkTheme) {
+			const changed = [];
+			for (const [property, entry] of winners) {
+				if (property.startsWith("--") || !entry.value.includes("var(")) continue;
+				if (finalizeValue(entry.value, darkScope) !== finalizeValue(entry.value, variables)) changed.push(property);
+			}
+			const restated = new Set(changed);
+			for (let grew = changed.length > 0; grew;) {
+				grew = false;
+				for (const property of winners.keys()) if (!property.startsWith("--") && !restated.has(property) && [...restated].some((candidate) => overlaps(candidate, property))) {
+					restated.add(property);
+					grew = true;
+				}
+			}
+			for (const [property, entry] of [...winners].sort(([, left], [, right]) => compareRank(left.key, right.key))) if (restated.has(property)) dark.push([property, finalizeValue(entry.value, darkScope)]);
+			if (typeof bgcolor === "string" && bgcolor.includes("var(") && !winners.has("background-color") && !winners.has("background")) {
+				const value = finalizeValue(bgcolor, darkScope);
+				if (value !== finalizeValue(bgcolor, variables)) dark.push(["background-color", value]);
+			}
+		}
+		const darkClass = dark.length === 0 ? void 0 : darkClassFor(dark);
+		const props = darkClass === void 0 ? lightProps : withClass(lightProps, darkClass);
 		return EmailNode.Element({
 			...element,
 			props: emitted.length === 0 ? props : {
 				...props,
 				style: Object.fromEntries(physical)
 			},
-			children: visitChildren(element.children, ancestry, variables, writing)
+			children: visitChildren(element.children, ancestry, variables, darkScope, writing)
 		});
 	};
+	const rootDark = {
+		...sheet.variables,
+		...sheet.darkVariables
+	};
 	const tree = root.type === "Element" ? applyTo(root, {
 		element: root,
 		parent: void 0,
 		previous: []
-	}, sheet.variables, horizontalWriting) : root.type === "Fragment" ? EmailNode.Fragment({ children: visitChildren(root.children, void 0, sheet.variables, horizontalWriting) }) : root;
+	}, sheet.variables, rootDark, horizontalWriting) : root.type === "Fragment" ? EmailNode.Fragment({ children: visitChildren(root.children, void 0, sheet.variables, rootDark, horizontalWriting) }) : root;
 	for (const rule of retained) for (const declaration of rule.declarations) checkFallback(declaration.property, finalizeValue(declaration.value, sheet.variables), []);
 	for (const [value, origins] of fallbackFindings) diagnostics.push({
 		...fontFallbackDiagnostic(value),
@@ -568,7 +691,8 @@ const applyStylesheet = (root, sheet, options = {}) => {
 	});
 	return {
 		tree,
-		headCss: renderHeadCss(retained, sheet.headAtRules, sheet.variables),
+		headCss: renderHeadCss(retained, sheet.headAtRules, sheet.variables, sheet.darkVariables),
+		darkRules,
 		fontFaceCss: sheet.fontFaces.map((face) => face.css).join(""),
 		diagnostics
 	};
@@ -578,4 +702,4 @@ const applyStylesheet = (root, sheet, options = {}) => {
 /** The IR version this package writes. A publication pins the version it was built with. */
 const SML_IR_VERSION = 1;
 //#endregion
-export { downlevelMediaQuery as a, renderHeadCss as c, matchesSelector as i, resolveVariables as l, applyStylesheet as n, finalizeValue as o, classListOf as r, foldCalc as s, SML_IR_VERSION as t, unquote as u };
+export { downlevelMediaQuery as a, renderHeadCss as c, matchesSelector as d, unquote as f, renderDarkRules as i, resolveVariables as l, DARK_CLASS_PREFIX as n, finalizeValue as o, applyStylesheet as r, foldCalc as s, SML_IR_VERSION as t, classListOf as u };