@maizzle/framework 6.0.0-rc.12 → 6.0.0-rc.14

package/dist/transformers/addAttributes.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"addAttributes.mjs","names":["merge"],"sources":["../../src/transformers/addAttributes.ts"],"sourcesContent":["import { defu as merge } from 'defu'\nimport type { ChildNode, Element } from 'domhandler'\nimport { walk } from '../utils/ast/index.ts'\nimport type { AttributesConfig } from '../types/config.ts'\n\n/**\n * Default attributes to add to elements.\n */\nconst DEFAULT_ATTRIBUTES: Record<string, Record<string, string | boolean | number>> = {\n  table: {\n    cellpadding: 0,\n    cellspacing: 0,\n    role: 'none',\n  },\n  img: {\n    alt: '',\n  },\n}\n\n/**\n * Add attributes transformer.\n *\n * Automatically adds attributes to HTML elements based on CSS selectors.\n *\n * Default attributes (can be disabled by setting `attributes.add` to false):\n * - table: cellpadding=\"0\", cellspacing=\"0\", role=\"none\"\n * - img: alt=\"\"\n *\n * Supports tag, class, id, and attribute selectors.\n * Multiple selectors can be specified by comma-separating them.\n *\n * Examples:\n * ```js\n * attributes: {\n *   add: {\n *     div: { role: 'article' },\n *     '.test': { editable: true },\n *     '#header': { 'data-id': 'main' },\n *     'div, p': { class: 'content' },\n *   }\n * }\n * ```\n */\nexport function addAttributes(dom: ChildNode[], config: AttributesConfig = {}): ChildNode[] {\n  const addConfig = config.add\n\n  // Disabled when explicitly set to false\n  if (addConfig === false) {\n    return dom\n  }\n\n  // Deep merge user attributes on top of defaults using defu\n  const userAttributes = typeof addConfig === 'object' ? addConfig : {}\n  const attributesToAdd = merge(userAttributes, DEFAULT_ATTRIBUTES) as Record<string, Record<string, string | boolean | number>>\n\n  if (Object.keys(attributesToAdd).length === 0) {\n    return dom\n  }\n\n  // Process each selector pattern\n  for (const [selectorPattern, attributes] of Object.entries(attributesToAdd)) {\n    // Split by comma for multiple selectors\n    const selectors = selectorPattern.split(',').map(s => s.trim())\n\n    walk(dom, (node) => {\n      const el = node as Element\n      if (!el.name) return\n\n      // Check if element matches any selector in the pattern\n      const matches = selectors.some(selector => elementMatches(el, selector))\n\n      if (matches) {\n        // Initialize attribs if needed\n        if (!el.attribs) {\n          el.attribs = {}\n        }\n\n        for (const [attrName, attrValue] of Object.entries(attributes)) {\n          // Special handling for class - merge instead of replace\n          if (attrName === 'class' && el.attribs.class) {\n            const existingClasses = el.attribs.class.split(/\\s+/).filter(Boolean)\n            const newClasses = String(attrValue).split(/\\s+/).filter(Boolean)\n            const mergedClasses = [...new Set([...existingClasses, ...newClasses])]\n            if (mergedClasses.join(' ') !== el.attribs.class) {\n              el.attribs.class = mergedClasses.join(' ')\n            }\n          } else {\n            // Only add attribute if not already present\n            if (!(attrName in el.attribs)) {\n              el.attribs[attrName] = String(attrValue)\n            }\n          }\n        }\n      }\n    })\n  }\n\n  return dom\n}\n\n/**\n * Check if an element matches a CSS selector.\n * Supports: tag, .class, #id, [attribute], [attribute=value]\n */\nfunction elementMatches(el: Element, selector: string): boolean {\n  // Remove whitespace\n  selector = selector.trim()\n\n  // Check for attribute selector [attr] or [attr=value]\n  const attrMatch = selector.match(/^\\[([^\\]=]+)(?:=([^\\]]*))?\\]$/)\n  if (attrMatch) {\n    const [, attrName, attrValue] = attrMatch\n    if (attrValue === undefined) {\n      // Just checking if attribute exists\n      return attrName in (el.attribs || {})\n    } else {\n      // Check if attribute has specific value\n      return el.attribs?.[attrName] === attrValue\n    }\n  }\n\n  // Check for class selector .class\n  if (selector.startsWith('.')) {\n    const className = selector.slice(1)\n    const classes = el.attribs?.class?.split(/\\s+/) || []\n    return classes.includes(className)\n  }\n\n  // Check for id selector #id\n  if (selector.startsWith('#')) {\n    const id = selector.slice(1)\n    return el.attribs?.id === id\n  }\n\n  // Check for tag selector (possibly with attribute)\n  // Split tag from attribute if present, e.g., \"div[role=alert]\"\n  const tagAttrMatch = selector.match(/^([a-z][a-z0-9]*)\\[([^\\]]+)\\]$/i)\n  if (tagAttrMatch) {\n    const [, tagName, attrPart] = tagAttrMatch\n    if (el.name !== tagName) return false\n\n    // Parse attribute part: could be \"attr\" or \"attr=value\"\n    const attrEqMatch = attrPart.match(/^([^=]+)(?:=(.*))?$/)\n    if (attrEqMatch) {\n      const [, attrName, attrValue] = attrEqMatch\n      if (attrValue === undefined) {\n        return attrName in (el.attribs || {})\n      } else {\n        return el.attribs?.[attrName] === attrValue\n      }\n    }\n    return false\n  }\n\n  // Simple tag selector\n  return el.name === selector\n}\n"],"mappings":";;;;;;;;AAQA,MAAM,qBAAgF;CACpF,OAAO;EACL,aAAa;EACb,aAAa;EACb,MAAM;EACP;CACD,KAAK,EACH,KAAK,IACN;CACF;;;;;;;;;;;;;;;;;;;;;;;;;AA0BD,SAAgB,cAAc,KAAkB,SAA2B,EAAE,EAAe;CAC1F,MAAM,YAAY,OAAO;AAGzB,KAAI,cAAc,MAChB,QAAO;CAKT,MAAM,kBAAkBA,KADD,OAAO,cAAc,WAAW,YAAY,EAAE,EACvB,mBAAmB;AAEjE,KAAI,OAAO,KAAK,gBAAgB,CAAC,WAAW,EAC1C,QAAO;AAIT,MAAK,MAAM,CAAC,iBAAiB,eAAe,OAAO,QAAQ,gBAAgB,EAAE;EAE3E,MAAM,YAAY,gBAAgB,MAAM,IAAI,CAAC,KAAI,MAAK,EAAE,MAAM,CAAC;AAE/D,OAAK,MAAM,SAAS;GAClB,MAAM,KAAK;AACX,OAAI,CAAC,GAAG,KAAM;AAKd,OAFgB,UAAU,MAAK,aAAY,eAAe,IAAI,SAAS,CAAC,EAE3D;AAEX,QAAI,CAAC,GAAG,QACN,IAAG,UAAU,EAAE;AAGjB,SAAK,MAAM,CAAC,UAAU,cAAc,OAAO,QAAQ,WAAW,CAE5D,KAAI,aAAa,WAAW,GAAG,QAAQ,OAAO;KAC5C,MAAM,kBAAkB,GAAG,QAAQ,MAAM,MAAM,MAAM,CAAC,OAAO,QAAQ;KACrE,MAAM,aAAa,OAAO,UAAU,CAAC,MAAM,MAAM,CAAC,OAAO,QAAQ;KACjE,MAAM,gBAAgB,CAAC,GAAG,IAAI,IAAI,CAAC,GAAG,iBAAiB,GAAG,WAAW,CAAC,CAAC;AACvE,SAAI,cAAc,KAAK,IAAI,KAAK,GAAG,QAAQ,MACzC,IAAG,QAAQ,QAAQ,cAAc,KAAK,IAAI;eAIxC,EAAE,YAAY,GAAG,SACnB,IAAG,QAAQ,YAAY,OAAO,UAAU;;IAKhD;;AAGJ,QAAO;;;;;;AAOT,SAAS,eAAe,IAAa,UAA2B;AAE9D,YAAW,SAAS,MAAM;CAG1B,MAAM,YAAY,SAAS,MAAM,gCAAgC;AACjE,KAAI,WAAW;EACb,MAAM,GAAG,UAAU,aAAa;AAChC,MAAI,cAAc,OAEhB,QAAO,aAAa,GAAG,WAAW,EAAE;MAGpC,QAAO,GAAG,UAAU,cAAc;;AAKtC,KAAI,SAAS,WAAW,IAAI,EAAE;EAC5B,MAAM,YAAY,SAAS,MAAM,EAAE;AAEnC,UADgB,GAAG,SAAS,OAAO,MAAM,MAAM,IAAI,EAAE,EACtC,SAAS,UAAU;;AAIpC,KAAI,SAAS,WAAW,IAAI,EAAE;EAC5B,MAAM,KAAK,SAAS,MAAM,EAAE;AAC5B,SAAO,GAAG,SAAS,OAAO;;CAK5B,MAAM,eAAe,SAAS,MAAM,kCAAkC;AACtE,KAAI,cAAc;EAChB,MAAM,GAAG,SAAS,YAAY;AAC9B,MAAI,GAAG,SAAS,QAAS,QAAO;EAGhC,MAAM,cAAc,SAAS,MAAM,sBAAsB;AACzD,MAAI,aAAa;GACf,MAAM,GAAG,UAAU,aAAa;AAChC,OAAI,cAAc,OAChB,QAAO,aAAa,GAAG,WAAW,EAAE;OAEpC,QAAO,GAAG,UAAU,cAAc;;AAGtC,SAAO;;AAIT,QAAO,GAAG,SAAS"}
+{"version":3,"file":"addAttributes.mjs","names":["merge"],"sources":["../../src/transformers/addAttributes.ts"],"sourcesContent":["import { defu as merge } from 'defu'\nimport type { ChildNode, Element } from 'domhandler'\nimport { walk } from '../utils/ast/index.ts'\nimport type { AttributesConfig } from '../types/config.ts'\n\n/**\n * Default attributes to add to elements.\n */\nconst DEFAULT_ATTRIBUTES: Record<string, Record<string, string | boolean | number>> = {\n  table: {\n    cellpadding: 0,\n    cellspacing: 0,\n    role: 'none',\n  },\n  img: {\n    alt: '',\n  },\n}\n\n/**\n * Add attributes transformer.\n *\n * Automatically adds attributes to HTML elements based on CSS selectors.\n *\n * Default attributes (can be disabled by setting `attributes.add` to false):\n * - table: cellpadding=\"0\", cellspacing=\"0\", role=\"none\"\n * - img: alt=\"\"\n *\n * Supports tag, class, id, and attribute selectors.\n * Multiple selectors can be specified by comma-separating them.\n *\n * Examples:\n * ```js\n * attributes: {\n *   add: {\n *     div: { role: 'article' },\n *     '.test': { editable: true },\n *     '#header': { 'data-id': 'main' },\n *     'div, p': { class: 'content' },\n *   }\n * }\n * ```\n */\nexport function addAttributes(dom: ChildNode[], config: AttributesConfig = {}): ChildNode[] {\n  const addConfig = config.add\n\n  // Disabled when explicitly set to false\n  if (addConfig === false) {\n    return dom\n  }\n\n  // Deep merge user attributes on top of defaults using defu\n  const userAttributes = typeof addConfig === 'object' ? addConfig : {}\n  const attributesToAdd = merge(userAttributes, DEFAULT_ATTRIBUTES) as Record<string, false | Record<string, false | string | boolean | number>>\n\n  if (Object.keys(attributesToAdd).length === 0) {\n    return dom\n  }\n\n  // Process each selector pattern\n  for (const [selectorPattern, attributes] of Object.entries(attributesToAdd)) {\n    // User opted out of this selector entirely (e.g. `table: false`)\n    if (attributes === false) continue\n    // Split by comma for multiple selectors\n    const selectors = selectorPattern.split(',').map(s => s.trim())\n\n    walk(dom, (node) => {\n      const el = node as Element\n      if (!el.name) return\n\n      // Check if element matches any selector in the pattern\n      const matches = selectors.some(selector => elementMatches(el, selector))\n\n      if (matches) {\n        // Initialize attribs if needed\n        if (!el.attribs) {\n          el.attribs = {}\n        }\n\n        for (const [attrName, attrValue] of Object.entries(attributes)) {\n          // User opted out of this specific attribute (e.g. `role: false`)\n          if (attrValue === false) continue\n          // Special handling for class - merge instead of replace\n          if (attrName === 'class' && el.attribs.class) {\n            const existingClasses = el.attribs.class.split(/\\s+/).filter(Boolean)\n            const newClasses = String(attrValue).split(/\\s+/).filter(Boolean)\n            const mergedClasses = [...new Set([...existingClasses, ...newClasses])]\n            if (mergedClasses.join(' ') !== el.attribs.class) {\n              el.attribs.class = mergedClasses.join(' ')\n            }\n          } else {\n            // Only add attribute if not already present\n            if (!(attrName in el.attribs)) {\n              el.attribs[attrName] = String(attrValue)\n            }\n          }\n        }\n      }\n    })\n  }\n\n  return dom\n}\n\n/**\n * Check if an element matches a CSS selector.\n * Supports: tag, .class, #id, [attribute], [attribute=value]\n */\nfunction elementMatches(el: Element, selector: string): boolean {\n  // Remove whitespace\n  selector = selector.trim()\n\n  // Check for attribute selector [attr] or [attr=value]\n  const attrMatch = selector.match(/^\\[([^\\]=]+)(?:=([^\\]]*))?\\]$/)\n  if (attrMatch) {\n    const [, attrName, attrValue] = attrMatch\n    if (attrValue === undefined) {\n      // Just checking if attribute exists\n      return attrName in (el.attribs || {})\n    } else {\n      // Check if attribute has specific value\n      return el.attribs?.[attrName] === attrValue\n    }\n  }\n\n  // Check for class selector .class\n  if (selector.startsWith('.')) {\n    const className = selector.slice(1)\n    const classes = el.attribs?.class?.split(/\\s+/) || []\n    return classes.includes(className)\n  }\n\n  // Check for id selector #id\n  if (selector.startsWith('#')) {\n    const id = selector.slice(1)\n    return el.attribs?.id === id\n  }\n\n  // Check for tag selector (possibly with attribute)\n  // Split tag from attribute if present, e.g., \"div[role=alert]\"\n  const tagAttrMatch = selector.match(/^([a-z][a-z0-9]*)\\[([^\\]]+)\\]$/i)\n  if (tagAttrMatch) {\n    const [, tagName, attrPart] = tagAttrMatch\n    if (el.name !== tagName) return false\n\n    // Parse attribute part: could be \"attr\" or \"attr=value\"\n    const attrEqMatch = attrPart.match(/^([^=]+)(?:=(.*))?$/)\n    if (attrEqMatch) {\n      const [, attrName, attrValue] = attrEqMatch\n      if (attrValue === undefined) {\n        return attrName in (el.attribs || {})\n      } else {\n        return el.attribs?.[attrName] === attrValue\n      }\n    }\n    return false\n  }\n\n  // Simple tag selector\n  return el.name === selector\n}\n"],"mappings":";;;;;;;;AAQA,MAAM,qBAAgF;CACpF,OAAO;EACL,aAAa;EACb,aAAa;EACb,MAAM;EACP;CACD,KAAK,EACH,KAAK,IACN;CACF;;;;;;;;;;;;;;;;;;;;;;;;;AA0BD,SAAgB,cAAc,KAAkB,SAA2B,EAAE,EAAe;CAC1F,MAAM,YAAY,OAAO;AAGzB,KAAI,cAAc,MAChB,QAAO;CAKT,MAAM,kBAAkBA,KADD,OAAO,cAAc,WAAW,YAAY,EAAE,EACvB,mBAAmB;AAEjE,KAAI,OAAO,KAAK,gBAAgB,CAAC,WAAW,EAC1C,QAAO;AAIT,MAAK,MAAM,CAAC,iBAAiB,eAAe,OAAO,QAAQ,gBAAgB,EAAE;AAE3E,MAAI,eAAe,MAAO;EAE1B,MAAM,YAAY,gBAAgB,MAAM,IAAI,CAAC,KAAI,MAAK,EAAE,MAAM,CAAC;AAE/D,OAAK,MAAM,SAAS;GAClB,MAAM,KAAK;AACX,OAAI,CAAC,GAAG,KAAM;AAKd,OAFgB,UAAU,MAAK,aAAY,eAAe,IAAI,SAAS,CAAC,EAE3D;AAEX,QAAI,CAAC,GAAG,QACN,IAAG,UAAU,EAAE;AAGjB,SAAK,MAAM,CAAC,UAAU,cAAc,OAAO,QAAQ,WAAW,EAAE;AAE9D,SAAI,cAAc,MAAO;AAEzB,SAAI,aAAa,WAAW,GAAG,QAAQ,OAAO;MAC5C,MAAM,kBAAkB,GAAG,QAAQ,MAAM,MAAM,MAAM,CAAC,OAAO,QAAQ;MACrE,MAAM,aAAa,OAAO,UAAU,CAAC,MAAM,MAAM,CAAC,OAAO,QAAQ;MACjE,MAAM,gBAAgB,CAAC,GAAG,IAAI,IAAI,CAAC,GAAG,iBAAiB,GAAG,WAAW,CAAC,CAAC;AACvE,UAAI,cAAc,KAAK,IAAI,KAAK,GAAG,QAAQ,MACzC,IAAG,QAAQ,QAAQ,cAAc,KAAK,IAAI;gBAIxC,EAAE,YAAY,GAAG,SACnB,IAAG,QAAQ,YAAY,OAAO,UAAU;;;IAKhD;;AAGJ,QAAO;;;;;;AAOT,SAAS,eAAe,IAAa,UAA2B;AAE9D,YAAW,SAAS,MAAM;CAG1B,MAAM,YAAY,SAAS,MAAM,gCAAgC;AACjE,KAAI,WAAW;EACb,MAAM,GAAG,UAAU,aAAa;AAChC,MAAI,cAAc,OAEhB,QAAO,aAAa,GAAG,WAAW,EAAE;MAGpC,QAAO,GAAG,UAAU,cAAc;;AAKtC,KAAI,SAAS,WAAW,IAAI,EAAE;EAC5B,MAAM,YAAY,SAAS,MAAM,EAAE;AAEnC,UADgB,GAAG,SAAS,OAAO,MAAM,MAAM,IAAI,EAAE,EACtC,SAAS,UAAU;;AAIpC,KAAI,SAAS,WAAW,IAAI,EAAE;EAC5B,MAAM,KAAK,SAAS,MAAM,EAAE;AAC5B,SAAO,GAAG,SAAS,OAAO;;CAK5B,MAAM,eAAe,SAAS,MAAM,kCAAkC;AACtE,KAAI,cAAc;EAChB,MAAM,GAAG,SAAS,YAAY;AAC9B,MAAI,GAAG,SAAS,QAAS,QAAO;EAGhC,MAAM,cAAc,SAAS,MAAM,sBAAsB;AACzD,MAAI,aAAa;GACf,MAAM,GAAG,UAAU,aAAa;AAChC,OAAI,cAAc,OAChB,QAAO,aAAa,GAAG,WAAW,EAAE;OAEpC,QAAO,GAAG,UAAU,cAAc;;AAGtC,SAAO;;AAIT,QAAO,GAAG,SAAS"}

