@emailens/engine 0.11.1 → 0.11.2

package/README.md

@@ -10,7 +10,7 @@
 [![CI](https://github.com/emailens/engine/actions/workflows/ci.yml/badge.svg)](https://github.com/emailens/engine/actions/workflows/ci.yml)
 [![npm](https://img.shields.io/npm/v/@emailens/engine)](https://www.npmjs.com/package/@emailens/engine)
 [![license](https://img.shields.io/npm/l/@emailens/engine)](./LICENSE)
-[![tests](https://img.shields.io/badge/tests-910%20passing-brightgreen)]()
+[![tests](https://img.shields.io/badge/tests-1036%20passing-brightgreen)]()
 [![node](https://img.shields.io/node/v/@emailens/engine)](https://nodejs.org/)
 [![MCP](https://img.shields.io/badge/MCP-Server-blue)](https://github.com/emailens/mcp)
 [![GitHub stars](https://img.shields.io/github/stars/emailens/engine?style=flat)](https://github.com/emailens/engine/stargazers)
@@ -106,11 +106,14 @@ const { code } = await generateAiFix({
 
 ## What It Catches
 
-10 analysis engines, one `auditEmail()` call.
+14 analysis engines, one `auditEmail()` call.
 
 - **CSS compatibility**: 255 CSS and HTML features tested across 21 email clients, with fix snippets and AI-powered auto-fix
+- **Outlook VML**: structural faults in the Outlook-only markup inside `<!--[if mso]>` conditional comments — the one part of an email a DOM analyzer structurally cannot see, since to every HTML parser it is a comment node and to a screenshot it does not exist
 - **Content overflow**: fixed widths wider than the email frame and unbreakable strings that force horizontal scrolling
 - **Visual bugs**: gradients/background images with no color fallback (invisible content in Outlook) and fonts with no web-safe fallback, each with a concrete fix
+- **Design consistency**: colours that differ as values but not to a reader (OKLab distance), and runaway cardinality in type sizes, families and corner radii
+- **Dark and mobile contrast**: the two renders nobody checks — what a client's forced inversion does, what the email's own `prefers-color-scheme` block does, and what changes below the mobile breakpoint
 - **Spam scoring**: 45+ signals modeled after SpamAssassin, CAN-SPAM, and GDPR
 - **Accessibility**: WCAG contrast ratios, alt text, semantic structure, heading hierarchy
 - **Link validation**: broken hrefs, insecure HTTP, `javascript:` protocols, deceptive URLs
@@ -207,7 +210,7 @@ Full API reference: **[docs/API.md](./docs/API.md)**
 
 Covers:
 - `auditEmail` and `createSession`: core analysis
-- Standalone analyzers (CSS, spam, links, accessibility, images, inbox preview, size, templates)
+- Standalone analyzers (CSS, VML, spam, links, accessibility, images, inbox preview, size, templates)
 - DNS deliverability and SpamAssassin integration
 - Client transforms and dark mode simulation
 - Compile module (JSX, MJML, Maizzle)
@@ -220,7 +223,7 @@ Covers:
 
 See [ROADMAP.md](./ROADMAP.md) for the full picture (shipped items + items under consideration with rationale).
 
-**Shipped:** automated caniemail.com data sync · GitHub Actions integration via `@emailens/cli` and the [Marketplace Action](https://github.com/marketplace/actions/emailens-email-preview-check) · AI-powered fix generation · compile module for JSX/MJML/Maizzle.
+**Shipped:** Outlook VML structural validation (`checkVml`, verified against the Word engine) · automated caniemail.com data sync · GitHub Actions integration via `@emailens/cli` and the [Marketplace Action](https://github.com/marketplace/actions/emailens-email-preview-check) · AI-powered fix generation · compile module for JSX/MJML/Maizzle.
 
 **Considering:** Outlook VML auto-generation · plugin system for custom analyzers · MJML/Maizzle source-level linting · ESLint plugin · spam corpus tuning · dark-mode accuracy tests.
 

package/dist/index.cjs

@@ -79,6 +79,7 @@ __export(index_exports, {
   analyzeEmail: () => analyzeEmail,
   analyzeImages: () => analyzeImages,
   analyzeSpam: () => analyzeSpam,
+  arcsizeToRadius: () => arcsizeToRadius,
   auditEmail: () => auditEmail,
   caveatApplies: () => caveatApplies,
   checkAccessibility: () => checkAccessibility,
@@ -110,6 +111,8 @@ __export(index_exports, {
   heuristicTokenCount: () => heuristicTokenCount,
   parseColor: () => parseColor,
   relativeLuminance: () => relativeLuminance,
+  renderOutlookBranch: () => renderOutlookBranch,
+  resolveMsoBranch: () => resolveMsoBranch,
   rgbToOklab: () => rgbToOklab,
   simulateDarkMode: () => simulateDarkMode,
   structuralWarnings: () => structuralWarnings,
@@ -117,6 +120,7 @@ __export(index_exports, {
   transformForAllClients: () => transformForAllClients,
   transformForClient: () => transformForClient,
   validateLinks: () => validateLinks,
+  vmlToCss: () => vmlToCss,
   warningsForClient: () => warningsForClient,
   wcagGrade: () => wcagGrade
 });
@@ -9855,6 +9859,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;
@@ -10578,7 +10690,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) {
@@ -13316,9 +13429,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;
 }
@@ -13539,10 +13652,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;
@@ -14263,8 +14376,8 @@ function checkTemplateVariablesFromDom($, source) {
   const attrSelectors = ["[href]", "[src]", "[alt]"];
   for (const sel of attrSelectors) {
     $(sel).each((_, el) => {
-      const attrs = ["href", "src", "alt"];
-      for (const attr2 of attrs) {
+      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) {
@@ -14504,9 +14617,9 @@ function locAt(source, offset, length) {
     length
   };
 }
-function attr(attrs, name) {
+function attr(attrs2, name) {
   var _a;
-  const m = attrs.match(
+  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;
@@ -14814,8 +14927,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($) {
@@ -15221,6 +15334,7 @@ var CompileError = class extends Error {
   analyzeEmail,
   analyzeImages,
   analyzeSpam,
+  arcsizeToRadius,
   auditEmail,
   caveatApplies,
   checkAccessibility,
@@ -15252,6 +15366,8 @@ var CompileError = class extends Error {
   heuristicTokenCount,
   parseColor,
   relativeLuminance,
+  renderOutlookBranch,
+  resolveMsoBranch,
   rgbToOklab,
   simulateDarkMode,
   structuralWarnings,
@@ -15259,6 +15375,7 @@ var CompileError = class extends Error {
   transformForAllClients,
   transformForClient,
   validateLinks,
+  vmlToCss,
   warningsForClient,
   wcagGrade
 });