@samva/markup 0.7.0 → 0.8.0

package/dist/email/selection.d.ts

@@ -1,91 +1,2 @@
-import { i as JsxSourceLocation } from "../source-locations-DrCM82Ym.js";
-//#region src/email/selection.d.ts
-/**
- * The attribute a preview stamps so a click in a rendered document resolves to
- * exactly one rendered element. A delivered message never carries it.
- */
-declare const INSTANCE_PATH_ATTRIBUTE = "data-samva-instance";
-/** Where one element sits in the emitted document, with the authoring that produced it. */
-interface EmittedPosition {
-  readonly start: number;
-  readonly end: number;
-  readonly origins: ReadonlyArray<JsxSourceLocation>;
-  /**
-   * Dot-separated element indices from the document root, assigned as the
-   * document is written. It is the identity of one rendered instance.
-   */
-  readonly instancePath: string;
-  readonly tag: string;
-  /** False when a compiler primitive generated this element. */
-  readonly authored: boolean;
-}
-/** One rendered element, and the authoring it came from. */
-interface EmailElementSelection {
-  /**
-   * Dot-separated element indices from the document root. It is the identity
-   * of one rendered instance, which is what tells two iterations of the same
-   * authored element apart: their origins are identical.
-   */
-  readonly instancePath: string;
-  readonly tag: string;
-  /**
-   * The authored JSX element first, then each enclosing component call site,
-   * innermost first. Empty when the compiler generated this element with no
-   * authoring on the stack — the hidden preheader block, for instance.
-   */
-  readonly origins: ReadonlyArray<JsxSourceLocation>;
-  /**
-   * False when a compiler primitive generated this element. `origins[0]` is
-   * then the authoring element that asked for it rather than this element
-   * itself, so the wrapper selects the primitive the author wrote.
-   */
-  readonly authored: boolean;
-  /** 1-based position among the rendered elements sharing this origin chain and tag. */
-  readonly occurrence: number;
-  /**
-   * How many rendered elements share that chain and tag. Above one, one piece
-   * of authoring produced several rendered elements — a loop over a component,
-   * or a primitive that generates a repeated cell — so an edit there changes
-   * all of them.
-   */
-  readonly occurrences: number;
-  /** Absent for the document root. */
-  readonly parentPath?: string;
-  /** Offset range in the rendered HTML this selection was taken from. */
-  readonly start: number;
-  readonly end: number;
-}
-/**
- * Turn one render's emitted positions into selections, in document order.
- *
- * The serializer records an element once its content is written, so positions
- * arrive innermost-first; document order is what an outline and an ancestry
- * walk both need.
- */
-declare const emailSelections: (positions: readonly EmittedPosition[]) => readonly EmailElementSelection[];
-/** Look selections up by the instance path a rendered document carries. */
-declare const emailSelectionIndex: (selections: readonly EmailElementSelection[]) => ReadonlyMap<string, EmailElementSelection>;
-/**
- * The authoring element a selection edits. For an authored element that is the
- * element itself; for a generated wrapper it is the primitive that asked for
- * it. Undefined only where the compiler generated markup with no authoring on
- * the stack, which nothing can edit in place.
- */
-declare const emailAuthoringTarget: (selection: EmailElementSelection) => JsxSourceLocation | undefined;
-/** Root-first ancestry of a selection, itself last. */
-declare const emailSelectionAncestry: (index: ReadonlyMap<string, EmailElementSelection>, instancePath: string) => readonly EmailElementSelection[];
-/**
- * Every rendered instance produced through the same call site, in document
- * order. One entry means the call ran once; several mean it repeated.
- */
-declare const emailSelectionSiblings: (selections: readonly EmailElementSelection[], selection: EmailElementSelection) => readonly EmailElementSelection[];
-/**
- * Every rendered instance of the same authored element, across every call site
- * that reaches it. A shared component edited at its definition changes all of
- * these; edited at one call site it changes only `emailSelectionSiblings`. A
- * control has to say which of the two it is doing before it applies.
- */
-declare const emailDefinitionInstances: (selections: readonly EmailElementSelection[], selection: EmailElementSelection) => readonly EmailElementSelection[];
-//#endregion
-export { EmailElementSelection, EmittedPosition, INSTANCE_PATH_ATTRIBUTE, emailAuthoringTarget, emailDefinitionInstances, emailSelectionAncestry, emailSelectionIndex, emailSelectionSiblings, emailSelections };
-//# sourceMappingURL=selection.d.ts.map
+import { a as emailDefinitionInstances, c as emailSelectionSiblings, i as emailAuthoringTarget, l as emailSelections, n as EmittedPosition, o as emailSelectionAncestry, r as INSTANCE_PATH_ATTRIBUTE, s as emailSelectionIndex, t as EmailElementSelection } from "../selection-CCArx9lU.js";
+export { EmailElementSelection, EmittedPosition, INSTANCE_PATH_ATTRIBUTE, emailAuthoringTarget, emailDefinitionInstances, emailSelectionAncestry, emailSelectionIndex, emailSelectionSiblings, emailSelections };

