@emailens/engine 0.11.5 → 0.11.7

package/dist/index.js

@@ -9768,8 +9768,10 @@ function arcsizeToRadius(arcsize, width, height) {
   if (!Number.isFinite(pct)) return 0;
   return Math.min(100, Math.max(0, pct)) / 100 * (Math.min(width, height) / 2);
 }
+var DOWNLEVEL_REVEALED = /<!--\[if[^\]]*!\s*(?:mso|vml)[^\]]*\]>\s*<!--(?:>|\s*-->)([\s\S]*?)<!--\s*<!\[endif\]-->/gi;
+var DOWNLEVEL_HIDDEN = /<!--\[if(?![^\]]*!)[^\]]*(?:mso|vml)[^\]]*\]>([\s\S]*?)<!\[endif\]-->/gi;
 function resolveMsoBranch(html) {
-  return html.replace(/<!--\[if\s*!\s*(?:mso|vml)[^\]]*\]><!-->([\s\S]*?)<!--<!\[endif\]-->/gi, "").replace(/<!--\[if[^\]]*(?:mso|vml)[^\]]*\]>([\s\S]*?)<!\[endif\]-->/gi, "$1");
+  return html.replace(DOWNLEVEL_REVEALED, "").replace(DOWNLEVEL_HIDDEN, "$1");
 }
 function vmlToCss(html) {
   let out = html;
@@ -11501,6 +11503,7 @@ function fromHtml(html, empty, fn, options) {
 }
 
 // src/analyze.ts
+var WORD_ENGINE_CLIENT = "outlook-windows-legacy";
 var HTML_ELEMENT_SELECTORS = {
   "<style>": "style",
   "<link>": "link[rel='stylesheet']",
@@ -11841,7 +11844,32 @@ function analyzeEmail(html, framework, options) {
     throw new Error(`HTML input exceeds ${MAX_HTML_SIZE / 1024}KB limit.`);
   }
   const $ = loadHtml(html, options);
-  return analyzeEmailFromDom($, framework, (options == null ? void 0 : options.positions) ? html : void 0);
+  return analyzeAllBranches($, html, framework, (options == null ? void 0 : options.positions) ? html : void 0);
+}
+function analyzeAllBranches($, html, framework, source) {
+  return withOutlookBranch(html, analyzeEmailFromDom($, framework, source), framework);
+}
+function withOutlookBranch(html, warnings, framework) {
+  if (!/<!--\[if/i.test(html)) return warnings;
+  let branchWarnings;
+  try {
+    const resolved = resolveMsoBranch(html);
+    if (resolved === html) return warnings;
+    branchWarnings = analyzeEmailFromDom(loadHtml(resolved), framework).filter((w) => w.client === WORD_ENGINE_CLIENT);
+  } catch (e) {
+    return warnings;
+  }
+  const kept = warnings.filter((w) => w.client !== WORD_ENGINE_CLIENT);
+  const firstPassWord = warnings.filter((w) => w.client === WORD_ENGINE_CLIENT);
+  const byKey = new Map(firstPassWord.map((w) => [`${w.property}:${w.severity}`, w]));
+  const merged = branchWarnings.map((w) => {
+    var _a;
+    return (_a = byKey.get(`${w.property}:${w.severity}`)) != null ? _a : w;
+  });
+  for (const w of firstPassWord) {
+    if (!merged.some((m) => m.property === w.property && m.severity === w.severity)) merged.push(w);
+  }
+  return [...kept, ...merged];
 }
 function getFixType(prop) {
   return STRUCTURAL_FIX_PROPERTIES.has(prop) ? "structural" : "css";
@@ -14307,6 +14335,7 @@ function checkTemplateVariables(html, options) {
 
 // src/overflow-checker.ts
 import * as csstree7 from "css-tree";
+var RESPONSIVE_MIN_WIDTH = 320;
 function fixedPxWidth($el) {
   const style = $el.attr("style") || "";
   const styleMatch = style.match(/(?:^|[;\s])width\s*:\s*(\d+)px/i);
@@ -14441,6 +14470,30 @@ function checkOverflowFromDom($, source) {
       }, loc ? { loc, locs: [loc] } : {}));
     }
   }
+  if (!/@media/i.test($.html())) {
+    let widest = 0;
+    let widestLabel = "";
+    let widestLoc;
+    $("table, td, div").each((_, el) => {
+      const $el = $(el);
+      const width = fixedPxWidth($el);
+      if (width === null || width < RESPONSIVE_MIN_WIDTH) return;
+      if (isFluid($el.attr("style") || "")) return;
+      if (width <= widest) return;
+      widest = width;
+      widestLabel = `<${(el.tagName || "element").toLowerCase()}>`;
+      const fromStyle = /(?:^|[;\s])width\s*:\s*\d+px/i.test($el.attr("style") || "");
+      widestLoc = locOfAttr(el, fromStyle ? "style" : "width");
+    });
+    if (widest > 0) {
+      issues.push(__spreadValues({
+        rule: "no-responsive-rules",
+        severity: "warning",
+        message: `${widestLabel} is a fixed ${widest}px wide and the email has no @media rules, so nothing tells a narrow screen what to do.`,
+        detail: `Each mobile client then decides for itself: one scales the layout to fit, another leaves it to scroll, a third stretches the container while any child with a px max-width stays put and leaves gutters. Give the container width:100% with max-width:${widest}px, and add a breakpoint for the parts that need to stack.`
+      }, widestLoc ? { loc: widestLoc, locs: [widestLoc] } : {}));
+    }
+  }
   return { hasOverflow: issues.length > 0, issues };
 }
 function checkOverflow(html, options) {
@@ -14547,13 +14600,70 @@ function checkLooseText(issues, seen, open, inner, source) {
     detail: `Verified in Outlook Classic: the shape renders its fill and shape correctly and shows no text at all, so the reader gets a blank coloured block where the label should be. Nothing errors and the HTML fallback still reads correctly in every other client, so this ships unnoticed. Wrap the text in <center> (what the bulletproof-button pattern uses) or in <v:textbox>.`
   }, locAt(source, open.offset, open.length)));
 }
