@maizzle/framework 6.0.0-rc.15 → 6.0.0-rc.17

package/dist/transformers/base.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"base.d.ts","names":[],"sources":["../../src/transformers/base.ts"],"mappings":";;;;iBAwHgB,IAAA,CAAK,GAAA,EAAK,SAAA,IAAa,MAAA,GAAQ,SAAA,GAAiB,SAAA"}

package/dist/transformers/{columnWidth.d.mts → columnWidth.d.ts}

@@ -5,14 +5,14 @@ import { ChildNode } from "domhandler";
  * Resolve `__MAIZZLE_COLW_{id}__` and `__MAIZZLE_OH_{id}__` placeholders.
  *
  * COLW (column width) — emitted by `<Column>` and `<Overlap>`. Walks up to
- * the nearest ancestor marked with `data-maizzle-cw` (Container/Section/
- * Row/another Column already resolved) and divides by `data-maizzle-cw-count`.
- * If `data-maizzle-cw-self` is present, reads from the element's own inlined
- * `max-width`/`width`/`min-width` instead of walking up — used by `<Overlap>`
- * when it has its own width class/inline style.
+ * the nearest ancestor marked `data-maizzle-cw` (Container, Section,
+ * Row, or another Column already resolved) and divides the source
+ * width by `data-maizzle-cw-count`. With `data-maizzle-cw-self`,
+ * reads from the element's own inlined max/width/min-width
+ * instead — used by `<Overlap>` with its own width class.
  *
- * OH (overlap height) — emitted by `<Overlap>`. Reads `max-height`/`height`/
- * `min-height` from the element's own inlined style.
+ * OH (overlap height) — emitted by `<Overlap>`. Reads max-height, height,
+ * or min-height from the element's own inlined style.
  *
  * Resolution rules:
  * - Style placeholders for `min-width`: replaced when resolvable, otherwise
@@ -22,10 +22,10 @@ import { ChildNode } from "domhandler";
  * - Comment placeholders: same fallback chain.
  *
  * Resolved column widths are written back to `data-maizzle-cw` so nested
- * rows cascade. All `data-maizzle-cw*` and `data-maizzle-oh-*` attrs are
- * stripped at the end.
+ * rows cascade. All `data-maizzle-cw*` and `data-maizzle-oh-*` are
+ * stripped at the end of the second walk pass.
  */
 declare function columnWidth(dom: ChildNode[]): ChildNode[];
 //#endregion
 export { columnWidth };
-//# sourceMappingURL=columnWidth.d.mts.map
+//# sourceMappingURL=columnWidth.d.ts.map

package/dist/transformers/columnWidth.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"columnWidth.d.ts","names":[],"sources":["../../src/transformers/columnWidth.ts"],"mappings":";;;;;AAwTA;;;;;;;;;;;;;;;;;;;;;;iBAAgB,WAAA,CAAY,GAAA,EAAK,SAAA,KAAc,SAAA"}

package/dist/transformers/columnWidth.mjs

@@ -1,14 +1,47 @@
 import { walk } from "../utils/ast/walker.mjs";
 import "../utils/ast/index.mjs";
+import postcss from "postcss";
+import safeParser from "postcss-safe-parser";
 
 //#region src/transformers/columnWidth.ts
-const RE_MAX_WIDTH = /(?:^|;\s*)max-width:\s*([^;]+)/i;
-const RE_WIDTH = /(?:^|;\s*)width:\s*([^;]+)/i;
-const RE_MIN_WIDTH = /(?:^|;\s*)min-width:\s*([^;]+)/i;
-const RE_MAX_HEIGHT = /(?:^|;\s*)max-height:\s*([^;]+)/i;
-const RE_HEIGHT = /(?:^|;\s*)height:\s*([^;]+)/i;
-const RE_MIN_HEIGHT = /(?:^|;\s*)min-height:\s*([^;]+)/i;
 const RE_PERCENT = /^[\d.]+%$/;