package/dist/email/stylesheets.d.ts

@@ -1,4 +1,4 @@
-import { i as Stylesheet } from "../css-COcFOT1y.js";
+import { i as Stylesheet } from "../css-CS2jLID6.js";
 //#region src/email/stylesheets.d.ts
 /** Called by a compiler-generated stylesheet module at import time. */
 declare const registerStylesheet: (sheet: Stylesheet) => void;

package/dist/email/stylesheets.js

@@ -23,14 +23,17 @@ const collectStylesheets = () => {
 	})));
 	const variables = {};
 	const headAtRules = [];
+	const fontFaces = /* @__PURE__ */ new Map();
 	const diagnostics = registry.flatMap(({ sheet }) => sheet.diagnostics);
 	for (const { sheet } of registry) {
 		Object.assign(variables, sheet.variables);
 		headAtRules.push(...sheet.headAtRules);
+		for (const face of sheet.fontFaces) fontFaces.set(face.css, face);
 	}
 	return {
 		rules,
 		headAtRules,
+		fontFaces: [...fontFaces.values()],
 		variables,
 		diagnostics
 	};

package/dist/html-Bl9BAdqc.d.ts

@@ -0,0 +1,42 @@
+import { r as EmailDiagnostic } from "./diagnostics-BMYtBCQk.js";
+import { m as EmailNode } from "./elements-BzjjnoCS.js";
+import { n as EmittedPosition } from "./selection-CCArx9lU.js";
+//#region src/email/html.d.ts
+/** Escape a value for element content. */
+declare const escapeText: (value: string) => string;
+/** Escape a value for a double-quoted attribute. */
+declare const escapeAttribute: (value: string) => string;
+/** camelCase to kebab-case; already-kebab names pass through unchanged. */
+declare const kebab: (property: string) => string;
+/** A bare number is pixels for every property that takes a length. */
+declare const declarationValue: (property: string, value: string | number) => string;
+interface EmailHtmlOutput {
+  readonly html: string;
+  readonly diagnostics: readonly EmailDiagnostic[];
+  /**
+   * Each emitted element's offset range and origins. A compatibility finding
+   * carries a position in the emitted document, and this is what turns that
+   * back into the authoring element the author can edit.
+   */
+  readonly positions: readonly EmittedPosition[];
+}
+/** How this document will be consumed. Delivery is the default; export is opt-in. */
+interface SerializeEmailOptions {
+  /**
+   * Accept relative references. A local export serves assets from a relative
+   * base beside the file; a delivered message has no directory to resolve one
+   * against, so this stays off for anything that will be sent.
+   */
+  readonly relativeUrls?: boolean | undefined;
+  /**
+   * Stamp every element with its instance path, so an editor preview can
+   * resolve a click in the rendered document to exactly one rendered element.
+   * A delivered message never carries it.
+   */
+  readonly instancePaths?: boolean | undefined;
+}
+/** Lower the derived tree to email HTML, reporting every unsupported construct with its origin. */
+declare const serializeEmailHtml: (node: EmailNode, options?: SerializeEmailOptions) => EmailHtmlOutput;
+//#endregion
+export { escapeText as a, escapeAttribute as i, SerializeEmailOptions as n, kebab as o, declarationValue as r, serializeEmailHtml as s, EmailHtmlOutput as t };
+//# sourceMappingURL=html-Bl9BAdqc.d.ts.map

package/dist/{ops-2aiiYO7m.js → ops-BvwqHl7V.js}

@@ -1,7 +1,7 @@
 import { documentChannel } from "./ast.js";
 import { CHANNEL_TAG_SPECS, allowedChildren, parseSml } from "./parser.js";
 import { compileSml } from "./compile.js";
