@antelopejs/dms-marketing 0.6.1 → 0.7.1

package/static/snapshot.js

@@ -17,12 +17,23 @@
  * an element with an empty box of its size. `maskText` masks every text
  * node and text attribute of the page; data-* and link paths stay, since
  * styles select on them.
+ *
+ * Transient overlays open at capture time — a prompt, a toast, an open
+ * menu or popover floating over the page — are left out (see
+ * isTransientOverlay): they belong to that one visit, not to the page.
+ *
+ * A page whose document does not scroll, an inner container doing it
+ * instead (see the scroll root in static/tracker.js), is captured with that
+ * container marked `data-marketing-scroll-root` and the height of its whole
+ * content recorded: the preview unrolls it, as tall as the page really is.
  */
 (() => {
   const CONFIG_GLOBAL = "__dmsMarketingSnapshotConfig";
   const CONTEXT_GLOBAL = "__dmsMarketingSnapshotContext";
   const MASK_MARKER = "dms-marketing-mask";
   const BLOCK_MARKER = "dms-marketing-block";
+  /** Marks the page's inner scroll container in the capture (see above). */
+  const SCROLL_ROOT_ATTRIBUTE = "data-marketing-scroll-root";
   const MASK_CHAR = "x";
   /** Mirrors the backend MAX_URL_LENGTH. */
   const MAX_URL_LENGTH = 500;
@@ -84,6 +95,21 @@
     "background",
   ]);
   const LINK_TAGS = new Set(["a", "area"]);
+  /** Roles of the overlays a visit opens over the page, dropped when they
+   * float over it (see isTransientOverlay). */
+  const OVERLAY_ROLES = new Set([
+    "dialog",
+    "alertdialog",
+    "tooltip",
+    "menu",
+    "listbox",
+  ]);
+  const LIVE_ROLES = new Set(["status", "alert", "log"]);
+  const LIVE_POLITENESS = new Set(["polite", "assertive"]);
+  /** Lists a toast viewport stacks its toasts in. */
+  const LIST_TAGS = new Set(["ol", "ul"]);
+  /** In the top layer: a modal `<dialog>`, an open popover. */
+  const TOP_LAYER_SELECTOR = ":modal, :popover-open";
   /** Attributes that carry text a visitor could read, masked with it. */
   const TEXT_ATTRIBUTES = new Set([
     "title",
@@ -106,18 +132,21 @@
     return value && typeof value === "object" ? value : null;
   }
 
-  const config = readGlobal(CONFIG_GLOBAL);
+  /** Loaded by the module's tests (CommonJS) rather than by a page: the
+   * pure parts are exported instead of capturing anything. */
+  const isModule =
+    typeof window === "undefined" &&
+    typeof module === "object" &&
+    module !== null;
+  const config = isModule ? null : readGlobal(CONFIG_GLOBAL);
   const maskAllText = config?.maskText === true;
-  const context = readGlobal(CONTEXT_GLOBAL);
-  if (
-    !config ||
-    !context ||
-    typeof config.token !== "string" ||
-    typeof context.endpoint !== "string" ||
-    window.top !== window
-  ) {
-    return;
-  }
+  const context = isModule ? null : readGlobal(CONTEXT_GLOBAL);
+  const asked =
+    !!config &&
+    !!context &&
+    typeof config.token === "string" &&
+    typeof context.endpoint === "string" &&
+    window.top === window;
 
   // --- Text -----------------------------------------------------------------
 
@@ -203,34 +232,306 @@
   }
 
   // --- Stylesheets ----------------------------------------------------------
