npm - @emailens/engine - Versions diffs - 0.12.0 → 0.12.1 - Mend

@emailens/engine 0.12.0 → 0.12.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (24) hide show

package/dist/{chunk-PW6EUG2G.js → chunk-OA6VNA5L.js} +16 -4
package/dist/chunk-OA6VNA5L.js.map +1 -0
package/dist/compile/index.cjs +16 -4
package/dist/compile/index.cjs.map +1 -1
package/dist/compile/index.d.cts +2 -21
package/dist/compile/index.d.ts +2 -21
package/dist/compile/index.js +2 -2
package/dist/index.cjs +381 -27
package/dist/index.cjs.map +1 -1
package/dist/index.d.cts +17 -5
package/dist/index.d.ts +17 -5
package/dist/index.js +380 -27
package/dist/index.js.map +1 -1
package/dist/maizzle-R5KU3HHZ.js +11 -0
package/dist/{react-email-BzyXjPrH.d.ts → react-email-CDNfg8Ta.d.ts} +1 -1
package/dist/{react-email-DHkCZ7TG.d.cts → react-email-eJhDK8a5.d.cts} +1 -1
package/dist/server.d.cts +1 -1
package/dist/server.d.ts +1 -1
package/dist/{types-edFeUest.d.cts → types-hQYXbiqj.d.cts} +22 -1
package/dist/{types-edFeUest.d.ts → types-hQYXbiqj.d.ts} +22 -1
package/package.json +1 -1
package/dist/chunk-PW6EUG2G.js.map +0 -1
package/dist/maizzle-KKJF7XY7.js +0 -9
/package/dist/{maizzle-KKJF7XY7.js.map → maizzle-R5KU3HHZ.js.map} +0 -0

package/dist/index.js CHANGED Viewed

@@ -10939,9 +10939,74 @@ var MAIZZLE_SUGGESTION_DATABASE = {
   "opacity::maizzle": "Use solid Tailwind color classes instead of opacity."
 };