+const NO_BORDER_STYLES = new Set(["none", "hidden"]);
+/**
+* Stringify decls into a `; `-joined inline-style attribute. PostCSS raws
+* preserve the original source spacing, which mixes poorly with
+* the fresh decls we inject — plain join keeps output uniform.
+*/
+function serializeStyle(root) {
+	const parts = [];
+	root.walkDecls((d) => {
+		parts.push(`${d.prop}: ${d.value}${d.important ? " !important" : ""}`);
+	});
+	return parts.join("; ");
+}
+function firstDeclValue(root, prop) {
+	let found;
+	root.walkDecls(prop, (d) => {
+		found = d.value;
+		return false;
+	});
+	return found;
+}
+/**
+* Find the user-set `min-width:` value on a column. Juice keeps both ours
+* and the one inlined from a class like `min-w-1/3` — we skip any
+* min-width whose value still contains our placeholder token,
+* returning the first remaining user value, or null.
+*/
+function findUserMinWidth(root) {
+	let userVal = null;
+	root.walkDecls("min-width", (d) => {
+		if (!d.value.includes("__MAIZZLE_COLW_")) {
+			userVal = d.value;
+			return false;
+		}
+	});
+	return userVal;
+}
 function resolveLength(value) {
 	const trimmed = value.trim();
 	if (RE_PERCENT.test(trimmed)) return trimmed;
@@ -23,12 +56,176 @@ function resolveLength(value) {
 		default: return null;
 	}
 }
+function lengthToPx(value) {
+	const m = value.trim().match(/^([\d.]+)(px|rem|em|pt)?$/i);
+	if (!m) return null;
+	const n = parseFloat(m[1]);
+	switch ((m[2] || "px").toLowerCase()) {
+		case "px": return n;
+		case "rem":
+		case "em": return n * 16;
+		case "pt": return n * 1.333;
+		default: return null;
+	}
+}
 function divideLength(value, divisor) {
 	const m = value.match(/^([\d.]+)(px|%)$/);
 	if (!m || divisor < 1) return null;
 	const n = parseFloat(m[1]);
 	return `${parseFloat((n / divisor).toFixed(2))}${m[2]}`;
 }
+function subtractInsetPx(width, insetPx) {
+	if (insetPx <= 0) return width;
+	const m = width.match(/^([\d.]+)(px|%)$/);
+	if (!m) return width;
+	if (m[2] === "%") return width;
+	const n = parseFloat(m[1]) - insetPx;
+	return `${Math.max(0, Math.round(n))}px`;
+}
+/**
+* Return the smaller of two px lengths. Clamps our count-based min-width
+* down to the user's `max-width:` so the cap is never silently
+* violated when our computed min would exceed the user's max.
+*/
+function minPxLength(a, b) {
+	const am = a.match(/^([\d.]+)px$/);
+	const bm = b.match(/^([\d.]+)px$/);
+	if (!am || !bm) return a;
+	return parseFloat(am[1]) < parseFloat(bm[1]) ? a : b;
+}
+/**
+* Expand a 1-4 token CSS shorthand (T R B L) into a left/right pair:
+*   1: all sides
+*   2: TB RL
+*   3: T RL B
+*   4: T R B L
+*/
+function shorthandSides(value) {
+	const parts = value.trim().split(/\s+/);
+	switch (parts.length) {
+		case 1: return {
+			left: parts[0],
+			right: parts[0]
+		};
+		case 2:
+		case 3: return {
+			left: parts[1],
+			right: parts[1]
+		};
+		case 4: return {
+			left: parts[3],
+			right: parts[1]
+		};
+		default: return {};
+	}
+}
+/**
+* Read horizontal padding (left + right) px from a parsed style root.
+* Percentages are skipped — they'd need a known container width.
+*/
+function horizontalPaddingPx(root) {
+	let left = null;
+	let right = null;
+	root.walkDecls((d) => {
+		switch (d.prop) {
+			case "padding": {
+				const { left: l, right: r } = shorthandSides(d.value);
+				if (l) left = lengthToPx(l);
+				if (r) right = lengthToPx(r);
+				break;
+			}
+			case "padding-left":
+				left = lengthToPx(d.value);
+				break;
+			case "padding-right":
+				right = lengthToPx(d.value);
+				break;
+		}
+	});
+	return (left ?? 0) + (right ?? 0);
+}
+/**
+* Extract a px length from a CSS border shorthand (e.g. `1px solid red` → 1).
+* Returns null when the value indicates no border — `none` or `hidden`.
+* Defaults to 3px (CSS `medium`) when a visible style is set but
+* no explicit width token is present in the shorthand value.
+*/
+function shorthandBorderWidthPx(value) {
+	const tokens = value.trim().split(/\s+/);
+	if (tokens.some((t) => NO_BORDER_STYLES.has(t.toLowerCase()))) return null;
+	for (const t of tokens) {
+		const px = lengthToPx(t);
+		if (px != null) return px;
+	}
+	return 3;
+}
+/**
+* Read horizontal border widths (left + right) px from a parsed style root.
+* Per-side `border-style: none|hidden` overrides count as zero
+* contribution. Returns total px or 0 when nothing resolves.
+*/
+function horizontalBorderPx(root) {
+	let left = null;
+	let right = null;
+	let leftNone = false;
+	let rightNone = false;
+	root.walkDecls((d) => {
+		switch (d.prop) {
+			case "border": {
+				const w = shorthandBorderWidthPx(d.value);
+				if (w == null) leftNone = rightNone = true;
+				else {
+					left = right = w;
+					leftNone = rightNone = false;
+				}
+				break;
+			}
+			case "border-width": {
+				const { left: l, right: r } = shorthandSides(d.value);
+				if (l) left = lengthToPx(l) ?? left;
+				if (r) right = lengthToPx(r) ?? right;
+				break;
+			}
+			case "border-style": {
+				const { left: l, right: r } = shorthandSides(d.value);
+				if (l && NO_BORDER_STYLES.has(l.toLowerCase())) leftNone = true;
+				if (r && NO_BORDER_STYLES.has(r.toLowerCase())) rightNone = true;
+				break;
+			}
+			case "border-left": {
+				const w = shorthandBorderWidthPx(d.value);
+				if (w == null) leftNone = true;
+				else {
+					left = w;
+					leftNone = false;
+				}
+				break;
+			}
+			case "border-right": {
+				const w = shorthandBorderWidthPx(d.value);
+				if (w == null) rightNone = true;
+				else {
+					right = w;
+					rightNone = false;
+				}
+				break;
+			}
+			case "border-left-width":
+				left = lengthToPx(d.value) ?? left;
+				break;
+			case "border-right-width":
+				right = lengthToPx(d.value) ?? right;
+				break;
+			case "border-left-style":
+				if (NO_BORDER_STYLES.has(d.value.trim().toLowerCase())) leftNone = true;
+				break;
+			case "border-right-style":
+				if (NO_BORDER_STYLES.has(d.value.trim().toLowerCase())) rightNone = true;
+				break;
+		}
+	});
+	return (leftNone ? 0 : left ?? 0) + (rightNone ? 0 : right ?? 0);
+}
 function depth(node) {
 	let d = 0;
 	let cur = node.parent;
@@ -38,36 +235,51 @@ function depth(node) {
 	}
 	return d;
 }
