@emailens/engine 0.11.0 → 0.11.2

package/dist/index.js

@@ -9740,6 +9740,114 @@ function downlevelCSS(html) {
   return $.html();
 }
 
+// src/vml-render.ts
+function px(value) {
+  if (!value) return void 0;
+  const m = value.trim().match(/^(-?[\d.]+)(?:px)?$/i);
+  return m ? parseFloat(m[1]) : void 0;
+}
+function styleProps(style) {
+  const out = {};
+  for (const decl of style.split(";")) {
+    const i = decl.indexOf(":");
+    if (i > 0) out[decl.slice(0, i).trim().toLowerCase()] = decl.slice(i + 1).trim();
+  }
+  return out;
+}
+function attrs(raw) {
+  var _a, _b;
+  const out = {};
+  for (const m of raw.matchAll(/([\w:-]+)\s*=\s*"([^"]*)"|([\w:-]+)\s*=\s*'([^']*)'/g)) {
+    out[((_a = m[1]) != null ? _a : m[3]).toLowerCase()] = (_b = m[2]) != null ? _b : m[4];
+  }
+  return out;
+}
+function arcsizeToRadius(arcsize, width, height) {
+  const raw = arcsize.trim();
+  const pct = raw.endsWith("%") ? parseFloat(raw) : parseFloat(raw) * 100;
+  if (!Number.isFinite(pct)) return 0;
+  return Math.min(100, Math.max(0, pct)) / 100 * (Math.min(width, height) / 2);
+}
+function resolveMsoBranch(html) {
+  return html.replace(/<!--\[if\s*!\s*(?:mso|vml)[^\]]*\]><!-->([\s\S]*?)<!--<!\[endif\]-->/gi, "").replace(/<!--\[if[^\]]*(?:mso|vml)[^\]]*\]>([\s\S]*?)<!\[endif\]-->/gi, "$1");
+}
+function vmlToCss(html) {
+  let out = html;
+  out = out.replace(
+    /<v:roundrect([^>]*)>([\s\S]*?)<\/v:roundrect>/gi,
+    (_m, rawAttrs, inner) => {
+      var _a, _b, _c, _d, _e, _f;
+      const a = attrs(rawAttrs);
+      const s = styleProps((_a = a.style) != null ? _a : "");
+      const w = (_b = px(s.width)) != null ? _b : 0;
+      const h = (_c = px(s.height)) != null ? _c : 0;
+      const radius = a.arcsize ? arcsizeToRadius(a.arcsize, w, h) : 0.2 * (Math.min(w, h) / 2);
+      const fill = (_d = a.fillcolor) != null ? _d : "transparent";
+      const stroked = !(a.stroke === "f" || a.stroke === "false");
+      const middle = /middle/i.test((_e = s["v-text-anchor"]) != null ? _e : "");
+      const label = inner.replace(/<\/?(?:w:anchorlock|center)[^>]*>/gi, "").trim();
+      const box = [
+        w ? `width:${w}px` : "",
+        h ? `height:${h}px` : "",
+        `border-radius:${radius}px`,
+        `background:${fill}`,
+        stroked ? `border:1px solid ${(_f = a.strokecolor) != null ? _f : "#000"}` : "border:none",
+        "display:inline-flex",
+        "justify-content:center",
+        `align-items:${middle ? "center" : "flex-start"}`,
+        "overflow:hidden",
+        "text-align:center"
+      ].filter(Boolean).join(";");
+      const href = a.href ? ` data-href="${a.href}"` : "";
+      return `<div data-vml="roundrect"${href} style="${box}">${label}</div>`;
+    }
+  );
+  out = out.replace(
+    /<v:rect([^>]*)>([\s\S]*?)<\/v:rect>/gi,
+    (_m, rawAttrs, inner) => {
+      var _a, _b, _c, _d, _e, _f;
+      const a = attrs(rawAttrs);
+      const s = styleProps((_a = a.style) != null ? _a : "");
+      const w = px(s.width);
+      const h = px(s.height);
+      const fillTag = inner.match(/<v:fill([^>]*?)\/?>/i);
+      const f = fillTag ? attrs(fillTag[1]) : {};
+      const type = ((_b = f.type) != null ? _b : "solid").toLowerCase();
+      let background = "";
+      if (f.src && type === "tile") {
+        background = `background-image:url('${f.src}');background-repeat:repeat;`;
+      } else if (f.src) {
+        background = `background-image:url('${f.src}');background-size:cover;background-position:center;`;
+      } else if (type === "gradient" || type === "gradientradial") {
+        const from = (_d = (_c = f.color) != null ? _c : a.fillcolor) != null ? _d : "transparent";
+        const to = (_e = f.color2) != null ? _e : from;
+        const angle = f.angle ? `${parseFloat(f.angle)}deg` : "180deg";
+        background = type === "gradientradial" ? `background-image:radial-gradient(${from},${to});` : `background-image:linear-gradient(${angle},${from},${to});`;
+      }
+      const solid = (_f = f.color) != null ? _f : a.fillcolor;
+      const tb = inner.match(/<v:textbox([^>]*)>([\s\S]*?)<\/v:textbox>/i);
+      const inset = tb ? attrs(tb[1]).inset : void 0;
+      const padding = inset ? inset.split(",").map((p) => {
+        var _a2;
+        return `${(_a2 = px(p.trim())) != null ? _a2 : 0}px`;
+      }).join(" ") : "0";
+      const content = tb ? tb[2] : inner.replace(/<v:fill[^>]*?\/?>/gi, "");
+      const box = [
+        w !== void 0 ? `width:${w}px` : "",
+        h !== void 0 ? `height:${h}px` : "",
+        solid ? `background-color:${solid}` : "",
+        `padding:${padding}`
+      ].filter(Boolean).join(";");
+      return `<div data-vml="rect" style="${background}${box}">${content}</div>`;
+    }
+  );
+  return out.replace(/<\/?v:(?:fill|textbox|stroke|shadow|imagedata|path|formulas|handles)[^>]*?\/?>/gi, "");
+}
+function renderOutlookBranch(html) {
+  if (!/<!--\[if/i.test(html)) return html;
+  return vmlToCss(resolveMsoBranch(html));
+}
+
 // src/constants.ts
 var MAX_HTML_SIZE = 2 * 1024 * 1024;
 var MAX_WARNING_LOCATIONS = 100;
@@ -9793,6 +9901,7 @@ var EMPTY_INBOX_PREVIEW = { subject: null, preheader: null, subjectLength: 0, pr
 var EMPTY_SIZE = { htmlBytes: 0, humanSize: "0 B", clipped: false, issues: [] };
 var EMPTY_TEMPLATE = { unresolvedCount: 0, issues: [] };
 var EMPTY_OVERFLOW = { hasOverflow: false, issues: [] };
+var EMPTY_VML = { hasVml: false, issues: [] };
 var EMPTY_VISUAL = { issues: [] };
 var EMAIL_MAX_WIDTH = 600;
 var UNBREAKABLE_STRING_LENGTH = 30;
@@ -10462,7 +10571,8 @@ function transformForClient(html, clientId, framework) {
       ]
     };
   }