+// src/fix-snippets/framework-markup.ts
+var FRAMEWORK_MARKUP_SUGGESTIONS = {
+  // ── The doctype ───────────────────────────────────────────────────────
+  // Every client that "does not support" it simply rewrites it, and none of
+  // the three frameworks lets you omit it. There is nothing to do.
+  "doctype::mjml": "MJML writes the doctype itself, and the clients that replace it do so without changing how the email renders. Nothing to change in your MJML.",
+  "doctype::maizzle": "Your Maizzle layout writes the doctype, and the clients that replace it do so without changing how the email renders. Nothing to change.",
+  "doctype::jsx": "React Email's <Html> renders the doctype, and the clients that replace it do so without changing how the email renders. Nothing to change.",
+  // ── lang and dir ──────────────────────────────────────────────────────
+  // Dropped, these cost screen-reader language and bidi hints, not layout.
+  "[lang]::mjml": "MJML sets lang on <html> from the lang attribute on <mjml>. Where a client drops it only assistive technology notices, so leave it: removing it helps nobody.",
+  "[lang]::maizzle": "Your Maizzle layout sets lang on <html>. Where a client drops it only assistive technology notices, so leave it.",
+  "[lang]::jsx": "React Email renders this from <Html lang=\u2026>. Where a client drops it only assistive technology notices, so leave it.",
+  "[dir]::mjml": "MJML sets dir from the dir attribute on <mjml>. For a right-to-left email, also set align on mj-text and mj-section, which those clients do honour.",
+  "[dir]::maizzle": "Your Maizzle layout sets dir. For a right-to-left email, also set align on the cells, which these clients do honour.",
+  "[dir]::jsx": "React Email renders this from <Html dir=\u2026>. For a right-to-left email, also set textAlign on the components, which these clients do honour.",
+  // ── role ──────────────────────────────────────────────────────────────
+  // All three add it to their layout tables. Dropping it loses the
+  // screen-reader hint and nothing visual.
+  "[role]::mjml": 'MJML adds role="presentation" to the tables it generates. A client that strips it announces the layout table to screen readers, which is worth knowing but is not something you can change from your MJML.',
+  "[role]::maizzle": "Maizzle's markup transformer adds role to layout tables. A client that strips it announces the table to screen readers; you can turn the transformer off, but the attribute is better present than absent.",
+  "[role]::jsx": "React Email's layout components add role to their tables. A client that strips it announces the table to screen readers, which is not something to fix in your component.",
+  // ── align ─────────────────────────────────────────────────────────────
+  "[align]::mjml": "MJML writes align onto the cells it generates. Set it through the align attribute on mj-section, mj-column, mj-image or mj-text; for the clients that ignore it, add text-align through mj-style and a css-class.",
+  "[align]::maizzle": "Maizzle writes align onto your table cells. For the clients that ignore it, add a text-align utility as well: those survive inlining.",
+  "[align]::jsx": "React Email components render align. For the clients that ignore it, pass textAlign in the style prop too, which is inlined and survives.",
+  // ── width and height ──────────────────────────────────────────────────
+  "[width]::mjml": "MJML writes width from mj-image's or mj-section's width attribute. A client that drops it sizes the element by its content, so also set width through mj-style and a css-class.",
+  "[width]::maizzle": "Maizzle writes width onto the table it generates. A client that drops it sizes by content, so keep a width utility on the element as well: inlined CSS survives where the attribute does not.",
+  "[width]::jsx": "React Email renders width from the component's width prop. A client that drops it sizes by content, so set width in the style prop too.",
+  "[height]::mjml": "MJML writes height from mj-image's height attribute. A client that drops it sizes by content, which for an image means reflow while it loads; set height through mj-style and a css-class as well.",
+  "[height]::maizzle": "Maizzle writes height onto the element. A client that drops it sizes by content, so keep a height utility on it as well.",
+  "[height]::jsx": "React Email renders height from the component's height prop. Set it in the style prop too, so the clients that drop the attribute still reserve the space.",
+  // ── <body> ────────────────────────────────────────────────────────────
+  "<body>::mjml": "MJML styles <body> from mj-body's background-color. Clients that replace <body> with a <div> lose it, so set background-color on mj-section too and the page still fills.",
+  "<body>::maizzle": "Your layout styles <body>. Clients that replace it with a <div> lose those styles, so put the background on a full-width wrapper table as well.",
+  "<body>::jsx": "React Email's <Body> carries your style prop. Clients that replace <body> with a <div> lose it, so put the background on a wrapping <Section> too."
+};
+var STYLE_SURVIVAL_NOTES = {
+  "gmail-space-separated-color::mjml": "The block comes from mj-style; write the colour with commas there.",
+  "gmail-space-separated-color::maizzle": "Maizzle rewrites colours it inlines, but a rule left in a <style> block passes through untouched. Fix it in your CSS source.",
+  "gmail-space-separated-color::jsx": "The block comes from a <style> element in your component; write the colour with commas.",
+  "gmail-space-separated-color-inline::mjml": "MJML builds inline styles from component attributes, so the colour came from one of them: write it with commas.",
+  "gmail-space-separated-color-inline::maizzle": "This survived inlining, so it was written inline in your template rather than in a utility class. Write it with commas.",
+  "gmail-space-separated-color-inline::jsx": "The colour is in a style prop object; write it with commas.",
+  "outlook-double-brace::mjml": "The stylesheet is assembled from mj-style. Put a newline before the closing brace of the media query, or stop minifying that block.",
+  "outlook-double-brace::maizzle": "Maizzle's minifier produces this. Leave a space between the braces in the source, or exclude the <style> block from minification.",
+  "outlook-double-brace::jsx": "The stylesheet comes from a <style> element in your component. Put a newline before the media query's closing brace.",
+  "yahoo-attribute-selector-semicolon::mjml": "The selector is in mj-style; split it into [style^=\u2026][style$=\u2026] there.",
+  "yahoo-attribute-selector-semicolon::maizzle": "The selector is in your CSS source; split it into [style^=\u2026][style$=\u2026] there.",
+  "yahoo-attribute-selector-semicolon::jsx": "The selector is in a <style> element in your component; split it into [style^=\u2026][style$=\u2026].",
+  "outlook-web-chained-class::mjml": "css-class takes several names, and MJML passes them through as written. Give the element one class carrying both rules instead.",
+  "outlook-web-chained-class::maizzle": "A compound like .a.b usually comes from @apply or an arbitrary variant. Flatten it into a single class in your component layer.",
+  "outlook-web-chained-class::jsx": "Give the element one class carrying both rules, or move the declarations into the style prop, which is inlined and unaffected.",
+  "outlook-first-class-only::mjml": "The classes come from css-class. Merge the conflicting ones into a single class in mj-style.",
+  "outlook-first-class-only::maizzle": "Inlining sidesteps this entirely, and Maizzle inlines by default. If you turned it off, merge the conflicting utilities into one component class.",
+  "outlook-first-class-only::jsx": "Merge the conflicting classes, or move the declarations into the style prop, which is inlined and unaffected by this.",
+  "outlook-first-class-descendants::mjml": "The rule is in mj-style. Target the child directly with its own css-class rather than through a descendant selector.",
+  "outlook-first-class-descendants::maizzle": "Inlining sidesteps this, and Maizzle inlines by default. Otherwise put the rule on the child element rather than on an ancestor's class.",
+  "outlook-first-class-descendants::jsx": "Put the declarations on the child component, through its own class or its style prop, rather than through a descendant selector."
+};
 // src/fix-snippets/index.ts
 var FIX_DATABASE = __spreadValues(__spreadValues(__spreadValues(__spreadValues({}, HTML_FIX_DATABASE), JSX_FIX_DATABASE), MJML_FIX_DATABASE), MAIZZLE_FIX_DATABASE);