+  //
+  // A page carries far more CSS than it uses — a framework's utilities, a
+  // component library, every layer a host app loads — and a capture inlining
+  // all of it routinely weighs megabytes. A style rule is kept only when its
+  // selector matches an element of the captured document, tested with the
+  // states it depends on (hover, focus, open…) and its pseudo-element taken
+  // off, so whatever could show in the snapshot keeps its style; a selector
+  // the browser cannot test is kept. Custom properties that no kept rule,
+  // inline style or kept property value refers to are dropped. Conditional
+  // wrappers (@media, @supports, @container…) stay around the rules they
+  // still hold — every layout's, not only the visitor's — and @layer blocks
+  // stay even empty (their order is the cascade's), as do @font-face,
+  // @keyframes, @property and the other at-rules. A stylesheet identical to
+  // one already serialized is not repeated.
+
+  const STYLE_RULE = 1;
+  const IMPORT_RULE = 3;
+  const KEYFRAMES_RULE = 7;
+  /** Selectors `querySelector` cannot answer for from the sheet's scope:
+   * the rule is kept. */
+  const UNTESTABLE_SELECTOR_PATTERN =
+    /:host|::slotted|::part|::cue|::highlight|::view-transition|:state\(|&|:scope/;
+  /** A pseudo-element renders on its element: the rule is tested on it. */
+  const PSEUDO_ELEMENT_PATTERN =
+    /::[\w-]+|:(?:before|after|first-line|first-letter)(?![\w-])/g;
+  /** States a snapshot may be looked at in, or a visitor's input sets: the
+   * rule is tested as if the state held. */
+  const STATE_PSEUDO_CLASS_PATTERN =
+    /:(?:hover|focus|focus-visible|focus-within|active|visited|link|any-link|target|target-within|checked|indeterminate|placeholder-shown|autofill|valid|invalid|user-valid|user-invalid|in-range|out-of-range|open|closed|popover-open|modal|fullscreen|playing|paused)(?![\w-])/g;
+  const COMBINATOR_SPACING_PATTERN = /\s*([>+~])\s*/g;
+  /** A compound the stripping above left empty stands for any element. */
+  const EMPTY_COMPOUND_PATTERN = /(^|[\s>+~(,])(?=$|[\s>+~),])/g;
+  const NEGATED_ANY_PATTERN = /:not\(\*\)/g;
+  const ESCAPED_COLON_PATTERN = /\\:/g;
+  /** Stands in for an escaped colon while pseudo-classes are stripped. */
+  const ESCAPED_COLON_TOKEN = "\u0001";
+  const CSS_VARIABLE_PATTERN = /var\(\s*(--[\w-]+)/g;
+  const LAYER_PRELUDE_PATTERN = /^@layer\b/;
+
+  /** Selector list split on its top-level commas. */
+  function splitSelectorList(list) {
+    const parts = [];
+    let depth = 0;
+    let quote = "";
+    let start = 0;
+    for (let index = 0; index < list.length; index++) {
+      const char = list[index];
+      if (quote) {
+        if (char === "\\") {
+          index++;
+        } else if (char === quote) {
+          quote = "";
+        }
+      } else if (char === '"' || char === "'") {
+        quote = char;
+      } else if (char === "(" || char === "[") {
+        depth++;
+      } else if (char === ")" || char === "]") {
+        depth--;
+      } else if (char === "," && depth === 0) {
+        parts.push(list.slice(start, index).trim());
+        start = index + 1;
+      }
+    }
+    parts.push(list.slice(start).trim());
+    return parts;
+  }
 
-  /**
-   * Rules read from the CSSOM, not from the element's text: CSS-in-JS
-   * libraries insert theirs with `insertRule`, leaving the `<style>` empty.
-   * Null when the browser refuses (cross-origin sheet); the caller keeps a
-   * link then. Readable imports are inlined in place, under their media.
-   */
-  function rulesText(sheet, base) {
-    let rules;
+  /** One selector as tested, null when it cannot be (the rule stays). */
+  function testedSelector(selector) {
+    if (UNTESTABLE_SELECTOR_PATTERN.test(selector)) {
+      return null;
+    }
+    // An escaped colon belongs to a class name (`.md\:hover\:flex`).
+    const escaped = selector.replace(ESCAPED_COLON_PATTERN, ESCAPED_COLON_TOKEN);
+    const stripped = escaped
+      .replace(PSEUDO_ELEMENT_PATTERN, "")
+      .replace(STATE_PSEUDO_CLASS_PATTERN, "");
+    if (stripped === escaped) {
+      return selector;
+    }
+    // `.a > ::before` → `.a>*`; `.a:not(:hover)` → `.a`, not `.a:not(*)`,
+    // which would match nothing.
+    return stripped
+      .replace(COMBINATOR_SPACING_PATTERN, "$1")
+      .trim()
+      .replace(EMPTY_COMPOUND_PATTERN, "$1*")
+      .replace(NEGATED_ANY_PATTERN, "")
+      .replaceAll(ESCAPED_COLON_TOKEN, "\\:");
+  }
+
+  function selectorMatches(scope, selector) {
     try {
-      rules = sheet.cssRules;
+      return scope.querySelector(selector) !== null;
     } catch {
-      return null;
+      // Unknown to this browser's querySelector (a vendor pseudo-class, a
+      // newer syntax): it may well match, so it stays.
+      return true;
     }
-    let out = "";
-    for (const rule of rules) {
-      const imported =
-        rule.type === CSSRule.IMPORT_RULE && rule.styleSheet
-          ? rulesText(rule.styleSheet, rule.styleSheet.href || base)
+  }
+
+  function cssVariables(text, into) {
+    for (const match of text.matchAll(CSS_VARIABLE_PATTERN)) {
+      into.add(match[1]);
+    }
+  }
+
+  /**
+   * What the stylesheets of one capture keep, across every sheet and shadow
+   * root: custom properties inherit, so a variable one sheet defines another
+   * uses. Sheets are read into segments first (strings, or style rules with
+   * their custom property declarations set apart), and rendered once every
+   * sheet and inline style has said which variables it needs.
+   */
+  function createStyleCollector() {
+    /** Variables referred to outside a custom property's own value. */
+    const used = new Set();
+    /** Every kept value of each custom property, for the transitive pass. */
+    const definitions = new Map();
+    /** Per scope (document, shadow root): selector list → applies. */
+    const verdicts = new Map();
+
+    function ruleApplies(scope, selectorText) {
+      let cache = verdicts.get(scope);
+      if (!cache) {
+        cache = new Map();
+        verdicts.set(scope, cache);
+      }
+      let applies = cache.get(selectorText);
+      if (applies === undefined) {
+        applies = splitSelectorList(selectorText).some((part) => {
+          const tested = testedSelector(part);
+          return tested === null || selectorMatches(scope, tested);
+        });
+        cache.set(selectorText, applies);
+      }
+      return applies;
+    }
+
+    function keptText(text) {
+      cssVariables(text, used);
+      return text;
+    }
+
+    /** A kept style rule; a declaration whose text cannot be located in
+     * the rule's stays in it. */
+    function styleRuleSegment(rule, base) {
+      const text = absolutizeCss(rule.cssText, base);
+      const style = rule.style;
+      const declarations = [];
+      let rest = text;
+      for (let index = 0; index < (style ? style.length : 0); index++) {
+        const name = style[index];
+        if (!name.startsWith("--")) {
+          continue;
+        }
+        const value = style.getPropertyValue(name);
+        const important =
+          style.getPropertyPriority(name) === "important" ? " !important" : "";
+        const source = `${name}: ${value}${important};`;
+        if (!rest.includes(source)) {
+          continue;
+        }
+        rest = rest.replace(source, "");
+        declarations.push({ name, source });
+        const values = definitions.get(name) || [];
+        values.push(value);
+        definitions.set(name, values);
+      }
+      cssVariables(rest, used);
+      return declarations.length > 0 ? { text, declarations } : text;
+    }
+
+    function ruleListSegments(rules, base, scope) {
+      const segments = [];
+      for (const rule of rules) {
+        segments.push(...ruleSegments(rule, base, scope));
+      }
+      return segments;
+    }
+
+    function ruleSegments(rule, base, scope) {
+      if (rule.type === IMPORT_RULE) {
+        const imported = rule.styleSheet
+          ? sheetSegments(rule.styleSheet, rule.styleSheet.href || base, scope)
           : null;
-      if (imported === null) {
-        out += `${absolutizeCss(rule.cssText, base)}\n`;
-        continue;
+        if (imported === null) {
+          return [keptText(absolutizeCss(rule.cssText, base))];
+        }
+        const media = rule.media?.mediaText;
+        return media ? [`@media ${media}{`, ...imported, "}"] : imported;
+      }
+      if (rule.type === STYLE_RULE) {
+        if (!ruleApplies(scope, rule.selectorText)) {
+          // Nested rules included: each one only matches within (or on) an
+          // element its parent matches.
+          return [];
+        }
+        // A nested block is not tested rule by rule: it stays whole.
+        return rule.cssRules?.length
+          ? [keptText(absolutizeCss(rule.cssText, base))]
+          : [styleRuleSegment(rule, base)];
+      }
+      if (rule.cssRules && rule.type !== KEYFRAMES_RULE) {
+        // A grouping rule: its prelude is whatever precedes its block.
+        const prelude = rule.cssText.slice(0, rule.cssText.indexOf("{"));
+        const inner = ruleListSegments(rule.cssRules, base, scope);
+        if (inner.length === 0 && !LAYER_PRELUDE_PATTERN.test(prelude)) {
+          return [];
+        }
+        return [`${prelude}{`, ...inner, "}"];
       }
-      const media = rule.media?.mediaText;
-      out += media ? `@media ${media}{${imported}}\n` : `${imported}\n`;
+      return [keptText(absolutizeCss(rule.cssText, base))];
     }
-    return out;
+
+    /**
+     * The rules of a sheet worth keeping, as segments, tested against
+     * `scope` (the document, or the shadow root holding the sheet). Null
+     * when the browser refuses to read them (cross-origin sheet): the caller
+     * keeps a link then. Rules are read from the CSSOM, not from the
+     * element's text: CSS-in-JS libraries insert theirs with `insertRule`,
+     * leaving the `<style>` empty. Readable imports are inlined in place,
+     * under their media.
+     */
+    function sheetSegments(sheet, base, scope) {
+      let rules;
+      try {
+        rules = sheet.cssRules;
+      } catch {
+        return null;
+      }
+      return ruleListSegments(rules, base, scope);
+    }
+
+    /** Every variable reachable from what the capture uses. */
+    function reachableVariables() {
+      const reached = new Set(used);
+      const pending = [...used];
+      while (pending.length > 0) {
+        for (const value of definitions.get(pending.pop()) || []) {
+          const found = new Set();
+          cssVariables(value, found);
+          for (const name of found) {
+            if (!reached.has(name)) {
+              reached.add(name);
+              pending.push(name);
+            }
+          }
+        }
+      }
+      return reached;
+    }
+
+    function render(segments, reached) {
+      let out = "";
+      for (const segment of segments) {
+        if (typeof segment === "string") {
+          out += `${segment}\n`;
+          continue;
+        }
+        let text = segment.text;
+        for (const declaration of segment.declarations) {
+          if (!reached.has(declaration.name)) {
+            text = text.replace(declaration.source, "");
+          }
+        }
+        out += `${text}\n`;
+      }
+      return out;
+    }
+
+    return {
+      sheetSegments,
+      /** Variables an inline style or an attribute refers to. */
+      noteVariables: (text) => cssVariables(text, used),
+      /** Each sheet's final text; empty for one already rendered. */
+      finish(sheets) {
+        const reached = reachableVariables();
+        const seen = new Set();
+        return sheets.map((segments) => {
+          const css = render(segments, reached);
+          if (seen.has(css)) {
+            return "";
+          }
+          seen.add(css);
+          return css;
+        });
+      },
+    };
+  }
+
+  /** CSS as the text of a `<style>`: the character after a `<` that could
+   * open markup (a letter, `!`, `/`, `?`) is written as a CSS escape, the
+   * same token to CSS (`</style` in a string becomes `<\2f style`), so
+   * nothing in it closes the element and the server keeps the sheet. */
+  function styleText(css) {
+    return css.replace(
+      /<([a-z!/?])/gi,
+      (_match, next) => `<\\${next.charCodeAt(0).toString(16)} `,
+    );
   }
 
   function mediaAttribute(element) {
@@ -238,14 +539,36 @@
     return media ? ` media="${escapeAttribute(media)}"` : "";
   }
 
+  /** Sheets of the capture in progress, rendered at its end (see
+   * serializeDocument): their text depends on the whole document. */
+  let styles = null;
+  let pendingSheets = [];
+  let placeholderNonce = "";
+  /** The page's inner scroll container during a capture, null when the
+   * document scrolls. */
+  let scrollRootElement = null;
+
+  /** Comments are never serialized, and markup in text or attributes is
+   * escaped: the marker cannot occur otherwise. */
+  function sheetPlaceholder(segments, media) {
+    const index = pendingSheets.push({ segments, media }) - 1;
+    return `<!--dms-marketing-sheet-${placeholderNonce}-${index}-->`;
+  }
+
   function serializeStyle(element) {
     const sheet = element.sheet;
     if (sheet?.disabled) {
       return "";
     }
-    const css = sheet ? rulesText(sheet, location.href) : null;
-    const text = css === null ? element.textContent : css;
-    return `<style${mediaAttribute(element)}>${text}</style>`;
+    const segments = sheet
+      ? styles.sheetSegments(sheet, location.href, element.getRootNode())
+      : null;
+    if (segments === null) {
+      const text = element.textContent;
+      styles.noteVariables(text);
+      return `<style${mediaAttribute(element)}>${styleText(text)}</style>`;
+    }
+    return sheetPlaceholder(segments, mediaAttribute(element));
   }
 
   /** Only stylesheets render; preloads, icons and manifests are requests
@@ -257,9 +580,11 @@
       return "";
     }
     const href = element.href;
-    const css = sheet ? rulesText(sheet, href) : null;
-    if (css !== null) {
-      return `<style${mediaAttribute(element)}>${css}</style>`;
+    const segments = sheet
+      ? styles.sheetSegments(sheet, href, element.getRootNode())
+      : null;
+    if (segments !== null) {
+      return sheetPlaceholder(segments, mediaAttribute(element));
     }
     return `<link rel="stylesheet" href="${escapeAttribute(href)}"${mediaAttribute(element)}>`;
   }
@@ -267,7 +592,10 @@
   function adoptedStyles(root) {
     let out = "";
     for (const sheet of root.adoptedStyleSheets || []) {
-      out += `<style>${rulesText(sheet, location.href) || ""}</style>`;
+      out += sheetPlaceholder(
+        styles.sheetSegments(sheet, location.href, root) || [],
+        "",
+      );
     }
     return out;
   }
@@ -281,6 +609,85 @@
     );
   }
 
+  function isOutOfFlow(position) {
+    return position === "fixed" || position === "absolute";
+  }
+
+  function inTopLayer(element) {
+    try {
+      return element.matches(TOP_LAYER_SELECTOR);
+    } catch {
+      // A browser without one of the pseudo-classes has no such layer.
+      return false;
+    }
+  }
+
+  /** A portal: the nearest positioned ancestor is fixed and hangs off
+   * `body` — where floating menus and popovers are mounted, unlike a fixed
+   * header, which lives in the app's own tree. */
+  function inFloatingPortal(element, positionOf, body) {
+    for (
+      let node = element.parentElement;
+      node && node !== body;
+      node = node.parentElement
+    ) {
+      const position = positionOf(node);
+      if (position !== "static") {
+        return position === "fixed" && node.parentElement === body;
+      }
+    }
+    return false;
+  }
+
+  function isLive(element) {
+    return (
+      LIVE_ROLES.has(element.getAttribute("role")) ||
+      LIVE_POLITENESS.has(element.getAttribute("aria-live"))
+    );
+  }
+
+  /**
+   * An overlay the visit opened over the page, not part of it:
+   * - anything in the top layer (a modal `<dialog>`, an open popover);
+   * - a dialog, alert dialog, tooltip, menu or listbox positioned out of
+   *   the flow, or mounted in a fixed portal under `body`;
+   * - a live region (role status, alert or log, `aria-live`) fixed to the
+   *   viewport: a toast, a notification;
+   * - a toast viewport: an element whose list child is fixed and holds the
+   *   toasts (Reka / Nuxt UI, Radix, Sonner).
+   * In-flow content stays whatever its role: an inline `role="status"`
+   * badge, a listbox in a form, a menu in the page's own navigation.
+   * `positionOf` is the computed `position` of an element.
+   */
+  function isTransientOverlay(element, positionOf, body) {
+    if (inTopLayer(element)) {
+      return true;
+    }
+    if (OVERLAY_ROLES.has(element.getAttribute("role"))) {
+      return (
+        isOutOfFlow(positionOf(element)) ||
+        inFloatingPortal(element, positionOf, body)
+      );
+    }
+    const live = isLive(element);
+    if (live && positionOf(element) === "fixed") {
+      return true;
+    }
+    if (!live && element.getAttribute("role") !== "region") {
+      return false;
+    }
+    for (const child of element.children) {
+      if (LIST_TAGS.has(child.localName) && positionOf(child) === "fixed") {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  function computedPosition(element) {
+    return getComputedStyle(element).position;
+  }
+
   function imageSource(element, value) {
     const current = element.currentSrc;
     if (current && !current.startsWith("data:")) {
@@ -339,8 +746,17 @@
         }
         value = LINK_TAGS.has(tag) ? withoutQuery(absolute, masked) : absolute;
       }
+      if (value.includes("var(")) {
+        styles.noteVariables(value);
+      }
       out += ` ${name}="${escapeAttribute(value)}"`;
     }
+    if (
+      element === scrollRootElement &&
+      !element.hasAttribute(SCROLL_ROOT_ATTRIBUTE)
+    ) {
+      out += ` ${SCROLL_ROOT_ATTRIBUTE}=""`;
+    }
     return out;
   }
 
@@ -406,6 +822,9 @@
     if (isMarked(element, BLOCK_MARKER)) {
       return serializeBlocked(element);
     }
+    if (isTransientOverlay(element, computedPosition, document.body)) {
+      return "";
+    }
     const mask =
       masked || isMarked(element, MASK_MARKER) || element.isContentEditable;
     if (tag === "canvas") {
@@ -432,7 +851,23 @@
   }
 
   function serializeDocument() {
-    return `<!DOCTYPE html>${serializeElement(document.documentElement, false)}`;
+    styles = createStyleCollector();
+    pendingSheets = [];
+    placeholderNonce = Math.random().toString(36).slice(2);
+    const html = `<!DOCTYPE html>${serializeElement(document.documentElement, false)}`;
+    const css = styles.finish(pendingSheets.map((sheet) => sheet.segments));
+    const marker = new RegExp(
+      `<!--dms-marketing-sheet-${placeholderNonce}-([0-9]+)-->`,
+      "g",
+    );
+    const out = html.replace(marker, (_match, index) =>
+      css[index]
+        ? `<style${pendingSheets[index].media}>${styleText(css[index])}</style>`
+        : "",
+    );
+    styles = null;
+    pendingSheets = [];
+    return out;
   }
 
   // --- Timing ---------------------------------------------------------------
@@ -476,8 +911,25 @@
 
   // --- Upload ---------------------------------------------------------------
 
-  // text/plain is CORS-safelisted (no preflight); no-cors keeps the
-  // unreadable answer from logging an error on the visitor's console.
+  /** Gzipped where the browser can (the backend recognizes the gzip
+   * header), null otherwise: the upload then goes as plain JSON. */
+  async function gzip(text) {
+    if (typeof CompressionStream !== "function") {
+      return null;
+    }
+    try {
+      const stream = new Blob([text])
+        .stream()
+        .pipeThrough(new CompressionStream("gzip"));
+      return new Uint8Array(await new Response(stream).arrayBuffer());
+    } catch {
+      return null;
+    }
+  }
+
+  // text/plain is CORS-safelisted (no preflight), compressed or not; no-cors
+  // keeps the unreadable answer from logging an error on the visitor's
+  // console.
   function post(body) {
     fetch(context.endpoint, {
       method: "POST",
@@ -487,12 +939,33 @@
     }).catch(() => {});
   }
 
-  function capture() {
+  /** The tracker's detection; a tracker older than this script has none,
+   * and the document is taken as scrolling. */
+  function findScrollRoot() {
+    try {
+      return typeof context.scrollRoot === "function"
+        ? context.scrollRoot() || null
+        : null;
+    } catch {
+      return null;
+    }
+  }
+
+  /** The whole content: the document, plus what the scroll root hides. */
+  function contentSize(root, scrollRoot) {
+    const hidden = scrollRoot
+      ? Math.max(scrollRoot.scrollHeight - scrollRoot.clientHeight, 0)
+      : 0;
+    return { width: root.scrollWidth, height: root.scrollHeight + hidden };
+  }
+
+  async function capture() {
     // The visitor navigated on since the negotiation: this is another page.
     if (location.pathname !== context.path) {
       return;
     }
     const root = document.documentElement;
+    scrollRootElement = findScrollRoot();
     const page = {
       website: context.website,
       token: config.token,
@@ -508,20 +981,38 @@
     const html = serializeDocument();
     const body = JSON.stringify({
       ...page,
-      document: { width: root.scrollWidth, height: root.scrollHeight },
+      document: contentSize(root, scrollRootElement),
       html,
     });
-    if (new Blob([body]).size <= config.maxBytes) {
-      post(body);
+    scrollRootElement = null;
+    // The cap applies to what travels: the compressed upload when there is
+    // one.
+    const compressed = await gzip(body);
+    const size = compressed ? compressed.byteLength : new Blob([body]).size;
+    if (size <= config.maxBytes) {
+      post(
+        compressed ? new Blob([compressed], { type: "text/plain" }) : body,
+      );
       return;
     }
     post(
       JSON.stringify({
         ...page,
-        oversizeBytes: Math.min(new Blob([html]).size, MAX_REPORTED_BYTES),
+        oversizeBytes: Math.min(size, MAX_REPORTED_BYTES),
       }),
     );
   }
 
-  whenSettled(() => whenIdle(capture));
+  if (isModule) {
+    module.exports = {
+      contentSize,
+      createStyleCollector,
+      isTransientOverlay,
+      splitSelectorList,
+      styleText,
+      testedSelector,
+    };
+  } else if (asked) {
+    whenSettled(() => whenIdle(() => void capture().catch(() => {})));
+  }
 })();