@samva/markup 0.1.0

package/dist/registry.js

@@ -0,0 +1,646 @@
+//#region src/registry.ts
+const SPACING_PATTERN = /^\d+(\.(25|5|75))?$/;
+const ARBITRARY_LENGTH_PATTERN = /^\d+(\.\d+)?(px|%)$/;
+const ARBITRARY_PX_PATTERN = /^\d+(\.\d+)?px$/;
+const ARBITRARY_HEX_PATTERN = /^#[0-9a-fA-F]{3}([0-9a-fA-F]{3})?$/;
+const px = (value) => `${roundPx(value)}px`;
+const roundPx = (value) => Math.round(value * 100) / 100;
+const spacingValue = (value, theme) => {
+	if (value === "px") return "1px";
+	if (!SPACING_PATTERN.test(value)) return null;
+	return px(Number.parseFloat(value) * theme.spacingPx);
+};
+const arbitraryLength = (value) => ARBITRARY_LENGTH_PATTERN.test(value) ? [value] : null;
+const colorValue = (value, theme) => value === "transparent" ? "transparent" : theme.colors[value] ?? null;
+const declarations = (properties, value) => properties.map((property) => ({
+	property,
+	value
+}));
+const textSizeDeclarations = (sizePx) => [{
+	property: "font-size",
+	value: px(sizePx)
+}, {
+	property: "line-height",
+	value: px(sizePx * 1.5)
+}];
+const arbitraryTextSize = (value) => {
+	if (!ARBITRARY_PX_PATTERN.test(value)) return null;
+	const size = Number.parseFloat(value);
+	return size >= 8 && size <= 72 ? textSizeDeclarations(size) : null;
+};
+const radiusValue = (value, theme) => {
+	if (value === "none") return "0px";
+	if (value === "full") return "9999px";
+	const radius = theme.radiusPx[value];
+	return radius === void 0 ? null : px(radius);
+};
+const radiusFamily = (root, properties, description) => {
+	const family = {
+		root,
+		named: (value, theme) => {
+			const resolved = radiusValue(value, theme);
+			return resolved === null ? null : declarations(properties, resolved);
+		},
+		arbitrary: (value) => ARBITRARY_PX_PATTERN.test(value) ? declarations(properties, value) : null,
+		description,
+		caniemailSlugs: ["css-border-radius"]
+	};
+	return root === "rounded" ? {
+		...family,
+		bare: properties.map((property) => ({
+			property,
+			value: "4px"
+		}))
+	} : family;
+};
+const spacingFamily = (root, properties, options) => ({
+	root,
+	named: (value, theme) => {
+		if (options.auto === true && value === "auto") return declarations(properties, "auto");
+		const resolved = spacingValue(value, theme);
+		return resolved === null ? null : declarations(properties, resolved);
+	},
+	arbitrary: (value) => ARBITRARY_PX_PATTERN.test(value) ? declarations(properties, value) : null,
+	description: options.description,
+	caniemailSlugs: options.caniemailSlugs,
+	warn: options.warn
+});
+const MARGIN_WARNING = "margin is stripped by some clients (Outlook.com dark mode, some webmail); prefer padding or <Spacer>";
+const GRADIENT_DIRECTION_PROPERTY = "-sml-gradient-direction";
+const GRADIENT_FROM_PROPERTY = "-sml-gradient-from";
+const GRADIENT_TO_PROPERTY = "-sml-gradient-to";
+const GRADIENT_DIRECTIONS = {
+	"to-t": "to top",
+	"to-b": "to bottom",
+	"to-l": "to left",
+	"to-r": "to right"
+};
+const utilityRegistry = [
+	spacingFamily("p", ["padding"], {
+		description: "Padding on all sides (p-4 = 16px). Compiles onto table cells for Outlook.",
+		caniemailSlugs: ["css-padding"]
+	}),
+	spacingFamily("px", ["padding-left", "padding-right"], {
+		description: "Horizontal padding.",
+		caniemailSlugs: ["css-padding"]
+	}),
+	spacingFamily("py", ["padding-top", "padding-bottom"], {
+		description: "Vertical padding.",
+		caniemailSlugs: ["css-padding"]
+	}),
+	spacingFamily("pt", ["padding-top"], {
+		description: "Top padding.",
+		caniemailSlugs: ["css-padding"]
+	}),
+	spacingFamily("pr", ["padding-right"], {
+		description: "Right padding.",
+		caniemailSlugs: ["css-padding"]
+	}),
+	spacingFamily("pb", ["padding-bottom"], {
+		description: "Bottom padding.",
+		caniemailSlugs: ["css-padding"]
+	}),
+	spacingFamily("pl", ["padding-left"], {
+		description: "Left padding.",
+		caniemailSlugs: ["css-padding"]
+	}),
+	spacingFamily("m", ["margin"], {
+		description: "Margin on all sides. Warn tier — some clients strip margins.",
+		caniemailSlugs: ["css-margin"],
+		warn: MARGIN_WARNING
+	}),
+	spacingFamily("mx", ["margin-left", "margin-right"], {
+		description: "Horizontal margin; mx-auto centers block elements.",
+		caniemailSlugs: ["css-margin"],
+		warn: MARGIN_WARNING,
+		auto: true
+	}),
+	spacingFamily("my", ["margin-top", "margin-bottom"], {
+		description: "Vertical margin.",
+		caniemailSlugs: ["css-margin"],
+		warn: MARGIN_WARNING
+	}),
+	spacingFamily("mt", ["margin-top"], {
+		description: "Top margin.",
+		caniemailSlugs: ["css-margin"],
+		warn: MARGIN_WARNING
+	}),
+	spacingFamily("mr", ["margin-right"], {
+		description: "Right margin.",
+		caniemailSlugs: ["css-margin"],
+		warn: MARGIN_WARNING,
+		auto: true
+	}),
+	spacingFamily("mb", ["margin-bottom"], {
+		description: "Bottom margin.",
+		caniemailSlugs: ["css-margin"],
+		warn: MARGIN_WARNING
+	}),
+	spacingFamily("ml", ["margin-left"], {
+		description: "Left margin.",
+		caniemailSlugs: ["css-margin"],
+		warn: MARGIN_WARNING,
+		auto: true
+	}),
+	{
+		root: "w",
+		named: (value, theme) => {
+			if (value === "full") return [{
+				property: "width",
+				value: "100%"
+			}];
+			const resolved = spacingValue(value, theme);
+			return resolved === null ? null : [{
+				property: "width",
+				value: resolved
+			}];
+		},
+		arbitrary: (value) => arbitraryLength(value) === null ? null : [{
+			property: "width",
+			value
+		}],
+		description: "Width from the spacing scale (w-32 = 128px), w-full, or w-[600px]/w-[50%].",
+		caniemailSlugs: ["css-width"]
+	},
+	{
+		root: "max-w",
+		named: (value, theme) => {
+			if (value === "full") return [{
+				property: "max-width",
+				value: "100%"
+			}];
+			if (value === "none") return [{
+				property: "max-width",
+				value: "none"
+			}];
+			const container = theme.containerPx[value];
+			return container === void 0 ? null : [{
+				property: "max-width",
+				value: px(container)
+			}];
+		},
+		arbitrary: (value) => arbitraryLength(value) === null ? null : [{
+			property: "max-width",
+			value
+		}],
+		description: "Max width from the container scale (max-w-lg = 512px) or max-w-[600px].",
+		caniemailSlugs: ["css-max-width"]
+	},
+	{
+		root: "h",
+		named: (value, theme) => {
+			if (value === "full") return [{
+				property: "height",
+				value: "100%"
+			}];
+			const resolved = spacingValue(value, theme);
+			return resolved === null ? null : [{
+				property: "height",
+				value: resolved
+			}];
+		},
+		arbitrary: (value) => arbitraryLength(value) === null ? null : [{
+			property: "height",
+			value
+		}],
+		description: "Height from the spacing scale (h-12 = 48px) or h-[80px].",
+		caniemailSlugs: ["css-height"]
+	},
+	{
+		root: "text",
+		named: (value, theme) => {
+			const size = theme.text[value];
+			if (size === void 0) return null;
+			return [...declarations(["font-size"], px(size.sizePx)), ...declarations(["line-height"], px(size.lineHeightPx))];
+		},
+		arbitrary: arbitraryTextSize,
+		description: "Font size with paired line-height (text-sm = 14px/20px) or bounded px value (text-[15px] = 15px/22.5px). Put an explicit leading-* after it to override line-height.",
+		caniemailSlugs: ["css-font-size", "css-line-height"]
+	},
+	{
+		root: "text",
+		named: (value) => value === "left" || value === "center" || value === "right" || value === "justify" ? [{
+			property: "text-align",
+			value
+		}] : null,
+		description: "Text alignment: text-left, text-center, text-right, text-justify.",
+		caniemailSlugs: ["css-text-align"]
+	},
+	{
+		root: "text",
+		colorFamily: true,
+		named: (value, theme) => {
+			const color = colorValue(value, theme);
+			return color === null ? null : [{
+				property: "color",
+				value: color
+			}];
+		},
+		arbitrary: (value) => ARBITRARY_HEX_PATTERN.test(value) ? [{
+			property: "color",
+			value: value.toLowerCase()
+		}] : null,
+		description: "Text color from the palette (text-gray-700) or text-[#374151].",
+		caniemailSlugs: ["css-color"]
+	},
+	{
+		root: "leading",
+		named: (value, theme) => {
+			if (value === "none") return [{
+				property: "line-height",
+				value: "1"
+			}];
+			const ratio = theme.leading[value];
+			if (ratio !== void 0) return [{
+				property: "line-height",
+				value: String(ratio)
+			}];
+			const resolved = spacingValue(value, theme);
+			return resolved === null ? null : [{
+				property: "line-height",
+				value: resolved
+			}];
+		},
+		arbitrary: (value) => ARBITRARY_PX_PATTERN.test(value) ? [{
+			property: "line-height",
+			value
+		}] : null,
+		description: "Line height: named ratios (leading-relaxed) or spacing steps (leading-6 = 24px).",
+		caniemailSlugs: ["css-line-height"]
+	},
+	{
+		root: "font",
+		named: (value, theme) => {
+			const weight = theme.fontWeights[value];
+			return weight === void 0 ? null : [{
+				property: "font-weight",
+				value: String(weight)
+			}];
+		},
+		description: "Font weight: font-normal, font-medium, font-semibold, font-bold, ...",
+		caniemailSlugs: ["css-font-weight"]
+	},
+	{
+		root: "font",
+		named: (value, theme) => {
+			const family = theme.fontFamilies[value];
+			return family === void 0 ? null : [{
+				property: "font-family",
+				value: family
+			}];
+		},
+		description: "Font stack: font-sans, font-serif, font-mono.",
+		caniemailSlugs: ["css-font"]
+	},
+	{
+		root: "tracking",
+		named: (value, theme) => {
+			const em = theme.trackingEm[value];
+			return em === void 0 ? null : [{
+				property: "letter-spacing",
+				value: `${em}em`
+			}];
+		},
+		description: "Letter spacing: tracking-tighter … tracking-widest (em-based; inlines fine in Outlook). Pair tracking-wide/wider with uppercase for eyebrows.",
+		caniemailSlugs: ["css-letter-spacing"]
+	},
+	{
+		root: "uppercase",
+		bare: [{
+			property: "text-transform",
+			value: "uppercase"
+		}],
+		description: "Uppercase text transform.",
+		caniemailSlugs: ["css-text-transform"]
+	},
+	{
+		root: "underline",
+		bare: [{
+			property: "text-decoration",
+			value: "underline"
+		}],
+		description: "Underlined text.",
+		caniemailSlugs: ["css-text-decoration"]
+	},
+	{
+		root: "no-underline",
+		bare: [{
+			property: "text-decoration",
+			value: "none"
+		}],
+		description: "Removes the underline (links render underlined by default in most clients).",
+		caniemailSlugs: ["css-text-decoration"]
+	},
+	{
+		root: "bg",
+		colorFamily: true,
+		named: (value, theme) => {
+			const color = colorValue(value, theme);
+			return color === null ? null : [{
+				property: "background-color",
+				value: color
+			}];
+		},
+		arbitrary: (value) => ARBITRARY_HEX_PATTERN.test(value) ? [{
+			property: "background-color",
+			value: value.toLowerCase()
+		}] : null,
+		description: "Background color from the palette (bg-white, bg-blue-600) or bg-[#0088cc].",
+		caniemailSlugs: ["css-background-color"]
+	},
+	{
+		root: "bg-gradient",
+		baseOnly: true,
+		named: (value) => {
+			const direction = GRADIENT_DIRECTIONS[value];
+			return direction === void 0 ? null : [{
+				property: GRADIENT_DIRECTION_PROPERTY,
+				value: direction
+			}];
+		},
+		description: "Linear gradient background for hero sections: bg-gradient-to-b/t/l/r with from-{color} and to-{color}. Modern base compiles a CSS linear-gradient (plus a solid from-color fallback); the outlook-safe base degrades to the solid from-color — Outlook for Windows never renders the gradient.",
+		caniemailSlugs: ["css-linear-gradient", "css-background-image"]
+	},
+	{
+		root: "from",
+		baseOnly: true,
+		named: (value, theme) => {
+			const color = colorValue(value, theme);
+			return color === null ? null : [{
+				property: GRADIENT_FROM_PROPERTY,
+				value: color
+			}];
+		},
+		arbitrary: (value) => ARBITRARY_HEX_PATTERN.test(value) ? [{
+			property: GRADIENT_FROM_PROPERTY,
+			value: value.toLowerCase()
+		}] : null,
+		description: "Gradient start color (from-indigo-600). Doubles as the solid fallback color on clients without gradient support (Outlook for Windows).",
+		caniemailSlugs: ["css-linear-gradient"]
+	},
+	{
+		root: "to",
+		baseOnly: true,
+		named: (value, theme) => {
+			const color = colorValue(value, theme);
+			return color === null ? null : [{
+				property: GRADIENT_TO_PROPERTY,
+				value: color
+			}];
+		},
+		arbitrary: (value) => ARBITRARY_HEX_PATTERN.test(value) ? [{
+			property: GRADIENT_TO_PROPERTY,
+			value: value.toLowerCase()
+		}] : null,
+		description: "Gradient end color (to-purple-600).",
+		caniemailSlugs: ["css-linear-gradient"]
+	},
+	{
+		root: "border",
+		bare: [{
+			property: "border-width",
+			value: "1px"
+		}, {
+			property: "border-style",
+			value: "solid"
+		}],
+		named: (value) => /^\d+$/.test(value) ? [{
+			property: "border-width",
+			value: `${value}px`
+		}, {
+			property: "border-style",
+			value: "solid"
+		}] : null,
+		description: "Solid border width: border (1px), border-2, border-0.",
+		caniemailSlugs: ["css-border"]
+	},
+	{
+		root: "border",
+		colorFamily: true,
+		named: (value, theme) => {
+			const color = colorValue(value, theme);
+			return color === null ? null : [{
+				property: "border-color",
+				value: color
+			}];
+		},
+		arbitrary: (value) => ARBITRARY_HEX_PATTERN.test(value) ? [{
+			property: "border-color",
+			value: value.toLowerCase()
+		}] : null,
+		description: "Border color from the palette (border-gray-200).",
+		caniemailSlugs: ["css-border"]
+	},
+	radiusFamily("rounded", ["border-radius"], "Border radius (rounded-md = 6px). Ignored by Outlook for Windows — buttons degrade to square corners."),
+	radiusFamily("rounded-t", ["border-top-left-radius", "border-top-right-radius"], "Top border radius for card/header blocks (rounded-t-lg). Degrades to square corners in Outlook for Windows."),
+	radiusFamily("rounded-r", ["border-top-right-radius", "border-bottom-right-radius"], "Right-side border radius (rounded-r-lg). Degrades to square corners in Outlook for Windows."),
+	radiusFamily("rounded-b", ["border-bottom-right-radius", "border-bottom-left-radius"], "Bottom border radius for card/footer blocks (rounded-b-lg). Degrades to square corners in Outlook for Windows."),
+	radiusFamily("rounded-l", ["border-top-left-radius", "border-bottom-left-radius"], "Left-side border radius (rounded-l-lg). Degrades to square corners in Outlook for Windows."),
+	{
+		root: "block",
+		bare: [{
+			property: "display",
+			value: "block"
+		}],
+		description: "display: block.",
+		caniemailSlugs: ["css-display"]
+	},
+	{
+		root: "inline-block",
+		bare: [{
+			property: "display",
+			value: "inline-block"
+		}],
+		description: "display: inline-block.",
+		caniemailSlugs: ["css-display"]
+	},
+	{
+		root: "hidden",
+		bare: [{
+			property: "display",
+			value: "none"
+		}],
+		description: "display: none. Pair with sm:block for mobile-only content.",
+		caniemailSlugs: ["css-display"]
+	}
+];
+const forbiddenUtilities = [
+	{
+		match: "flex",
+		message: "display:flex is unsupported in Outlook for Windows (Word engine) — use <Row>/<Column>"
+	},
+	{
+		match: "inline-flex",
+		message: "display:inline-flex is unsupported in Outlook for Windows — use <Row>/<Column>"
+	},
+	{
+		match: "grid",
+		message: "display:grid is unsupported in Outlook for Windows and Gmail — use <Row>/<Column>"
+	},
+	{
+		match: "inline-grid",
+		message: "display:inline-grid is unsupported in Outlook for Windows — use <Row>/<Column>"
+	},
+	{
+		match: "gap-",
+		message: "gap requires flex/grid, unsupported in Outlook for Windows — use padding on <Column>"
+	},
+	{
+		match: "space-",
+		message: "space-* margins require selectors Gmail strips — use padding or <Spacer>"
+	},
+	{
+		match: "items-",
+		message: "flexbox alignment is unsupported in Outlook for Windows — use <Row>/<Column>"
+	},
+	{
+		match: "justify-",
+		message: "flexbox alignment is unsupported in Outlook for Windows — use <Row>/<Column> and text-center"
+	},
+	{
+		match: "self-",
+		message: "flexbox alignment is unsupported in Outlook for Windows — use <Row>/<Column>"
+	},
+	{
+		match: "content-",
+		message: "flexbox alignment is unsupported in Outlook for Windows — use <Row>/<Column>"
+	},
+	{
+		match: "order-",
+		message: "flex order is unsupported in Outlook for Windows — reorder the source instead"
+	},
+	{
+		match: "absolute",
+		message: "CSS position is ignored by Gmail and Outlook — use nested <Section>s"
+	},
+	{
+		match: "relative",
+		message: "CSS position is ignored by Gmail and Outlook — use nested <Section>s"
+	},
+	{
+		match: "fixed",
+		message: "CSS position is ignored by Gmail and Outlook — use nested <Section>s"
+	},
+	{
+		match: "sticky",
+		message: "CSS position is ignored by Gmail and Outlook — use nested <Section>s"
+	},
+	{
+		match: "static",
+		message: "CSS position is ignored by Gmail and Outlook — remove it"
+	},
+	{
+		match: "inset-",
+		message: "position offsets are ignored by Gmail and Outlook — use padding"
+	},
+	{
+		match: "top-",
+		message: "position offsets are ignored by Gmail and Outlook — use padding"
+	},
+	{
+		match: "right-",
+		message: "position offsets are ignored by Gmail and Outlook — use padding"
+	},
+	{
+		match: "bottom-",
+		message: "position offsets are ignored by Gmail and Outlook — use padding"
+	},
+	{
+		match: "left-",
+		message: "position offsets are ignored by Gmail and Outlook — use padding"
+	},
+	{
+		match: "z-",
+		message: "z-index is ignored by Gmail and Outlook — remove it"
+	},
+	{
+		match: "float-",
+		message: "float is unreliable across email clients — use <Row>/<Column>"
+	},
+	{
+		match: "shadow",
+		message: "box-shadow is unsupported in Outlook for Windows and Gmail — use a border instead"
+	},
+	{
+		match: "shadow-",
+		message: "box-shadow is unsupported in Outlook for Windows and Gmail — use a border instead"
+	},
+	{
+		match: "opacity-",
+		message: "opacity is unsupported in Outlook for Windows — bake the tint into the color"
+	},
+	{
+		match: "transform",
+		message: "CSS transforms are unsupported in email clients — remove them"
+	},
+	{
+		match: "rotate-",
+		message: "CSS transforms are unsupported in email clients — remove them"
+	},
+	{
+		match: "scale-",
+		message: "CSS transforms are unsupported in email clients — remove them"
+	},
+	{
+		match: "translate-",
+		message: "CSS transforms are unsupported in email clients — remove them"
+	},
+	{
+		match: "skew-",
+		message: "CSS transforms are unsupported in email clients — remove them"
+	},
+	{
+		match: "transition",
+		message: "transitions don't run in email — remove them"
+	},
+	{
+		match: "transition-",
+		message: "transitions don't run in email — remove them"
+	},
+	{
+		match: "duration-",
+		message: "transitions don't run in email — remove them"
+	},
+	{
+		match: "animate-",
+		message: "animations don't run in email — remove them"
+	},
+	{
+		match: "blur-",
+		message: "CSS filters are unsupported in most email clients — remove them"
+	},
+	{
+		match: "brightness-",
+		message: "CSS filters are unsupported in most email clients — remove them"
+	},
+	{
+		match: "grayscale",
+		message: "CSS filters are unsupported in most email clients — remove them"
+	},
+	{
+		match: "grayscale-",
+		message: "CSS filters are unsupported in most email clients — remove them"
+	},
+	{
+		match: "truncate",
+		message: "text truncation is unsupported in Outlook for Windows — shorten the copy"
+	},
+	{
+		match: "line-clamp-",
+		message: "line clamping is unsupported in email clients — shorten the copy"
+	},
+	{
+		match: "aspect-",
+		message: "aspect-ratio is unsupported in Outlook and Gmail — set width/height on <Image>"
+	},
+	{
+		match: "overflow-",
+		message: "overflow is unreliable across email clients — restructure the layout"
+	}
+];
+/** Every root the resolver may try to split on, longest-match first (candidate.ts). */
+const registryRoots = new Set(utilityRegistry.map((family) => family.root));
+//#endregion
+export { GRADIENT_DIRECTION_PROPERTY, GRADIENT_FROM_PROPERTY, GRADIENT_TO_PROPERTY, forbiddenUtilities, registryRoots, utilityRegistry };
+
+//# sourceMappingURL=registry.js.map