-  const downleveled = downlevelCSS(html);
+  const source = clientId === "outlook-windows-legacy" ? renderOutlookBranch(html) : html;
+  const downleveled = downlevelCSS(source);
   return applyTransform(downleveled, config, framework);
 }
 function transformForAllClients(html, framework) {
@@ -11001,11 +11111,11 @@ function locOfElement(el) {
   if (!raw) return void 0;
   return toLoc((_a = raw.startTag) != null ? _a : raw);
 }
-function locOfAttr(el, attr) {
+function locOfAttr(el, attr2) {
   var _a, _b, _c, _d;
   const raw = el == null ? void 0 : el.sourceCodeLocation;
   if (!raw) return void 0;
-  const attrLoc = (_d = (_a = raw.attrs) == null ? void 0 : _a[attr]) != null ? _d : (_c = (_b = raw.startTag) == null ? void 0 : _b.attrs) == null ? void 0 : _c[attr];
+  const attrLoc = (_d = (_a = raw.attrs) == null ? void 0 : _a[attr2]) != null ? _d : (_c = (_b = raw.startTag) == null ? void 0 : _b.attrs) == null ? void 0 : _c[attr2];
   return attrLoc ? toLoc(attrLoc) : locOfElement(el);
 }
 function locInAttr(attrLoc, source, property, occurrence = 0) {
@@ -13200,9 +13310,9 @@ function mediaApplies(prelude, ctx) {
   const scheme = text.match(/prefers-color-scheme\s*:\s*(dark|light)/);
   if (scheme && scheme[1] === "dark" !== ctx.dark) return false;
   for (const m of text.matchAll(/(max|min)-width\s*:\s*([^)]+)/g)) {
-    const px = mediaPx(m[2]);
-    if (px === null) continue;
-    if (m[1] === "max" ? ctx.width > px : ctx.width < px) return false;
+    const px2 = mediaPx(m[2]);
+    if (px2 === null) continue;
+    if (m[1] === "max" ? ctx.width > px2 : ctx.width < px2) return false;
   }
   return true;
 }
@@ -13423,10 +13533,10 @@ function resolveBackground($, el, cascade) {
 function isLargeText(size, weight) {
   const match = size == null ? void 0 : size.match(/^(\d+(?:\.\d+)?)(px|pt)/i);
   if (!match) return false;
-  const px = match[2].toLowerCase() === "pt" ? parseFloat(match[1]) * 1.333 : parseFloat(match[1]);
+  const px2 = match[2].toLowerCase() === "pt" ? parseFloat(match[1]) * 1.333 : parseFloat(match[1]);
   const w = weight == null ? void 0 : weight.trim().toLowerCase();
   const bold = w === "bold" || w === "bolder" || !!w && parseInt(w, 10) >= 700;
-  return px >= 18 || px >= 14 && bold;
+  return px2 >= 18 || px2 >= 14 && bold;
 }
 function inherited($, el, cascade, prop) {
   var _a, _b;
@@ -14147,23 +14257,23 @@ function checkTemplateVariablesFromDom($, source) {
   const attrSelectors = ["[href]", "[src]", "[alt]"];
   for (const sel of attrSelectors) {
     $(sel).each((_, el) => {
-      const attrs = ["href", "src", "alt"];
-      for (const attr of attrs) {
-        const value = $(el).attr(attr);
+      const attrs2 = ["href", "src", "alt"];
+      for (const attr2 of attrs2) {
+        const value = $(el).attr(attr2);
         if (!value) continue;
         for (const [pattern, label] of TEMPLATE_VARIABLE_PATTERNS) {
           pattern.lastIndex = 0;
           let match;
           while ((match = pattern.exec(value)) !== null) {
             const variable = match[0];
-            const key = `attr:${attr}:${variable}`;
+            const key = `attr:${attr2}:${variable}`;
             if (seen.has(key)) continue;
             seen.add(key);
-            const loc = locOfAttr(el, attr);
+            const loc = locOfAttr(el, attr2);
             issues.push(__spreadValues({
               rule: "unresolved-variable",
               severity: "error",
-              message: `Unresolved ${label} variable "${variable}" found in ${attr} attribute.`,
+              message: `Unresolved ${label} variable "${variable}" found in ${attr2} attribute.`,
               variable,
               location: "attribute"
             }, loc ? { loc } : {}));
@@ -14189,8 +14299,8 @@ function fixedPxWidth($el) {
   const style = $el.attr("style") || "";
   const styleMatch = style.match(/(?:^|[;\s])width\s*:\s*(\d+)px/i);
   if (styleMatch) return parseInt(styleMatch[1], 10);
-  const attr = $el.attr("width");
-  if (attr && /^\d+$/.test(attr.trim())) return parseInt(attr.trim(), 10);
+  const attr2 = $el.attr("width");
+  if (attr2 && /^\d+$/.test(attr2.trim())) return parseInt(attr2.trim(), 10);
   return null;
 }
 function isFluid(style) {
@@ -14330,6 +14440,193 @@ function checkOverflow(html, options) {
   );
 }
 
+// src/vml-checker.ts
+var SHAPE_TAGS = /* @__PURE__ */ new Set([
+  "rect",
+  "roundrect",
+  "oval",
+  "line",
+  "polyline",
+  "curve",
+  "arc",
+  "shape",
+  "image",
+  "background"
+]);
+var GROUP_TAGS = /* @__PURE__ */ new Set(["group"]);
+function msoBlocks(html) {
+  const blocks = [];
+  const re = /<!--\[if([^\]]*)\]>([\s\S]*?)<!\[endif\]-->/g;
+  let m;
+  while ((m = re.exec(html)) !== null) {
+    const condition = m[1];
+    if (/!\s*(mso|vml)/i.test(condition)) continue;
+    if (!/mso|vml/i.test(condition)) continue;
+    blocks.push({ inner: m[2], offset: m.index + m[0].length - m[2].length - "<![endif]-->".length });
+  }
+  return blocks;
+}
+function vmlTags(blocks) {
+  const tags = [];
+  const re = /<(\/?)v:([a-z]+)((?:[^>"']|"[^"]*"|'[^']*')*?)(\/?)>/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 locAt(source, offset, length) {
+  if (source === void 0) return void 0;
+  const start = positionOf(source, offset);
+  const end = positionOf(source, offset + length);
+  return {
+    line: start.line,
+    column: start.column,
+    endLine: end.line,
+    endColumn: end.column,
+    offset,
+    length
+  };
+}
+function attr(attrs2, name) {
+  var _a;
+  const m = attrs2.match(
+    new RegExp(`(?:^|\\s)${name}\\s*=\\s*"([^"]*)"|(?:^|\\s)${name}\\s*=\\s*'([^']*)'`, "i")
+  );
+  return m ? (_a = m[1]) != null ? _a : m[2] : void 0;
+}
+function add(issues, seen, key, issue) {
+  const existing = seen.get(key);
+  if (existing) {
+    if (!issue.loc || !existing.locs) return;
+    if (existing.locs.some((l) => l.offset === issue.loc.offset)) return;
+    if (existing.locs.length >= MAX_WARNING_LOCATIONS) {
+      existing.locsTruncated = true;
+      return;
+    }
+    existing.locs.push(issue.loc);
+    return;
+  }
+  seen.set(key, issue);
+  issues.push(issue);
+}
+function withLoc(issue, loc) {
+  return loc ? __spreadProps(__spreadValues({}, issue), { loc, locs: [loc] }) : issue;
+}
+var TEXT_HOSTS = /<\s*(center|v:textbox|div|p|table|h[1-6]|span|font|a)\b/i;
+function checkLooseText(issues, seen, open, inner, source) {
+  if (TEXT_HOSTS.test(inner)) return;
+  const text = inner.replace(/<!--[\s\S]*?-->/g, "").replace(/<[^>]*>/g, "").replace(/&nbsp;|\s/g, "");
+  if (text === "") return;
+  add(issues, seen, `loosetext:${open.name}`, withLoc({
+    rule: "vml-unrendered-text",
+    severity: "error",
+    message: `<v:${open.name}> has label text with no element around it, which Outlook does not draw.`,
+    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)));
+}
+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 issues = [];
+  const seen = /* @__PURE__ */ new Map();
+  const openShapes = [];
+  let groupDepth = 0;
+  for (const tag of tags) {
+    const { name } = tag;
+    const isShape = SHAPE_TAGS.has(name);
+    const isGroup = GROUP_TAGS.has(name);
+    const loc = locAt(source, tag.offset, tag.length);
+    if (tag.closing) {
+      if (isGroup) groupDepth = Math.max(0, groupDepth - 1);
+      if (isShape) {
+        const idx = openShapes.map((t) => t.name).lastIndexOf(name);
+        if (idx !== -1) {
+          const open = openShapes[idx];
+          const inner = html.slice(open.offset + open.length, tag.offset);
+          checkLooseText(issues, seen, open, inner, source);
+        }
+        if (idx === -1) {
+          add(issues, seen, `stray:${name}`, withLoc({
+            rule: "vml-unbalanced-tag",
+            severity: "error",
+            message: `Closing </v:${name}> has no matching opening tag.`,
+            detail: `Outlook stops rendering the shape when VML tags do not balance. Check that every conditional-comment block opens and closes the tags it is responsible for.`
+          }, loc));
+        } else {
+          openShapes.splice(idx, 1);
+        }
+      }
+      continue;
+    }
+    if (isGroup && !tag.selfClosing) groupDepth++;
+    if (isShape) {
+      const parent = openShapes[openShapes.length - 1];
+      if (parent && groupDepth === 0) {
+        add(issues, seen, `nested:${parent.name}>${name}`, withLoc({
+          rule: "vml-nested-shape",
+          severity: "error",
+          message: `<v:${name}> is nested inside <v:${parent.name}>. Outlook does not support nesting one VML shape inside another.`,
+          detail: `Verified in Outlook Classic, and the damage is not local. Three things happen: the containing <v:${parent.name}> does not render at all (its fill and everything inside it disappear, leaving the inner shape stranded); the table structure around it terminates early, so content *after* the shape falls out of the layout and renders outside the email frame; and every VML shape further down the email stops drawing its text, so buttons and headings after this point ship as blank coloured blocks. Confirmed with byte-identical probes either side of one nested shape: the one before it renders its labels, the one after it does not. Every other client renders the HTML fallback correctly, which is why none of this is visible outside the Word engine. Fix: lift the inner shape out of <v:${parent.name}>, or drop the container shape and keep the inner one (a framed background can degrade to a solid fill colour on the <td> instead).`
+        }, loc));
+      }
+      if (!tag.selfClosing) openShapes.push(tag);
+    }
+    const style = attr(tag.attrs, "style");
+    if (style && (isShape || isGroup)) {
+      for (const prop of ["width", "height"]) {
+        const m = style.match(new RegExp(`(?:^|;)\\s*${prop}\\s*:\\s*([^;]*)`, "i"));
+        if (!m) continue;
+        const value = m[1].trim();
+        if (value === "" || /^[a-z%]+$/i.test(value)) {
+          add(issues, seen, `dim:${name}:${prop}:${value}`, withLoc({
+            rule: "vml-invalid-dimension",
+            severity: "error",
+            message: `<v:${name}> has an invalid ${prop}: "${prop}:${value}" is missing its number.`,
+            detail: `Verified in Outlook Classic: the shape still draws, but at a size Outlook picks rather than the one you meant, and the content inside is clipped to it \u2014 roughly half the intended height in the case measured, with the text inside cut off. It fails quietly: there is no gap or broken image to notice, just content that is silently missing. Usually a template variable that resolved to an empty string. Set an explicit value in pixels, e.g. ${prop}:400px.`
+          }, loc));
+        }
+      }
+    }
+    if (name === "roundrect") {
+      const arcsize = attr(tag.attrs, "arcsize");
+      if (arcsize !== void 0) {
+        const raw = arcsize.trim();
+        const pct = raw.endsWith("%") ? parseFloat(raw) : parseFloat(raw) * 100;
+        if (Number.isFinite(pct) && (pct < 0 || pct > 100)) {
+          add(issues, seen, `arcsize:${raw}`, withLoc({
+            rule: "vml-arcsize-range",
+            severity: "warning",
+            message: `<v:roundrect> has arcsize="${raw}", outside the valid 0%\u2013100% range.`,
+            detail: `arcsize is a fraction of half the shape's smaller side: 0% is square, 100% is fully circular. Verified in Outlook Classic: out-of-range values are clamped, so 120% draws exactly the same corner as 100%. Nothing visibly breaks today, which is why this is a warning and not an error \u2014 but the radius you get is the renderer's clamp rather than a value you chose, and it is not guaranteed across clients. For a fully rounded button, say arcsize="100%".`
+          }, loc));
+        }
+      }
+    }
+  }
+  for (const tag of openShapes) {
+    add(issues, seen, `unclosed:${tag.name}`, withLoc({
+      rule: "vml-unbalanced-tag",
+      severity: "error",
+      message: `<v:${tag.name}> is never closed.`,
+      detail: `Outlook needs the matching </v:${tag.name}>, usually in a later conditional-comment block. Without it the shape swallows the rest of the email.`
+    }, locAt(source, tag.offset, tag.length)));
+  }
+  return { hasVml: true, issues };
+}
+
 // src/visual-checker.ts
 import * as csstree8 from "css-tree";
 var CSS_WIDE_KEYWORDS = /* @__PURE__ */ new Set(["inherit", "initial", "unset", "revert", "revert-layer"]);
@@ -14511,8 +14808,8 @@ function radiusLengths(value) {
   return lengths.filter((v) => {
     if (/^0(?:px|rem|em|%)?$/.test(v)) return false;
     if (v === "50%") return false;
-    const px = parseFloat(v);
-    return !(v.endsWith("px") && Number.isFinite(px) && px >= 500);
+    const px2 = parseFloat(v);
+    return !(v.endsWith("px") && Number.isFinite(px2) && px2 >= 500);
   });
 }
 function collect($) {
@@ -14660,6 +14957,7 @@ var EMPTY_AUDIT = {
   templateVariables: EMPTY_TEMPLATE,
   overflow: EMPTY_OVERFLOW,
   visual: EMPTY_VISUAL,
+  vml: EMPTY_VML,
   darkContrast: [],
   mobileContrast: [],
   design: EMPTY_DESIGN
@@ -14687,13 +14985,14 @@ function runAudit($, html, framework, options) {
   const templateVariables = skip.has("templateVariables") ? EMPTY_TEMPLATE : checkTemplateVariablesFromDom($, source);
   const overflow = skip.has("overflow") ? EMPTY_OVERFLOW : checkOverflowFromDom($, source);
   const visual = skip.has("visual") ? EMPTY_VISUAL : checkVisualFromDom($, source);
+  const vml = skip.has("vml") ? EMPTY_VML : checkVml(html, { positions: !!source });
   const darkContrast = skip.has("darkContrast") || skip.has("accessibility") ? [] : dedupeByElement([
     ...checkDarkModeContrast(html, accessibility.issues),
     ...checkDarkStylesContrastFromDom($, accessibility.issues)
   ]);
   const design = skip.has("design") ? EMPTY_DESIGN : checkDesignConsistencyFromDom($);
   const mobileContrast = skip.has("mobileContrast") || skip.has("accessibility") ? [] : checkMobileContrastFromDom($, accessibility.issues);
-  return { compatibility: { warnings, scores }, spam, links, accessibility, images, inboxPreview, size, templateVariables, overflow, visual, darkContrast, mobileContrast, design };
+  return { compatibility: { warnings, scores }, spam, links, accessibility, images, inboxPreview, size, templateVariables, overflow, visual, vml, darkContrast, mobileContrast, design };
 }
 function auditEmail(html, options) {
   return fromHtml(html, EMPTY_AUDIT, ($, h) => runAudit($, h, options == null ? void 0 : options.framework, options), options);
@@ -14905,6 +15204,7 @@ export {
   analyzeEmail,
   analyzeImages,
   analyzeSpam,
+  arcsizeToRadius,
   auditEmail,
   caveatApplies,
   checkAccessibility,
@@ -14916,6 +15216,7 @@ export {
   checkSize,
   checkTemplateVariables,
   checkVisual,
+  checkVml,
   colorDistance,
   contrastRatio,
   createSession,
@@ -14935,6 +15236,8 @@ export {
   heuristicTokenCount,
   parseColor,
   relativeLuminance,
+  renderOutlookBranch,
+  resolveMsoBranch,
   rgbToOklab,
   simulateDarkMode,
   structuralWarnings,
@@ -14942,6 +15245,7 @@ export {
   transformForAllClients,
   transformForClient,
   validateLinks,
+  vmlToCss,
   warningsForClient,
   wcagGrade
 };