@emailens/engine 0.10.0 → 0.10.1

package/dist/index.js

@@ -10375,351 +10375,25 @@ function transformForAllClients(html, framework) {
 }
 
 // src/analyze.ts
-import * as cheerio3 from "cheerio";
-import * as csstree3 from "css-tree";
-var HTML_ELEMENT_SELECTORS = {
-  "<style>": "style",
-  "<link>": "link[rel='stylesheet']",
-  "<svg>": "svg",
-  "<video>": "video",
-  "<form>": "form, input, button[type='submit']",
-  "<audio>": "audio",
-  "<picture>": "picture",
-  "<dialog>": "dialog",
-  "<meter>": "meter",
-  "<progress>": "progress",
-  "<select>": "select",
-  "<textarea>": "textarea",
-  "<marquee>": "marquee",
-  "<object>": "object",
-  "<base>": "base"
-};
-var HTML_ELEMENT_SEVERITY = {
-  "<style>": "error",
-  "<link>": "error",
-  "<svg>": "error",
-  "<form>": "error",
-  "<video>": "warning",
-  "<audio>": "warning",
-  "<picture>": "warning",
-  "<dialog>": "warning",
-  "<marquee>": "warning",
-  "<meter>": "warning",
-  "<progress>": "warning",
-  "<select>": "warning",
-  "<textarea>": "warning",
-  "<object>": "warning",
-  "<base>": "warning"
-};
-var HTML_ELEMENT_MESSAGES = {
-  "<style>": (n) => `${n} strips <style> blocks. Styles must be inlined.`,
-  "<link>": (n) => `${n} does not support external stylesheets.`,
-  "<svg>": (n) => `${n} does not support inline SVG.`,
-  "<video>": (n) => `${n} does not support <video> elements.`,
-  "<form>": (n) => `${n} strips form elements.`
-};
-var COMPOUND_DETECTORS = [
-  { key: "display:flex", property: "display", valueIncludes: "flex" },
-  { key: "display:grid", property: "display", valueIncludes: "grid" },
-  { key: "display:none", property: "display", valueIncludes: "none" }
-];
-var CSS_FUNCTION_DETECTORS = CSS_FUNCTION_FEATURES.map((fn) => ({
-  key: fn,
-  pattern: `${fn}(`
-  // require opening paren — matches "min(" but not "Minion"
-}));
-function analyzeEmailFromDom($, framework) {
-  const warnings = [];
-  const seenWarnings = /* @__PURE__ */ new Set();
-  function addWarning(w) {
-    const key = `${w.client}:${w.property}:${w.severity}:${w.selector || ""}`;
-    if (!seenWarnings.has(key)) {
-      seenWarnings.add(key);
-      warnings.push(w);
-    }
-  }
-  function describeSelector(el) {
-    var _a;
-    const $el = $(el);
-    const tag = ((_a = el.tagName) == null ? void 0 : _a.toLowerCase()) || "";
-    const cls = $el.attr("class");
-    const id = $el.attr("id");
-    if (id) return `${tag}#${id}`;
-    if (cls) return `${tag}.${cls.split(/\s+/)[0]}`;
-    const href = $el.attr("href");
-    if (href) return `${tag}[href]`;
-    return tag;
-  }
-  for (const feature of HTML_ELEMENT_FEATURES) {
-    const selector = HTML_ELEMENT_SELECTORS[feature];
-    if (!selector) continue;
-    if ($(selector).length === 0) continue;
-    const supportData = CSS_SUPPORT[feature];
-    if (!supportData) continue;
-    const baseSeverity = HTML_ELEMENT_SEVERITY[feature] || "warning";
-    for (const client of EMAIL_CLIENTS) {
-      const support = supportData[client.id];
-      if (support === "unsupported") {
-        const msgFn = HTML_ELEMENT_MESSAGES[feature];
-        const message = msgFn ? msgFn(client.name) : `${client.name} does not support ${feature}.`;
-        const sug = getSuggestion(feature, client.id, framework);
-        const fix = getCodeFix(feature, client.id, framework);
-        addWarning(__spreadValues({
-          severity: baseSeverity,
-          client: client.id,
-          property: feature,
-          message,
-          suggestion: sug.text,
-          fix,
-          fixType: getFixType(feature)
-        }, framework && (sug.isGenericFallback || fix && isCodeFixGenericFallback(feature, client.id, framework)) ? { fixIsGenericFallback: true } : {}));
-      } else if (support === "partial" && feature === "<style>") {
-        const sug = getSuggestion("<style>:partial", client.id, framework);
-        const fix = getCodeFix("<style>", client.id, framework);
-        addWarning(__spreadValues({
-          severity: "warning",
-          client: client.id,
-          property: "<style>",
-          message: `${client.name} has partial <style> support (head only, with limitations). Inline styles recommended.`,
-          suggestion: sug.text,
-          fix,
-          fixType: getFixType("<style>")
-        }, framework && (sug.isGenericFallback || fix && isCodeFixGenericFallback("<style>", client.id, framework)) ? { fixIsGenericFallback: true } : {}));
-      }
-    }
-  }
-  const parsedAtRules = /* @__PURE__ */ new Set();
-  const parsedProperties = /* @__PURE__ */ new Set();
-  const propertyLines = /* @__PURE__ */ new Map();
-  const propertyValues = /* @__PURE__ */ new Map();
-  const detectedCssFunctions = /* @__PURE__ */ new Set();
-  const detectedPseudoClasses = /* @__PURE__ */ new Set();
-  const detectedPseudoElements = /* @__PURE__ */ new Set();
-  $("style").each((_, el) => {
-    const cssText = $(el).text();
-    try {
-      const ast = csstree3.parse(cssText, { parseCustomProperty: true, positions: true });
-      csstree3.walk(ast, {
-        enter(node) {
-          if (node.type === "Atrule") {
-            parsedAtRules.add(`@${node.name}`);
-          }
-          if (node.type === "PseudoClassSelector") {
-            detectedPseudoClasses.add(`:${node.name}`);
-          }
-          if (node.type === "PseudoElementSelector") {
-            detectedPseudoElements.add(`::${node.name}`);
-          }
-          if (node.type === "Declaration") {
-            const prop = node.property.toLowerCase();
-            parsedProperties.add(prop);
-            if (node.loc && !propertyLines.has(prop)) {
-              propertyLines.set(prop, node.loc.start.line);
-            }
-            const valueStr = csstree3.generate(node.value);
-            const seenValues = propertyValues.get(prop);
-            if (seenValues) seenValues.push(valueStr);
-            else propertyValues.set(prop, [valueStr]);
-            for (const det of COMPOUND_DETECTORS) {
-              if (prop === det.property && valueStr.includes(det.valueIncludes)) {
-                parsedProperties.add(det.key);
-                if (node.loc && !propertyLines.has(det.key)) {
-                  propertyLines.set(det.key, node.loc.start.line);
-                }
-              }
-            }
-            for (const fn of CSS_FUNCTION_DETECTORS) {
-              if (valueStr.includes(fn.pattern)) {
-                detectedCssFunctions.add(fn.key);
-                if (node.loc && !propertyLines.has(fn.key)) {
-                  propertyLines.set(fn.key, node.loc.start.line);
-                }
-              }
-            }
-          }
-        }
-      });
-    } catch (e) {
-    }
-  });
-  for (const atRule of AT_RULE_FEATURES) {
-    if (!parsedAtRules.has(atRule)) continue;
-    checkPropertySupport(atRule, addWarning, framework);
-  }
-  const cssPropertiesToCheck = Object.keys(CSS_SUPPORT).filter(
-    (k) => !k.startsWith("<") && !k.startsWith("@")
-  );
-  $("[style]").each((_, el) => {
-    var _a;
-    const style = $(el).attr("style") || "";
-    const props = parseStyleProperties(style);
-    const selector = describeSelector(el);
-    for (const prop of props) {
-      for (const det of COMPOUND_DETECTORS) {
-        if (prop === det.property) {
-          const value2 = getStyleValue(style, prop);
-          if (value2 == null ? void 0 : value2.includes(det.valueIncludes)) {
-            checkPropertySupport(det.key, addWarning, framework, selector);
-          }
-        }
-      }
-      if (cssPropertiesToCheck.includes(prop)) {
-        checkPropertySupport(prop, addWarning, framework, selector, void 0, (_a = getStyleValue(style, prop)) != null ? _a : void 0);
-      }
-      const value = getStyleValue(style, prop);
-      if (value) {
-        for (const fn of CSS_FUNCTION_DETECTORS) {
-          if (value.includes(fn.pattern)) {
-            checkPropertySupport(fn.key, addWarning, framework, selector);
-          }
-        }
-      }
-    }
-  });
-  for (const prop of parsedProperties) {
-    if (prop.includes(":")) continue;
-    if (!cssPropertiesToCheck.includes(prop)) continue;
-    const values = propertyValues.get(prop);
-    checkPropertySupport(
-      prop,
-      addWarning,
-      framework,
-      void 0,
-      propertyLines.get(prop),
-      values ? values.join(" ") : void 0
-    );
-  }
-  for (const compound of COMPOUND_VALUE_FEATURES) {
-    if (compound.startsWith(":") || compound.startsWith("::")) continue;
-    if (parsedProperties.has(compound)) {
-      checkPropertySupport(compound, addWarning, framework, void 0, propertyLines.get(compound));
-    }
-  }
-  for (const pseudo of detectedPseudoClasses) {
-    if (CSS_SUPPORT[pseudo]) {
-      checkPropertySupport(pseudo, addWarning, framework);
-    }
-  }
-  for (const pseudo of detectedPseudoElements) {
-    if (CSS_SUPPORT[pseudo]) {
-      checkPropertySupport(pseudo, addWarning, framework);
-    }
-  }
-  for (const fn of detectedCssFunctions) {
-    checkPropertySupport(fn, addWarning, framework, void 0, propertyLines.get(fn));
-  }
-  const severityOrder = { error: 0, warning: 1, info: 2 };
-  warnings.sort((a, b) => severityOrder[a.severity] - severityOrder[b.severity]);
-  return warnings;
-}
-function analyzeEmail(html, framework) {
-  if (!html || !html.trim()) {
-    return [];
-  }
-  if (html.length > MAX_HTML_SIZE) {
-    throw new Error(`HTML input exceeds ${MAX_HTML_SIZE / 1024}KB limit.`);
-  }
-  const $ = cheerio3.load(html);
-  return analyzeEmailFromDom($, framework);
-}
-function getFixType(prop) {
-  return STRUCTURAL_FIX_PROPERTIES.has(prop) ? "structural" : "css";
-}
-var VALUE_CAVEAT_PROPS = /* @__PURE__ */ new Set(["margin", "position", "overflow"]);
-var POSITION_KEYWORDS = ["relative", "absolute", "fixed", "sticky"];
-function valueTriggersCaveat(prop, value, notes) {
-  const note = (notes != null ? notes : []).join(" ");
-  const noteLc = note.toLowerCase();
-  if (prop === "margin") {
-    if (/(?:^|[\s:(])-\.?\d/.test(value) && noteLc.includes("negative")) return true;
-    if (/\bauto\b/.test(value) && noteLc.includes("auto")) return true;
-    return false;
-  }
-  if (prop === "position") {
-    const used = POSITION_KEYWORDS.find((k) => new RegExp(`\\b${k}\\b`).test(value));
-    if (!used) return false;
-    const m = note.match(/supports\s+.+?\s+but not\s+([^.]+)/i);
-    if (m) return m[1].toLowerCase().includes(used);
-    return used === "fixed" || used === "sticky";
-  }
-  if (prop === "overflow") {
-    if (!/\b(?:auto|scroll)\b/.test(value)) return false;
-    return noteLc.includes("cannot scroll");
-  }
-  return true;
-}
-function noteSuffix(notes) {
-  if (!(notes == null ? void 0 : notes.length)) return "";
-  const cleaned = notes.map((n) => n.replace(/^(?:Partial|Buggy|Not supported)\.\s*/i, "").trim()).filter(Boolean);
-  return cleaned.length ? ` ${cleaned.join(" ")}` : "";
-}
-function checkPropertySupport(prop, addWarning, framework, selector, line, value) {
-  var _a;
-  const supportData = CSS_SUPPORT[prop];
-  if (!supportData) return;
-  const fixType = getFixType(prop);
-  const valueGated = VALUE_CAVEAT_PROPS.has(prop);
-  for (const client of EMAIL_CLIENTS) {
-    const support = supportData[client.id] || "unknown";
-    const notes = (_a = CSS_SUPPORT_NOTES[prop]) == null ? void 0 : _a[client.id];
-    if (support === "unsupported") {
-      const sug = getSuggestion(prop, client.id, framework);
-      const fix = getCodeFix(prop, client.id, framework);
-      addWarning(__spreadValues(__spreadValues(__spreadValues({
-        severity: "warning",
-        client: client.id,
-        property: prop,
-        message: `${client.name} does not support "${prop}".${noteSuffix(notes)}`,
-        suggestion: sug.text,
-        fix,
-        fixType
-      }, selector ? { selector } : {}), line !== void 0 ? { line } : {}), framework && (sug.isGenericFallback || fix && isCodeFixGenericFallback(prop, client.id, framework)) ? { fixIsGenericFallback: true } : {}));
-    } else if (support === "partial") {
-      if (valueGated && value !== void 0 && !valueTriggersCaveat(prop, value, notes)) continue;
-      const sug = getSuggestion(prop, client.id, framework);
-      const fix = getCodeFix(prop, client.id, framework);
-      addWarning(__spreadValues(__spreadValues(__spreadValues({
-        severity: "info",
-        client: client.id,
-        property: prop,
-        message: `${client.name} has partial support for "${prop}".${noteSuffix(notes)}`,
-        suggestion: sug.text,
-        fix,
-        fixType
-      }, selector ? { selector } : {}), line !== void 0 ? { line } : {}), framework && (sug.isGenericFallback || fix && isCodeFixGenericFallback(prop, client.id, framework)) ? { fixIsGenericFallback: true } : {}));
-    }
-  }
-}
-function generateCompatibilityScore(warnings) {
-  const result = {};
-  for (const client of EMAIL_CLIENTS) {
-    const clientWarnings = warnings.filter((w) => w.client === client.id);
-    const errorProps = new Set(clientWarnings.filter((w) => w.severity === "error").map((w) => w.property));
-    const warnProps = new Set(clientWarnings.filter((w) => w.severity === "warning").map((w) => w.property));
-    const infoProps = new Set(clientWarnings.filter((w) => w.severity === "info").map((w) => w.property));
-    const errors = errorProps.size;
-    const warns = warnProps.size;
-    const info = infoProps.size;
-    const score = Math.max(0, Math.min(100, 100 - errors * 10 - warns * 3));
-    result[client.id] = { score, errors, warnings: warns, info };
-  }
-  return result;
-}
-function warningsForClient(warnings, clientId) {
-  return warnings.filter((w) => w.client === clientId);
-}
-function errorWarnings(warnings) {
-  return warnings.filter((w) => w.severity === "error");
-}
-function structuralWarnings(warnings) {
-  return warnings.filter((w) => w.fixType === "structural");
-}
-
-// src/dark-mode.ts
 import * as cheerio4 from "cheerio";
+import * as csstree5 from "css-tree";
+
+// src/dark-mode-checker.ts
 import * as csstree4 from "css-tree";
+
+// src/dark-mode.ts
+import * as cheerio3 from "cheerio";
+import * as csstree3 from "css-tree";
 var LIGHT_THRESHOLD = 0.7;
 var DARK_THRESHOLD = 0.15;
+var PREFERS_COLOR_SCHEME_CLIENTS = [
+  "apple-mail-macos",
+  "apple-mail-ios",
+  "samsung-mail",
+  "thunderbird",
+  "hey-mail",
+  "superhuman"
+];
 function simulateDarkMode(html, clientId) {
   var _a, _b;
   if (!html || !html.trim()) {
@@ -10728,7 +10402,7 @@ function simulateDarkMode(html, clientId) {
   if (html.length > MAX_HTML_SIZE) {
     throw new Error(`HTML input exceeds ${MAX_HTML_SIZE / 1024}KB limit.`);
   }
-  const $ = cheerio4.load(html);
+  const $ = cheerio3.load(html);
   const warnings = [];
   $("img").each((_, el) => {
     const src = $(el).attr("src") || "";
@@ -10930,54 +10604,531 @@ function applyColorInversion($, mode) {
           }
         }
       }
-    });
-    if (changed) {
-      $(el).attr("style", serializeStyle(props));
+    });
+    if (changed) {
+      $(el).attr("style", serializeStyle(props));
+    }
+  });
+  $("style").each((_, el) => {
+    const cssText = $(el).text();
+    try {
+      const ast = csstree3.parse(cssText, { parseCustomProperty: true });
+      let modified = false;
+      csstree3.walk(ast, {
+        enter(node) {
+          if (node.type !== "Declaration") return;
+          const prop = node.property.toLowerCase();
+          if (!COLOR_PROPS.has(prop) && prop !== "background") return;
+          const valueStr = csstree3.generate(node.value);
+          if (prop === "background") {
+            const bgColor = extractBackgroundColor(valueStr);
+            if (bgColor) {
+              const inverted = invertColor(bgColor, mode);
+              if (inverted) {
+                const newValue = valueStr.replace(bgColor, inverted);
+                node.value = csstree3.parse(newValue, { context: "value" });
+                modified = true;
+              }
+            }
+          } else {
+            const inverted = invertColor(valueStr, mode);
+            if (inverted) {
+              node.value = csstree3.parse(inverted, { context: "value" });
+              modified = true;
+            }
+          }
+        }
+      });
+      if (modified) {
+        $(el).text(csstree3.generate(ast));
+      }
+    } catch (e) {
+    }
+  });
+  $("[bgcolor]").each((_, el) => {
+    const bgcolor = $(el).attr("bgcolor") || "";
+    const inverted = invertColor(bgcolor, mode);
+    if (inverted) {
+      $(el).attr("bgcolor", inverted);
+    }
+  });
+}
+
+// src/dark-mode-checker.ts
+var DARK_MEDIA_RE = /\(\s*prefers-color-scheme\s*:\s*dark\s*\)/i;
+var MAX_UNCOVERED_ELEMENTS = 3;
+function backgroundShorthandColor(value) {
+  if (!value) return null;
+  const trimmed = value.trim();
+  if (parseColor(trimmed)) return trimmed;
+  for (const token of trimmed.split(/\s+/)) {
+    if (token.includes("(")) continue;
+    if (parseColor(token)) return token;
+  }
+  return null;
+}
+function isLight(value) {
+  const c = parseColor(value);
+  if (!c || c.a < 0.5) return false;
+  return relativeLuminance(c.r, c.g, c.b) > LIGHT_THRESHOLD;
+}
+function collectDarkBlocks($) {
+  const block = { any: [], important: [], rules: 0 };
+  let found = false;
+  $("style").each((_, el) => {
+    const cssText = $(el).text();
+    if (!DARK_MEDIA_RE.test(cssText)) return;
+    let ast;
+    try {
+      ast = csstree4.parse(cssText);
+    } catch (e) {
+      found = true;
+      return;
+    }
+    csstree4.walk(ast, {
+      visit: "Atrule",
+      enter(node) {
+        if (node.type !== "Atrule" || node.name.toLowerCase() !== "media") return;
+        if (!node.prelude || !DARK_MEDIA_RE.test(csstree4.generate(node.prelude))) return;
+        found = true;
+        if (!node.block) return;
+        csstree4.walk(node.block, {
+          visit: "Rule",
+          enter(rule) {
+            if (rule.type !== "Rule") return;
+            block.rules++;
+            let setsBackground = false;
+            let important = false;
+            rule.block.children.forEach((child) => {
+              if (child.type !== "Declaration") return;
+              const prop = child.property.toLowerCase();
+              if (prop !== "background" && prop !== "background-color") return;
+              setsBackground = true;
+              if (child.important) important = true;
+            });
+            if (!setsBackground) return;
+            const selector = csstree4.generate(rule.prelude).trim();
+            if (!selector) return;
+            block.any.push(selector);
+            if (important) block.important.push(selector);
+          }
+        });
+      }
+    });
+  });
+  return found ? block : null;
+}
+function matchedElements($, selectors) {
+  const matched = /* @__PURE__ */ new Set();
+  for (const selector of selectors) {
+    try {
+      $(selector).each((_, el) => {
+        matched.add(el);
+      });
+    } catch (e) {
+    }
+  }
+  return matched;
+}
+function describeSelector($, el) {
+  var _a;
+  const $el = $(el);
+  const tag = ((_a = el.tagName) == null ? void 0 : _a.toLowerCase()) || "element";
+  const id = $el.attr("id");
+  if (id) return `${tag}#${id}`;
+  const cls = $el.attr("class");
+  if (cls) return `${tag}.${cls.split(/\s+/)[0]}`;
+  return tag;
+}
+function checkDarkModeFromDom($) {
+  var _a, _b;
+  const darkBlock = collectDarkBlocks($);
+  if (!darkBlock) return [];
+  const warnings = [];
+  const hasOptIn = $("meta").toArray().some((el) => {
+    const name = ($(el).attr("name") || "").trim().toLowerCase();
+    return name === "color-scheme" || name === "supported-color-schemes";
+  });
+  if (!hasOptIn) {
+    for (const clientId of PREFERS_COLOR_SCHEME_CLIENTS) {
+      warnings.push({
+        severity: "warning",
+        client: clientId,
+        property: "dark-mode-opt-in",
+        message: `The email has @media (prefers-color-scheme: dark) styles but no dark-mode opt-in meta tag. ${(_b = (_a = getClient(clientId)) == null ? void 0 : _a.name) != null ? _b : clientId} may keep the email in light mode, so the dark styles never activate.`,
+        suggestion: 'Add both opt-in tags to <head>: <meta name="color-scheme" content="light dark"> and <meta name="supported-color-schemes" content="light dark">.',
+        fixType: "structural"
+      });
+    }
+  }
+  if (darkBlock.rules === 0) return warnings;
+  const coveredByImportant = matchedElements($, darkBlock.important);
+  const coveredByAny = matchedElements($, darkBlock.any);
+  let uncovered = 0;
+  $("[bgcolor], [style]").each((_, el) => {
+    var _a2;
+    if (uncovered >= MAX_UNCOVERED_ELEMENTS) return false;
+    const $el = $(el);
+    const style = parseInlineStyle($el.attr("style") || "");
+    const inline = (_a2 = style.get("background-color")) != null ? _a2 : backgroundShorthandColor(style.get("background"));
+    const color = inline != null ? inline : $el.attr("bgcolor");
+    if (!color || !isLight(color)) return;
+    if (inline ? coveredByImportant.has(el) : coveredByAny.has(el)) return;
+    uncovered++;
+    const selector = describeSelector($, el);
+    for (const clientId of PREFERS_COLOR_SCHEME_CLIENTS) {
+      warnings.push({
+        severity: "warning",
+        client: clientId,
+        property: "dark-mode-coverage",
+        message: `<${selector}> keeps its hardcoded light background (${color}) in dark mode \u2014 the dark block never overrides it. The rest of the email inverts around it, producing a half-inverted render (e.g. light text left on a still-white background).`,
+        suggestion: inline ? `Override it inside @media (prefers-color-scheme: dark) with a dark background-color and !important (an inline style beats a plain rule), or move the colour onto a class the dark block already targets.` : `Override it inside @media (prefers-color-scheme: dark) with a dark background-color, or give the element a class the dark block already targets.`,
+        fixType: "css",
+        selector
+      });
+    }
+  });
+  return warnings;
+}
+
+// src/analyze.ts
+var HTML_ELEMENT_SELECTORS = {
+  "<style>": "style",
+  "<link>": "link[rel='stylesheet']",
+  "<svg>": "svg",
+  "<video>": "video",
+  "<form>": "form, input, button[type='submit']",
+  "<audio>": "audio",
+  "<picture>": "picture",
+  "<dialog>": "dialog",
+  "<meter>": "meter",
+  "<progress>": "progress",
+  "<select>": "select",
+  "<textarea>": "textarea",
+  "<marquee>": "marquee",
+  "<object>": "object",
+  "<base>": "base"
+};
+var HTML_ELEMENT_SEVERITY = {
+  "<style>": "error",
+  "<link>": "error",
+  "<svg>": "error",
+  "<form>": "error",
+  "<video>": "warning",
+  "<audio>": "warning",
+  "<picture>": "warning",
+  "<dialog>": "warning",
+  "<marquee>": "warning",
+  "<meter>": "warning",
+  "<progress>": "warning",
+  "<select>": "warning",
+  "<textarea>": "warning",
+  "<object>": "warning",
+  "<base>": "warning"
+};
+var HTML_ELEMENT_MESSAGES = {
+  "<style>": (n) => `${n} strips <style> blocks. Styles must be inlined.`,
+  "<link>": (n) => `${n} does not support external stylesheets.`,
+  "<svg>": (n) => `${n} does not support inline SVG.`,
+  "<video>": (n) => `${n} does not support <video> elements.`,
+  "<form>": (n) => `${n} strips form elements.`
+};
+var COMPOUND_DETECTORS = [
+  { key: "display:flex", property: "display", valueIncludes: "flex" },
+  { key: "display:grid", property: "display", valueIncludes: "grid" },
+  { key: "display:none", property: "display", valueIncludes: "none" }
+];
+var CSS_FUNCTION_DETECTORS = CSS_FUNCTION_FEATURES.map((fn) => ({
+  key: fn,
+  pattern: `${fn}(`
+  // require opening paren — matches "min(" but not "Minion"
+}));
+function analyzeEmailFromDom($, framework) {
+  const warnings = [];
+  const seenWarnings = /* @__PURE__ */ new Set();
+  function addWarning(w) {
+    const key = `${w.client}:${w.property}:${w.severity}:${w.selector || ""}`;
+    if (!seenWarnings.has(key)) {
+      seenWarnings.add(key);
+      warnings.push(w);
+    }
+  }
+  function describeSelector2(el) {
+    var _a;
+    const $el = $(el);
+    const tag = ((_a = el.tagName) == null ? void 0 : _a.toLowerCase()) || "";
+    const cls = $el.attr("class");
+    const id = $el.attr("id");
+    if (id) return `${tag}#${id}`;
+    if (cls) return `${tag}.${cls.split(/\s+/)[0]}`;
+    const href = $el.attr("href");
+    if (href) return `${tag}[href]`;
+    return tag;
+  }
+  for (const feature of HTML_ELEMENT_FEATURES) {
+    const selector = HTML_ELEMENT_SELECTORS[feature];
+    if (!selector) continue;
+    if ($(selector).length === 0) continue;
+    const supportData = CSS_SUPPORT[feature];
+    if (!supportData) continue;
+    const baseSeverity = HTML_ELEMENT_SEVERITY[feature] || "warning";
+    for (const client of EMAIL_CLIENTS) {
+      const support = supportData[client.id];
+      if (support === "unsupported") {
+        const msgFn = HTML_ELEMENT_MESSAGES[feature];
+        const message = msgFn ? msgFn(client.name) : `${client.name} does not support ${feature}.`;
+        const sug = getSuggestion(feature, client.id, framework);
+        const fix = getCodeFix(feature, client.id, framework);
+        addWarning(__spreadValues({
+          severity: baseSeverity,
+          client: client.id,
+          property: feature,
+          message,
+          suggestion: sug.text,
+          fix,
+          fixType: getFixType(feature)
+        }, framework && (sug.isGenericFallback || fix && isCodeFixGenericFallback(feature, client.id, framework)) ? { fixIsGenericFallback: true } : {}));
+      } else if (support === "partial" && feature === "<style>") {
+        const sug = getSuggestion("<style>:partial", client.id, framework);
+        const fix = getCodeFix("<style>", client.id, framework);
+        addWarning(__spreadValues({
+          severity: "warning",
+          client: client.id,
+          property: "<style>",
+          message: `${client.name} has partial <style> support (head only, with limitations). Inline styles recommended.`,
+          suggestion: sug.text,
+          fix,
+          fixType: getFixType("<style>")
+        }, framework && (sug.isGenericFallback || fix && isCodeFixGenericFallback("<style>", client.id, framework)) ? { fixIsGenericFallback: true } : {}));
+      }
     }
-  });
+  }
+  const parsedAtRules = /* @__PURE__ */ new Set();
+  const parsedProperties = /* @__PURE__ */ new Set();
+  const propertyLines = /* @__PURE__ */ new Map();
+  const propertyValues = /* @__PURE__ */ new Map();
+  const detectedCssFunctions = /* @__PURE__ */ new Set();
+  const detectedPseudoClasses = /* @__PURE__ */ new Set();
+  const detectedPseudoElements = /* @__PURE__ */ new Set();
   $("style").each((_, el) => {
     const cssText = $(el).text();
     try {
-      const ast = csstree4.parse(cssText, { parseCustomProperty: true });
-      let modified = false;
-      csstree4.walk(ast, {
+      const ast = csstree5.parse(cssText, { parseCustomProperty: true, positions: true });
+      csstree5.walk(ast, {
         enter(node) {
-          if (node.type !== "Declaration") return;
-          const prop = node.property.toLowerCase();
-          if (!COLOR_PROPS.has(prop) && prop !== "background") return;
-          const valueStr = csstree4.generate(node.value);
-          if (prop === "background") {
-            const bgColor = extractBackgroundColor(valueStr);
-            if (bgColor) {
-              const inverted = invertColor(bgColor, mode);
-              if (inverted) {
-                const newValue = valueStr.replace(bgColor, inverted);
-                node.value = csstree4.parse(newValue, { context: "value" });
-                modified = true;
+          if (node.type === "Atrule") {
+            parsedAtRules.add(`@${node.name}`);
+          }
+          if (node.type === "PseudoClassSelector") {
+            detectedPseudoClasses.add(`:${node.name}`);
+          }
+          if (node.type === "PseudoElementSelector") {
+            detectedPseudoElements.add(`::${node.name}`);
+          }
+          if (node.type === "Declaration") {
+            const prop = node.property.toLowerCase();
+            parsedProperties.add(prop);
+            if (node.loc && !propertyLines.has(prop)) {
+              propertyLines.set(prop, node.loc.start.line);
+            }
+            const valueStr = csstree5.generate(node.value);
+            const seenValues = propertyValues.get(prop);
+            if (seenValues) seenValues.push(valueStr);
+            else propertyValues.set(prop, [valueStr]);
+            for (const det of COMPOUND_DETECTORS) {
+              if (prop === det.property && valueStr.includes(det.valueIncludes)) {
+                parsedProperties.add(det.key);
+                if (node.loc && !propertyLines.has(det.key)) {
+                  propertyLines.set(det.key, node.loc.start.line);
+                }
               }
             }
-          } else {
-            const inverted = invertColor(valueStr, mode);
-            if (inverted) {
-              node.value = csstree4.parse(inverted, { context: "value" });
-              modified = true;
+            for (const fn of CSS_FUNCTION_DETECTORS) {
+              if (valueStr.includes(fn.pattern)) {
+                detectedCssFunctions.add(fn.key);
+                if (node.loc && !propertyLines.has(fn.key)) {
+                  propertyLines.set(fn.key, node.loc.start.line);
+                }
+              }
             }
           }
         }
       });
-      if (modified) {
-        $(el).text(csstree4.generate(ast));
-      }
     } catch (e) {
     }
   });
-  $("[bgcolor]").each((_, el) => {
-    const bgcolor = $(el).attr("bgcolor") || "";
-    const inverted = invertColor(bgcolor, mode);
-    if (inverted) {
-      $(el).attr("bgcolor", inverted);
+  for (const atRule of AT_RULE_FEATURES) {
+    if (!parsedAtRules.has(atRule)) continue;
+    checkPropertySupport(atRule, addWarning, framework);
+  }
+  const cssPropertiesToCheck = Object.keys(CSS_SUPPORT).filter(
+    (k) => !k.startsWith("<") && !k.startsWith("@")
+  );
+  $("[style]").each((_, el) => {
+    var _a;
+    const style = $(el).attr("style") || "";
+    const props = parseStyleProperties(style);
+    const selector = describeSelector2(el);
+    for (const prop of props) {
+      for (const det of COMPOUND_DETECTORS) {
+        if (prop === det.property) {
+          const value2 = getStyleValue(style, prop);
+          if (value2 == null ? void 0 : value2.includes(det.valueIncludes)) {
+            checkPropertySupport(det.key, addWarning, framework, selector);
+          }
+        }
+      }
+      if (cssPropertiesToCheck.includes(prop)) {
+        checkPropertySupport(prop, addWarning, framework, selector, void 0, (_a = getStyleValue(style, prop)) != null ? _a : void 0);
+      }
+      const value = getStyleValue(style, prop);
+      if (value) {
+        for (const fn of CSS_FUNCTION_DETECTORS) {
+          if (value.includes(fn.pattern)) {
+            checkPropertySupport(fn.key, addWarning, framework, selector);
+          }
+        }
+      }
     }
   });
+  for (const prop of parsedProperties) {
+    if (prop.includes(":")) continue;
+    if (!cssPropertiesToCheck.includes(prop)) continue;
+    const values = propertyValues.get(prop);
+    checkPropertySupport(
+      prop,
+      addWarning,
+      framework,
+      void 0,
+      propertyLines.get(prop),
+      values ? values.join(" ") : void 0
+    );
+  }
+  for (const compound of COMPOUND_VALUE_FEATURES) {
+    if (compound.startsWith(":") || compound.startsWith("::")) continue;
+    if (parsedProperties.has(compound)) {
+      checkPropertySupport(compound, addWarning, framework, void 0, propertyLines.get(compound));
+    }
+  }
+  for (const pseudo of detectedPseudoClasses) {
+    if (CSS_SUPPORT[pseudo]) {
+      checkPropertySupport(pseudo, addWarning, framework);
+    }
+  }
+  for (const pseudo of detectedPseudoElements) {
+    if (CSS_SUPPORT[pseudo]) {
+      checkPropertySupport(pseudo, addWarning, framework);
+    }
+  }
+  for (const fn of detectedCssFunctions) {
+    checkPropertySupport(fn, addWarning, framework, void 0, propertyLines.get(fn));
+  }
+  for (const w of checkDarkModeFromDom($)) addWarning(w);
+  const severityOrder = { error: 0, warning: 1, info: 2 };
+  warnings.sort((a, b) => severityOrder[a.severity] - severityOrder[b.severity]);
+  return warnings;
+}
+function analyzeEmail(html, framework) {
+  if (!html || !html.trim()) {
+    return [];
+  }
+  if (html.length > MAX_HTML_SIZE) {
+    throw new Error(`HTML input exceeds ${MAX_HTML_SIZE / 1024}KB limit.`);
+  }
+  const $ = cheerio4.load(html);
+  return analyzeEmailFromDom($, framework);
+}
+function getFixType(prop) {
+  return STRUCTURAL_FIX_PROPERTIES.has(prop) ? "structural" : "css";
+}
+var VALUE_CAVEAT_PROPS = /* @__PURE__ */ new Set(["margin", "position", "overflow"]);
+var POSITION_KEYWORDS = ["relative", "absolute", "fixed", "sticky"];
+function valueTriggersCaveat(prop, value, notes) {
+  const note = (notes != null ? notes : []).join(" ");
+  const noteLc = note.toLowerCase();
+  if (prop === "margin") {
+    if (/(?:^|[\s:(])-\.?\d/.test(value) && noteLc.includes("negative")) return true;
+    if (/\bauto\b/.test(value) && noteLc.includes("auto")) return true;
+    return false;
+  }
+  if (prop === "position") {
+    const used = POSITION_KEYWORDS.find((k) => new RegExp(`\\b${k}\\b`).test(value));
+    if (!used) return false;
+    const m = note.match(/supports\s+.+?\s+but not\s+([^.]+)/i);
+    if (m) return m[1].toLowerCase().includes(used);
+    return used === "fixed" || used === "sticky";
+  }
+  if (prop === "overflow") {
+    if (!/\b(?:auto|scroll)\b/.test(value)) return false;
+    return noteLc.includes("cannot scroll");
+  }
+  return true;
+}
+function noteSuffix(notes) {
+  if (!(notes == null ? void 0 : notes.length)) return "";
+  const cleaned = notes.map((n) => n.replace(/^(?:Partial|Buggy|Not supported)\.\s*/i, "").trim()).filter(Boolean);
+  return cleaned.length ? ` ${cleaned.join(" ")}` : "";
+}
+function checkPropertySupport(prop, addWarning, framework, selector, line, value) {
+  var _a;
+  const supportData = CSS_SUPPORT[prop];
+  if (!supportData) return;
+  const fixType = getFixType(prop);
+  const valueGated = VALUE_CAVEAT_PROPS.has(prop);
+  for (const client of EMAIL_CLIENTS) {
+    const support = supportData[client.id] || "unknown";
+    const notes = (_a = CSS_SUPPORT_NOTES[prop]) == null ? void 0 : _a[client.id];
+    if (support === "unsupported") {
+      const sug = getSuggestion(prop, client.id, framework);
+      const fix = getCodeFix(prop, client.id, framework);
+      addWarning(__spreadValues(__spreadValues(__spreadValues({
+        severity: "warning",
+        client: client.id,
+        property: prop,
+        message: `${client.name} does not support "${prop}".${noteSuffix(notes)}`,
+        suggestion: sug.text,
+        fix,
+        fixType
+      }, selector ? { selector } : {}), line !== void 0 ? { line } : {}), framework && (sug.isGenericFallback || fix && isCodeFixGenericFallback(prop, client.id, framework)) ? { fixIsGenericFallback: true } : {}));
+    } else if (support === "partial") {
+      if (valueGated && value !== void 0 && !valueTriggersCaveat(prop, value, notes)) continue;
+      const sug = getSuggestion(prop, client.id, framework);
+      const fix = getCodeFix(prop, client.id, framework);
+      addWarning(__spreadValues(__spreadValues(__spreadValues({
+        severity: "info",
+        client: client.id,
+        property: prop,
+        message: `${client.name} has partial support for "${prop}".${noteSuffix(notes)}`,
+        suggestion: sug.text,
+        fix,
+        fixType
+      }, selector ? { selector } : {}), line !== void 0 ? { line } : {}), framework && (sug.isGenericFallback || fix && isCodeFixGenericFallback(prop, client.id, framework)) ? { fixIsGenericFallback: true } : {}));
+    }
+  }
+}
+function generateCompatibilityScore(warnings) {
+  const result = {};
+  for (const client of EMAIL_CLIENTS) {
+    const clientWarnings = warnings.filter((w) => w.client === client.id);
+    const errorProps = new Set(clientWarnings.filter((w) => w.severity === "error").map((w) => w.property));
+    const warnProps = new Set(clientWarnings.filter((w) => w.severity === "warning").map((w) => w.property));
+    const infoProps = new Set(clientWarnings.filter((w) => w.severity === "info").map((w) => w.property));
+    const errors = errorProps.size;
+    const warns = warnProps.size;
+    const info = infoProps.size;
+    const score = Math.max(0, Math.min(100, 100 - errors * 10 - warns * 3));
+    result[client.id] = { score, errors, warnings: warns, info };
+  }
+  return result;
+}
+function warningsForClient(warnings, clientId) {
+  return warnings.filter((w) => w.client === clientId);
+}
+function errorWarnings(warnings) {
+  return warnings.filter((w) => w.severity === "error");
+}
+function structuralWarnings(warnings) {
+  return warnings.filter((w) => w.fixType === "structural");
 }
 
 // src/diff.ts
@@ -12679,7 +12830,7 @@ function checkTemplateVariables(html) {
 }
 
 // src/overflow-checker.ts
-import * as csstree5 from "css-tree";
+import * as csstree6 from "css-tree";
 function fixedPxWidth($el) {
   const style = $el.attr("style") || "";
   const styleMatch = style.match(/(?:^|[;\s])width\s*:\s*(\d+)px/i);
@@ -12716,11 +12867,11 @@ function checkOverflowFromDom($) {
   $("style").each((_, el) => {
     let ast;
     try {
-      ast = csstree5.parse($(el).text());
+      ast = csstree6.parse($(el).text());
     } catch (e) {
       return;
     }
-    csstree5.walk(ast, {
+    csstree6.walk(ast, {
       visit: "Rule",
       enter(node) {
         if (node.type !== "Rule") return;
@@ -12729,7 +12880,7 @@ function checkOverflowFromDom($) {
         node.block.children.forEach((child) => {
           if (child.type !== "Declaration") return;
           const prop = child.property.toLowerCase();
-          const val = csstree5.generate(child.value);
+          const val = csstree6.generate(child.value);
           if (prop === "width") {
             const m = val.match(/^(\d+)px$/);
             if (m) widthPx = parseInt(m[1], 10);
@@ -12739,7 +12890,7 @@ function checkOverflowFromDom($) {
           }
         });
         if (widthPx !== null && widthPx > EMAIL_MAX_WIDTH && !fluid) {
-          const selector = csstree5.generate(node.prelude).trim().slice(0, 40);
+          const selector = csstree6.generate(node.prelude).trim().slice(0, 40);
           addWidthIssue(widthPx, selector || "rule", issues, seen);
         }
       }
@@ -12773,7 +12924,7 @@ function checkOverflow(html) {
 }
 
 // src/visual-checker.ts
-import * as csstree6 from "css-tree";
+import * as csstree7 from "css-tree";
 var CSS_WIDE_KEYWORDS = /* @__PURE__ */ new Set(["inherit", "initial", "unset", "revert", "revert-layer"]);
 var GRADIENT_RE = /(?:linear|radial|conic)-gradient\(/i;
 function isSolidColor(value) {
@@ -12860,7 +13011,7 @@ function ruleToMap(node) {
   const map = /* @__PURE__ */ new Map();
   node.block.children.forEach((child) => {
     if (child.type === "Declaration") {
-      map.set(child.property.toLowerCase(), csstree6.generate(child.value));
+      map.set(child.property.toLowerCase(), csstree7.generate(child.value));
     }
   });
   return map;
@@ -12874,11 +13025,11 @@ function checkVisualFromDom($) {
   $("style").each((_, el) => {
     let ast;
     try {
-      ast = csstree6.parse($(el).text());
+      ast = csstree7.parse($(el).text());
     } catch (e) {
       return;
     }
-    csstree6.walk(ast, {
+    csstree7.walk(ast, {
       visit: "Rule",
       enter(node) {
         if (node.type === "Rule") inspectDeclarations(ruleToMap(node), issues, seen);
@@ -12962,7 +13113,7 @@ function toPlainText(html) {
     if (trimmed) lines.push(trimmed);
     currentLine = "";
   }
-  function walk7(node) {
+  function walk8(node) {
     var _a;
     if (node.type === "text") {
       const text = node.data.replace(/\s+/g, " ");
@@ -13011,7 +13162,7 @@ function toPlainText(html) {
       currentLine = "- ";
     }
     for (const child of el.children) {
-      walk7(child);
+      walk8(child);
     }
     if (isBlock) flushLine();
   }
@@ -13019,7 +13170,7 @@ function toPlainText(html) {
   const root = body.length ? body[0] : $.root()[0];
   if (root && "children" in root) {
     for (const child of root.children) {
-      walk7(child);
+      walk8(child);
     }
   }
   flushLine();