@samva/markup 0.16.0 → 0.17.0

package/dist/{components-3XHjYD3i.js → components-C5850-Qg.js}

@@ -1,5 +1,5 @@
-import { i as escapeText, r as escapeAttribute } from "./html-BvRFepeO.js";
-import { a as jsx, c as rawMarkup, l as reportEmailDiagnostic, n as Fragment, s as normalizeChildren, t as EmailNode } from "./jsx-runtime-CBlexoeR.js";
+import { i as escapeText, r as escapeAttribute } from "./html-DJUK2YJF.js";
+import { a as jsx, c as rawMarkup, l as withEmailDiagnostics, n as Fragment, s as normalizeChildren, t as EmailNode } from "./jsx-runtime-qL19u3Fy.js";
 //#region src/email/primitive-css.ts
 /** The classes the primitives put on the elements they generate. */
 const PRIMITIVE_CLASSES = {
@@ -58,10 +58,10 @@ const presentation = (table, row, rowProps = {}) => jsx("table", {
 });
 /** A primitive's own class, then the author's. */
 const classNames = (own, authored) => authored === void 0 || authored.trim() === "" ? own : `${own} ${authored}`;
-const optionalNumber = (component, name, value, bounds = {}) => {
+const optionalNumber = (found, component, name, value, bounds = {}) => {
 	if (value === void 0) return void 0;
 	if (typeof value === "number" && Number.isFinite(value) && (bounds.min === void 0 || value >= bounds.min)) return value;
-	reportEmailDiagnostic({
+	found.push({
 		code: "invalid-number-prop",
 		severity: "error",
 		message: `<${component} ${name}> must be a finite number${bounds.min === void 0 ? "" : ` of at least ${bounds.min}`}.`
@@ -90,7 +90,8 @@ const preheaderNode = (text) => jsx("div", {
 * screen edge (`gutter`).
 */
 const Email = ({ className, lang = "en", dir = "ltr", title, backgroundColor = "var(--color-background)", gutter, style, children }) => {
-	const safeGutter = optionalNumber("Email", "gutter", gutter, { min: 0 });
+	const found = [];
+	const safeGutter = optionalNumber(found, "Email", "gutter", gutter, { min: 0 });
 	const cellStyle = {
 		...safeGutter === void 0 ? {} : {
 			paddingLeft: `${safeGutter}px`,
@@ -98,7 +99,7 @@ const Email = ({ className, lang = "en", dir = "ltr", title, backgroundColor = "
 		},
 		...style
 	};
-	return jsx("html", {
+	const document = jsx("html", {
 		lang,
 		dir,
 		xmlns: "http://www.w3.org/1999/xhtml",
@@ -146,6 +147,7 @@ const Email = ({ className, lang = "en", dir = "ltr", title, backgroundColor = "
 			}))]
 		})]
 	});
+	return withEmailDiagnostics(document, found);
 };
 /** A pixel width as `width: 100%` capped at it, so a fixed-width table still fits a phone. */
 const fluidWidth = (width) => {
@@ -234,9 +236,10 @@ const Columns = ({ className, align = "center", width = "100%", style, each, per
 		width,
 		...style === void 0 ? {} : { style }
 	};
-	const safeGap = optionalNumber("Columns", "gap", gap, { min: 0 });
-	if (each === void 0 || typeof children !== "function") return presentation(table, withGaps(normalizeChildren(children).map((cell) => withColumnLayout(cell, void 0, stack)), safeGap, stack), { style: { width: "100%" } });
-	if (per !== void 0 && (!Number.isInteger(per) || per < 1)) reportEmailDiagnostic({
+	const found = [];
+	const safeGap = optionalNumber(found, "Columns", "gap", gap, { min: 0 });
+	if (each === void 0 || typeof children !== "function") return withEmailDiagnostics(presentation(table, withGaps(normalizeChildren(children).map((cell) => withColumnLayout(cell, void 0, stack)), safeGap, stack), { style: { width: "100%" } }), found);
+	if (per !== void 0 && (!Number.isInteger(per) || per < 1)) found.push({
 		code: "invalid-columns-per",
 		severity: "error",
 		message: "<Columns per> must be a positive integer."
@@ -246,7 +249,8 @@ const Columns = ({ className, align = "center", width = "100%", style, each, per
 	if (size === void 0) chunks.push(each);
 	else for (let at = 0; at < each.length; at += size) chunks.push(each.slice(at, at + size));
 	const share = equalColumnWidth(size ?? Math.max(each.length, 1));
-	return jsx(Fragment, { children: chunks.map((chunk) => presentation(table, withGaps(chunk.flatMap((item, index) => normalizeChildren(children(item, index)).map((cell) => withColumnLayout(cell, share, stack))), safeGap, stack), { style: { width: "100%" } })) });
+	const rows = jsx(Fragment, { children: chunks.map((chunk) => presentation(table, withGaps(chunk.flatMap((item, index) => normalizeChildren(children(item, index)).map((cell) => withColumnLayout(cell, share, stack))), safeGap, stack), { style: { width: "100%" } })) });
+	return withEmailDiagnostics(rows, found);
 };
 /** One cell of a `Columns` row. */
 const Column = ({ className, align, valign, width, style, children }) => jsx("td", {
@@ -259,25 +263,27 @@ const Column = ({ className, align, valign, width, style, children }) => jsx("td
 });
 /** Average advance of a bold sans-serif glyph, as a fraction of the font size. */
 const BOLD_GLYPH_ADVANCE = .6;
-const invalidButtonNumber = (name) => reportEmailDiagnostic({
-	code: "invalid-button-number",
-	severity: "error",
-	message: `<Button ${name}> must be a finite number.`
-});
-const buttonNumber = (name, value, fallback) => {
+const invalidButtonNumber = (found, name) => {
+	found.push({
+		code: "invalid-button-number",
+		severity: "error",
+		message: `<Button ${name}> must be a finite number.`
+	});
+};
+const buttonNumber = (found, name, value, fallback) => {
 	if (typeof value === "number" && Number.isFinite(value)) return value;
-	invalidButtonNumber(name);
+	invalidButtonNumber(found, name);
 	return fallback;
 };
-const optionalButtonNumber = (name, value) => {
+const optionalButtonNumber = (found, name, value) => {
 	if (value === void 0) return void 0;
 	if (typeof value === "number" && Number.isFinite(value)) return value;
-	invalidButtonNumber(name);
+	invalidButtonNumber(found, name);
 };
-const optionalPositiveButtonNumber = (name, value) => {
+const optionalPositiveButtonNumber = (found, name, value) => {
 	if (value === void 0) return void 0;
 	if (typeof value === "number" && Number.isFinite(value) && value > 0) return value;
-	reportEmailDiagnostic({
+	found.push({
 		code: "invalid-button-number",
 		severity: "error",
 		message: `<Button ${name}> must be a positive finite number.`
@@ -291,15 +297,16 @@ const optionalPositiveButtonNumber = (name, value) => {
 * does not use the theme's primary fill.
 */
 const Button = ({ className, href, width, height, paddingX = 16, backgroundColor, color, borderRadius, borderColor, borderWidth = 0, fontSize = 16, fontFamily, align = "left", style, children }) => {
-	const safeWidth = optionalButtonNumber("width", width);
-	const safeHeight = optionalPositiveButtonNumber("height", height);
-	const safePaddingX = buttonNumber("paddingX", paddingX, 16);
-	const safeBorderRadius = optionalButtonNumber("borderRadius", borderRadius);
-	const safeBorderWidth = buttonNumber("borderWidth", borderWidth, 0);
-	const safeFontSize = buttonNumber("fontSize", fontSize, 16);
+	const found = [];
+	const safeWidth = optionalButtonNumber(found, "width", width);
+	const safeHeight = optionalPositiveButtonNumber(found, "height", height);
+	const safePaddingX = buttonNumber(found, "paddingX", paddingX, 16);
+	const safeBorderRadius = optionalButtonNumber(found, "borderRadius", borderRadius);
+	const safeBorderWidth = buttonNumber(found, "borderWidth", borderWidth, 0);
+	const safeFontSize = buttonNumber(found, "fontSize", fontSize, 16);
 	const label = typeof children === "string" ? children : void 0;
 	const fallback = safeHeight !== void 0 && label !== void 0;
-	if (!fallback) reportEmailDiagnostic({
+	if (!fallback) found.push({
 		code: "button-outlook-fallback",
 		severity: "warning",
 		message: "<Button> draws its classic Outlook shape from VML, which needs a height and a plain string label. Without both, classic Windows Outlook shows an unstyled link.",
@@ -310,7 +317,7 @@ const Button = ({ className, href, width, height, paddingX = 16, backgroundColor
 	const fill = backgroundColor ?? "var(--color-primary)";
 	const ink = color ?? "var(--color-primary-foreground)";
 	const family = fontFamily ?? "var(--font-sans)";
-	return presentation({
+	const button = presentation({
 		width: "100%",
 		style: { borderCollapse: "collapse" }
 	}, jsx("td", {
@@ -342,6 +349,7 @@ const Button = ({ className, href, width, height, paddingX = 16, backgroundColor
 			children
 		})]
 	}));
+	return withEmailDiagnostics(button, found);
 };
 /** Vertical space that survives clients which collapse margins. */
 const Spacer = ({ height }) => presentation({ width: "100%" }, jsx("td", {

package/dist/css-B_aVKrDo.js

@@ -0,0 +1,436 @@
+import { t as downlevelColors } from "./css-color-DLM12Osu.js";
+import { n as isDarkSchemeCondition } from "./dark-scheme-CbCwGDWH.js";
+import { o as unquote } from "./selectors-CYWCoxZr.js";
+import { generate, ident, parse, walk } from "css-tree";
+//#region src/email/fonts.ts
+const FONT_FILE = /\.woff2$/i;
+const WOFF2_FORMAT = /^woff2(?:-variations)?$/i;
+const SCHEME = /^[a-z][a-z0-9+.-]*:/i;
+const declarationValue = (declaration) => declaration.type === "Declaration" ? generate(declaration.value).trim() : "";
+/**
+* Validate one `@font-face` and rewrite its project-relative `src` URLs.
+* Accepts only WOFF2: a relative URL must name a `.woff2` file the project has,
+* and an `https:` URL stays an external reference. `local()` entries pass.
+*/
+const compileFontFace = (node, origin, resolve) => {
+	const diagnostics = [];
+	const fail = (code, message) => diagnostics.push({
+		code,
+		severity: "error",
+		message: `${origin}: ${message}`,
+		origins: []
+	});
+	if (node.type !== "Atrule" || node.block === null || node.block.children === null) return {
+		rule: void 0,
+		diagnostics
+	};
+	let family;
+	let sources = 0;
+	for (const declaration of node.block.children) {
+		if (declaration.type !== "Declaration") continue;
+		const property = declaration.property.toLowerCase();
+		if (property === "font-family") family = unquote(declarationValue(declaration));
+		if (property !== "src") continue;
+		const authored = declarationValue(declaration);
+		let value;
+		try {
+			value = parse(authored, { context: "value" });
+		} catch {
+			fail("email-font-src", "@font-face src could not be parsed.");
+			continue;
+		}
+		walk(value, { enter: (part) => {
+			if (part.type === "Function" && part.name.toLowerCase() === "format") {
+				const format = unquote(generate(part).slice(7, -1));
+				if (!WOFF2_FORMAT.test(format)) fail("email-font-format", `@font-face format(${format}) is not supported. Email fonts are WOFF2 only; convert the file to .woff2.`);
+				return;
+			}
+			if (part.type !== "Url") return;
+			sources++;
+			const reference = part.value;
+			const path = reference.replace(/[?#].*$/, "");
+			if (/^https:\/\//i.test(reference)) {
+				if (!FONT_FILE.test(path) && !/format\(\s*['"]?woff2/i.test(generate(value))) fail("email-font-format", `@font-face src ${JSON.stringify(reference)} is not a WOFF2 file. Email fonts are WOFF2 only.`);
+				return;
+			}
+			if (SCHEME.test(reference) || reference.startsWith("//")) {
+				fail("email-font-src", `@font-face src ${JSON.stringify(reference)} must be a project .woff2 file or an https URL.`);
+				return;
+			}
+			if (!FONT_FILE.test(path)) {
+				fail("email-font-format", `@font-face src ${JSON.stringify(reference)} is not a .woff2 file. Email fonts are WOFF2 only; convert the file to .woff2.`);
+				return;
+			}
+			const url = resolve?.(reference);
+			if (url === void 0) {
+				fail("email-font-missing", `@font-face src ${JSON.stringify(reference)} names no file in the project. Paths resolve from the stylesheet's own directory.`);
+				return;
+			}
+			part.value = url;
+		} });
+		declaration.value = {
+			type: "Raw",
+			value: generate(value).replace(/\)(?=(?:format|tech)\()/gi, ") ")
+		};
+	}
+	if (family === void 0 || family === "") fail("email-font-family", "@font-face declares no font-family.");
+	if (sources === 0) fail("email-font-src", "@font-face declares no url() src.");
+	if (diagnostics.length > 0 || family === void 0) return {
+		rule: void 0,
+		diagnostics
+	};
+	return {
+		rule: {
+			family,
+			css: generate(node)
+		},
+		diagnostics
+	};
+};
+//#endregion
+//#region src/email/css.ts
+const UNLAYERED = Number.MAX_SAFE_INTEGER;
+const CONDITIONAL_AT_RULES = /* @__PURE__ */ new Set([
+	"media",
+	"supports",
+	"container"
+]);
+const HEAD_AT_RULES = /* @__PURE__ */ new Set([
+	"page",
+	"counter-style",
+	"keyframes"
+]);
+const ROOT_SELECTORS = /* @__PURE__ */ new Set([
+	":root",
+	":host",
+	"html",
+	"*",
+	":where(:root)"
+]);
+const text = (node) => node === null || node === void 0 ? "" : generate(node);
+/** The CSS specificity triple for one selector, ignoring the parts email clients drop. */
+const specificityOf = (selector) => {
+	let id = 0;
+	let cls = 0;
+	let type = 0;
+	const visit = (node) => {
+		switch (node.type) {
+			case "IdSelector":
+				id += 1;
+				break;
+			case "ClassSelector":
+			case "AttributeSelector":
+				cls += 1;
+				break;
+			case "PseudoClassSelector":
+				if (node.name !== "where") cls += 1;
+				break;
+			case "TypeSelector":
+				if (node.name !== "*") type += 1;
+				break;
+			case "PseudoElementSelector": type += 1;
+		}
+		if ("children" in node && node.children !== null && node.children !== void 0) for (const child of node.children) visit(child);
+	};
+	visit(selector);
+	return [
+		id,
+		cls,
+		type
+	];
+};
+const hasPseudo = (selector) => {
+	let found = false;
+	const visit = (node) => {
+		if (node.type === "PseudoClassSelector" || node.type === "PseudoElementSelector") found = true;
+		if ("children" in node && node.children !== null && node.children !== void 0) for (const child of node.children) visit(child);
+	};
+	visit(selector);
+	return found;
+};
+const COMBINATORS = {
+	" ": "descendant",
+	">": "child",
+	"+": "adjacent",
+	"~": "sibling"
+};
+/** Compile a selector into the plain-data matcher the render lane uses. */
+const compileSelector = (selector) => {
+	let ast;
+	try {
+		ast = parse(selector, {
+			context: "selector",
+			positions: false
+		});
+	} catch {
+		return;
+	}
+	if (ast.type !== "Selector" || ast.children === null) return void 0;
+	const parts = [];
+	let tag;
+	let id;
+	let classes = [];
+	let attributes = [];
+	let opaque = false;
+	const flush = (after) => {
+		parts.push({
+			compound: {
+				tag,
+				id,
+				classes,
+				attributes,
+				opaque
+			},
+			...after === void 0 ? {} : { after }
+		});
+		tag = void 0;
+		id = void 0;
+		classes = [];
+		attributes = [];
+		opaque = false;
+	};
+	for (const node of ast.children) switch (node.type) {
+		case "TypeSelector":
+			if (node.name !== "*") tag = node.name.toLowerCase();
+			break;
+		case "IdSelector":
+			id = node.name;
+			break;
+		case "ClassSelector":
+			classes.push(ident.decode(node.name));
+			break;
+		case "AttributeSelector":
+			attributes.push({
+				name: node.name.name,
+				operator: node.matcher ?? void 0,
+				value: node.value === null || node.value === void 0 ? void 0 : node.value.type === "String" ? node.value.value : node.value.name
+			});
+			break;
+		case "Combinator":
+			flush(COMBINATORS[node.name.trim() === "" ? " " : node.name] ?? "descendant");
+			break;
+		default: opaque = true;
+	}
+	flush();
+	return { parts };
+};
+/** Substitute a nested rule's `&` against its parent selector. */
+const nestSelector = (parent, child) => child.includes("&") ? child.replaceAll("&", parent) : `${parent} ${child}`;
+/** Parse one stylesheet into rules, keeping layer, order and conditions. */
+const parseStylesheet = (source, options = {}) => {
+	const rules = [];
+	const headAtRules = [];
+	const fontFaces = [];
+	const variables = {};
+	const darkVariables = {};
+	const conditionalVariables = /* @__PURE__ */ new Set();
+	const diagnostics = [];
+	const layers = /* @__PURE__ */ new Map();
+	const selectorFacts = /* @__PURE__ */ new Map();
+	let order = options.startOrder ?? 0;
+	/** Everything a rule needs from its selector, computed once per distinct string. */
+	const factsFor = (selector) => {
+		const cached = selectorFacts.get(selector);
+		if (cached !== void 0) return cached;
+		let facts;
+		try {
+			const node = parse(selector, {
+				context: "selector",
+				positions: false
+			});
+			const classes = /* @__PURE__ */ new Set();
+			walk(node, {
+				visit: "ClassSelector",
+				enter: (part) => {
+					classes.add(ident.decode(part.name));
+				}
+			});
+			facts = {
+				classes: [...classes],
+				specificity: specificityOf(node),
+				pseudo: hasPseudo(node),
+				matcher: compileSelector(selector)
+			};
+		} catch {
+			facts = {
+				classes: [],
+				specificity: [
+					0,
+					0,
+					0
+				],
+				pseudo: true,
+				matcher: void 0
+			};
+		}
+		selectorFacts.set(selector, facts);
+		return facts;
+	};
+	let ast;
+	try {
+		ast = parse(source, {
+			parseValue: false,
+			parseCustomProperty: false,
+			positions: false
+		});
+	} catch (cause) {
+		return {
+			rules: [],
+			headAtRules: [],
+			fontFaces: [],
+			variables: {},
+			darkVariables: {},
+			diagnostics: [{
+				code: "css-parse-error",
+				severity: "error",
+				message: `${options.origin ?? "stylesheet"} could not be parsed: ${String(cause)}`,
+				origins: []
+			}]
+		};
+	}
+	const declarationsOf = (block) => {
+		const output = [];
+		if (block === null || block.type !== "Block" || block.children === null) return output;
+		for (const child of block.children) {
+			if (child.type !== "Declaration") continue;
+			output.push({
+				property: child.property,
+				value: downlevelColors(text(child.value).trim().replace(/[\t\n\r\f]/g, " ")),
+				important: child.important === true
+			});
+		}
+		return output;
+	};
+	const emit = (selector, context, declarations) => {
+		if (declarations.length === 0) return;
+		const facts = factsFor(selector);
+		if (ROOT_SELECTORS.has(selector.trim())) for (const declaration of declarations) {
+			if (!declaration.property.startsWith("--")) continue;
+			if (context.conditions.length === 0) variables[declaration.property] = declaration.value;
+			else if (isDarkSchemeCondition(context.conditions)) darkVariables[declaration.property] = declaration.value;
+			else conditionalVariables.add(declaration.property);
+		}
+		rules.push({
+			selector,
+			classes: facts.classes,
+			specificity: facts.specificity,
+			declarations,
+			order: order++,
+			layer: context.layer,
+			conditions: context.conditions,
+			inlinable: context.conditions.length === 0 && !facts.pseudo,
+			matcher: facts.matcher
+		});
+	};
+	/**
+	* Declarations directly in a block belong to the enclosing selector, whether
+	* that block is the rule's own or a `@media` nested inside it — which is
+	* exactly the shape Tailwind v4 emits for a responsive utility.
+	*/
+	const walkBlock = (block, context) => {
+		if (block === null || block.type !== "Block" || block.children === null) return;
+		const declarations = declarationsOf(block);
+		if (declarations.length > 0 && context.selector !== void 0) emit(context.selector, context, declarations);
+		for (const child of block.children) if (child.type !== "Declaration") visitNode(child, context);
+	};
+	const visitNode = (node, context) => {
+		if (node.type === "Rule") {
+			const prelude = node.prelude;
+			const selectors = prelude.type === "SelectorList" && prelude.children !== null ? [...prelude.children] : [prelude];
+			for (const selector of selectors) {
+				const own = text(selector).trim();
+				if (own === "") continue;
+				walkBlock(node.block, {
+					...context,
+					selector: context.selector === void 0 ? own : nestSelector(context.selector, own)
+				});
+			}
+			return;
+		}
+		if (node.type !== "Atrule") return;
+		const name = node.name.toLowerCase();
+		if (name === "layer") {
+			const prelude = text(node.prelude).trim();
+			if (node.block === null) {
+				for (const declared of prelude.split(",").map((part) => part.trim())) if (declared !== "" && !layers.has(declared)) layers.set(declared, layers.size);
+				return;
+			}
+			const named = prelude.split(",")[0]?.trim() ?? "";
+			if (named !== "" && !layers.has(named)) layers.set(named, layers.size);
+			walkBlock(node.block, {
+				...context,
+				layer: layers.get(named) ?? context.layer
+			});
+			return;
+		}
+		if (name === "theme" || name === "scope") {
+			const into = context.conditions.length === 0 ? variables : isDarkSchemeCondition(context.conditions) ? darkVariables : void 0;
+			for (const declaration of declarationsOf(node.block)) if (declaration.property.startsWith("--")) {
+				if (into === void 0) conditionalVariables.add(declaration.property);
+				else into[declaration.property] = declaration.value;
+			}
+			for (const child of node.block?.children ?? []) if (child.type !== "Declaration") visitNode(child, context);
+			return;
+		}
+		if (name === "property") {
+			const initial = declarationsOf(node.block).find((declaration) => declaration.property === "initial-value");
+			const property = text(node.prelude).trim();
+			if (initial !== void 0 && property.startsWith("--") && !(property in variables)) variables[property] = initial.value;
+			return;
+		}
+		if (CONDITIONAL_AT_RULES.has(name)) {
+			walkBlock(node.block, {
+				...context,
+				conditions: [...context.conditions, `@${name} ${text(node.prelude).trim()}`]
+			});
+			return;
+		}
+		if (name === "font-face") {
+			const face = compileFontFace(node, options.origin ?? "stylesheet", options.resolveFontFile);
+			if (face.rule !== void 0) fontFaces.push(face.rule);
+			diagnostics.push(...face.diagnostics);
+			return;
+		}
+		if (HEAD_AT_RULES.has(name)) {
+			headAtRules.push(generate(node));
+			return;
+		}
+		if (name === "import") {
+			if (options.themeImports === true) return;
+			diagnostics.push({
+				code: "css-import-unresolved",
+				severity: "error",
+				message: `${options.origin ?? "stylesheet"} uses @import ${text(node.prelude).trim()}; import the stylesheet from the template module instead so the compiler can resolve it.`,
+				origins: []
+			});
+			return;
+		}
+		if (name === "charset" || name === "namespace") return;
+		diagnostics.push({
+			code: "css-unsupported-at-rule",
+			severity: "warning",
+			message: `@${name} is not applied to email output; remove it or move the declarations into a class rule.`,
+			origins: []
+		});
+	};
+	if (ast.type === "StyleSheet" && ast.children !== null) for (const child of ast.children) visitNode(child, {
+		conditions: [],
+		layer: UNLAYERED
+	});
+	for (const property of conditionalVariables) if (property in variables) diagnostics.push({
+		code: "css-conditional-variable",
+		severity: "warning",
+		message: `${property} is redefined inside a conditional at-rule. Inlined declarations take the unconditional value; keep the override on a class rule so the retained head rule can apply it.`,
+		origins: []
+	});
+	return {
+		rules,
+		headAtRules,
+		fontFaces,
+		variables,
+		darkVariables,
+		diagnostics
+	};
+};
+//#endregion
+export { parseStylesheet as t };