-import { a as isBreakingCompatibilityCheck, r as checkSmlCompatibility } from "./checks-DBweSIPN.js";
+import { a as isBreakingCompatibilityCheck, r as checkSmlCompatibility } from "./checks-D73Xizbw.js";
 import { printSml } from "./printer.js";
 import { Result, TaggedError } from "better-result";
 //#region src/internal/sha256.ts
@@ -627,4 +627,4 @@ const applyOp = (source, op, options) => applyOps(source, [op], options);
 //#endregion
 export { sourceRevision as a, normalizeSml as i, applyOp as n, applyOps as r, SmlOpError as t };
 
-//# sourceMappingURL=ops-2aiiYO7m.js.map
+//# sourceMappingURL=ops-BvwqHl7V.js.map

package/dist/ops.js

@@ -1,2 +1,2 @@
-import { a as sourceRevision, i as normalizeSml, n as applyOp, r as applyOps, t as SmlOpError } from "./ops-2aiiYO7m.js";
+import { a as sourceRevision, i as normalizeSml, n as applyOp, r as applyOps, t as SmlOpError } from "./ops-BvwqHl7V.js";
 export { SmlOpError, applyOp, applyOps, normalizeSml, sourceRevision };

package/dist/registry-Dcp6QEK_.d.ts

@@ -0,0 +1,73 @@
+//#region src/theme.d.ts
+interface TextToken {
+  readonly sizePx: number;
+  readonly lineHeightPx: number;
+}
+interface UtilityScale {
+  /** Flattened color names ("red-500", "white", "brand") → 6-digit lowercase hex. */
+  readonly colors: Readonly<Record<string, string>>;
+  /**
+   * Dark counterparts, colors namespace only (dark radius/fonts are not a
+   * thing). Only tokens with a dark pair appear; a color-family utility that
+   * resolves a paired token also emits the dark head rule automatically.
+   */
+  readonly colorsDark: Readonly<Record<string, string>>;
+  /** px per spacing unit (`p-4` → 4 × spacingPx). */
+  readonly spacingPx: number;
+  /** text-{size} → font-size / line-height px pair. */
+  readonly text: Readonly<Record<string, TextToken>>;
+  /** leading-{name} → unitless line-height ratio. */
+  readonly leading: Readonly<Record<string, number>>;
+  /** tracking-{name} → letter-spacing em. */
+  readonly trackingEm: Readonly<Record<string, number>>;
+  /** rounded-{name} → border-radius px. */
+  readonly radiusPx: Readonly<Record<string, number>>;
+  /** font-{name} → font-weight number. */
+  readonly fontWeights: Readonly<Record<string, number>>;
+  /** font-{name} → the inline font-family stack, ending in a generic family. */
+  readonly fontFamilies: Readonly<Record<string, string>>;
+  /** max-w-{name} → px. */
+  readonly containerPx: Readonly<Record<string, number>>;
+}
+//#endregion
+//#region src/registry.d.ts
+interface Declaration {
+  readonly property: string;
+  readonly value: string;
+}
+interface UtilityFamily {
+  readonly root: string;
+  /** Accepts `root` with no value ("border", "rounded", "block"). */
+  readonly bare?: ReadonlyArray<Declaration> | undefined;
+  /** Resolve a named value; null = this family does not accept it. */
+  readonly named?: ((value: string, theme: UtilityScale) => ReadonlyArray<Declaration> | null) | undefined;
+  /** Resolve an arbitrary `[...]` value; null = malformed for this family. */
+  readonly arbitrary?: ((value: string, theme: UtilityScale) => ReadonlyArray<Declaration> | null) | undefined;
+  /** dark: variant is only legal on color families. */
+  readonly colorFamily?: boolean | undefined;
+  /**
+   * Base-variant only: sm:/dark: are rejected. Set on the gradient family —
+   * its declarations are compiler-internal placeholders that must be combined
+   * per node, which head rules cannot express.
+   */
+  readonly baseOnly?: boolean | undefined;
+  /** "warn" families compile but surface a lint warning. */
+  readonly warn?: string | undefined;
+  readonly description: string;
+  readonly caniemailSlugs: ReadonlyArray<string>;
+}
+interface ForbiddenUtility {
+  /** Exact class or `prefix-` match against the candidate base. */
+  readonly match: string;
+  readonly message: string;
+}
+declare const GRADIENT_DIRECTION_PROPERTY = "-sml-gradient-direction";
+declare const GRADIENT_FROM_PROPERTY = "-sml-gradient-from";
+declare const GRADIENT_TO_PROPERTY = "-sml-gradient-to";
+declare const utilityRegistry: ReadonlyArray<UtilityFamily>;
+declare const forbiddenUtilities: ReadonlyArray<ForbiddenUtility>;
+/** Every root the resolver may try to split on, longest-match first (candidate.ts). */
+declare const registryRoots: ReadonlySet<string>;
+//#endregion
+export { GRADIENT_TO_PROPERTY as a, registryRoots as c, GRADIENT_FROM_PROPERTY as i, utilityRegistry as l, ForbiddenUtility as n, UtilityFamily as o, GRADIENT_DIRECTION_PROPERTY as r, forbiddenUtilities as s, Declaration as t, UtilityScale as u };
+//# sourceMappingURL=registry-Dcp6QEK_.d.ts.map