-var SUGGESTION_DATABASE = __spreadValues(__spreadValues(__spreadValues(__spreadValues({}, HTML_SUGGESTION_DATABASE), JSX_SUGGESTION_DATABASE), MJML_SUGGESTION_DATABASE), MAIZZLE_SUGGESTION_DATABASE);
+var SUGGESTION_DATABASE = __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, HTML_SUGGESTION_DATABASE), JSX_SUGGESTION_DATABASE), MJML_SUGGESTION_DATABASE), MAIZZLE_SUGGESTION_DATABASE), FRAMEWORK_MARKUP_SUGGESTIONS);
+function getStyleSurvivalNote(rule, framework) {
+  return framework ? STYLE_SURVIVAL_NOTES[`${rule}::${framework}`] : void 0;
+}
 function getCodeFix(property, clientId, framework) {
   const clientPrefix = getClientPrefix(clientId);
   if (framework && clientPrefix) {
@@ -12042,6 +12107,8 @@ var GENERIC_LINK_TEXT = /* @__PURE__ */ new Set([
 ]);
 var GMAIL_CLIP_THRESHOLD = 102 * 1024;
 var GMAIL_CLIP_WARNING_THRESHOLD = 90 * 1024;
+var GMAIL_STYLE_LIMIT = 16 * 1024;
+var GMAIL_STYLE_WARNING_THRESHOLD = 14 * 1024;
 var CLIENT_DISPLAY_LIMITS = [
   { client: "Gmail (Web)", subjectLimit: 70, preheaderLimit: 90 },
   { client: "Gmail (Mobile)", subjectLimit: 40, preheaderLimit: 45 },
@@ -12076,7 +12143,8 @@ var EMPTY_LINKS = {
 var EMPTY_ACCESSIBILITY = { score: 100, issues: [] };
 var EMPTY_IMAGES = { total: 0, totalDataUriBytes: 0, issues: [], images: [] };
 var EMPTY_INBOX_PREVIEW = { subject: null, preheader: null, subjectLength: 0, preheaderLength: 0, truncation: [], issues: [] };
-var EMPTY_SIZE = { htmlBytes: 0, humanSize: "0 B", clipped: false, issues: [] };
+var EMPTY_SIZE = { htmlBytes: 0, styleBytes: 0, humanSize: "0 B", clipped: false, issues: [] };
+var EMPTY_STYLE_SURVIVAL = { issues: [] };
 var EMPTY_TEMPLATE = { unresolvedCount: 0, issues: [] };
 var EMPTY_OVERFLOW = { hasOverflow: false, issues: [] };
 var EMPTY_VML = { hasVml: false, issues: [] };
@@ -14615,6 +14683,272 @@ function extractCode(response) {
   return response.trim();
 }
+// src/style-survival.ts
+import * as csstree6 from "css-tree";
+var WORD_ENGINE = ["outlook-windows-legacy"];
+var OUTLOOK_WEB = ["outlook-web", "outlook-windows"];
+var OUTLOOK_WEB_AND_MOBILE = [
+  "outlook-web",
+  "outlook-windows",
+  "outlook-ios",
+  "outlook-android"
+];
+var GMAIL = ["gmail-web", "gmail-android", "gmail-ios"];
+var YAHOO_AOL = [
+  "yahoo-mail",
+  "yahoo-mail-android",
+  "yahoo-mail-ios",
+  "aol"
+];
+var MAX_LOCS = 20;
+function hasSpaceSeparatedColor(css) {
+  const fn = /\b(?:rgba?|hsla?)\(/gi;
+  let m;
+  while (m = fn.exec(css)) {
+    const start = m.index + m[0].length;
+    let depth = 1;
+    let comma = false;
+    let i = start;
+    for (; i < css.length && depth > 0; i++) {
+      const c = css[i];
+      if (c === "(") depth++;
+      else if (c === ")") depth--;
+      else if (c === "," && depth === 1) comma = true;
+    }
+    if (depth > 0) continue;
+    const args = css.slice(start, i - 1);
+    if (!comma && /\S\s+\S/.test(args)) return true;
+  }
+  return false;
+}
+var ATTR_SELECTOR_SEMICOLON = /\[[^\]]*;[^\]]*\]/;
+var DOUBLE_BRACE = /\}\}/;
+function readSheet(ast) {
+  const propsByClass = /* @__PURE__ */ new Map();
+  const classesWithDescendants = /* @__PURE__ */ new Set();
+  const chainedClassSelectors = [];
+  csstree6.walk(ast, {
+    visit: "Rule",
+    enter(rule) {
+      var _a;
+      if (rule.type !== "Rule" || rule.prelude.type !== "SelectorList") return;
+      const props = /* @__PURE__ */ new Set();
+      csstree6.walk(rule.block, {
+        visit: "Declaration",
+        enter(d) {
+          if (d.type === "Declaration") props.add(d.property.toLowerCase());
+        }
+      });
+      for (const selector of rule.prelude.children) {
+        if (selector.type !== "Selector") continue;
+        const parts = selector.children.toArray();
+        const classes = parts.filter((p) => p.type === "ClassSelector");
+        if (!classes.length) continue;
+        let run = 0;
+        for (const part of parts) {
+          if (part.type === "ClassSelector" || part.type === "IdSelector") {
+            run++;
+            if (run === 2) {
+              chainedClassSelectors.push(csstree6.generate(selector));
+              break;
+            }
+          } else if (part.type !== "PseudoClassSelector" && part.type !== "PseudoElementSelector") {
+            run = 0;
+          }
+        }
+        const hasCombinator = parts.some(
+          (p) => p.type === "Combinator" || p.type === "WhiteSpace"
+        );
+        if (hasCombinator) {
+          const head = parts[0];
+          if ((head == null ? void 0 : head.type) === "ClassSelector") classesWithDescendants.add(head.name);
+          continue;
+        }
+        if (parts.length === classes.length && classes.length === 1) {
+          const name = classes[0].name;
+          const seen = (_a = propsByClass.get(name)) != null ? _a : /* @__PURE__ */ new Set();
+          for (const p of props) seen.add(p);
+          propsByClass.set(name, seen);
+        }
+      }
+    }
+  });
+  return { propsByClass, classesWithDescendants, chainedClassSelectors };
+}
+function checkStyleSurvivalFromDom($, source, framework) {
+  const issues = [];
+  const add2 = (rule, severity, clients, message, locs, detail) => {
+    const frameworkNote = getStyleSurvivalNote(rule, framework);
+    issues.push(__spreadValues(__spreadValues(__spreadValues(__spreadValues({
+      rule,
+      severity,
+      clients: [...clients],
+      message
+    }, frameworkNote ? { frameworkNote } : {}), detail ? { detail } : {}), locs.length ? { loc: locs[0], locs: locs.slice(0, MAX_LOCS) } : {}), locs.length > MAX_LOCS ? { locsTruncated: true } : {}));
+  };
+  const sheets = [];
+  const hits = { spaceColor: 0, doubleBrace: 0, attrSemicolon: 0, chained: 0 };
+  const spaceColorLocs = [];
+  const doubleBraceLocs = [];
+  const attrSemicolonLocs = [];
+  const chainedLocs = [];
+  let chainedExample = "";
+  $("style").each((_, el) => {
+    const cssText = $(el).text();
+    if (!cssText.trim()) return;
+    const anchor = cssBlockAnchor(el, cssText, source);
+    const at = (index) => {
+      const before = cssText.slice(0, index);
+      const line = before.split("\n").length;
+      const column = index - before.lastIndexOf("\n");
+      return locInCssBlock(anchor, {
+        start: { line, column, offset: index },
+        end: { line, column: column + 1, offset: index + 1 }
+      });
+    };
+    const push = (into, index) => {
+      var _a;
+      const loc = (_a = at(index)) != null ? _a : locOfElement(el);
+      if (loc) into.push(loc);
+    };
+    if (hasSpaceSeparatedColor(cssText)) {
+      hits.spaceColor++;
+      push(spaceColorLocs, cssText.search(/\b(?:rgba?|hsla?)\(/i));
+    }
+    const brace = cssText.search(DOUBLE_BRACE);
+    if (brace >= 0) {
+      hits.doubleBrace++;
+      push(doubleBraceLocs, brace);
+    }
+    const attr2 = cssText.search(ATTR_SELECTOR_SEMICOLON);
+    if (attr2 >= 0) {
+      hits.attrSemicolon++;
+      push(attrSemicolonLocs, attr2);
+    }
+    try {
+      const sheet = readSheet(csstree6.parse(cssText, { positions: true }));
+      sheets.push(sheet);
+      if (sheet.chainedClassSelectors.length) {
+        hits.chained++;
+        chainedExample || (chainedExample = sheet.chainedClassSelectors[0]);
+        push(chainedLocs, 0);
+      }
+    } catch (e) {
+    }
+  });
+  const inlineColorEls = $("[style]").toArray().filter((el) => {
+    var _a;
+    return hasSpaceSeparatedColor((_a = $(el).attr("style")) != null ? _a : "");
+  });
+  if (hits.spaceColor) {
+    add2(
+      "gmail-space-separated-color",
+      "error",
+      GMAIL,
+      "Gmail removes an entire <style> block containing a space-separated colour like `rgb(0 0 0)`. Write it with commas, `rgb(0, 0, 0)`, and the block survives.",
+      spaceColorLocs
+    );
+  }
+  if (inlineColorEls.length) {
+    add2(
+      "gmail-space-separated-color-inline",
+      "error",
+      GMAIL,
+      `Gmail drops every declaration in a style attribute that uses a space-separated colour like \`rgb(0 0 0)\`, not only the colour. ${inlineColorEls.length} element${inlineColorEls.length > 1 ? "s are" : " is"} affected; write the colour with commas.`,
+      inlineColorEls.map((el) => locOfElement(el)).filter((l) => !!l)
+    );
+  }
+  if (hits.doubleBrace) {
+    add2(
+      "outlook-double-brace",
+      "error",
+      OUTLOOK_WEB_AND_MOBILE,
+      "Outlook.com and Outlook on iOS/Android discard every style rule after `}}`. Minified CSS closing a media query produces it. Put a space or newline between the two braces and the rest of the sheet survives.",
+      doubleBraceLocs
+    );
+  }
+  if (hits.attrSemicolon) {
+    add2(
+      "yahoo-attribute-selector-semicolon",
+      "error",
+      YAHOO_AOL,
+      'Yahoo and AOL discard every style rule after an attribute selector whose value contains a semicolon, such as `div[style="margin: 16px;"]`. Split it into `[style^=\u2026][style$=\u2026]` and the rest of the sheet survives.',
+      attrSemicolonLocs
+    );
+  }
+  if (hits.chained) {
+    add2(
+      "outlook-web-chained-class",
+      "warning",
+      OUTLOOK_WEB,
+      `Outlook.com rewrites class names to namespace them and only rewrites the first in a compound selector, so \`${chainedExample}\` stops matching. Give the element one class that carries both rules.`,
+      chainedLocs
+    );
+  }
+  const conflicting = [];
+  const shadowed = [];
+  let conflictCount = 0;
+  let shadowCount = 0;
+  let conflictExample = "";
+  $("[class]").each((_, el) => {
+    var _a, _b;
+    const names = ((_a = $(el).attr("class")) != null ? _a : "").split(/\s+/).filter(Boolean);
+    if (names.length < 2) return;
+    const loc = locOfElement(el);
+    const seen = /* @__PURE__ */ new Map();
+    for (const sheet of sheets) {
+      for (const name of names) {
+        for (const prop of (_b = sheet.propsByClass.get(name)) != null ? _b : []) {
+          const first = seen.get(prop);
+          if (first && first !== name) {
+            conflictExample || (conflictExample = `.${first} and .${name} both set ${prop}`);
+            conflictCount++;
+            if (loc) conflicting.push(loc);
+            return;
+          }
+          if (!first) seen.set(prop, name);
+        }
+      }
+      if (names.some((n) => sheet.classesWithDescendants.has(n))) {
+        shadowCount++;
+        if (loc) shadowed.push(loc);
+        return;
+      }
+    }
+  });
+  if (conflictCount) {
+    add2(
+      "outlook-first-class-only",
+      "warning",
+      WORD_ENGINE,
+      `Outlook on Windows applies only the first class on an element, so a second class setting the same property never takes effect (${conflictExample}). Merge them into one class.`,
+      conflicting
+    );
+  }
+  if (shadowCount) {
+    add2(
+      "outlook-first-class-descendants",
+      "warning",
+      WORD_ENGINE,
+      "Outlook on Windows ignores a descendant rule like `.text td` once the element carries a second class. Move the rule onto the child, or give the element a single class.",
+      shadowed
+    );
+  }
+  return { issues };
+}
+function checkStyleSurvival(html, options) {
+  return fromHtml(
+    html,
+    EMPTY_STYLE_SURVIVAL,
+    ($) => checkStyleSurvivalFromDom(
+      $,
+      (options == null ? void 0 : options.positions) ? html : void 0,
+      options == null ? void 0 : options.framework
+    ),
+    options
+  );
+}
 // src/rules/feature-urls.ts
 var FEATURE_URLS = {
   "!important": "https://www.caniemail.com/features/css-important/",
@@ -15564,7 +15898,7 @@ function validateLinks(html, options) {
 // src/accessibility-checker.ts
 import * as cheerio5 from "cheerio";
-import * as csstree6 from "css-tree";
+import * as csstree7 from "css-tree";
 var RULE_PENALTY_CAPS = {
   "img-missing-alt": 3,
   "link-generic-text": 3,
@@ -15808,7 +16142,7 @@ function specificityFromTokens(selector) {
 }
 function specificityOf(selector) {
   try {
-    const ast = csstree6.parse(selector, { context: "selector" });
+    const ast = csstree7.parse(selector, { context: "selector" });
     return specificityOfSelector(ast);
   } catch (e) {
     return specificityFromTokens(selector);
@@ -15853,14 +16187,14 @@ function computeCascade($, ctx) {
     });
   });
   const handleRule = (node) => {
-    const selectorList = csstree6.generate(node.prelude).trim();
+    const selectorList = csstree7.generate(node.prelude).trim();
     if (!selectorList) return;
     const decls = [];
     node.block.children.forEach((child) => {
       if (child.type !== "Declaration") return;
       const prop = child.property.toLowerCase();
       if (!CASCADE_PROPS.has(prop)) return;
-      decls.push({ prop, value: csstree6.generate(child.value), important: !!child.important });
+      decls.push({ prop, value: csstree7.generate(child.value), important: !!child.important });
     });
     if (!decls.length) return;
     for (const selector of splitTopLevel(selectorList).map((x) => x.trim()).filter(Boolean)) {
@@ -15890,7 +16224,7 @@ function computeCascade($, ctx) {
         return;
       }
       if (node.type !== "Atrule" || node.name.toLowerCase() !== "media" || !node.block) return;
-      const prelude = node.prelude ? csstree6.generate(node.prelude) : "";
+      const prelude = node.prelude ? csstree7.generate(node.prelude) : "";
       if (!mediaApplies(prelude, ctx)) return;
       visitBlock(node.block.children);
     });
@@ -15898,7 +16232,7 @@ function computeCascade($, ctx) {
   $("style").each((_, styleEl) => {
     let ast;
     try {
-      ast = csstree6.parse($(styleEl).text());
+      ast = csstree7.parse($(styleEl).text());
     } catch (e) {
       return;
     }
@@ -16679,8 +17013,9 @@ function humanizeBytes(bytes) {
   const mb = kb / 1024;
   return `${mb.toFixed(2)} MB`;
 }
-function checkSizeFromDom(_$, html) {
+function checkSizeFromDom($, html) {
   const htmlBytes = new TextEncoder().encode(html).length;
+  const styleBytes = $("style").toArray().reduce((n, el) => n + new TextEncoder().encode($(el).text()).length, 0);
   const humanSize = humanizeBytes(htmlBytes);
   const issues = [];
   let clipped = false;
@@ -16700,7 +17035,22 @@ function checkSizeFromDom(_$, html) {
       detail: `${htmlBytes} bytes is within ${GMAIL_CLIP_THRESHOLD - htmlBytes} bytes of the clip threshold.`
     });
   }
-  return { htmlBytes, humanSize, clipped, issues };
+  if (styleBytes > GMAIL_STYLE_LIMIT) {
+    issues.push({
+      rule: "gmail-style-truncated",
+      severity: "error",
+      message: `${humanizeBytes(styleBytes)} of CSS is past Gmail's 16 KB ceiling for <style>. Gmail keeps the rules before the limit and drops the rest, so the email renders with part of its CSS and no error anywhere.`,
+      detail: `${styleBytes} bytes of CSS across all <style> elements exceeds the ${GMAIL_STYLE_LIMIT} byte limit.`
+    });
+  } else if (styleBytes > GMAIL_STYLE_WARNING_THRESHOLD) {
+    issues.push({
+      rule: "gmail-style-warning",
+      severity: "warning",
+      message: `${humanizeBytes(styleBytes)} of CSS, approaching Gmail's 16 KB <style> ceiling. Past it, later rules are dropped silently.`,
+      detail: `${styleBytes} bytes is within ${GMAIL_STYLE_LIMIT - styleBytes} bytes of the limit.`
+    });
+  }
+  return { htmlBytes, styleBytes, humanSize, clipped, issues };
 }
 function checkSize(html) {
   return fromHtml(html, EMPTY_SIZE, checkSizeFromDom);
@@ -16814,7 +17164,7 @@ function checkTemplateVariables(html, options) {
 }
 // src/overflow-checker.ts
-import * as csstree7 from "css-tree";
+import * as csstree8 from "css-tree";
 var RESPONSIVE_MIN_WIDTH = 320;
 function fixedPxWidth($el) {
   const style = $el.attr("style") || "";
@@ -16891,11 +17241,11 @@ function checkOverflowFromDom($, source) {
     const anchor = cssBlockAnchor(el, cssText, source);
     let ast;
     try {
-      ast = csstree7.parse(cssText, { positions: true });
+      ast = csstree8.parse(cssText, { positions: true });
     } catch (e) {
       return;
     }
-    csstree7.walk(ast, {
+    csstree8.walk(ast, {
       visit: "Rule",
       enter(node) {
         if (node.type !== "Rule") return;
@@ -16905,7 +17255,7 @@ function checkOverflowFromDom($, source) {
         node.block.children.forEach((child) => {
           if (child.type !== "Declaration") return;
           const prop = child.property.toLowerCase();
-          const val = csstree7.generate(child.value);
+          const val = csstree8.generate(child.value);
           if (prop === "width") {
             const m = val.match(/^(\d+)px$/);
             if (m) {
@@ -16918,7 +17268,7 @@ function checkOverflowFromDom($, source) {
           }
         });
         if (widthPx !== null && widthPx > EMAIL_MAX_WIDTH && !fluid) {
-          const selector = csstree7.generate(node.prelude).trim().slice(0, 40);
+          const selector = csstree8.generate(node.prelude).trim().slice(0, 40);
           addWidthIssue(widthPx, selector || "rule", issues, seen, widthLoc);
         }
       }
@@ -17243,7 +17593,7 @@ function checkVml(html, options) {
 }
 // src/visual-checker.ts
-import * as csstree8 from "css-tree";
+import * as csstree9 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) {
@@ -17349,7 +17699,7 @@ function ruleToMap(node) {
   const map = /* @__PURE__ */ new Map();
   node.block.children.forEach((child) => {
     if (child.type === "Declaration") {
-      map.set(child.property.toLowerCase(), csstree8.generate(child.value));
+      map.set(child.property.toLowerCase(), csstree9.generate(child.value));
     }
   });
   return map;
@@ -17368,11 +17718,11 @@ function checkVisualFromDom($, source) {
     const anchor = cssBlockAnchor(el, cssText, source);
     let ast;
     try {
-      ast = csstree8.parse(cssText, { positions: true });
+      ast = csstree9.parse(cssText, { positions: true });
     } catch (e) {
       return;
     }
-    csstree8.walk(ast, {
+    csstree9.walk(ast, {
       visit: "Rule",
       enter(node) {
         if (node.type !== "Rule") return;
@@ -17398,7 +17748,7 @@ function checkVisual(html, options) {
 }
 // src/design-consistency.ts
-import * as csstree9 from "css-tree";
+import * as csstree10 from "css-tree";
 var SAME_COLOUR_DISTANCE = 0.02;
 var LIMITS = {
   fontSize: 8,
@@ -17452,15 +17802,15 @@ function collect($) {
   $("style").each((_, el) => {
     let ast;
     try {
-      ast = csstree9.parse($(el).text());
+      ast = csstree10.parse($(el).text());
     } catch (e) {
       return;
     }
-    csstree9.walk(ast, {
+    csstree10.walk(ast, {
       visit: "Declaration",
       enter(node) {
         if (node.type !== "Declaration") return;
-        record(node.property, csstree9.generate(node.value));
+        record(node.property, csstree10.generate(node.value));
       }
     });
   });
@@ -17569,6 +17919,7 @@ var EMPTY_AUDIT = {
   images: EMPTY_IMAGES,
   inboxPreview: EMPTY_INBOX_PREVIEW,
   size: EMPTY_SIZE,
+  styleSurvival: EMPTY_STYLE_SURVIVAL,
   templateVariables: EMPTY_TEMPLATE,
   overflow: EMPTY_OVERFLOW,
   visual: EMPTY_VISUAL,
@@ -17597,6 +17948,7 @@ function runAudit($, html, framework, options) {
   const images = skip.has("images") ? EMPTY_IMAGES : analyzeImagesFromDom($);
   const inboxPreview = skip.has("inboxPreview") ? EMPTY_INBOX_PREVIEW : extractInboxPreviewFromDom($);
   const size = skip.has("size") ? EMPTY_SIZE : checkSizeFromDom($, html);
+  const styleSurvival = skip.has("styleSurvival") ? EMPTY_STYLE_SURVIVAL : checkStyleSurvivalFromDom($, source, framework);
   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);
@@ -17607,7 +17959,7 @@ function runAudit($, html, framework, options) {
   ]);
   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, vml, darkContrast, mobileContrast, design };
+  return { compatibility: { warnings, scores }, spam, links, accessibility, images, inboxPreview, size, styleSurvival, 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);
@@ -17651,7 +18003,7 @@ function toPlainText(html) {
     if (trimmed) lines.push(trimmed);
     currentLine = "";
   }
-  function walk9(node) {
+  function walk10(node) {
     var _a;
     if (node.type === "text") {
       const text = node.data.replace(/\s+/g, " ");
@@ -17700,7 +18052,7 @@ function toPlainText(html) {
       currentLine = "- ";
     }
     for (const child of el.children) {
-      walk9(child);
+      walk10(child);
     }
     if (isBlock) flushLine();
   }
@@ -17708,7 +18060,7 @@ function toPlainText(html) {
   const root = body.length ? body[0] : $.root()[0];
   if (root && "children" in root) {
     for (const child of root.children) {
-      walk9(child);
+      walk10(child);
     }
   }
   flushLine();
@@ -17839,6 +18191,7 @@ export {
   checkMobileContrast,
   checkOverflow,
   checkSize,
+  checkStyleSurvival,
   checkTemplateVariables,
   checkVisual,
   checkVml,