package/dist/transformers/columnWidth.d.mts

@@ -0,0 +1,31 @@
+import { ChildNode } from "domhandler";
+
+//#region src/transformers/columnWidth.d.ts
+/**
+ * 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.
+ *
+ * OH (overlap height) — emitted by `<Overlap>`. Reads `max-height`/`height`/
+ * `min-height` from the element's own inlined style.
+ *
+ * Resolution rules:
+ * - Style placeholders for `min-width`: replaced when resolvable, otherwise
+ *   the entire `min-width` declaration is stripped.
+ * - Other style placeholders (Overlap td `width`, etc.): replaced when
+ *   resolvable, otherwise replaced with the count-based fallback or `100%`.
+ * - 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.
+ */
+declare function columnWidth(dom: ChildNode[]): ChildNode[];
+//#endregion
+export { columnWidth };
+//# sourceMappingURL=columnWidth.d.mts.map

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

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

package/dist/transformers/columnWidth.mjs

@@ -0,0 +1,166 @@
+import { walk } from "../utils/ast/walker.mjs";
+import "../utils/ast/index.mjs";
+
+//#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.]+%$/;
+function resolveLength(value) {
+	const trimmed = value.trim();
+	if (RE_PERCENT.test(trimmed)) return trimmed;
+	const m = trimmed.match(/^([\d.]+)(px|rem|em|pt)?$/i);
+	if (!m) return null;
+	const n = parseFloat(m[1]);
+	switch ((m[2] || "px").toLowerCase()) {
+		case "px": return `${Math.round(n)}px`;
+		case "rem":
+		case "em": return `${Math.round(n * 16)}px`;
+		case "pt": return `${Math.round(n * 1.333)}px`;
+		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 depth(node) {
+	let d = 0;
+	let cur = node.parent;
+	while (cur) {
+		d++;
+		cur = cur.parent ?? null;
+	}
+	return d;
+}
+function readWidthSource(el) {
+	const explicit = el.attribs?.["data-maizzle-cw"];
+	if (explicit) {
+		const r = resolveLength(explicit);
+		if (r) return r;
+	}
+	return readWidthFromStyle(el);
+}
+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;
+}
+/**
+* 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.
+*
+* OH (overlap height) — emitted by `<Overlap>`. Reads `max-height`/`height`/
+* `min-height` from the element's own inlined style.
+*
+* Resolution rules:
+* - Style placeholders for `min-width`: replaced when resolvable, otherwise
+*   the entire `min-width` declaration is stripped.
+* - Other style placeholders (Overlap td `width`, etc.): replaced when
+*   resolvable, otherwise replaced with the count-based fallback or `100%`.
+* - 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.
+*/
+function columnWidth(dom) {
+	const columns = [];
+	const heightTargets = [];
+	walk(dom, (node) => {
+		const el = node;
+		if (!el.attribs) return;
+		const id = el.attribs["data-maizzle-cw-id"];
+		if (id) {
+			const count = parseInt(el.attribs["data-maizzle-cw-count"] || "1", 10);
+			const self = "data-maizzle-cw-self" in el.attribs;
+			columns.push({
+				el,
+				id,
+				count,
+				d: depth(node),
+				self
+			});
+		}
+		const ohId = el.attribs["data-maizzle-oh-id"];
+		if (ohId) heightTargets.push({
+			el,
+			id: ohId
+		});
+	});
+	columns.sort((a, b) => a.d - b.d);
+	const widthResolutions = /* @__PURE__ */ new Map();
+	const widthFallbacks = /* @__PURE__ */ new Map();
+	for (const { id, count } of columns) widthFallbacks.set(id, `${Math.round(100 / Math.max(count, 1))}%`);
+	for (const { el, id, count, self } of columns) {
+		let sourceWidth = null;
+		if (self) sourceWidth = readWidthFromStyle(el);
+		else {
+			let cur = el.parent;
+			while (cur) {
+				const parentEl = cur;
+				if (parentEl.attribs && "data-maizzle-cw" in parentEl.attribs) {
+					sourceWidth = readWidthSource(parentEl);
+					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 heightResolutions = /* @__PURE__ */ new Map();
+	for (const { el, id } of heightTargets) {
+		const h = readHeightFromStyle(el);
+		if (h) heightResolutions.set(id, h);
+	}
+	walk(dom, (node) => {
+		if (node.type === "comment") {
+			const data = node.data;
+			if (!data || !data.includes("__MAIZZLE_COLW_") && !data.includes("__MAIZZLE_OH_")) return;
+			node.data = data.replace(/__MAIZZLE_COLW_([^_]+)__/g, (_m, mid) => widthResolutions.get(mid) ?? widthFallbacks.get(mid) ?? "100%").replace(/__MAIZZLE_OH_([^_]+)__/g, (_m, hid) => heightResolutions.get(hid) ?? "100%");
+			return;
+		}
+		const el = node;
+		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;
+			else delete el.attribs.style;
+		}
+		delete el.attribs["data-maizzle-cw"];
+		delete el.attribs["data-maizzle-cw-id"];
+		delete el.attribs["data-maizzle-cw-count"];
+		delete el.attribs["data-maizzle-cw-self"];
+		delete el.attribs["data-maizzle-oh-id"];
+	});
+	return dom;
+}
+
+//#endregion
+export { columnWidth };
+//# sourceMappingURL=columnWidth.mjs.map

package/dist/transformers/columnWidth.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"columnWidth.mjs","names":[],"sources":["../../src/transformers/columnWidth.ts"],"sourcesContent":["import { walk } from '../utils/ast/index.ts'\nimport type { ChildNode, Element, ParentNode } from 'domhandler'\n\nconst RE_MAX_WIDTH = /(?:^|;\\s*)max-width:\\s*([^;]+)/i\nconst RE_WIDTH = /(?:^|;\\s*)width:\\s*([^;]+)/i\nconst RE_MIN_WIDTH = /(?:^|;\\s*)min-width:\\s*([^;]+)/i\nconst RE_MAX_HEIGHT = /(?:^|;\\s*)max-height:\\s*([^;]+)/i\nconst RE_HEIGHT = /(?:^|;\\s*)height:\\s*([^;]+)/i\nconst RE_MIN_HEIGHT = /(?:^|;\\s*)min-height:\\s*([^;]+)/i\nconst RE_PERCENT = /^[\\d.]+%$/\n\nfunction resolveLength(value: string): string | null {\n  const trimmed = value.trim()\n  if (RE_PERCENT.test(trimmed)) return trimmed\n  const m = trimmed.match(/^([\\d.]+)(px|rem|em|pt)?$/i)\n  if (!m) return null\n  const n = parseFloat(m[1])\n  switch ((m[2] || 'px').toLowerCase()) {\n    case 'px': return `${Math.round(n)}px`\n    case 'rem':\n    case 'em': return `${Math.round(n * 16)}px`\n    case 'pt': return `${Math.round(n * 1.333)}px`\n    default: return null\n  }\n}\n\nfunction divideLength(value: string, divisor: number): string | null {\n  const m = value.match(/^([\\d.]+)(px|%)$/)\n  if (!m || divisor < 1) return null\n  const n = parseFloat(m[1])\n  return `${parseFloat((n / divisor).toFixed(2))}${m[2]}`\n}\n\nfunction depth(node: ChildNode): number {\n  let d = 0\n  let cur: ParentNode | null = node.parent\n  while (cur) {\n    d++\n    cur = (cur as any).parent ?? null\n  }\n  return d\n}\n\nfunction readWidthSource(el: Element): string | null {\n  const explicit = el.attribs?.['data-maizzle-cw']\n  if (explicit) {\n    const r = resolveLength(explicit)\n    if (r) return r\n  }\n  return readWidthFromStyle(el)\n}\n\nfunction readWidthFromStyle(el: Element): string | null {\n  const style = el.attribs?.style ?? ''\n  const raw = style.match(RE_MAX_WIDTH)?.[1]\n    ?? style.match(RE_WIDTH)?.[1]\n    ?? style.match(RE_MIN_WIDTH)?.[1]\n  return raw ? resolveLength(raw) : null\n}\n\nfunction readHeightFromStyle(el: Element): string | null {\n  const style = el.attribs?.style ?? ''\n  const raw = style.match(RE_MAX_HEIGHT)?.[1]\n    ?? style.match(RE_HEIGHT)?.[1]\n    ?? style.match(RE_MIN_HEIGHT)?.[1]\n  return raw ? resolveLength(raw) : null\n}\n\n/**\n * Resolve `__MAIZZLE_COLW_{id}__` and `__MAIZZLE_OH_{id}__` placeholders.\n *\n * COLW (column width) — emitted by `<Column>` and `<Overlap>`. Walks up to\n * the nearest ancestor marked with `data-maizzle-cw` (Container/Section/\n * Row/another Column already resolved) and divides by `data-maizzle-cw-count`.\n * If `data-maizzle-cw-self` is present, reads from the element's own inlined\n * `max-width`/`width`/`min-width` instead of walking up — used by `<Overlap>`\n * when it has its own width class/inline style.\n *\n * OH (overlap height) — emitted by `<Overlap>`. Reads `max-height`/`height`/\n * `min-height` from the element's own inlined style.\n *\n * Resolution rules:\n * - Style placeholders for `min-width`: replaced when resolvable, otherwise\n *   the entire `min-width` declaration is stripped.\n * - Other style placeholders (Overlap td `width`, etc.): replaced when\n *   resolvable, otherwise replaced with the count-based fallback or `100%`.\n * - Comment placeholders: same fallback chain.\n *\n * Resolved column widths are written back to `data-maizzle-cw` so nested\n * rows cascade. All `data-maizzle-cw*` and `data-maizzle-oh-*` attrs are\n * stripped at the end.\n */\nexport function columnWidth(dom: ChildNode[]): ChildNode[] {\n  const columns: { el: Element; id: string; count: number; d: number; self: boolean }[] = []\n  const heightTargets: { el: Element; id: string }[] = []\n\n  walk(dom, (node) => {\n    const el = node as Element\n    if (!el.attribs) return\n\n    const id = el.attribs['data-maizzle-cw-id']\n    if (id) {\n      const count = parseInt(el.attribs['data-maizzle-cw-count'] || '1', 10)\n      const self = 'data-maizzle-cw-self' in el.attribs\n      columns.push({ el, id, count, d: depth(node), self })\n    }\n\n    const ohId = el.attribs['data-maizzle-oh-id']\n    if (ohId) heightTargets.push({ el, id: ohId })\n  })\n\n  columns.sort((a, b) => a.d - b.d)\n\n  const widthResolutions = new Map<string, string>()\n  const widthFallbacks = new Map<string, string>()\n\n  for (const { id, count } of columns) {\n    widthFallbacks.set(id, `${Math.round(100 / Math.max(count, 1))}%`)\n  }\n\n  for (const { el, id, count, self } of columns) {\n    let sourceWidth: string | null = null\n\n    if (self) {\n      sourceWidth = readWidthFromStyle(el)\n    } else {\n      let cur: ParentNode | null = el.parent\n      while (cur) {\n        const parentEl = cur as Element\n        if (parentEl.attribs && 'data-maizzle-cw' in parentEl.attribs) {\n          sourceWidth = readWidthSource(parentEl)\n          break\n        }\n        cur = (cur as any).parent ?? null\n      }\n    }\n\n    if (sourceWidth) {\n      const div = divideLength(sourceWidth, count)\n      if (div) {\n        widthResolutions.set(id, div)\n        el.attribs['data-maizzle-cw'] = div\n      }\n    }\n  }\n\n  const heightResolutions = new Map<string, string>()\n  for (const { el, id } of heightTargets) {\n    const h = readHeightFromStyle(el)\n    if (h) heightResolutions.set(id, h)\n  }\n\n  walk(dom, (node) => {\n    if (node.type === 'comment') {\n      const data = (node as any).data as string\n      if (!data || (!data.includes('__MAIZZLE_COLW_') && !data.includes('__MAIZZLE_OH_'))) return\n      ;(node as any).data = data\n        .replace(/__MAIZZLE_COLW_([^_]+)__/g,\n          (_m, mid) => widthResolutions.get(mid) ?? widthFallbacks.get(mid) ?? '100%')\n        .replace(/__MAIZZLE_OH_([^_]+)__/g,\n          (_m, hid) => heightResolutions.get(hid) ?? '100%')\n      return\n    }\n\n    const el = node as Element\n    if (!el.attribs) return\n\n    const style = el.attribs.style\n    if (style && (style.includes('__MAIZZLE_COLW_') || style.includes('__MAIZZLE_OH_'))) {\n      let next = style.replace(\n        /(?:^|;\\s*)min-width:\\s*__MAIZZLE_COLW_([^_]+)__\\s*;?/g,\n        (_m, mid) => widthResolutions.has(mid) ? `; min-width: ${widthResolutions.get(mid)}` : ''\n      )\n      next = next\n        .replace(/__MAIZZLE_COLW_([^_]+)__/g,\n          (_m, mid) => widthResolutions.get(mid) ?? widthFallbacks.get(mid) ?? '100%')\n        .replace(/__MAIZZLE_OH_([^_]+)__/g,\n          (_m, hid) => heightResolutions.get(hid) ?? '100%')\n      next = next.replace(/^;\\s*/, '').replace(/;\\s*$/, '').trim()\n      if (next) el.attribs.style = next\n      else delete el.attribs.style\n    }\n\n    delete el.attribs['data-maizzle-cw']\n    delete el.attribs['data-maizzle-cw-id']\n    delete el.attribs['data-maizzle-cw-count']\n    delete el.attribs['data-maizzle-cw-self']\n    delete el.attribs['data-maizzle-oh-id']\n  })\n\n  return dom\n}\n"],"mappings":"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"}

package/dist/transformers/index.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.mts","names":[],"sources":["../../src/transformers/index.ts"],"mappings":";;;;;AAkDA;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAAsB,eAAA,CACpB,IAAA,UACA,MAAA,EAAQ,aAAA,EACR,QAAA,WACA,OAAA,YACC,OAAA"}
+{"version":3,"file":"index.d.mts","names":[],"sources":["../../src/transformers/index.ts"],"mappings":";;;;;AAoDA;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAAsB,eAAA,CACpB,IAAA,UACA,MAAA,EAAQ,aAAA,EACR,QAAA,WACA,OAAA,YACC,OAAA"}

package/dist/transformers/index.mjs

@@ -6,6 +6,8 @@ import { tailwindcss } from "./tailwindcss.mjs";
 import { safeClassNames } from "./safeClassNames.mjs";
 import { attributeToStyle } from "./attributeToStyle.mjs";
 import { inlineCSS } from "./inlineCSS.mjs";
+import { msoWidthFromClass } from "./msoWidthFromClass.mjs";
+import { columnWidth } from "./columnWidth.mjs";
 import { removeAttributes } from "./removeAttributes.mjs";
 import { shorthandCSS } from "./shorthandCSS.mjs";
 import { sixHex } from "./sixHex.mjs";
@@ -57,6 +59,8 @@ async function runTransformers(html, config, filePath, doctype) {
 	dom = safeClassNames(dom, config.css);
 	dom = attributeToStyle(dom, config.css);
 	dom = inlineCSS(dom, config.css);
+	dom = msoWidthFromClass(dom);
+	dom = columnWidth(dom);
 	dom = removeAttributes(dom, config.html?.attributes);
 	dom = shorthandCSS(dom, config.css);
 	dom = sixHex(dom, config.css);

package/dist/transformers/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../src/transformers/index.ts"],"sourcesContent":["import { parse, serialize } from '../utils/ast/index.ts'\nimport { inlineLink } from './inlineLink.ts'\nimport { tailwindcss } from './tailwindcss.ts'\nimport { safeClassNames } from './safeClassNames.ts'\nimport { attributeToStyle } from './attributeToStyle.ts'\nimport { inlineCSS } from './inlineCSS.ts'\nimport { removeAttributes } from './removeAttributes.ts'\nimport { shorthandCSS } from './shorthandCSS.ts'\nimport { sixHex } from './sixHex.ts'\nimport { addAttributes } from './addAttributes.ts'\nimport { filters } from './filters/index.ts'\nimport { base } from './base.ts'\nimport { entities } from './entities.ts'\nimport { urlQuery } from './urlQuery.ts'\nimport { purgeCSS } from './purgeCSS.ts'\nimport { replaceStrings } from './replaceStrings.ts'\nimport { format } from './format.ts'\nimport { minify } from './minify.ts'\nimport type { MaizzleConfig } from '../types/config.ts'\n\n/**\n * Run all Maizzle transformers on the rendered HTML.\n *\n * The HTML is parsed into a DOM once at the start and passed through all\n * DOM-based transformers as a shared `ChildNode[]`. After all DOM transformers\n * complete, the DOM is serialized back to a string exactly once.\n *\n * String-only transformers (those that rely on external tools that require a\n * raw HTML string) then run on the serialized output.\n *\n * Transformers run in a specific order:\n * 0.  Inline link stylesheets — replace `<link rel=\"stylesheet\">` with `<style>` tags\n * 1.  Tailwind CSS — compile CSS, lower syntax, optimize (cleanup + merge media queries)\n * 2.  Safe class names\n * 3.  Attribute to style\n * 4.  CSS inliner\n * 5.  Remove attributes\n * 6.  Shorthand CSS\n * 7.  Six-digit HEX\n * 8.  Add attributes\n * 9.  Filters\n * 10. Base URL\n * 11. URL query\n * 12. Purge CSS (serializes/parses internally around email-comb)\n * 13. Entities\n * + Vue-generated comments stripped here (on serialized string)\n * 14. Replace strings\n * 15. Prettify\n * 16. Minify\n */\nexport async function runTransformers(\n  html: string,\n  config: MaizzleConfig,\n  filePath?: string,\n  doctype?: string,\n): Promise<string> {\n  // Parse once — all DOM transformers share this array\n  let dom = parse(html)\n\n  // 0. Inline <link> stylesheets\n  dom = await inlineLink(dom, filePath)\n\n  // 1. Tailwind CSS — always runs first\n  dom = await tailwindcss(dom, config, filePath)\n\n  // 2. Safe class names\n  dom = safeClassNames(dom, config.css)\n\n  // 3. Attribute to style\n  dom = attributeToStyle(dom, config.css)\n\n  // 4. CSS inliner (serializes/parses internally around juice)\n  dom = inlineCSS(dom, config.css)\n\n  // 5. Remove attributes\n  dom = removeAttributes(dom, config.html?.attributes)\n\n  // 6. Shorthand CSS\n  dom = shorthandCSS(dom, config.css)\n\n  // 7. Six-digit HEX\n  dom = sixHex(dom, config.css)\n\n  // 8. Add attributes\n  dom = addAttributes(dom, config.html?.attributes)\n\n  // 9. Filters\n  dom = filters(dom, config.filters)\n\n  // 10. Base URL (serializes/parses internally for VML/MSO regex passes)\n  dom = base(dom, config.url)\n\n  // 11. URL query\n  dom = urlQuery(dom, config.url)\n\n  // 12. Purge CSS (serializes/parses internally around email-comb)\n  dom = purgeCSS(dom, config.css)\n\n  // 13. Entities\n  dom = entities(dom, config.html?.decodeEntities)\n\n  // Serialize once — remaining transformers operate on the HTML string\n  const isXhtml = doctype ? /xhtml/i.test(doctype) : false\n  let result = serialize(dom, { selfClosingTags: isXhtml })\n\n  // Remove Vue-generated comments after serializing\n  result = result\n    .replaceAll('<!--[-->', '')\n    .replaceAll('<!--]-->', '')\n    .replaceAll('<!--teleport start anchor-->', '')\n    .replaceAll('<!--teleport anchor-->', '')\n    .replaceAll('<!--teleport start-->', '')\n    .replaceAll('<!--teleport end-->', '')\n\n  // 14. Replace strings\n  result = replaceStrings(result, config)\n\n  // 15. Format\n  result = await format(result, config)\n\n  // 16. Minify\n  result = minify(result, config)\n\n  // Strip self-closing slashes for HTML5 doctypes\n  if (!isXhtml) {\n    result = result.replace(/ \\/>/g, '>')\n  }\n\n  return result\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkDA,eAAsB,gBACpB,MACA,QACA,UACA,SACiB;CAEjB,IAAI,MAAM,MAAM,KAAK;AAGrB,OAAM,MAAM,WAAW,KAAK,SAAS;AAGrC,OAAM,MAAM,YAAY,KAAK,QAAQ,SAAS;AAG9C,OAAM,eAAe,KAAK,OAAO,IAAI;AAGrC,OAAM,iBAAiB,KAAK,OAAO,IAAI;AAGvC,OAAM,UAAU,KAAK,OAAO,IAAI;AAGhC,OAAM,iBAAiB,KAAK,OAAO,MAAM,WAAW;AAGpD,OAAM,aAAa,KAAK,OAAO,IAAI;AAGnC,OAAM,OAAO,KAAK,OAAO,IAAI;AAG7B,OAAM,cAAc,KAAK,OAAO,MAAM,WAAW;AAGjD,OAAM,QAAQ,KAAK,OAAO,QAAQ;AAGlC,OAAM,KAAK,KAAK,OAAO,IAAI;AAG3B,OAAM,SAAS,KAAK,OAAO,IAAI;AAG/B,OAAM,SAAS,KAAK,OAAO,IAAI;AAG/B,OAAM,SAAS,KAAK,OAAO,MAAM,eAAe;CAGhD,MAAM,UAAU,UAAU,SAAS,KAAK,QAAQ,GAAG;CACnD,IAAI,SAAS,UAAU,KAAK,EAAE,iBAAiB,SAAS,CAAC;AAGzD,UAAS,OACN,WAAW,YAAY,GAAG,CAC1B,WAAW,YAAY,GAAG,CAC1B,WAAW,gCAAgC,GAAG,CAC9C,WAAW,0BAA0B,GAAG,CACxC,WAAW,yBAAyB,GAAG,CACvC,WAAW,uBAAuB,GAAG;AAGxC,UAAS,eAAe,QAAQ,OAAO;AAGvC,UAAS,MAAM,OAAO,QAAQ,OAAO;AAGrC,UAAS,OAAO,QAAQ,OAAO;AAG/B,KAAI,CAAC,QACH,UAAS,OAAO,QAAQ,SAAS,IAAI;AAGvC,QAAO"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/transformers/index.ts"],"sourcesContent":["import { parse, serialize } from '../utils/ast/index.ts'\nimport { inlineLink } from './inlineLink.ts'\nimport { tailwindcss } from './tailwindcss.ts'\nimport { safeClassNames } from './safeClassNames.ts'\nimport { attributeToStyle } from './attributeToStyle.ts'\nimport { inlineCSS } from './inlineCSS.ts'\nimport { msoWidthFromClass } from './msoWidthFromClass.ts'\nimport { columnWidth } from './columnWidth.ts'\nimport { removeAttributes } from './removeAttributes.ts'\nimport { shorthandCSS } from './shorthandCSS.ts'\nimport { sixHex } from './sixHex.ts'\nimport { addAttributes } from './addAttributes.ts'\nimport { filters } from './filters/index.ts'\nimport { base } from './base.ts'\nimport { entities } from './entities.ts'\nimport { urlQuery } from './urlQuery.ts'\nimport { purgeCSS } from './purgeCSS.ts'\nimport { replaceStrings } from './replaceStrings.ts'\nimport { format } from './format.ts'\nimport { minify } from './minify.ts'\nimport type { MaizzleConfig } from '../types/config.ts'\n\n/**\n * Run all Maizzle transformers on the rendered HTML.\n *\n * The HTML is parsed into a DOM once at the start and passed through all\n * DOM-based transformers as a shared `ChildNode[]`. After all DOM transformers\n * complete, the DOM is serialized back to a string exactly once.\n *\n * String-only transformers (those that rely on external tools that require a\n * raw HTML string) then run on the serialized output.\n *\n * Transformers run in a specific order:\n * 0.  Inline link stylesheets — replace `<link rel=\"stylesheet\">` with `<style>` tags\n * 1.  Tailwind CSS — compile CSS, lower syntax, optimize (cleanup + merge media queries)\n * 2.  Safe class names\n * 3.  Attribute to style\n * 4.  CSS inliner\n * 5.  Remove attributes\n * 6.  Shorthand CSS\n * 7.  Six-digit HEX\n * 8.  Add attributes\n * 9.  Filters\n * 10. Base URL\n * 11. URL query\n * 12. Purge CSS (serializes/parses internally around email-comb)\n * 13. Entities\n * + Vue-generated comments stripped here (on serialized string)\n * 14. Replace strings\n * 15. Prettify\n * 16. Minify\n */\nexport async function runTransformers(\n  html: string,\n  config: MaizzleConfig,\n  filePath?: string,\n  doctype?: string,\n): Promise<string> {\n  // Parse once — all DOM transformers share this array\n  let dom = parse(html)\n\n  // 0. Inline <link> stylesheets\n  dom = await inlineLink(dom, filePath)\n\n  // 1. Tailwind CSS — always runs first\n  dom = await tailwindcss(dom, config, filePath)\n\n  // 2. Safe class names\n  dom = safeClassNames(dom, config.css)\n\n  // 3. Attribute to style\n  dom = attributeToStyle(dom, config.css)\n\n  // 4. CSS inliner (serializes/parses internally around juice)\n  dom = inlineCSS(dom, config.css)\n\n  // 4.5. Resolve MSO width placeholders from inlined max-width/width\n  dom = msoWidthFromClass(dom)\n\n  // 4.6. Resolve Column min-width placeholders from nearest sized ancestor\n  dom = columnWidth(dom)\n\n  // 5. Remove attributes\n  dom = removeAttributes(dom, config.html?.attributes)\n\n  // 6. Shorthand CSS\n  dom = shorthandCSS(dom, config.css)\n\n  // 7. Six-digit HEX\n  dom = sixHex(dom, config.css)\n\n  // 8. Add attributes\n  dom = addAttributes(dom, config.html?.attributes)\n\n  // 9. Filters\n  dom = filters(dom, config.filters)\n\n  // 10. Base URL (serializes/parses internally for VML/MSO regex passes)\n  dom = base(dom, config.url)\n\n  // 11. URL query\n  dom = urlQuery(dom, config.url)\n\n  // 12. Purge CSS (serializes/parses internally around email-comb)\n  dom = purgeCSS(dom, config.css)\n\n  // 13. Entities\n  dom = entities(dom, config.html?.decodeEntities)\n\n  // Serialize once — remaining transformers operate on the HTML string\n  const isXhtml = doctype ? /xhtml/i.test(doctype) : false\n  let result = serialize(dom, { selfClosingTags: isXhtml })\n\n  // Remove Vue-generated comments after serializing\n  result = result\n    .replaceAll('<!--[-->', '')\n    .replaceAll('<!--]-->', '')\n    .replaceAll('<!--teleport start anchor-->', '')\n    .replaceAll('<!--teleport anchor-->', '')\n    .replaceAll('<!--teleport start-->', '')\n    .replaceAll('<!--teleport end-->', '')\n\n  // 14. Replace strings\n  result = replaceStrings(result, config)\n\n  // 15. Format\n  result = await format(result, config)\n\n  // 16. Minify\n  result = minify(result, config)\n\n  // Strip self-closing slashes for HTML5 doctypes\n  if (!isXhtml) {\n    result = result.replace(/ \\/>/g, '>')\n  }\n\n  return result\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoDA,eAAsB,gBACpB,MACA,QACA,UACA,SACiB;CAEjB,IAAI,MAAM,MAAM,KAAK;AAGrB,OAAM,MAAM,WAAW,KAAK,SAAS;AAGrC,OAAM,MAAM,YAAY,KAAK,QAAQ,SAAS;AAG9C,OAAM,eAAe,KAAK,OAAO,IAAI;AAGrC,OAAM,iBAAiB,KAAK,OAAO,IAAI;AAGvC,OAAM,UAAU,KAAK,OAAO,IAAI;AAGhC,OAAM,kBAAkB,IAAI;AAG5B,OAAM,YAAY,IAAI;AAGtB,OAAM,iBAAiB,KAAK,OAAO,MAAM,WAAW;AAGpD,OAAM,aAAa,KAAK,OAAO,IAAI;AAGnC,OAAM,OAAO,KAAK,OAAO,IAAI;AAG7B,OAAM,cAAc,KAAK,OAAO,MAAM,WAAW;AAGjD,OAAM,QAAQ,KAAK,OAAO,QAAQ;AAGlC,OAAM,KAAK,KAAK,OAAO,IAAI;AAG3B,OAAM,SAAS,KAAK,OAAO,IAAI;AAG/B,OAAM,SAAS,KAAK,OAAO,IAAI;AAG/B,OAAM,SAAS,KAAK,OAAO,MAAM,eAAe;CAGhD,MAAM,UAAU,UAAU,SAAS,KAAK,QAAQ,GAAG;CACnD,IAAI,SAAS,UAAU,KAAK,EAAE,iBAAiB,SAAS,CAAC;AAGzD,UAAS,OACN,WAAW,YAAY,GAAG,CAC1B,WAAW,YAAY,GAAG,CAC1B,WAAW,gCAAgC,GAAG,CAC9C,WAAW,0BAA0B,GAAG,CACxC,WAAW,yBAAyB,GAAG,CACvC,WAAW,uBAAuB,GAAG;AAGxC,UAAS,eAAe,QAAQ,OAAO;AAGvC,UAAS,MAAM,OAAO,QAAQ,OAAO;AAGrC,UAAS,OAAO,QAAQ,OAAO;AAG/B,KAAI,CAAC,QACH,UAAS,OAAO,QAAQ,SAAS,IAAI;AAGvC,QAAO"}

package/dist/transformers/inlineCSS.mjs

@@ -28,8 +28,8 @@ function inlineCSS(dom, config = {}) {
 	walk(dom, (node) => {
 		const el = node;
 		if (el.name === "style" && el.attribs) {
-			if (el.attribs.embed && !("data-embed" in el.attribs)) el.attribs["data-embed"] = "";
-			if (el.attribs["data-embed"] && !("embed" in el.attribs)) el.attribs.embed = "";
+			if ("embed" in el.attribs && !("data-embed" in el.attribs)) el.attribs["data-embed"] = "";
+			if ("data-embed" in el.attribs && !("embed" in el.attribs)) el.attribs.embed = "";
 			if ("data-embed" in el.attribs) el.attribs["data-maizzle-embed"] = "";
 		}
 	});

package/dist/transformers/inlineCSS.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"inlineCSS.mjs","names":[],"sources":["../../src/transformers/inlineCSS.ts"],"sourcesContent":["import juice from 'juice'\nimport { walk, parse, serialize } from '../utils/ast/index.ts'\nimport type { ChildNode, Element } from 'domhandler'\nimport type { Options as JuiceOptions } from 'juice'\nimport type { CssConfig } from '../types/config.ts'\n\n/**\n * Inline CSS transformer.\n *\n * Inlines CSS from `<style>` tags into inline style attributes on HTML elements.\n * This is important for email client compatibility (especially Outlook on Windows).\n *\n * Enabled when `css.inline` is set to `true` or an object with options.\n * All Juice options are supported and passed through directly.\n */\nexport function inlineCSS(dom: ChildNode[], config: CssConfig = {}): ChildNode[] {\n  const inline = config.inline\n\n  // Disabled when inline is falsy or not an object/truthy\n  if (!inline) {\n    return dom\n  }\n\n  // Build options from config\n  const options = typeof inline === 'object' ? inline : {}\n\n  // Separate Maizzle-specific options from Juice options\n  const {\n    preferUnitlessValues = true,\n    safelist,\n    customCSS = '',\n    styleToAttribute,\n    excludedProperties,\n    widthElements,\n    heightElements,\n    codeBlocks,\n    ...juicePassthrough\n  } = options\n\n  // Configure Juice static properties\n  juice.styleToAttribute = styleToAttribute ?? {}\n  juice.excludedProperties = ['--tw-shadow', ...(excludedProperties ?? [])]\n  juice.widthElements = (widthElements ?? ['img', 'video']).map(i => i.toUpperCase()) as unknown as HTMLElement[]\n  juice.heightElements = (heightElements ?? ['img', 'video']).map(i => i.toUpperCase()) as unknown as HTMLElement[]\n\n  // Add custom code blocks\n  if (codeBlocks && typeof codeBlocks === 'object') {\n    Object.entries(codeBlocks).forEach(([key, value]) => {\n      if (value.start && value.end) {\n        juice.codeBlocks[key] = value\n      }\n    })\n  }\n\n  // Handle style tags with embed attributes.\n  // We add a marker attribute that persists through the pipeline,\n  // then restore data-embed from it after Juice runs.\n  walk(dom, (node) => {\n    const el = node as Element\n    if (el.name === 'style' && el.attribs) {\n      // Sync data-embed ↔ embed\n      if (el.attribs.embed && !('data-embed' in el.attribs)) {\n        el.attribs['data-embed'] = ''\n      }\n      if (el.attribs['data-embed'] && !('embed' in el.attribs)) {\n        el.attribs.embed = ''\n      }\n\n      // Add marker that persists through the pipeline\n      if ('data-embed' in el.attribs) {\n        el.attribs['data-maizzle-embed'] = ''\n      }\n    }\n  })\n\n  // Serialize for juice (juice requires a string)\n  const serialized = serialize(dom)\n\n  let inlinedHtml: string\n\n  try {\n    const juiceOptions: JuiceOptions = {\n      removeStyleTags: juicePassthrough.removeStyleTags ?? false,\n      removeInlinedSelectors: juicePassthrough.removeInlinedSelectors ?? true,\n      applyWidthAttributes: juicePassthrough.applyWidthAttributes ?? true,\n      applyHeightAttributes: juicePassthrough.applyHeightAttributes ?? true,\n      preservedSelectors: safelist ?? [],\n      ...customCSS ? { extraCss: customCSS } : {},\n      inlineDuplicateProperties: juicePassthrough.inlineDuplicateProperties ?? true,\n      ...juicePassthrough,\n    }\n\n    inlinedHtml = juice(serialized, juiceOptions)\n  } catch {\n    // If Juice fails, return the dom unchanged\n    return dom\n  }\n\n  // Post-process for preferUnitlessValues\n  const result = parse(inlinedHtml)\n\n  walk(result, (node) => {\n    const el = node as Element\n    if (el.attribs?.style) {\n      // Normalize style formatting: ensure spaces after : and ;\n      let style = el.attribs.style\n        .replace(/:\\s*/g, ': ')\n        .replace(/;\\s*/g, '; ')\n        .trimEnd()\n\n      // Ensure trailing semicolon\n      if (!style.endsWith(';')) {\n        style += ';'\n      }\n\n      if (preferUnitlessValues) {\n        style = style.replace(\n          /\\b0(px|rem|em|%|vh|vw|vmin|vmax|in|cm|mm|pt|pc|ex|ch)\\b/g,\n          '0'\n        )\n      }\n\n      el.attribs.style = style\n    }\n  })\n\n  // Restore data-embed from our marker, then remove the marker.\n  // The purge step will handle final data-embed/embed removal.\n  walk(result, (node) => {\n    const el = node as Element\n    if (el.name === 'style' && el.attribs && 'data-maizzle-embed' in el.attribs) {\n      el.attribs['data-embed'] = ''\n      el.attribs.embed = ''\n      delete el.attribs['data-maizzle-embed']\n    }\n  })\n\n  return result\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAeA,SAAgB,UAAU,KAAkB,SAAoB,EAAE,EAAe;CAC/E,MAAM,SAAS,OAAO;AAGtB,KAAI,CAAC,OACH,QAAO;CAOT,MAAM,EACJ,uBAAuB,MACvB,UACA,YAAY,IACZ,kBACA,oBACA,eACA,gBACA,YACA,GAAG,qBAZW,OAAO,WAAW,WAAW,SAAS,EAAE;AAgBxD,OAAM,mBAAmB,oBAAoB,EAAE;AAC/C,OAAM,qBAAqB,CAAC,eAAe,GAAI,sBAAsB,EAAE,CAAE;AACzE,OAAM,iBAAiB,iBAAiB,CAAC,OAAO,QAAQ,EAAE,KAAI,MAAK,EAAE,aAAa,CAAC;AACnF,OAAM,kBAAkB,kBAAkB,CAAC,OAAO,QAAQ,EAAE,KAAI,MAAK,EAAE,aAAa,CAAC;AAGrF,KAAI,cAAc,OAAO,eAAe,SACtC,QAAO,QAAQ,WAAW,CAAC,SAAS,CAAC,KAAK,WAAW;AACnD,MAAI,MAAM,SAAS,MAAM,IACvB,OAAM,WAAW,OAAO;GAE1B;AAMJ,MAAK,MAAM,SAAS;EAClB,MAAM,KAAK;AACX,MAAI,GAAG,SAAS,WAAW,GAAG,SAAS;AAErC,OAAI,GAAG,QAAQ,SAAS,EAAE,gBAAgB,GAAG,SAC3C,IAAG,QAAQ,gBAAgB;AAE7B,OAAI,GAAG,QAAQ,iBAAiB,EAAE,WAAW,GAAG,SAC9C,IAAG,QAAQ,QAAQ;AAIrB,OAAI,gBAAgB,GAAG,QACrB,IAAG,QAAQ,wBAAwB;;GAGvC;CAGF,MAAM,aAAa,UAAU,IAAI;CAEjC,IAAI;AAEJ,KAAI;AAYF,gBAAc,MAAM,YAXe;GACjC,iBAAiB,iBAAiB,mBAAmB;GACrD,wBAAwB,iBAAiB,0BAA0B;GACnE,sBAAsB,iBAAiB,wBAAwB;GAC/D,uBAAuB,iBAAiB,yBAAyB;GACjE,oBAAoB,YAAY,EAAE;GAClC,GAAG,YAAY,EAAE,UAAU,WAAW,GAAG,EAAE;GAC3C,2BAA2B,iBAAiB,6BAA6B;GACzE,GAAG;GACJ,CAE4C;SACvC;AAEN,SAAO;;CAIT,MAAM,SAAS,MAAM,YAAY;AAEjC,MAAK,SAAS,SAAS;EACrB,MAAM,KAAK;AACX,MAAI,GAAG,SAAS,OAAO;GAErB,IAAI,QAAQ,GAAG,QAAQ,MACpB,QAAQ,SAAS,KAAK,CACtB,QAAQ,SAAS,KAAK,CACtB,SAAS;AAGZ,OAAI,CAAC,MAAM,SAAS,IAAI,CACtB,UAAS;AAGX,OAAI,qBACF,SAAQ,MAAM,QACZ,4DACA,IACD;AAGH,MAAG,QAAQ,QAAQ;;GAErB;AAIF,MAAK,SAAS,SAAS;EACrB,MAAM,KAAK;AACX,MAAI,GAAG,SAAS,WAAW,GAAG,WAAW,wBAAwB,GAAG,SAAS;AAC3E,MAAG,QAAQ,gBAAgB;AAC3B,MAAG,QAAQ,QAAQ;AACnB,UAAO,GAAG,QAAQ;;GAEpB;AAEF,QAAO"}
+{"version":3,"file":"inlineCSS.mjs","names":[],"sources":["../../src/transformers/inlineCSS.ts"],"sourcesContent":["import juice from 'juice'\nimport { walk, parse, serialize } from '../utils/ast/index.ts'\nimport type { ChildNode, Element } from 'domhandler'\nimport type { Options as JuiceOptions } from 'juice'\nimport type { CssConfig } from '../types/config.ts'\n\n/**\n * Inline CSS transformer.\n *\n * Inlines CSS from `<style>` tags into inline style attributes on HTML elements.\n * This is important for email client compatibility (especially Outlook on Windows).\n *\n * Enabled when `css.inline` is set to `true` or an object with options.\n * All Juice options are supported and passed through directly.\n */\nexport function inlineCSS(dom: ChildNode[], config: CssConfig = {}): ChildNode[] {\n  const inline = config.inline\n\n  // Disabled when inline is falsy or not an object/truthy\n  if (!inline) {\n    return dom\n  }\n\n  // Build options from config\n  const options = typeof inline === 'object' ? inline : {}\n\n  // Separate Maizzle-specific options from Juice options\n  const {\n    preferUnitlessValues = true,\n    safelist,\n    customCSS = '',\n    styleToAttribute,\n    excludedProperties,\n    widthElements,\n    heightElements,\n    codeBlocks,\n    ...juicePassthrough\n  } = options\n\n  // Configure Juice static properties\n  juice.styleToAttribute = styleToAttribute ?? {}\n  juice.excludedProperties = ['--tw-shadow', ...(excludedProperties ?? [])]\n  juice.widthElements = (widthElements ?? ['img', 'video']).map(i => i.toUpperCase()) as unknown as HTMLElement[]\n  juice.heightElements = (heightElements ?? ['img', 'video']).map(i => i.toUpperCase()) as unknown as HTMLElement[]\n\n  // Add custom code blocks\n  if (codeBlocks && typeof codeBlocks === 'object') {\n    Object.entries(codeBlocks).forEach(([key, value]) => {\n      if (value.start && value.end) {\n        juice.codeBlocks[key] = value\n      }\n    })\n  }\n\n  // Handle style tags with embed attributes.\n  // We add a marker attribute that persists through the pipeline,\n  // then restore data-embed from it after Juice runs.\n  walk(dom, (node) => {\n    const el = node as Element\n    if (el.name === 'style' && el.attribs) {\n      // Sync data-embed ↔ embed. Use `in` so presence-only attrs\n      // (<style embed> → attribs.embed === '') still count.\n      if ('embed' in el.attribs && !('data-embed' in el.attribs)) {\n        el.attribs['data-embed'] = ''\n      }\n      if ('data-embed' in el.attribs && !('embed' in el.attribs)) {\n        el.attribs.embed = ''\n      }\n\n      // Add marker that persists through the pipeline\n      if ('data-embed' in el.attribs) {\n        el.attribs['data-maizzle-embed'] = ''\n      }\n    }\n  })\n\n  // Serialize for juice (juice requires a string)\n  const serialized = serialize(dom)\n\n  let inlinedHtml: string\n\n  try {\n    const juiceOptions: JuiceOptions = {\n      removeStyleTags: juicePassthrough.removeStyleTags ?? false,\n      removeInlinedSelectors: juicePassthrough.removeInlinedSelectors ?? true,\n      applyWidthAttributes: juicePassthrough.applyWidthAttributes ?? true,\n      applyHeightAttributes: juicePassthrough.applyHeightAttributes ?? true,\n      preservedSelectors: safelist ?? [],\n      ...customCSS ? { extraCss: customCSS } : {},\n      inlineDuplicateProperties: juicePassthrough.inlineDuplicateProperties ?? true,\n      ...juicePassthrough,\n    }\n\n    inlinedHtml = juice(serialized, juiceOptions)\n  } catch {\n    // If Juice fails, return the dom unchanged\n    return dom\n  }\n\n  // Post-process for preferUnitlessValues\n  const result = parse(inlinedHtml)\n\n  walk(result, (node) => {\n    const el = node as Element\n    if (el.attribs?.style) {\n      // Normalize style formatting: ensure spaces after : and ;\n      let style = el.attribs.style\n        .replace(/:\\s*/g, ': ')\n        .replace(/;\\s*/g, '; ')\n        .trimEnd()\n\n      // Ensure trailing semicolon\n      if (!style.endsWith(';')) {\n        style += ';'\n      }\n\n      if (preferUnitlessValues) {\n        style = style.replace(\n          /\\b0(px|rem|em|%|vh|vw|vmin|vmax|in|cm|mm|pt|pc|ex|ch)\\b/g,\n          '0'\n        )\n      }\n\n      el.attribs.style = style\n    }\n  })\n\n  // Restore data-embed from our marker, then remove the marker.\n  // The purge step will handle final data-embed/embed removal.\n  walk(result, (node) => {\n    const el = node as Element\n    if (el.name === 'style' && el.attribs && 'data-maizzle-embed' in el.attribs) {\n      el.attribs['data-embed'] = ''\n      el.attribs.embed = ''\n      delete el.attribs['data-maizzle-embed']\n    }\n  })\n\n  return result\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAeA,SAAgB,UAAU,KAAkB,SAAoB,EAAE,EAAe;CAC/E,MAAM,SAAS,OAAO;AAGtB,KAAI,CAAC,OACH,QAAO;CAOT,MAAM,EACJ,uBAAuB,MACvB,UACA,YAAY,IACZ,kBACA,oBACA,eACA,gBACA,YACA,GAAG,qBAZW,OAAO,WAAW,WAAW,SAAS,EAAE;AAgBxD,OAAM,mBAAmB,oBAAoB,EAAE;AAC/C,OAAM,qBAAqB,CAAC,eAAe,GAAI,sBAAsB,EAAE,CAAE;AACzE,OAAM,iBAAiB,iBAAiB,CAAC,OAAO,QAAQ,EAAE,KAAI,MAAK,EAAE,aAAa,CAAC;AACnF,OAAM,kBAAkB,kBAAkB,CAAC,OAAO,QAAQ,EAAE,KAAI,MAAK,EAAE,aAAa,CAAC;AAGrF,KAAI,cAAc,OAAO,eAAe,SACtC,QAAO,QAAQ,WAAW,CAAC,SAAS,CAAC,KAAK,WAAW;AACnD,MAAI,MAAM,SAAS,MAAM,IACvB,OAAM,WAAW,OAAO;GAE1B;AAMJ,MAAK,MAAM,SAAS;EAClB,MAAM,KAAK;AACX,MAAI,GAAG,SAAS,WAAW,GAAG,SAAS;AAGrC,OAAI,WAAW,GAAG,WAAW,EAAE,gBAAgB,GAAG,SAChD,IAAG,QAAQ,gBAAgB;AAE7B,OAAI,gBAAgB,GAAG,WAAW,EAAE,WAAW,GAAG,SAChD,IAAG,QAAQ,QAAQ;AAIrB,OAAI,gBAAgB,GAAG,QACrB,IAAG,QAAQ,wBAAwB;;GAGvC;CAGF,MAAM,aAAa,UAAU,IAAI;CAEjC,IAAI;AAEJ,KAAI;AAYF,gBAAc,MAAM,YAXe;GACjC,iBAAiB,iBAAiB,mBAAmB;GACrD,wBAAwB,iBAAiB,0BAA0B;GACnE,sBAAsB,iBAAiB,wBAAwB;GAC/D,uBAAuB,iBAAiB,yBAAyB;GACjE,oBAAoB,YAAY,EAAE;GAClC,GAAG,YAAY,EAAE,UAAU,WAAW,GAAG,EAAE;GAC3C,2BAA2B,iBAAiB,6BAA6B;GACzE,GAAG;GACJ,CAE4C;SACvC;AAEN,SAAO;;CAIT,MAAM,SAAS,MAAM,YAAY;AAEjC,MAAK,SAAS,SAAS;EACrB,MAAM,KAAK;AACX,MAAI,GAAG,SAAS,OAAO;GAErB,IAAI,QAAQ,GAAG,QAAQ,MACpB,QAAQ,SAAS,KAAK,CACtB,QAAQ,SAAS,KAAK,CACtB,SAAS;AAGZ,OAAI,CAAC,MAAM,SAAS,IAAI,CACtB,UAAS;AAGX,OAAI,qBACF,SAAQ,MAAM,QACZ,4DACA,IACD;AAGH,MAAG,QAAQ,QAAQ;;GAErB;AAIF,MAAK,SAAS,SAAS;EACrB,MAAM,KAAK;AACX,MAAI,GAAG,SAAS,WAAW,GAAG,WAAW,wBAAwB,GAAG,SAAS;AAC3E,MAAG,QAAQ,gBAAgB;AAC3B,MAAG,QAAQ,QAAQ;AACnB,UAAO,GAAG,QAAQ;;GAEpB;AAEF,QAAO"}

package/dist/transformers/msoWidthFromClass.d.mts

@@ -0,0 +1,19 @@
+import { ChildNode } from "domhandler";
+
+//#region src/transformers/msoWidthFromClass.d.ts
+/**
+ * Resolve `__MAIZZLE_MSOW_{id}__` placeholders inside MSO conditional
+ * comments by reading the inlined `max-width` (or `width`) of the
+ * paired element marked with `data-maizzle-msow-id`.
+ *
+ * Used by `<Container>` and `<Section>` to derive Outlook's table width
+ * from the resolved Tailwind class or inline style on the inner div,
+ * after CSS inlining.
+ *
+ * Falls back to the value of `data-maizzle-msow-fallback` (default
+ * `600px`) when the value can't be parsed.
+ */
+declare function msoWidthFromClass(dom: ChildNode[]): ChildNode[];
+//#endregion
+export { msoWidthFromClass };
+//# sourceMappingURL=msoWidthFromClass.d.mts.map

package/dist/transformers/msoWidthFromClass.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"msoWidthFromClass.d.mts","names":[],"sources":["../../src/transformers/msoWidthFromClass.ts"],"mappings":";;;;;AAkCA;;;;;;;;;;iBAAgB,iBAAA,CAAkB,GAAA,EAAK,SAAA,KAAc,SAAA"}

package/dist/transformers/msoWidthFromClass.mjs

@@ -0,0 +1,61 @@
+import { walk } from "../utils/ast/walker.mjs";
+import "../utils/ast/index.mjs";
+
+//#region src/transformers/msoWidthFromClass.ts
+const RE_MAX_WIDTH = /(?:^|;\s*)max-width:\s*([^;]+)/i;
+const RE_WIDTH = /(?:^|;\s*)width:\s*([^;]+)/i;
+const RE_PERCENT = /^[\d.]+%$/;
+function resolveWidth(value) {
+	const trimmed = value.trim();
+	if (RE_PERCENT.test(trimmed)) return trimmed;
+	const m = trimmed.match(/^([\d.]+)(px|rem|em|pt)?$/i);
+	if (!m) return null;
+	const n = parseFloat(m[1]);
+	switch ((m[2] || "px").toLowerCase()) {
+		case "px": return `${Math.round(n)}px`;
+		case "rem":
+		case "em": return `${Math.round(n * 16)}px`;
+		case "pt": return `${Math.round(n * 1.333)}px`;
+		default: return null;
+	}
+}
+/**
+* Resolve `__MAIZZLE_MSOW_{id}__` placeholders inside MSO conditional
+* comments by reading the inlined `max-width` (or `width`) of the
+* paired element marked with `data-maizzle-msow-id`.
+*
+* Used by `<Container>` and `<Section>` to derive Outlook's table width
+* from the resolved Tailwind class or inline style on the inner div,
+* after CSS inlining.
+*
+* Falls back to the value of `data-maizzle-msow-fallback` (default
+* `600px`) when the value can't be parsed.
+*/
+function msoWidthFromClass(dom) {
+	const widths = /* @__PURE__ */ new Map();
+	walk(dom, (node) => {
+		const el = node;
+		const id = el.attribs?.["data-maizzle-msow-id"];
+		if (!id) return;
+		delete el.attribs["data-maizzle-msow-id"];
+		const fallback = el.attribs["data-maizzle-msow-fallback"] ?? "600px";
+		delete el.attribs["data-maizzle-msow-fallback"];
+		const style = el.attribs.style ?? "";
+		const raw = style.match(RE_MAX_WIDTH)?.[1] ?? style.match(RE_WIDTH)?.[1];
+		const resolved = raw ? resolveWidth(raw) : null;
+		widths.set(id, resolved ?? fallback);
+	});
+	if (widths.size === 0) return dom;
+	walk(dom, (node) => {
+		if (node.type !== "comment") return;
+		let data = node.data;
+		if (!data.includes("__MAIZZLE_MSOW_")) return;
+		for (const [id, px] of widths) data = data.replaceAll(`__MAIZZLE_MSOW_${id}__`, px);
+		node.data = data;
+	});
+	return dom;
+}
+
+//#endregion
+export { msoWidthFromClass };
+//# sourceMappingURL=msoWidthFromClass.mjs.map

package/dist/transformers/msoWidthFromClass.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"msoWidthFromClass.mjs","names":[],"sources":["../../src/transformers/msoWidthFromClass.ts"],"sourcesContent":["import { walk } from '../utils/ast/index.ts'\nimport type { ChildNode, Element } from 'domhandler'\n\nconst RE_MAX_WIDTH = /(?:^|;\\s*)max-width:\\s*([^;]+)/i\nconst RE_WIDTH = /(?:^|;\\s*)width:\\s*([^;]+)/i\nconst RE_PERCENT = /^[\\d.]+%$/\n\nfunction resolveWidth(value: string): string | null {\n  const trimmed = value.trim()\n  if (RE_PERCENT.test(trimmed)) return trimmed\n  const m = trimmed.match(/^([\\d.]+)(px|rem|em|pt)?$/i)\n  if (!m) return null\n  const n = parseFloat(m[1])\n  switch ((m[2] || 'px').toLowerCase()) {\n    case 'px': return `${Math.round(n)}px`\n    case 'rem':\n    case 'em': return `${Math.round(n * 16)}px`\n    case 'pt': return `${Math.round(n * 1.333)}px`\n    default: return null\n  }\n}\n\n/**\n * Resolve `__MAIZZLE_MSOW_{id}__` placeholders inside MSO conditional\n * comments by reading the inlined `max-width` (or `width`) of the\n * paired element marked with `data-maizzle-msow-id`.\n *\n * Used by `<Container>` and `<Section>` to derive Outlook's table width\n * from the resolved Tailwind class or inline style on the inner div,\n * after CSS inlining.\n *\n * Falls back to the value of `data-maizzle-msow-fallback` (default\n * `600px`) when the value can't be parsed.\n */\nexport function msoWidthFromClass(dom: ChildNode[]): ChildNode[] {\n  const widths = new Map<string, string>()\n\n  walk(dom, (node) => {\n    const el = node as Element\n    const id = el.attribs?.['data-maizzle-msow-id']\n    if (!id) return\n    delete el.attribs['data-maizzle-msow-id']\n\n    const fallback = el.attribs['data-maizzle-msow-fallback'] ?? '600px'\n    delete el.attribs['data-maizzle-msow-fallback']\n\n    const style = el.attribs.style ?? ''\n    const raw = style.match(RE_MAX_WIDTH)?.[1] ?? style.match(RE_WIDTH)?.[1]\n    const resolved = raw ? resolveWidth(raw) : null\n    widths.set(id, resolved ?? fallback)\n  })\n\n  if (widths.size === 0) return dom\n\n  walk(dom, (node) => {\n    if (node.type !== 'comment') return\n    let data = (node as any).data as string\n    if (!data.includes('__MAIZZLE_MSOW_')) return\n    for (const [id, px] of widths) {\n      data = data.replaceAll(`__MAIZZLE_MSOW_${id}__`, px)\n    }\n    ;(node as any).data = data\n  })\n\n  return dom\n}\n"],"mappings":";;;;AAGA,MAAM,eAAe;AACrB,MAAM,WAAW;AACjB,MAAM,aAAa;AAEnB,SAAS,aAAa,OAA8B;CAClD,MAAM,UAAU,MAAM,MAAM;AAC5B,KAAI,WAAW,KAAK,QAAQ,CAAE,QAAO;CACrC,MAAM,IAAI,QAAQ,MAAM,6BAA6B;AACrD,KAAI,CAAC,EAAG,QAAO;CACf,MAAM,IAAI,WAAW,EAAE,GAAG;AAC1B,UAAS,EAAE,MAAM,MAAM,aAAa,EAApC;EACE,KAAK,KAAM,QAAO,GAAG,KAAK,MAAM,EAAE,CAAC;EACnC,KAAK;EACL,KAAK,KAAM,QAAO,GAAG,KAAK,MAAM,IAAI,GAAG,CAAC;EACxC,KAAK,KAAM,QAAO,GAAG,KAAK,MAAM,IAAI,MAAM,CAAC;EAC3C,QAAS,QAAO;;;;;;;;;;;;;;;AAgBpB,SAAgB,kBAAkB,KAA+B;CAC/D,MAAM,yBAAS,IAAI,KAAqB;AAExC,MAAK,MAAM,SAAS;EAClB,MAAM,KAAK;EACX,MAAM,KAAK,GAAG,UAAU;AACxB,MAAI,CAAC,GAAI;AACT,SAAO,GAAG,QAAQ;EAElB,MAAM,WAAW,GAAG,QAAQ,iCAAiC;AAC7D,SAAO,GAAG,QAAQ;EAElB,MAAM,QAAQ,GAAG,QAAQ,SAAS;EAClC,MAAM,MAAM,MAAM,MAAM,aAAa,GAAG,MAAM,MAAM,MAAM,SAAS,GAAG;EACtE,MAAM,WAAW,MAAM,aAAa,IAAI,GAAG;AAC3C,SAAO,IAAI,IAAI,YAAY,SAAS;GACpC;AAEF,KAAI,OAAO,SAAS,EAAG,QAAO;AAE9B,MAAK,MAAM,SAAS;AAClB,MAAI,KAAK,SAAS,UAAW;EAC7B,IAAI,OAAQ,KAAa;AACzB,MAAI,CAAC,KAAK,SAAS,kBAAkB,CAAE;AACvC,OAAK,MAAM,CAAC,IAAI,OAAO,OACrB,QAAO,KAAK,WAAW,kBAAkB,GAAG,KAAK,GAAG;AAErD,EAAC,KAAa,OAAO;GACtB;AAEF,QAAO"}

package/dist/transformers/purgeCSS.mjs

@@ -91,7 +91,7 @@ function deepPurge(dom, safelist) {
 	walk(dom, (node) => {
 		const el = node;
 		if (el.name !== "style" || !el.attribs) return;
-		if ("data-embed" in el.attribs) return;
+		if ("data-embed" in el.attribs || "embed" in el.attribs) return;
 		const textNode = el.children?.find((c) => c.type === "text");
 		if (!textNode?.data?.trim()) return;
 		const root = postcss.parse(textNode.data, { parser: safeParser });

package/dist/transformers/purgeCSS.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"purgeCSS.mjs","names":["merge"],"sources":["../../src/transformers/purgeCSS.ts"],"sourcesContent":["import { comb } from 'email-comb'\nimport { defu as merge } from 'defu'\nimport postcss from 'postcss'\nimport safeParser from 'postcss-safe-parser'\nimport { selectAll } from 'css-select'\nimport type { ChildNode, Element } from 'domhandler'\nimport { parse, serialize, walk } from '../utils/ast/index.ts'\nimport type { CssConfig } from '../types/config.ts'\n\nconst DEFAULT_SAFELIST: string[] = [\n  '*body*', // Gmail\n  '.gmail*', // Gmail\n  '.apple*', // Apple Mail\n  '.ios*', // Mail on iOS\n  '.ox-*', // Open-Xchange\n  '.outlook*', // Outlook.com\n  '[data-ogs*', // Outlook.com\n  '.bloop_container', // Airmail\n  '.Singleton', // Apple Mail 10\n  '.unused', // Notes 8\n  '.moz-text-html', // Thunderbird\n  '.mail-detail-content', // Comcast, Libero webmail\n  '*edo*', // Edison (all)\n  '#*', // Freenet uses #msgBody\n  '.lang*', // Fenced code blocks\n]\n\nconst DEFAULT_OPTIONS = {\n  backend: [\n    { heads: '{{', tails: '}}' },\n    { heads: '{%', tails: '%}' },\n  ],\n  whitelist: [...DEFAULT_SAFELIST],\n}\n\n/**\n * Remove unused CSS transformer.\n *\n * Uses `email-comb` to strip CSS selectors and corresponding class/id\n * references that are not matched anywhere in the HTML body.\n *\n * Enable by setting `css.purge: true` (or passing options).\n * The user-supplied options are merged on top of the defaults, so\n * `safelist` values are **appended** to the built-in safelist rather\n * than replacing it.\n *\n * Accepts `ChildNode[]` as input, serializes internally before passing\n * to email-comb (which requires a raw HTML string), then parses the\n * result back to `ChildNode[]` so it fits in the DOM pipeline.\n */\nexport function purgeCSS(dom: ChildNode[], config: CssConfig = {}): ChildNode[] {\n  const option = config.purge\n\n  if (!option) return dom\n\n  const userOptions = typeof option === 'object' ? option : {}\n\n  // Merge user options on top of defaults.\n  // defu merges objects deeply; for arrays it appends user values.\n  // We want the user safelist appended to the default safelist,\n  // so we build whitelist manually.\n  const userSafelist = Array.isArray((userOptions as any).safelist)\n    ? (userOptions as any).safelist as string[]\n    : []\n\n  const { safelist: _discard, ...restUserOptions } = userOptions as any\n\n  const options = merge(\n    { ...restUserOptions, whitelist: [...DEFAULT_SAFELIST, ...userSafelist] },\n    DEFAULT_OPTIONS,\n  )\n\n  // Deep purge first: DOM-aware selector removal using PostCSS + css-select.\n  // Runs before email-comb so that email-comb can clean up orphaned classes\n  // in HTML attributes left behind by removed CSS rules.\n  const safelist = [...DEFAULT_SAFELIST, ...userSafelist]\n  dom = deepPurge(dom, safelist)\n\n  const { result } = comb(serialize(dom), options)\n\n  let purgedDom = parse(result)\n\n  // Clean up data-embed/embed attributes — no longer needed after purging\n  walk(purgedDom, (node) => {\n    const el = node as Element\n    if (el.name === 'style' && el.attribs) {\n      delete el.attribs['data-embed']\n      delete el.attribs.embed\n    }\n  })\n\n  return purgedDom\n}\n\n/**\n * Deep purge: uses PostCSS to parse CSS in non-embedded style tags,\n * then checks each selector against the DOM with css-select.\n * Removes rules where no selector matches any element.\n */\nfunction isSafelisted(selector: string, safelist: string[]): boolean {\n  return safelist.some((pattern) => {\n    if (pattern.startsWith('*') && pattern.endsWith('*')) {\n      return selector.includes(pattern.slice(1, -1))\n    }\n    if (pattern.endsWith('*')) {\n      return selector.startsWith(pattern.slice(0, -1))\n    }\n    if (pattern.startsWith('*')) {\n      return selector.endsWith(pattern.slice(1))\n    }\n    return selector === pattern\n  })\n}\n\nfunction deepPurge(dom: ChildNode[], safelist: string[]): ChildNode[] {\n  walk(dom, (node) => {\n    const el = node as Element\n\n    if (el.name !== 'style' || !el.attribs) return\n    if ('data-embed' in el.attribs) return\n\n    const textNode = el.children?.find((c: any) => c.type === 'text') as any\n    if (!textNode?.data?.trim()) return\n\n    const root = postcss.parse(textNode.data, { parser: safeParser })\n\n    root.walkRules((rule) => {\n      // Skip rules inside @media or other at-rules — those may target\n      // states we can't match statically (hover, responsive, etc.)\n      if (rule.parent?.type === 'atrule') return\n\n      const selectors = rule.selectors ?? [rule.selector]\n      const matched = selectors.filter((sel) => {\n        // Keep safelisted selectors\n        if (isSafelisted(sel, safelist)) return true\n\n        // Skip pseudo-classes/elements that can't be matched statically.\n        // Functional pseudos like :not(), :is(), :where(), :has() are\n        // matchable by css-select, so we only skip dynamic/state ones.\n        if (/::[\\w-]/.test(sel)) return true\n        if (/(?<!:):(?!not\\b|is\\b|where\\b|has\\b)[\\w-]/.test(sel.replace(/\\\\./g, ''))) return true\n\n        try {\n          return selectAll(sel, dom).length > 0\n        } catch {\n          // If css-select can't parse the selector, keep it\n          return true\n        }\n      })\n\n      if (matched.length === 0) {\n        rule.remove()\n      } else if (matched.length < selectors.length) {\n        rule.selectors = matched\n      }\n    })\n\n    // Remove empty at-rules\n    root.walkAtRules((atRule) => {\n      if (atRule.nodes?.length === 0) {\n        atRule.remove()\n      }\n    })\n\n    const purgedCss = root.toString()\n\n    if (purgedCss.trim()) {\n      textNode.data = purgedCss\n    } else {\n      // Remove the style tag entirely if empty\n      const parent = el.parent\n      if (parent && 'children' in parent) {\n        const idx = parent.children.indexOf(el as any)\n        if (idx !== -1) parent.children.splice(idx, 1)\n      }\n    }\n  })\n\n  return dom\n}\n"],"mappings":"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"}
+{"version":3,"file":"purgeCSS.mjs","names":["merge"],"sources":["../../src/transformers/purgeCSS.ts"],"sourcesContent":["import { comb } from 'email-comb'\nimport { defu as merge } from 'defu'\nimport postcss from 'postcss'\nimport safeParser from 'postcss-safe-parser'\nimport { selectAll } from 'css-select'\nimport type { ChildNode, Element } from 'domhandler'\nimport { parse, serialize, walk } from '../utils/ast/index.ts'\nimport type { CssConfig } from '../types/config.ts'\n\nconst DEFAULT_SAFELIST: string[] = [\n  '*body*', // Gmail\n  '.gmail*', // Gmail\n  '.apple*', // Apple Mail\n  '.ios*', // Mail on iOS\n  '.ox-*', // Open-Xchange\n  '.outlook*', // Outlook.com\n  '[data-ogs*', // Outlook.com\n  '.bloop_container', // Airmail\n  '.Singleton', // Apple Mail 10\n  '.unused', // Notes 8\n  '.moz-text-html', // Thunderbird\n  '.mail-detail-content', // Comcast, Libero webmail\n  '*edo*', // Edison (all)\n  '#*', // Freenet uses #msgBody\n  '.lang*', // Fenced code blocks\n]\n\nconst DEFAULT_OPTIONS = {\n  backend: [\n    { heads: '{{', tails: '}}' },\n    { heads: '{%', tails: '%}' },\n  ],\n  whitelist: [...DEFAULT_SAFELIST],\n}\n\n/**\n * Remove unused CSS transformer.\n *\n * Uses `email-comb` to strip CSS selectors and corresponding class/id\n * references that are not matched anywhere in the HTML body.\n *\n * Enable by setting `css.purge: true` (or passing options).\n * The user-supplied options are merged on top of the defaults, so\n * `safelist` values are **appended** to the built-in safelist rather\n * than replacing it.\n *\n * Accepts `ChildNode[]` as input, serializes internally before passing\n * to email-comb (which requires a raw HTML string), then parses the\n * result back to `ChildNode[]` so it fits in the DOM pipeline.\n */\nexport function purgeCSS(dom: ChildNode[], config: CssConfig = {}): ChildNode[] {\n  const option = config.purge\n\n  if (!option) return dom\n\n  const userOptions = typeof option === 'object' ? option : {}\n\n  // Merge user options on top of defaults.\n  // defu merges objects deeply; for arrays it appends user values.\n  // We want the user safelist appended to the default safelist,\n  // so we build whitelist manually.\n  const userSafelist = Array.isArray((userOptions as any).safelist)\n    ? (userOptions as any).safelist as string[]\n    : []\n\n  const { safelist: _discard, ...restUserOptions } = userOptions as any\n\n  const options = merge(\n    { ...restUserOptions, whitelist: [...DEFAULT_SAFELIST, ...userSafelist] },\n    DEFAULT_OPTIONS,\n  )\n\n  // Deep purge first: DOM-aware selector removal using PostCSS + css-select.\n  // Runs before email-comb so that email-comb can clean up orphaned classes\n  // in HTML attributes left behind by removed CSS rules.\n  const safelist = [...DEFAULT_SAFELIST, ...userSafelist]\n  dom = deepPurge(dom, safelist)\n\n  const { result } = comb(serialize(dom), options)\n\n  let purgedDom = parse(result)\n\n  // Clean up data-embed/embed attributes — no longer needed after purging\n  walk(purgedDom, (node) => {\n    const el = node as Element\n    if (el.name === 'style' && el.attribs) {\n      delete el.attribs['data-embed']\n      delete el.attribs.embed\n    }\n  })\n\n  return purgedDom\n}\n\n/**\n * Deep purge: uses PostCSS to parse CSS in non-embedded style tags,\n * then checks each selector against the DOM with css-select.\n * Removes rules where no selector matches any element.\n */\nfunction isSafelisted(selector: string, safelist: string[]): boolean {\n  return safelist.some((pattern) => {\n    if (pattern.startsWith('*') && pattern.endsWith('*')) {\n      return selector.includes(pattern.slice(1, -1))\n    }\n    if (pattern.endsWith('*')) {\n      return selector.startsWith(pattern.slice(0, -1))\n    }\n    if (pattern.startsWith('*')) {\n      return selector.endsWith(pattern.slice(1))\n    }\n    return selector === pattern\n  })\n}\n\nfunction deepPurge(dom: ChildNode[], safelist: string[]): ChildNode[] {\n  walk(dom, (node) => {\n    const el = node as Element\n\n    if (el.name !== 'style' || !el.attribs) return\n    if ('data-embed' in el.attribs || 'embed' in el.attribs) return\n\n    const textNode = el.children?.find((c: any) => c.type === 'text') as any\n    if (!textNode?.data?.trim()) return\n\n    const root = postcss.parse(textNode.data, { parser: safeParser })\n\n    root.walkRules((rule) => {\n      // Skip rules inside @media or other at-rules — those may target\n      // states we can't match statically (hover, responsive, etc.)\n      if (rule.parent?.type === 'atrule') return\n\n      const selectors = rule.selectors ?? [rule.selector]\n      const matched = selectors.filter((sel) => {\n        // Keep safelisted selectors\n        if (isSafelisted(sel, safelist)) return true\n\n        // Skip pseudo-classes/elements that can't be matched statically.\n        // Functional pseudos like :not(), :is(), :where(), :has() are\n        // matchable by css-select, so we only skip dynamic/state ones.\n        if (/::[\\w-]/.test(sel)) return true\n        if (/(?<!:):(?!not\\b|is\\b|where\\b|has\\b)[\\w-]/.test(sel.replace(/\\\\./g, ''))) return true\n\n        try {\n          return selectAll(sel, dom).length > 0\n        } catch {\n          // If css-select can't parse the selector, keep it\n          return true\n        }\n      })\n\n      if (matched.length === 0) {\n        rule.remove()\n      } else if (matched.length < selectors.length) {\n        rule.selectors = matched\n      }\n    })\n\n    // Remove empty at-rules\n    root.walkAtRules((atRule) => {\n      if (atRule.nodes?.length === 0) {\n        atRule.remove()\n      }\n    })\n\n    const purgedCss = root.toString()\n\n    if (purgedCss.trim()) {\n      textNode.data = purgedCss\n    } else {\n      // Remove the style tag entirely if empty\n      const parent = el.parent\n      if (parent && 'children' in parent) {\n        const idx = parent.children.indexOf(el as any)\n        if (idx !== -1) parent.children.splice(idx, 1)\n      }\n    }\n  })\n\n  return dom\n}\n"],"mappings":"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"}

package/dist/transformers/tailwindcss.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"tailwindcss.d.mts","names":[],"sources":["../../src/transformers/tailwindcss.ts"],"mappings":";;;;;;AAoJA;;;;;;;;;;;;;;iBAAsB,WAAA,CAAY,GAAA,EAAK,SAAA,IAAa,MAAA,EAAQ,aAAA,EAAe,QAAA,YAAoB,OAAA,CAAQ,SAAA"}
+{"version":3,"file":"tailwindcss.d.mts","names":[],"sources":["../../src/transformers/tailwindcss.ts"],"mappings":";;;;;;AAqIA;;;;;;;;;;;;;;iBAAsB,WAAA,CAAY,GAAA,EAAK,SAAA,IAAa,MAAA,EAAQ,aAAA,EAAe,QAAA,YAAoB,OAAA,CAAQ,SAAA"}

package/dist/transformers/tailwindcss.mjs

@@ -4,6 +4,8 @@ import resolveProps_default from "../plugins/postcss/resolveProps.mjs";
 import pruneVars_default from "../plugins/postcss/pruneVars.mjs";
 import { tailwindCleanup } from "../plugins/postcss/tailwindCleanup.mjs";
 import { mergeMediaQueries } from "../plugins/postcss/mergeMediaQueries.mjs";
+import { quoteFontFamilies } from "../plugins/postcss/quoteFontFamilies.mjs";
+import { decodeStyleEntities } from "../utils/decodeStyleEntities.mjs";
 import { dirname, relative, resolve } from "node:path";
 import postcss from "postcss";
 import tailwindcssPostcss from "@tailwindcss/postcss";
@@ -25,16 +27,6 @@ function createProcessor(config) {
 	]);
 }
 /**
-* Decode HTML entities that Vue SSR encodes inside <style> tags.
-*
-* Vue's renderToString HTML-encodes quotes and other characters
-* inside <style> tags within templates, breaking CSS like
-* `@import "@maizzle/tailwindcss"` → `@import &quot;...&quot;`
-*/
-function decodeEntities(str) {
-	return str.replace(/&quot;/g, "\"").replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&#39;/g, "'").replace(/&apos;/g, "'");
-}
-/**
 * Check if CSS content uses Tailwind features that require source scanning.
 *
 * Only CSS that imports Tailwind (or @maizzle/tailwindcss) needs @source
@@ -42,7 +34,7 @@ function decodeEntities(str) {
 * and would pass through @source directives unconsumed.
 */
 function usesTailwind(css) {
-	return /(@import\s+["'](tailwindcss|@maizzle\/tailwindcss)|@tailwind\s)/.test(css);
+	return /((@import|@reference)\s+["'](tailwindcss|@maizzle\/tailwindcss)|@tailwind\s)/.test(css);
 }
 /**
 * Lower modern CSS syntax using lightningcss.
@@ -66,7 +58,7 @@ function lowerSyntax(css) {
 * then sorts and merges media queries.
 */
 async function optimizeCss(css, config) {
-	const plugins = [...tailwindCleanup(config)];
+	const plugins = [...tailwindCleanup(config), quoteFontFamilies()];
 	const mediaPlugin = mergeMediaQueries(config);
 	if (mediaPlugin) plugins.push(mediaPlugin);
 	return (await postcss(plugins).process(css, { from: void 0 })).css;
@@ -114,17 +106,15 @@ async function tailwindcss(dom, config, filePath) {
 	walk(dom, (node) => {
 		if (node.name !== "style") return;
 		const el = node;
-		const attrs = el.attribs || {};
-		if ("raw" in attrs) {
+		if ("raw" in (el.attribs || {})) {
 			delete el.attribs.raw;
 			return;
 		}
-		if ("embed" in attrs || "data-embed" in attrs) return;
 		const rawContent = el.children.filter((child) => child.type === "text").map((child) => child.data).join("");
 		if (!rawContent.trim()) return;
 		styleTags.push({
 			node: el,
-			cssContent: decodeEntities(rawContent)
+			cssContent: decodeStyleEntities(rawContent)
 		});
 	});
 	if (!styleTags.length) return dom;