package/dist/registry.d.ts

@@ -1,42 +1,2 @@
-import { s as TokenTable } from "./theme-6ApjjiBo.js";
-//#region src/registry.d.ts
-interface Declaration {
-  readonly property: string;
-  readonly value: string;
-}
-interface UtilityFamily {
-  readonly root: string;
-  /** Accepts `root` with no value ("border", "rounded", "block"). */
-  readonly bare?: ReadonlyArray<Declaration> | undefined;
-  /** Resolve a named value; null = this family does not accept it. */
-  readonly named?: ((value: string, theme: TokenTable) => ReadonlyArray<Declaration> | null) | undefined;
-  /** Resolve an arbitrary `[...]` value; null = malformed for this family. */
-  readonly arbitrary?: ((value: string, theme: TokenTable) => ReadonlyArray<Declaration> | null) | undefined;
-  /** dark: variant is only legal on color families. */
-  readonly colorFamily?: boolean | undefined;
-  /**
-   * Base-variant only: sm:/dark: are rejected. Set on the gradient family —
-   * its declarations are compiler-internal placeholders that must be combined
-   * per node, which head rules cannot express.
-   */
-  readonly baseOnly?: boolean | undefined;
-  /** "warn" families compile but surface a lint warning. */
-  readonly warn?: string | undefined;
-  readonly description: string;
-  readonly caniemailSlugs: ReadonlyArray<string>;
-}
-interface ForbiddenUtility {
-  /** Exact class or `prefix-` match against the candidate base. */
-  readonly match: string;
-  readonly message: string;
-}
-declare const GRADIENT_DIRECTION_PROPERTY = "-sml-gradient-direction";
-declare const GRADIENT_FROM_PROPERTY = "-sml-gradient-from";
-declare const GRADIENT_TO_PROPERTY = "-sml-gradient-to";
-declare const utilityRegistry: ReadonlyArray<UtilityFamily>;
-declare const forbiddenUtilities: ReadonlyArray<ForbiddenUtility>;
-/** Every root the resolver may try to split on, longest-match first (candidate.ts). */
-declare const registryRoots: ReadonlySet<string>;
-//#endregion
-export { Declaration, ForbiddenUtility, GRADIENT_DIRECTION_PROPERTY, GRADIENT_FROM_PROPERTY, GRADIENT_TO_PROPERTY, UtilityFamily, forbiddenUtilities, registryRoots, utilityRegistry };
-//# sourceMappingURL=registry.d.ts.map
+import { a as GRADIENT_TO_PROPERTY, c as registryRoots, i as GRADIENT_FROM_PROPERTY, l as utilityRegistry, n as ForbiddenUtility, o as UtilityFamily, r as GRADIENT_DIRECTION_PROPERTY, s as forbiddenUtilities, t as Declaration } from "./registry-Dcp6QEK_.js";
+export { Declaration, ForbiddenUtility, GRADIENT_DIRECTION_PROPERTY, GRADIENT_FROM_PROPERTY, GRADIENT_TO_PROPERTY, UtilityFamily, forbiddenUtilities, registryRoots, utilityRegistry };

package/dist/{render-aaJBnsXK.js → render-vAv_4r9v.js}

@@ -1,6 +1,6 @@
 import { n as isObject } from "./guards-eV1qLbf2.js";
 import { EmailNode, drainEmailDiagnostics } from "./email/jsx-runtime.js";