-function readWidthSource(el) {
+function readWidthFromRoot(root) {
+	const raw = firstDeclValue(root, "max-width") ?? firstDeclValue(root, "width") ?? firstDeclValue(root, "min-width");
+	return raw ? resolveLength(raw) : null;
+}
+function readHeightFromRoot(root) {
+	const raw = firstDeclValue(root, "max-height") ?? firstDeclValue(root, "height") ?? firstDeclValue(root, "min-height");
+	return raw ? resolveLength(raw) : null;
+}
+function readWidthSource(el, root) {
 	const explicit = el.attribs?.["data-maizzle-cw"];
 	if (explicit) {
 		const r = resolveLength(explicit);
 		if (r) return r;
 	}
-	return readWidthFromStyle(el);
+	return root ? readWidthFromRoot(root) : null;
 }
-function readWidthFromStyle(el) {
-	const style = el.attribs?.style ?? "";
-	const raw = style.match(RE_MAX_WIDTH)?.[1] ?? style.match(RE_WIDTH)?.[1] ?? style.match(RE_MIN_WIDTH)?.[1];
-	return raw ? resolveLength(raw) : null;
-}
-function readHeightFromStyle(el) {
-	const style = el.attribs?.style ?? "";
-	const raw = style.match(RE_MAX_HEIGHT)?.[1] ?? style.match(RE_HEIGHT)?.[1] ?? style.match(RE_MIN_HEIGHT)?.[1];
-	return raw ? resolveLength(raw) : null;
+/**
+* Convert a user-supplied length to absolute px against the column's source
+* width (post-inset). Percentages multiply against the source while
+* absolute units pass through `resolveLength`. Returns null when
+* the value or source can't be expressed in px.
+*/
+function userValueToPx(rawValue, sourcePx) {
+	const trimmed = rawValue.trim();
+	if (trimmed.match(/^([\d.]+)(px|rem|em|pt)$/i)) return resolveLength(trimmed);
+	const pctMatch = trimmed.match(/^([\d.]+)%$/);
+	if (!pctMatch || !sourcePx) return null;
+	const sourceMatch = sourcePx.match(/^([\d.]+)px$/);
+	if (!sourceMatch) return null;
+	const pct = parseFloat(pctMatch[1]);
+	const src = parseFloat(sourceMatch[1]);
+	return `${Math.round(pct / 100 * src)}px`;
 }
 /**
 * Resolve `__MAIZZLE_COLW_{id}__` and `__MAIZZLE_OH_{id}__` placeholders.
 *
 * COLW (column width) — emitted by `<Column>` and `<Overlap>`. Walks up to
-* the nearest ancestor marked with `data-maizzle-cw` (Container/Section/
-* Row/another Column already resolved) and divides by `data-maizzle-cw-count`.
-* If `data-maizzle-cw-self` is present, reads from the element's own inlined
-* `max-width`/`width`/`min-width` instead of walking up — used by `<Overlap>`
-* when it has its own width class/inline style.
+* the nearest ancestor marked `data-maizzle-cw` (Container, Section,
+* Row, or another Column already resolved) and divides the source
+* width by `data-maizzle-cw-count`. With `data-maizzle-cw-self`,
+* reads from the element's own inlined max/width/min-width
+* instead — used by `<Overlap>` with its own width class.
 *
-* OH (overlap height) — emitted by `<Overlap>`. Reads `max-height`/`height`/
-* `min-height` from the element's own inlined style.
+* OH (overlap height) — emitted by `<Overlap>`. Reads max-height, height,
+* or min-height from the element's own inlined style.
 *
 * Resolution rules:
 * - Style placeholders for `min-width`: replaced when resolvable, otherwise
@@ -77,10 +289,25 @@ function readHeightFromStyle(el) {
 * - Comment placeholders: same fallback chain.
 *
 * Resolved column widths are written back to `data-maizzle-cw` so nested
-* rows cascade. All `data-maizzle-cw*` and `data-maizzle-oh-*` attrs are
-* stripped at the end.
+* rows cascade. All `data-maizzle-cw*` and `data-maizzle-oh-*` are
+* stripped at the end of the second walk pass.
 */
 function columnWidth(dom) {
+	/**
+	* Cache parsed style ASTs for this columnWidth invocation. The walk-up
+	* loop visits the same Section/Container once per column of a Row,
+	* so without caching each column re-parses every ancestor's style.
+	* Cache is function-local — no cross-build leak via the WeakMap.
+	*/
+	const styleCache = /* @__PURE__ */ new WeakMap();
+	const parseElStyle = (el) => {
+		const cached = styleCache.get(el);
+		if (cached) return cached;
+		const style = el.attribs?.style ?? "";
+		const root = style ? safeParser(style) : postcss.root();
+		styleCache.set(el, root);
+		return root;
+	};
 	const columns = [];
 	const heightTargets = [];
 	walk(dom, (node) => {
@@ -107,32 +334,141 @@ function columnWidth(dom) {
 	columns.sort((a, b) => a.d - b.d);
 	const widthResolutions = /* @__PURE__ */ new Map();
 	const widthFallbacks = /* @__PURE__ */ new Map();
+	/**
+	* Column ids whose absolute user `width:` was promoted to `min-width:`
+	* — the original `width:` declaration must be stripped from the
+	* column's style (otherwise it'd compete with the min-width).
+	*/
+	const stripWidth = /* @__PURE__ */ new Set();
+	/**
+	* Column ids where the user wrote a percentage `width:` (e.g. `w-1/2`) —
+	* explicit opt-out of px-based stacking. Keep the user's `width: X%`
+	* and drop our `min-width:` placeholder so the column stays at
+	* that percentage of its parent forever and never stacks.
+	*/
+	const dropMinWidth = /* @__PURE__ */ new Set();
+	/**
+	* Column ids where the user wrote their own `min-width:` (via `min-w-1/3`).
+	* Juice inlines theirs after ours, so two `min-width:` decls land in
+	* the style — we strip the user's after using its value as the
+	* column's resolution, leaving our placeholder as last word.
+	*/
+	const stripUserMinWidth = /* @__PURE__ */ new Set();
+	/**
+	* Column ids where the user already supplied a `max-width:` of their own.
+	* Our default `max-width: 100%` would just be shadowed by it via
+	* last-wins and bloat the style — so we skip emitting it.
+	*/
+	const userHasMaxWidth = /* @__PURE__ */ new Set();
 	for (const { id, count } of columns) widthFallbacks.set(id, `${Math.round(100 / Math.max(count, 1))}%`);
 	for (const { el, id, count, self } of columns) {
+		const ownRoot = parseElStyle(el);
 		let sourceWidth = null;
-		if (self) sourceWidth = readWidthFromStyle(el);
-		else {
+		let accumulatedInsetPx = 0;
+		if (self) {
+			sourceWidth = readWidthFromRoot(ownRoot);
+			accumulatedInsetPx = horizontalPaddingPx(ownRoot) + horizontalBorderPx(ownRoot);
+		} else {
+			/**
+			* Walk up through every ancestor with attribs, accumulating horizontal
+			* padding+border along the way (including the source). Stop at the
+			* first `data-maizzle-cw` ancestor whose width is resolvable.
+			* Markers without a resolvable width (Row emitted empty after
+			* Tailwind dropped a bogus class) shouldn't shadow a real
+			* width on a higher ancestor like `<Container>`.
+			*
+			* With CSS content-box this is technically generous toward the
+			* source's own padding/border, but matches user expectations
+			* when they put `px-9` or `border-2` on a wrapper.
+			*/
 			let cur = el.parent;
 			while (cur) {
 				const parentEl = cur;
-				if (parentEl.attribs && "data-maizzle-cw" in parentEl.attribs) {
-					sourceWidth = readWidthSource(parentEl);
-					break;
+				if (parentEl.attribs) {
+					let pRoot = null;
+					if (parentEl.attribs.style) {
+						pRoot = parseElStyle(parentEl);
+						accumulatedInsetPx += horizontalPaddingPx(pRoot) + horizontalBorderPx(pRoot);
+					}
+					if ("data-maizzle-cw" in parentEl.attribs) {
+						const w = readWidthSource(parentEl, pRoot);
+						if (w) {
+							sourceWidth = w;
+							break;
+						}
+					}
 				}
 				cur = cur.parent ?? null;
 			}
 		}
-		if (sourceWidth) {
-			const div = divideLength(sourceWidth, count);
-			if (div) {
-				widthResolutions.set(id, div);
-				el.attribs["data-maizzle-cw"] = div;
+		const adjusted = sourceWidth ? subtractInsetPx(sourceWidth, accumulatedInsetPx) : null;
+		const countBased = adjusted ? divideLength(adjusted, count) : null;
+		/**
+		* Four user-override paths, decided by which CSS property the user
+		* actually wrote:
+		*
+		*   - `min-width: X` → user's value wins. Convert to px against
+		*                     the source (if %), use as the column's
+		*                     resolution, and strip the user's min-width
+		*                     declaration so our placeholder substitution
+		*                     remains the last `min-width:` in style.
+		*   - `width: X%`   → opt-out of px stacking. Keep `width:` in
+		*                     style, drop our `min-width:` placeholder.
+		*                     Cols stay at X% of parent forever, never stack.
+		*   - `width: Xpx` (or rem/em/pt) → fixed pixel column. Promote to
+		*                     `min-width:`, strip the original `width:` so
+		*                     it doesn't compete.
+		*   - `max-width: X` → CSS cap. Keep the `max-width:` declaration;
+		*                     clamp our count-based min-width *down* to
+		*                     the user's max-width when our min would
+		*                     otherwise violate it.
+		*/
+		const userMinRaw = findUserMinWidth(ownRoot);
+		const widthRaw = firstDeclValue(ownRoot, "width");
+		const maxRaw = firstDeclValue(ownRoot, "max-width");
+		if (userMinRaw) {
+			const minPx = userValueToPx(userMinRaw, adjusted) ?? resolveLength(userMinRaw);
+			if (minPx) {
+				widthResolutions.set(id, minPx);
+				el.attribs["data-maizzle-cw"] = minPx;
+				stripUserMinWidth.add(id);
+				continue;
 			}
 		}
+		if (widthRaw) {
+			const widthVal = resolveLength(widthRaw);
+			if (widthVal?.endsWith("%")) {
+				widthResolutions.set(id, widthVal);
+				el.attribs["data-maizzle-cw"] = widthVal;
+				dropMinWidth.add(id);
+				continue;
+			}
+			if (widthVal) {
+				widthResolutions.set(id, widthVal);
+				el.attribs["data-maizzle-cw"] = widthVal;
+				stripWidth.add(id);
+				continue;
+			}
+		}
+		if (maxRaw && countBased) {
+			const maxPx = userValueToPx(maxRaw, adjusted);
+			if (maxPx) {
+				const cappedMin = countBased.endsWith("px") ? minPxLength(countBased, maxPx) : maxPx;
+				widthResolutions.set(id, cappedMin);
+				el.attribs["data-maizzle-cw"] = cappedMin;
+				userHasMaxWidth.add(id);
+				continue;
+			}
+		}
+		if (countBased) {
+			widthResolutions.set(id, countBased);
+			el.attribs["data-maizzle-cw"] = countBased;
+		}
 	}
 	const heightResolutions = /* @__PURE__ */ new Map();
 	for (const { el, id } of heightTargets) {
-		const h = readHeightFromStyle(el);
+		if (!el.attribs?.style) continue;
+		const h = readHeightFromRoot(parseElStyle(el));
 		if (h) heightResolutions.set(id, h);
 	}
 	walk(dom, (node) => {
@@ -146,10 +482,55 @@ function columnWidth(dom) {
 		if (!el.attribs) return;
 		const style = el.attribs.style;
 		if (style && (style.includes("__MAIZZLE_COLW_") || style.includes("__MAIZZLE_OH_"))) {
-			let next = style.replace(/(?:^|;\s*)min-width:\s*__MAIZZLE_COLW_([^_]+)__\s*;?/g, (_m, mid) => widthResolutions.has(mid) ? `; min-width: ${widthResolutions.get(mid)}` : "");
-			next = next.replace(/__MAIZZLE_COLW_([^_]+)__/g, (_m, mid) => widthResolutions.get(mid) ?? widthFallbacks.get(mid) ?? "100%").replace(/__MAIZZLE_OH_([^_]+)__/g, (_m, hid) => heightResolutions.get(hid) ?? "100%");
-			next = next.replace(/^;\s*/, "").replace(/;\s*$/, "").trim();
-			if (next) el.attribs.style = next;
+			const root = parseElStyle(el);
+			const cwId = el.attribs["data-maizzle-cw-id"];
+			/**
+			* Strip user dups BEFORE substitution — last-wins CSS would
+			* otherwise shadow our resolved values in the output.
+			*/
+			if (cwId && stripUserMinWidth.has(cwId)) root.walkDecls("min-width", (d) => {
+				if (!d.value.includes("__MAIZZLE_COLW_")) d.remove();
+			});
+			if (cwId && stripWidth.has(cwId)) root.walkDecls("width", (d) => {
+				d.remove();
+			});
+			/**
+			* Substitute the column's `min-width:` placeholder with `width: <res>;
+			* max-width: 100%`. Width gives the same stacking trigger as
+			* min-width — inline-block wraps when children sum > parent
+			* — and the `max-width: 100%` clamp keeps the column from
+			* overflowing the viewport once it drops to its own row on
+			* mobile. Skip the clamp when the user supplied their own.
+			*
+			* Other placeholders (Overlap td `width`, comment markers,
+			* OH height) get a plain value substitution.
+			*/
+			root.walkDecls((d) => {
+				if (d.prop === "min-width") {
+					const m = d.value.match(/^__MAIZZLE_COLW_([^_]+)__$/);
+					if (m) {
+						const mid = m[1];
+						if (dropMinWidth.has(mid) || !widthResolutions.has(mid)) {
+							d.remove();
+							return;
+						}
+						const resolved = widthResolutions.get(mid);
+						const repl = [postcss.decl({
+							prop: "width",
+							value: resolved
+						})];
+						if (!userHasMaxWidth.has(mid)) repl.push(postcss.decl({
+							prop: "max-width",
+							value: "100%"
+						}));
+						d.replaceWith(...repl);
+						return;
+					}
+				}
+				if (d.value.includes("__MAIZZLE_COLW_") || d.value.includes("__MAIZZLE_OH_")) d.value = d.value.replace(/__MAIZZLE_COLW_([^_]+)__/g, (_m, mid) => widthResolutions.get(mid) ?? widthFallbacks.get(mid) ?? "100%").replace(/__MAIZZLE_OH_([^_]+)__/g, (_m, hid) => heightResolutions.get(hid) ?? "100%");
+			});
+			const out = serializeStyle(root);
+			if (out) el.attribs.style = out;
 			else delete el.attribs.style;
 		}
 		delete el.attribs["data-maizzle-cw"];