+var GHOST_TAGS = /* @__PURE__ */ new Set(["table", "tr", "td", "th", "tbody", "thead", "tfoot"]);
+function ghostTags(blocks) {
+  const tags = [];
+  const re = /<(\/?)(table|tr|td|th|tbody|thead|tfoot)\b((?:[^>"']|"[^"]*"|'[^']*')*?)(\/?)>/gi;
+  for (const block of blocks) {
+    let m;
+    re.lastIndex = 0;
+    while ((m = re.exec(block.inner)) !== null) {
+      tags.push({
+        name: m[2].toLowerCase(),
+        closing: m[1] === "/",
+        selfClosing: m[4] === "/",
+        attrs: m[3],
+        offset: block.offset + m.index,
+        length: m[0].length
+      });
+    }
+  }
+  return tags;
+}
+function checkGhostTables(issues, seen, blocks, source) {
+  var _a;
+  const tags = ghostTags(blocks);
+  if (tags.length === 0) return;
+  const opens = /* @__PURE__ */ new Map();
+  const strays = [];
+  for (const tag of tags) {
+    if (tag.selfClosing) continue;
+    const list = (_a = opens.get(tag.name)) != null ? _a : [];
+    if (tag.closing) {
+      if (list.length === 0) strays.push(tag);
+      else list.pop();
+    } else list.push(tag);
+    opens.set(tag.name, list);
+  }
+  for (const [name, list] of opens) {
+    if (!GHOST_TAGS.has(name)) continue;
+    for (const tag of list.slice(0, 1)) {
+      add(issues, seen, `ghost-open:${name}`, withLoc({
+        rule: "ghost-table-unbalanced",
+        severity: "error",
+        message: `<${name}> is opened inside an Outlook conditional comment and never closed.`,
+        detail: `The closing half of a ghost wrapper lives in its own <!--[if mso]> block, usually much further down the file, and is easy to lose in an edit. Outlook is left with a table that never ends, so it swallows the rest of the email; every other client sees only comment nodes and renders normally, which is why this survives review. Add the matching </${name}> in a closing conditional block.`
+      }, locAt(source, tag.offset, tag.length)));
+    }
+  }
+  for (const tag of strays.slice(0, 1)) {
+    add(issues, seen, `ghost-stray:${tag.name}`, withLoc({
+      rule: "ghost-table-unbalanced",
+      severity: "error",
+      message: `Closing </${tag.name}> inside an Outlook conditional comment has no matching opening tag.`,
+      detail: `The opening half of the ghost wrapper is missing or was removed. Outlook receives a stray closing tag, which ends a table it never started and can truncate the layout from that point.`
+    }, locAt(source, tag.offset, tag.length)));
+  }
+}
 function checkVml(html, options) {
   if (!html || !html.trim()) return EMPTY_VML;
   const source = (options == null ? void 0 : options.positions) ? html : void 0;
-  const tags = vmlTags(msoBlocks(html));
-  if (tags.length === 0) return EMPTY_VML;
+  const blocks = msoBlocks(html);
+  const tags = vmlTags(blocks);
   const issues = [];
   const seen = /* @__PURE__ */ new Map();
+  checkGhostTables(issues, seen, blocks, source);
+  if (tags.length === 0) return { hasVml: false, issues };
   const openShapes = [];
   let groupDepth = 0;
   for (const tag of tags) {
@@ -14986,7 +15096,7 @@ function runAudit($, html, framework, options) {
   var _a;
   const skip = new Set((_a = options == null ? void 0 : options.skip) != null ? _a : []);
   const source = (options == null ? void 0 : options.positions) ? html : void 0;
-  const warnings = skip.has("compatibility") ? [] : analyzeEmailFromDom($, framework, source);
+  const warnings = skip.has("compatibility") ? [] : analyzeAllBranches($, html, framework, source);
   const scores = skip.has("compatibility") ? {} : generateCompatibilityScore(warnings);
   const spam = skip.has("spam") ? EMPTY_SPAM : analyzeSpamFromDom($, options == null ? void 0 : options.spam);
   const links = skip.has("links") ? EMPTY_LINKS : validateLinksFromDom($);
@@ -15151,7 +15261,7 @@ function createSession(html, options) {
       return runAudit($, html, framework, __spreadProps(__spreadValues({}, opts), { positions: options == null ? void 0 : options.positions }));
     },
     analyze() {
-      return analyzeEmailFromDom($, framework, source);
+      return analyzeAllBranches($, html, framework, source);
     },
     score(warnings) {
       return generateCompatibilityScore(warnings);