-import { declarationValue, kebab, serializeEmailHtml } from "./email/html.js";
+import { declarationValue, escapeAttribute, kebab, serializeEmailHtml } from "./email/html.js";
 import { PREHEADER_ATTRIBUTE, preheaderNode } from "./email/components.js";
 import { EmailCompileError, hasBlockingDiagnostic } from "./email/diagnostics.js";
 import { snapshotStylesheets } from "./email/stylesheets.js";
@@ -192,6 +192,95 @@ const renderHeadCss = (rules, headAtRules, variables) => {
 	return blocks.join("");
 };
 //#endregion
+//#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([
+	"serif",
+	"sans-serif",
+	"monospace",
+	"cursive",
+	"fantasy"
+]);
+/** One family name as written, without its quotes and with runs of spaces collapsed. */
+const unquote = (value) => {
+	const trimmed = value.trim();
+	const quote = trimmed[0];
+	return (quote === "\"" || quote === "'") && trimmed.endsWith(quote) && trimmed.length >= 2 ? trimmed.slice(1, -1) : trimmed.replace(/\s+/g, " ");
+};
+/** The families of a `font-family` value, unquoted, in stack order. */
+const fontStackFamilies = (value) => {
+	const families = [];
+	let start = 0;
+	let quote;
+	for (let index = 0; index < value.length; index++) {
+		const character = value[index];
+		if (quote !== void 0) {
+			if (character === quote) quote = void 0;
+		} else if (character === "'" || character === "\"") quote = character;
+		else if (character === ",") {
+			families.push(unquote(value.slice(start, index)));
+			start = index + 1;
+		}
+	}
+	families.push(unquote(value.slice(start)));
+	return families.filter((family) => family !== "");
+};
+const FONT_SIZE = /^(?:xx-small|x-small|small|medium|large|x-large|xx-large|xxx-large|larger|smaller|[+-]?(?:\d+\.?\d*|\.\d+)(?:[a-z]+|%)|(?:calc|clamp|min|max|var)\(.*\))$/i;
+/** Whitespace-separated tokens at the top level, keeping parentheses and quotes whole. */
+const shorthandTokens = (value) => {
+	const tokens = [];
+	let current = "";
+	let depth = 0;
+	let quote;
+	for (const character of value.trim()) {
+		if (quote !== void 0) {
+			if (character === quote) quote = void 0;
+		} else if (character === "'" || character === "\"") quote = character;
+		else if (character === "(") depth++;
+		else if (character === ")") depth--;
+		else if (/\s/.test(character) && depth === 0) {
+			if (current !== "") tokens.push(current);
+			current = "";
+			continue;
+		}
+		current += character;
+	}
+	if (current !== "") tokens.push(current);
+	return tokens;
+};
+/**
+* The family list of a `font` shorthand: everything after the size (and its
+* optional line height), or `undefined` for a system-font keyword that names
+* no family.
+*/
+const fontShorthandFamilies = (value) => {
+	const tokens = shorthandTokens(value);
+	const size = tokens.findIndex((token) => FONT_SIZE.test(token.replace(/\/.*$/, "")));
+	if (size < 0) return void 0;
+	let next = size + 1;
+	const sizeToken = tokens[size];
+	if (sizeToken.endsWith("/")) next += 1;
+	else if (!sizeToken.includes("/") && tokens[next]?.startsWith("/")) next += tokens[next] === "/" ? 2 : 1;
+	const family = tokens.slice(next).join(" ");
+	return family === "" ? void 0 : family;
+};
+/**
+* True when a stack names a declared project family without ending in a
+* generic. `declared` holds lowercased family names. A quoted `"sans-serif"`
+* names a font called sans-serif, not the generic, so it does not count.
+*/
+const lacksGenericFallback = (value, declared) => {
+	const stack = value.replace(/\s*!important\s*$/i, "");
+	if (!fontStackFamilies(stack).some((family) => declared.has(family.toLowerCase()))) return false;
+	const last = stack.slice(stack.lastIndexOf(",") + 1).trim();
+	return !GENERIC_FAMILIES.has(last.toLowerCase());
+};
+const fontFallbackDiagnostic = (value) => ({
+	code: "email-font-fallback",
+	severity: "error",
+	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;
@@ -260,6 +349,17 @@ const matchesFrom = (selector, index, ancestry) => {
 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;
+/**
+* Compatibility markup a primitive emits (a Button's VML) and a presentational
+* `bgcolor` attribute are not CSS, so no client resolves `var()` in them. Their
+* theme variables resolve here, in the scope of the element they sit in, as a
+* declaration on that element would.
+*/
+const resolveMarkupVariables = (markup, variables) => markup.replace(VARIABLE_REFERENCE, (reference) => {
+	const value = finalizeValue(reference, variables);
+	return value === reference ? reference : escapeAttribute(value);
+});
 /**
 * Cascade rank as the tuple CSS actually sorts by: importance first, then
 * whether the declaration is attached to the element itself, then layer, then
@@ -353,6 +453,14 @@ const applyStylesheet = (root, sheet, options = {}) => {
 	}
 	const conditionalWritingRules = retained.filter((rule) => rule.declarations.some((declaration) => declaration.property === "direction" || declaration.property === "writing-mode" || declaration.property === "all"));
 	const unmatched = /* @__PURE__ */ new Map();
+	const declaredFamilies = new Set(sheet.fontFaces.map((face) => face.family.toLowerCase()));
+	const fallbackFindings = /* @__PURE__ */ new Map();
+	const checkFallback = (property, value, origins) => {
+		if (declaredFamilies.size === 0) return;
+		const stack = property === "font-family" ? value : property === "font" ? fontShorthandFamilies(value) : void 0;
+		if (stack === void 0 || fallbackFindings.has(stack)) return;
+		if (lacksGenericFallback(stack, declaredFamilies)) fallbackFindings.set(stack, origins);
+	};
 	/**
 	* Children are visited with their own preceding-sibling list so `+`/`~` work.
 	* A fragment is not an element in the serialized document, so its children
@@ -371,6 +479,10 @@ const applyStylesheet = (root, sheet, options = {}) => {
 				return result;
 			}
 			if (child.type === "Fragment") return EmailNode.Fragment({ children: visit(child.children) });
+			if (child.type === "Raw" && child.html.includes("var(")) return EmailNode.Raw({
+				...child,
+				html: resolveMarkupVariables(child.html, variables)
+			});
 			return child;
 		});
 		return visit(children);
@@ -422,15 +534,21 @@ const applyStylesheet = (root, sheet, options = {}) => {
 			writingMode: winners.has("all") ? "unknown" : inheritedValue("writing-mode", inheritedWriting.writingMode, "horizontal-tb")
 		};
 		const emitted = [...winners].filter(([property]) => !property.startsWith("--")).sort(([, left], [, right]) => compareRank(left.key, right.key)).map(([property, entry]) => [property, finalizeValue(entry.value, variables)]);
+		for (const [property, value] of emitted) checkFallback(property, value, element.origins.slice(0, 1));
 		const physical = /* @__PURE__ */ new Map();
 		for (const [property, value] of emitted) for (const [name, lowered] of conditionalWriting ? [[property, value]] : physicalPadding(property, value, writing)) {
 			physical.delete(name);
 			physical.set(name, lowered);
 		}
+		const bgcolor = element.props.bgcolor;
+		const props = typeof bgcolor === "string" && bgcolor.includes("var(") ? {
+			...element.props,
+			bgcolor: finalizeValue(bgcolor, variables)
+		} : element.props;
 		return EmailNode.Element({
 			...element,
-			props: emitted.length === 0 ? element.props : {
-				...element.props,
+			props: emitted.length === 0 ? props : {
+				...props,
 				style: Object.fromEntries(physical)
 			},
 			children: visitChildren(element.children, ancestry, variables, writing)
@@ -441,6 +559,11 @@ const applyStylesheet = (root, sheet, options = {}) => {
 		parent: void 0,
 		previous: []
 	}, sheet.variables, horizontalWriting) : root.type === "Fragment" ? EmailNode.Fragment({ children: visitChildren(root.children, void 0, sheet.variables, 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),
+		origins
+	});
 	for (const [name, origins] of unmatched) diagnostics.push({
 		code: "unmatched-class",
 		severity: "warning",
@@ -450,6 +573,7 @@ const applyStylesheet = (root, sheet, options = {}) => {
 	return {
 		tree,
 		headCss: renderHeadCss(retained, sheet.headAtRules, sheet.variables),
+		fontFaceCss: sheet.fontFaces.map((face) => face.css).join(""),
 		diagnostics
 	};
 };
@@ -510,8 +634,21 @@ const withPreheader = (node, text) => {
 	};
 	return insert(node) ?? EmailNode.Fragment({ children: [preheaderNode(text), node] });
 };
-/** Put the retained rules in a `<style>` at the end of `<head>`. */
-const withHeadCss = (node, css) => {
+const headStyle = (css, origins) => EmailNode.Element({
+	tag: "style",
+	props: {},
+	children: [EmailNode.Text({ value: css })],
+	origins,
+	authored: false
+});
+/**
+* Put the retained rules in a `<style>` at the end of `<head>`, and project
+* `@font-face` rules in a sibling classic Outlook cannot see. Outlook for
+* Windows registers a face it cannot load and then renders the family in Times
+* New Roman, ignoring the stack; hidden, the family is merely missing and the
+* stack's fallback applies.
+*/
+const withHeadCss = (node, css, fontFaceCss) => {
 	const insert = (current) => {
 		if (current.type === "Fragment") {
 			for (const [index, child] of current.children.entries()) {
@@ -523,13 +660,23 @@ const withHeadCss = (node, css) => {
 		if (current.type !== "Element") return void 0;
 		if (current.tag === "head") return EmailNode.Element({
 			...current,
-			children: [...current.children, EmailNode.Element({
-				tag: "style",
-				props: {},
-				children: [EmailNode.Text({ value: css })],
-				origins: current.origins,
-				authored: false
-			})]
+			children: [
+				...current.children,
+				...css === "" ? [] : [headStyle(css, current.origins)],
+				...fontFaceCss === "" ? [] : [
+					EmailNode.Raw({
+						html: "<!--[if !mso]><!-->",
+						text: "",
+						origins: []
+					}),
+					headStyle(fontFaceCss, current.origins),
+					EmailNode.Raw({
+						html: "<!--<![endif]-->",
+						text: "",
+						origins: []
+					})
+				]
+			]
 		});
 		for (const [index, child] of current.children.entries()) {
 			const replaced = insert(child);
@@ -551,8 +698,17 @@ const renderEmail = (template, data, options = {}) => renderEmailWith(snapshotSt
 const bindStylesheets = (stylesheet = snapshotStylesheets()) => (template, data, options = {}) => renderEmailWith(stylesheet, template, data, options);
 const renderEmailWith = (stylesheet, template, data, options) => {
 	if (!template.schema.validate(data)) throw new TypeError(`Invalid template input: ${JSON.stringify(template.schema.validate.errors)}`);
+	return renderEmailContent(stylesheet, () => template.render(data), options);
+};
+/**
+* Render authored content against a stylesheet: inline what a client honors,
+* keep the rest for `<head>`, and lower to HTML and text. `renderEmail` runs a
+* validated template through it; a host that composes content without a
+* template definition calls it directly.
+*/
+const renderEmailContent = (stylesheet, render, options = {}) => {
 	drainEmailDiagnostics();
-	const content = template.render(data);
+	const content = render();
 	const invalid = [];
 	const fail = (code, message) => invalid.push({
 		code,
@@ -570,12 +726,13 @@ const renderEmailWith = (stylesheet, template, data, options) => {
 	const styled = stylesheet === void 0 ? {
 		tree: base,
 		headCss: "",
+		fontFaceCss: "",
 		diagnostics: []
 	} : applyStylesheet(base, stylesheet);
 	const style = [...styled.diagnostics];
 	let tree = styled.tree;
-	if (styled.headCss !== "") {
-		const placed = withHeadCss(tree, styled.headCss);
+	if (styled.headCss !== "" || styled.fontFaceCss !== "") {
+		const placed = withHeadCss(tree, styled.headCss, styled.fontFaceCss);
 		if (placed === void 0) style.push({
 			code: "missing-head",
 			severity: "error",
@@ -604,6 +761,6 @@ const renderEmailWith = (stylesheet, template, data, options) => {
 	};
 };
 //#endregion
-export { applyStylesheet as a, downlevelMediaQuery as c, renderHeadCss as d, resolveVariables as f, renderEmail as i, finalizeValue as l, bindStylesheets as n, classListOf as o, compileEmail as r, matchesSelector as s, EMAIL_DOCTYPE as t, foldCalc as u };
+export { renderEmailContent as a, matchesSelector as c, finalizeValue as d, foldCalc as f, renderEmail as i, unquote as l, resolveVariables as m, bindStylesheets as n, applyStylesheet as o, renderHeadCss as p, compileEmail as r, classListOf as s, EMAIL_DOCTYPE as t, downlevelMediaQuery as u };
 
-//# sourceMappingURL=render-aaJBnsXK.js.map
+//# sourceMappingURL=render-vAv_4r9v.js.map