@glimt/record 0.0.48 → 0.0.50

package/dist/record.cjs

@@ -427,6 +427,9 @@ const index = {
   mutationObserver: mutationObserverCtor,
   patch
 };
+const shouldTryAnonymousFetchingOnCorsError$1 = () => {
+  return !("_rrweb_skip_re_fetching_to_suppress_cors_errors" in window && window._rrweb_skip_re_fetching_to_suppress_cors_errors === true);
+};
 function isElement(n2) {
   return n2.nodeType === n2.ELEMENT_NODE;
 }
@@ -443,7 +446,7 @@ function isShadowRoot(n2) {
 function isNativeShadowDom(shadowRoot2) {
   return Object.prototype.toString.call(shadowRoot2) === "[object ShadowRoot]";
 }
-function fixBrowserCompatibilityIssuesInCSS(cssText) {
+function fixBrowserCompatibilityIssuesInCSS$1(cssText) {
   if (cssText.includes(" background-clip: text;") && !cssText.includes(" -webkit-background-clip: text;")) {
     cssText = cssText.replace(
       /\sbackground-clip:\s*text;/g,
@@ -452,7 +455,7 @@ function fixBrowserCompatibilityIssuesInCSS(cssText) {
   }
   return cssText;
 }
-function escapeImportStatement(rule2) {
+function escapeImportStatement$1(rule2) {
   const { cssText } = rule2;
   if (cssText.split('"').length < 3) return cssText;
   const statement = ["@import", `url(${JSON.stringify(rule2.href)})`];
@@ -469,7 +472,7 @@ function escapeImportStatement(rule2) {
   }
   return statement.join(" ") + ";";
 }
-function stringifyStylesheet(s2) {
+function stringifyStylesheet$1(s2) {
   try {
     const rules2 = s2.rules || s2.cssRules;
     if (!rules2) {
@@ -481,47 +484,47 @@ function stringifyStylesheet(s2) {
     }
     const stringifiedRules = Array.from(
       rules2,
-      (rule2) => stringifyRule(rule2, sheetHref)
+      (rule2) => stringifyRule$1(rule2, sheetHref)
     ).join("");
-    return fixBrowserCompatibilityIssuesInCSS(stringifiedRules);
+    return fixBrowserCompatibilityIssuesInCSS$1(stringifiedRules);
   } catch (error) {
     return null;
   }
 }
-function stringifyRule(rule2, sheetHref) {
-  if (isCSSImportRule(rule2)) {
+function stringifyRule$1(rule2, sheetHref) {
+  if (isCSSImportRule$1(rule2)) {
     let importStringified;
     try {
       importStringified = // for same-origin stylesheets,
       // we can access the imported stylesheet rules directly
-      stringifyStylesheet(rule2.styleSheet) || // work around browser issues with the raw string `@import url(...)` statement
-      escapeImportStatement(rule2);
+      stringifyStylesheet$1(rule2.styleSheet) || // work around browser issues with the raw string `@import url(...)` statement
+      escapeImportStatement$1(rule2);
     } catch (error) {
       importStringified = rule2.cssText;
     }
     if (rule2.styleSheet.href) {
-      return absolutifyURLs(importStringified, rule2.styleSheet.href);
+      return absolutifyURLs$1(importStringified, rule2.styleSheet.href);
     }
     return importStringified;
   } else {
     let ruleStringified = rule2.cssText;
-    if (isCSSStyleRule(rule2) && rule2.selectorText.includes(":")) {
-      ruleStringified = fixSafariColons(ruleStringified);
+    if (isCSSStyleRule$1(rule2) && rule2.selectorText.includes(":")) {
+      ruleStringified = fixSafariColons$1(ruleStringified);
     }
     if (sheetHref) {
-      return absolutifyURLs(ruleStringified, sheetHref);
+      return absolutifyURLs$1(ruleStringified, sheetHref);
     }
     return ruleStringified;
   }
 }
-function fixSafariColons(cssStringified) {
+function fixSafariColons$1(cssStringified) {
   const regex = /(\[(?:[\w-]+)[^\\])(:(?:[\w-]+)\])/gm;
   return cssStringified.replace(regex, "$1\\$2");
 }
-function isCSSImportRule(rule2) {
+function isCSSImportRule$1(rule2) {
   return "styleSheet" in rule2;
 }
-function isCSSStyleRule(rule2) {
+function isCSSStyleRule$1(rule2) {
   return "selectorText" in rule2;
 }
 class Mirror {
@@ -658,7 +661,7 @@ function extractFileExtension(path, baseURL) {
   const match = url.pathname.match(regex);
   return (match == null ? void 0 : match[1]) ?? null;
 }
-function extractOrigin(url) {
+function extractOrigin$1(url) {
   let origin = "";
   if (url.indexOf("//") > -1) {
     origin = url.split("/").slice(0, 3).join("/");
@@ -668,27 +671,27 @@ function extractOrigin(url) {
   origin = origin.split("?")[0];
   return origin;
 }
-const URL_IN_CSS_REF = /url\((?:(')([^']*)'|(")(.*?)"|([^)]*))\)/gm;
-const URL_PROTOCOL_MATCH = /^(?:[a-z+]+:)?\/\//i;
-const URL_WWW_MATCH = /^www\..*/i;
-const DATA_URI = /^(data:)([^,]*),(.*)/i;
-function absolutifyURLs(cssText, href) {
+const URL_IN_CSS_REF$1 = /url\((?:(')([^']*)'|(")(.*?)"|([^)]*))\)/gm;
+const URL_PROTOCOL_MATCH$1 = /^(?:[a-z+]+:)?\/\//i;
+const URL_WWW_MATCH$1 = /^www\..*/i;
+const DATA_URI$1 = /^(data:)([^,]*),(.*)/i;
+function absolutifyURLs$1(cssText, href) {
   return (cssText || "").replace(
-    URL_IN_CSS_REF,
+    URL_IN_CSS_REF$1,
     (origin, quote1, path1, quote2, path2, path3) => {
       const filePath = path1 || path2 || path3;
       const maybeQuote = quote1 || quote2 || "";
       if (!filePath) {
         return origin;
       }
-      if (URL_PROTOCOL_MATCH.test(filePath) || URL_WWW_MATCH.test(filePath)) {
+      if (URL_PROTOCOL_MATCH$1.test(filePath) || URL_WWW_MATCH$1.test(filePath)) {
         return `url(${maybeQuote}${filePath}${maybeQuote})`;
       }
-      if (DATA_URI.test(filePath)) {
+      if (DATA_URI$1.test(filePath)) {
         return `url(${maybeQuote}${filePath}${maybeQuote})`;
       }
       if (filePath[0] === "/") {
-        return `url(${maybeQuote}${extractOrigin(href) + filePath}${maybeQuote})`;
+        return `url(${maybeQuote}${extractOrigin$1(href) + filePath}${maybeQuote})`;
       }
       const stack = href.split("/");
       const parts = filePath.split("/");
@@ -811,6 +814,190 @@ function splitCssText(cssText, style, _testNoPxNorm = false) {
 function markCssSplits(cssText, style) {
   return splitCssText(cssText, style).join("/* rr_split */");
 }
+const CLEANUP_DEBOUNCE_TIME$1 = 1e3 * 30;
+const DATA_ATTRIBUTE_CLONED_NAME$1 = "data-rrweb-link-cloned";
+const DISALLOWED_EXTENSIONS$1 = [
+  // Fonts
+  "woff",
+  "woff2",
+  "ttf",
+  "otf",
+  // Embedded OpenType font
+  "eot",
+  // Images
+  "png",
+  "jpg",
+  "jpeg",
+  "gif",
+  "svg",
+  "webp",
+  "ico",
+  // Scripts
+  "js",
+  "mjs",
+  "ts",
+  "jsx",
+  "tsx",
+  // Data files
+  "json",
+  "map",
+  // Media
+  "mp4",
+  "webm",
+  "ogg",
+  "mp3",
+  "wav",
+  // Archives
+  "zip",
+  "rar",
+  "7z",
+  "tar",
+  "gz",
+  // Documents
+  "pdf",
+  "doc",
+  "docx",
+  "xls",
+  "xlsx"
+];
+const _AsyncStylesheetManager$1 = class _AsyncStylesheetManager {
+  constructor() {
+    __publicField$1(this, "currentHref", null);
+    __publicField$1(this, "clones", {});
+    __publicField$1(this, "cleanTimeout", null);
+    if (_AsyncStylesheetManager.instance) return _AsyncStylesheetManager.instance;
+    _AsyncStylesheetManager.instance = this;
+  }
+  removeCloneNode(href) {
+    var _a2;
+    if (!(href in this.clones) || this.clones[href] === void 0) return;
+    const clone = document.querySelector(
+      `link[${DATA_ATTRIBUTE_CLONED_NAME$1}="${this.clones[href].cloneNodeAttrId}"]`
+    );
+    if (!clone) return;
+    (_a2 = clone.parentNode) == null ? void 0 : _a2.removeChild(clone);
+  }
+  onLoad(href) {
+    if (!(href in this.clones) || this.clones[href] === void 0) return;
+    const styleSheets2 = Array.from(document.styleSheets);
+    let clonedStyleSheet = null;
+    for (let i2 = styleSheets2.length - 1; i2 >= 0; i2--) {
+      if (styleSheets2[i2].href === href) {
+        clonedStyleSheet = styleSheets2[i2];
+        break;
+      }
+    }
+    if (!clonedStyleSheet) return this.removeCloneNode(href);
+    const newCssText = stringifyStylesheet$1(clonedStyleSheet);
+    this.removeCloneNode(href);
+    if (!newCssText) return;
+    this.clones[href].cssText = newCssText;
+    this.clones[href].loaded = true;
+    const original = document.querySelector(
+      `link[${DATA_ATTRIBUTE_CLONED_NAME$1}="source-${this.clones[href].cloneNodeAttrId}"]`
+    );
+    if (original) {
+      original.setAttribute("data-rrweb-mutation", Date.now().toString());
+      original.removeAttribute(DATA_ATTRIBUTE_CLONED_NAME$1);
+    } else {
+      this.clones[href].original.setAttribute(
+        "data-rrweb-mutation",
+        Date.now().toString()
+      );
+      this.clones[href].original.removeAttribute(DATA_ATTRIBUTE_CLONED_NAME$1);
+    }
+    window.dispatchEvent(
+      new CustomEvent("__rrweb_custom_event__", {
+        detail: {
+          type: 5,
+          timestamp: Date.now(),
+          data: {
+            tag: "async-css-resolution",
+            requestCssId: this.clones[href].requestCssId,
+            cssText: this.clones[href].cssText
+          }
+        }
+      })
+    );
+  }
+  onLoadError(href) {
+    if (!(href in this.clones) || this.clones[href] === void 0) return;
+    this.removeCloneNode(href);
+  }
+  removeAllCloneElements() {
+    for (const href of Object.keys(this.clones)) {
+      this.removeCloneNode(href);
+    }
+  }
+  onCleanTimeout() {
+    asyncStylesheetManager$1.cleanTimeout = null;
+    asyncStylesheetManager$1.removeAllCloneElements();
+  }
+  blowCache() {
+    this.removeAllCloneElements();
+    this.clones = {};
+  }
+  requestClone({
+    forElement,
+    requestCssId
+  }) {
+    if (!shouldTryAnonymousFetchingOnCorsError$1()) return;
+    if (this.currentHref != null && document.location.href !== this.currentHref)
+      this.blowCache();
+    this.currentHref = document.location.href;
+    const href = forElement.href;
+    if (!href) return;
+    if (href in this.clones && this.clones[href] !== void 0) return;
+    if (forElement.getAttribute("crossorigin") === "anonymous") return;
+    if (forElement.rel !== "stylesheet") {
+      const last = href.split("/").pop();
+      if (last && last.includes(".")) {
+        const [filename] = last.split("?");
+        const ext = filename.split(".").pop();
+        if (ext) {
+          if (DISALLOWED_EXTENSIONS$1.includes(ext.trim().toLowerCase())) return;
+        }
+      }
+    }
+    const clone = forElement.cloneNode();
+    const cloneNodeAttrId = Math.random().toString(36).slice(2);
+    clone.setAttribute("crossorigin", "anonymous");
+    clone.setAttribute(DATA_ATTRIBUTE_CLONED_NAME$1, cloneNodeAttrId);
+    forElement.setAttribute(
+      DATA_ATTRIBUTE_CLONED_NAME$1,
+      `source-${cloneNodeAttrId}`
+    );
+    document.head.appendChild(clone);
+    this.clones[href] = {
+      original: forElement,
+      clone,
+      loaded: false,
+      cssText: null,
+      cloneNodeAttrId,
+      requestCssId
+    };
+    clone.onload = () => {
+      this.onLoad(href);
+    };
+    clone.onerror = () => {
+      this.onLoadError(href);
+    };
+    if (this.cleanTimeout) clearTimeout(this.cleanTimeout);
+    this.cleanTimeout = setTimeout(
+      asyncStylesheetManager$1.onCleanTimeout,
+      CLEANUP_DEBOUNCE_TIME$1
+    );
+  }
+  getClonedCssTextIfAvailable(href) {
+    if (href in this.clones && this.clones[href] !== void 0 && this.clones[href].loaded === true) {
+      return this.clones[href].cssText;
+    }
+    return null;
+  }
+};
+__publicField$1(_AsyncStylesheetManager$1, "instance");
+let AsyncStylesheetManager$1 = _AsyncStylesheetManager$1;
+const asyncStylesheetManager$1 = new AsyncStylesheetManager$1();
 let _id = 1;
 const tagNameRegex = new RegExp("[^a-z0-9-_:]");
 const IGNORED_NODE = -2;
@@ -922,7 +1109,7 @@ function transformAttribute(doc, tagName, name, value) {
   } else if (name === "srcset") {
     return getAbsoluteSrcsetString(doc, value);
   } else if (name === "style") {
-    return absolutifyURLs(value, getHref(doc));
+    return absolutifyURLs$1(value, getHref(doc));
   } else if (tagName === "object" && name === "data") {
     return absoluteToDoc(doc, value);
   }
@@ -1159,7 +1346,7 @@ function serializeTextNode(n2, options) {
   } else if (!cssCaptured) {
     textContent2 = index.textContent(n2);
     if (isStyle && textContent2) {
-      textContent2 = absolutifyURLs(textContent2, getHref(options.doc));
+      textContent2 = absolutifyURLs$1(textContent2, getHref(options.doc));
     }
   }
   if (!isStyle && !isScript && textContent2 && needsMask) {
@@ -1202,21 +1389,38 @@ function serializeElementNode(n2, options) {
     }
   }
   if (tagName === "link" && inlineStylesheet) {
-    const stylesheet = Array.from(doc.styleSheets).find((s2) => {
-      return s2.href === n2.href;
-    });
+    const styleSheets2 = Array.from(doc.styleSheets);
+    let stylesheet = null;
+    for (let i2 = 0; i2 < styleSheets2.length; i2++) {
+      if (styleSheets2[i2].href === n2.href) {
+        stylesheet = styleSheets2[i2];
+        break;
+      }
+    }
     let cssText = null;
     if (stylesheet) {
-      cssText = stringifyStylesheet(stylesheet);
+      cssText = stringifyStylesheet$1(stylesheet);
+    }
+    if (!cssText) {
+      cssText = asyncStylesheetManager$1.getClonedCssTextIfAvailable(
+        n2.href
+      );
     }
     if (cssText) {
       delete attributes.rel;
       delete attributes.href;
       attributes._cssText = cssText;
+    } else {
+      const requestCssId = `css-request-${Math.random().toString(36).slice(2)}`;
+      asyncStylesheetManager$1.requestClone({
+        forElement: n2,
+        requestCssId
+      });
+      attributes._requestCssId = requestCssId;
     }
   }
   if (tagName === "style" && n2.sheet) {
-    let cssText = stringifyStylesheet(
+    let cssText = stringifyStylesheet$1(
       n2.sheet
     );
     if (cssText) {
@@ -1293,7 +1497,9 @@ function serializeElementNode(n2, options) {
     const imageSrc = image.currentSrc || image.getAttribute("src") || "<unknown-src>";
     const imageHeight = image.naturalHeight;
     const imageWidth = image.naturalWidth;
+    let hasRetried = false;
     const inlineImageCleanup = () => {
+      if (!hasRetried) return;
       image = null;
     };
     const recordInlineImage = () => {
@@ -1308,18 +1514,21 @@ function serializeElementNode(n2, options) {
         );
       } catch (err) {
         if (image.crossOrigin !== "anonymous") {
-          image = new Image();
-          image.src = imageSrc;
-          image.crossOrigin = "anonymous";
-          image.height = imageHeight;
-          image.width = imageWidth;
-          if (image.complete && image.naturalWidth !== 0) {
-            recordInlineImage();
-          } else {
-            image.addEventListener("load", recordInlineImage, { once: true });
-            image.addEventListener("error", onImageLoadError, { once: true });
+          if (shouldTryAnonymousFetchingOnCorsError$1()) {
+            image = new Image();
+            hasRetried = true;
+            image.src = imageSrc;
+            image.crossOrigin = "anonymous";
+            image.height = imageHeight;
+            image.width = imageWidth;
+            if (image.complete && image.naturalWidth !== 0) {
+              recordInlineImage();
+            } else {
+              image.addEventListener("load", recordInlineImage, { once: true });
+              image.addEventListener("error", onImageLoadError, { once: true });
+            }
+            return;
           }
-          return;
         } else {
           console.warn(
             `Cannot inline img src=${imageSrc}! Error: ${err}`
@@ -2348,7 +2557,7 @@ let Node$4$1 = class Node2 {
     let index2 = this.parent.index(this);
     return this.parent.nodes[index2 + 1];
   }
-  positionBy(opts) {
+  positionBy(opts = {}) {
     let pos = this.source.start;
     if (opts.index) {
       pos = this.positionInside(opts.index);
@@ -2377,27 +2586,38 @@ let Node$4$1 = class Node2 {
         column += 1;
       }
     }
-    return { column, line };
+    return { column, line, offset: end };
   }
   prev() {
     if (!this.parent) return void 0;
     let index2 = this.parent.index(this);
     return this.parent.nodes[index2 - 1];
   }
-  rangeBy(opts) {
+  rangeBy(opts = {}) {
+    let inputString = "document" in this.source.input ? this.source.input.document : this.source.input.css;
     let start = {
       column: this.source.start.column,
-      line: this.source.start.line
+      line: this.source.start.line,
+      offset: sourceOffset$1(inputString, this.source.start)
     };
     let end = this.source.end ? {
       column: this.source.end.column + 1,
-      line: this.source.end.line
+      line: this.source.end.line,
+      offset: typeof this.source.end.offset === "number" ? (
+        // `source.end.offset` is exclusive, so we don't need to add 1
+        this.source.end.offset
+      ) : (
+        // Since line/column in this.source.end is inclusive,
+        // the `sourceOffset(... , this.source.end)` returns an inclusive offset.
+        // So, we add 1 to convert it to exclusive.
+        sourceOffset$1(inputString, this.source.end) + 1
+      )
     } : {
       column: start.column + 1,
-      line: start.line
+      line: start.line,
+      offset: start.offset + 1
     };
     if (opts.word) {
-      let inputString = "document" in this.source.input ? this.source.input.document : this.source.input.css;
       let stringRepresentation = inputString.slice(
         sourceOffset$1(inputString, this.source.start),
         sourceOffset$1(inputString, this.source.end)
@@ -2405,15 +2625,14 @@ let Node$4$1 = class Node2 {
       let index2 = stringRepresentation.indexOf(opts.word);
       if (index2 !== -1) {
         start = this.positionInside(index2);
-        end = this.positionInside(
-          index2 + opts.word.length
-        );
+        end = this.positionInside(index2 + opts.word.length);
       }
     } else {
       if (opts.start) {
         start = {
           column: opts.start.column,
-          line: opts.start.line
+          line: opts.start.line,
+          offset: sourceOffset$1(inputString, opts.start)
         };
       } else if (opts.index) {
         start = this.positionInside(opts.index);
@@ -2421,7 +2640,8 @@ let Node$4$1 = class Node2 {
       if (opts.end) {
         end = {
           column: opts.end.column,
-          line: opts.end.line
+          line: opts.end.line,
+          offset: sourceOffset$1(inputString, opts.end)
         };
       } else if (typeof opts.endIndex === "number") {
         end = this.positionInside(opts.endIndex);
@@ -2430,7 +2650,11 @@ let Node$4$1 = class Node2 {
       }
     }
     if (end.line < start.line || end.line === start.line && end.column <= start.column) {
-      end = { column: start.column + 1, line: start.line };
+      end = {
+        column: start.column + 1,
+        line: start.line,
+        offset: start.offset + 1
+      };
     }
     return { end, start };
   }
@@ -2494,6 +2718,7 @@ let Node$4$1 = class Node2 {
       } else if (typeof value === "object" && value.toJSON) {
         fixed[name] = value.toJSON(null, inputs);
       } else if (name === "source") {
+        if (value == null) continue;
         let inputId = inputs.get(value.input);
         if (inputId == null) {
           inputId = inputsNextIndex;
@@ -2528,7 +2753,7 @@ let Node$4$1 = class Node2 {
     });
     return result2;
   }
-  warn(result2, text, opts) {
+  warn(result2, text, opts = {}) {
     let data = { node: this };
     for (let i2 in opts) data[i2] = opts[i2];
     return result2.warn(text, data);
@@ -3105,9 +3330,21 @@ let { fileURLToPath: fileURLToPath$1, pathToFileURL: pathToFileURL$1$1 } = requi
 let CssSyntaxError$1$1 = cssSyntaxError$1;
 let PreviousMap$1$1 = previousMap$1;
 let terminalHighlight$2 = require$$2$1;
-let fromOffsetCache$1 = Symbol("fromOffsetCache");
+let lineToIndexCache$1 = Symbol("lineToIndexCache");
 let sourceMapAvailable$1$1 = Boolean(SourceMapConsumer$1$1 && SourceMapGenerator$1$1);
 let pathAvailable$1$1 = Boolean(resolve$1$1 && isAbsolute$1);
+function getLineToIndex$1(input2) {
+  if (input2[lineToIndexCache$1]) return input2[lineToIndexCache$1];
+  let lines = input2.css.split("\n");
+  let lineToIndex = new Array(lines.length);
+  let prevIndex = 0;
+  for (let i2 = 0, l2 = lines.length; i2 < l2; i2++) {
+    lineToIndex[i2] = prevIndex;
+    prevIndex += lines[i2].length + 1;
+  }
+  input2[lineToIndexCache$1] = lineToIndex;
+  return lineToIndex;
+}
 let Input$4$1 = class Input {
   get from() {
     return this.file || this.id;
@@ -3146,30 +3383,37 @@ let Input$4$1 = class Input {
     if (this.map) this.map.file = this.from;
   }
   error(message, line, column, opts = {}) {
-    let endColumn, endLine, result2;
+    let endColumn, endLine, endOffset, offset, result2;
     if (line && typeof line === "object") {
       let start = line;
       let end = column;
       if (typeof start.offset === "number") {
-        let pos = this.fromOffset(start.offset);
+        offset = start.offset;
+        let pos = this.fromOffset(offset);
         line = pos.line;
         column = pos.col;
       } else {
         line = start.line;
         column = start.column;
+        offset = this.fromLineAndColumn(line, column);
       }
       if (typeof end.offset === "number") {
-        let pos = this.fromOffset(end.offset);
+        endOffset = end.offset;
+        let pos = this.fromOffset(endOffset);
         endLine = pos.line;
         endColumn = pos.col;
       } else {
         endLine = end.line;
         endColumn = end.column;
+        endOffset = this.fromLineAndColumn(end.line, end.column);
       }
     } else if (!column) {
-      let pos = this.fromOffset(line);
+      offset = line;
+      let pos = this.fromOffset(offset);
       line = pos.line;
       column = pos.col;
+    } else {
+      offset = this.fromLineAndColumn(line, column);
     }
     let origin = this.origin(line, column, endLine, endColumn);
     if (origin) {
@@ -3191,7 +3435,7 @@ let Input$4$1 = class Input {
         opts.plugin
       );
     }
-    result2.input = { column, endColumn, endLine, line, source: this.css };
+    result2.input = { column, endColumn, endLine, endOffset, line, offset, source: this.css };
     if (this.file) {
       if (pathToFileURL$1$1) {
         result2.input.url = pathToFileURL$1$1(this.file).toString();
@@ -3200,21 +3444,14 @@ let Input$4$1 = class Input {
     }
     return result2;
   }
+  fromLineAndColumn(line, column) {
+    let lineToIndex = getLineToIndex$1(this);
+    let index2 = lineToIndex[line - 1];
+    return index2 + column - 1;
+  }
   fromOffset(offset) {
-    let lastLine, lineToIndex;
-    if (!this[fromOffsetCache$1]) {
-      let lines = this.css.split("\n");
-      lineToIndex = new Array(lines.length);
-      let prevIndex = 0;
-      for (let i2 = 0, l2 = lines.length; i2 < l2; i2++) {
-        lineToIndex[i2] = prevIndex;
-        prevIndex += lines[i2].length + 1;
-      }
-      this[fromOffsetCache$1] = lineToIndex;
-    } else {
-      lineToIndex = this[fromOffsetCache$1];
-    }
-    lastLine = lineToIndex[lineToIndex.length - 1];
+    let lineToIndex = getLineToIndex$1(this);
+    let lastLine = lineToIndex[lineToIndex.length - 1];
     let min = 0;
     if (offset >= lastLine) {
       min = lineToIndex.length - 1;
@@ -4576,7 +4813,7 @@ let Result$3$1 = class Result {
     this.messages = [];
     this.root = root2;
     this.opts = opts;
-    this.css = void 0;
+    this.css = "";
     this.map = void 0;
   }
   toString() {
@@ -5188,7 +5425,7 @@ let NoWorkResult2$1 = noWorkResult$1;
 let Root$1$1 = root$1;
 let Processor$1$1 = class Processor {
   constructor(plugins = []) {
-    this.version = "8.5.3";
+    this.version = "8.5.4";
     this.plugins = this.normalize(plugins);
   }
   normalize(plugins) {
@@ -5342,6 +5579,325 @@ postcss$1$1.Node;
 var __defProp2 = Object.defineProperty;
 var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField2 = (obj, key, value) => __defNormalProp2(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp22 = Object.defineProperty;
+var __defNormalProp22 = (obj, key, value) => key in obj ? __defProp22(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField22 = (obj, key, value) => __defNormalProp22(obj, typeof key !== "symbol" ? key + "" : key, value);
+const shouldTryAnonymousFetchingOnCorsError = () => {
+  return !("_rrweb_skip_re_fetching_to_suppress_cors_errors" in window && window._rrweb_skip_re_fetching_to_suppress_cors_errors === true);
+};
+function fixBrowserCompatibilityIssuesInCSS(cssText) {
+  if (cssText.includes(" background-clip: text;") && !cssText.includes(" -webkit-background-clip: text;")) {
+    cssText = cssText.replace(
+      /\sbackground-clip:\s*text;/g,
+      " -webkit-background-clip: text; background-clip: text;"
+    );
+  }
+  return cssText;
+}
+function escapeImportStatement(rule2) {
+  const { cssText } = rule2;
+  if (cssText.split('"').length < 3) return cssText;
+  const statement = ["@import", `url(${JSON.stringify(rule2.href)})`];
+  if (rule2.layerName === "") {
+    statement.push(`layer`);
+  } else if (rule2.layerName) {
+    statement.push(`layer(${rule2.layerName})`);
+  }
+  if (rule2.supportsText) {
+    statement.push(`supports(${rule2.supportsText})`);
+  }
+  if (rule2.media.length) {
+    statement.push(rule2.media.mediaText);
+  }
+  return statement.join(" ") + ";";
+}
+function stringifyStylesheet(s2) {
+  try {
+    const rules2 = s2.rules || s2.cssRules;
+    if (!rules2) {
+      return null;
+    }
+    let sheetHref = s2.href;
+    if (!sheetHref && s2.ownerNode && s2.ownerNode.ownerDocument) {
+      sheetHref = s2.ownerNode.ownerDocument.location.href;
+    }
+    const stringifiedRules = Array.from(
+      rules2,
+      (rule2) => stringifyRule(rule2, sheetHref)
+    ).join("");
+    return fixBrowserCompatibilityIssuesInCSS(stringifiedRules);
+  } catch (error) {
+    return null;
+  }
+}
+function stringifyRule(rule2, sheetHref) {
+  if (isCSSImportRule(rule2)) {
+    let importStringified;
+    try {
+      importStringified = // for same-origin stylesheets,
+      // we can access the imported stylesheet rules directly
+      stringifyStylesheet(rule2.styleSheet) || // work around browser issues with the raw string `@import url(...)` statement
+      escapeImportStatement(rule2);
+    } catch (error) {
+      importStringified = rule2.cssText;
+    }
+    if (rule2.styleSheet.href) {
+      return absolutifyURLs(importStringified, rule2.styleSheet.href);
+    }
+    return importStringified;
+  } else {
+    let ruleStringified = rule2.cssText;
+    if (isCSSStyleRule(rule2) && rule2.selectorText.includes(":")) {
+      ruleStringified = fixSafariColons(ruleStringified);
+    }
+    if (sheetHref) {
+      return absolutifyURLs(ruleStringified, sheetHref);
+    }
+    return ruleStringified;
+  }
+}
+function fixSafariColons(cssStringified) {
+  const regex = /(\[(?:[\w-]+)[^\\])(:(?:[\w-]+)\])/gm;
+  return cssStringified.replace(regex, "$1\\$2");
+}
+function isCSSImportRule(rule2) {
+  return "styleSheet" in rule2;
+}
+function isCSSStyleRule(rule2) {
+  return "selectorText" in rule2;
+}
+function extractOrigin(url) {
+  let origin = "";
+  if (url.indexOf("//") > -1) {
+    origin = url.split("/").slice(0, 3).join("/");
+  } else {
+    origin = url.split("/")[0];
+  }
+  origin = origin.split("?")[0];
+  return origin;
+}
+const URL_IN_CSS_REF = /url\((?:(')([^']*)'|(")(.*?)"|([^)]*))\)/gm;
+const URL_PROTOCOL_MATCH = /^(?:[a-z+]+:)?\/\//i;
+const URL_WWW_MATCH = /^www\..*/i;
+const DATA_URI = /^(data:)([^,]*),(.*)/i;
+function absolutifyURLs(cssText, href) {
+  return (cssText || "").replace(
+    URL_IN_CSS_REF,
+    (origin, quote1, path1, quote2, path2, path3) => {
+      const filePath = path1 || path2 || path3;
+      const maybeQuote = quote1 || quote2 || "";
+      if (!filePath) {
+        return origin;
+      }
+      if (URL_PROTOCOL_MATCH.test(filePath) || URL_WWW_MATCH.test(filePath)) {
+        return `url(${maybeQuote}${filePath}${maybeQuote})`;
+      }
+      if (DATA_URI.test(filePath)) {
+        return `url(${maybeQuote}${filePath}${maybeQuote})`;
+      }
+      if (filePath[0] === "/") {
+        return `url(${maybeQuote}${extractOrigin(href) + filePath}${maybeQuote})`;
+      }
+      const stack = href.split("/");
+      const parts = filePath.split("/");
+      stack.pop();
+      for (const part of parts) {
+        if (part === ".") {
+          continue;
+        } else if (part === "..") {
+          stack.pop();
+        } else {
+          stack.push(part);
+        }
+      }
+      return `url(${maybeQuote}${stack.join("/")}${maybeQuote})`;
+    }
+  );
+}
+const CLEANUP_DEBOUNCE_TIME = 1e3 * 30;
+const DATA_ATTRIBUTE_CLONED_NAME = "data-rrweb-link-cloned";
+const DISALLOWED_EXTENSIONS = [
+  // Fonts
+  "woff",
+  "woff2",
+  "ttf",
+  "otf",
+  // Embedded OpenType font
+  "eot",
+  // Images
+  "png",
+  "jpg",
+  "jpeg",
+  "gif",
+  "svg",
+  "webp",
+  "ico",
+  // Scripts
+  "js",
+  "mjs",
+  "ts",
+  "jsx",
+  "tsx",
+  // Data files
+  "json",
+  "map",
+  // Media
+  "mp4",
+  "webm",
+  "ogg",
+  "mp3",
+  "wav",
+  // Archives
+  "zip",
+  "rar",
+  "7z",
+  "tar",
+  "gz",
+  // Documents
+  "pdf",
+  "doc",
+  "docx",
+  "xls",
+  "xlsx"
+];
+const _AsyncStylesheetManager2 = class _AsyncStylesheetManager22 {
+  constructor() {
+    __publicField22(this, "currentHref", null);
+    __publicField22(this, "clones", {});
+    __publicField22(this, "cleanTimeout", null);
+    if (_AsyncStylesheetManager22.instance) return _AsyncStylesheetManager22.instance;
+    _AsyncStylesheetManager22.instance = this;
+  }
+  removeCloneNode(href) {
+    var _a2;
+    if (!(href in this.clones) || this.clones[href] === void 0) return;
+    const clone = document.querySelector(
+      `link[${DATA_ATTRIBUTE_CLONED_NAME}="${this.clones[href].cloneNodeAttrId}"]`
+    );
+    if (!clone) return;
+    (_a2 = clone.parentNode) == null ? void 0 : _a2.removeChild(clone);
+  }
+  onLoad(href) {
+    if (!(href in this.clones) || this.clones[href] === void 0) return;
+    const styleSheets2 = Array.from(document.styleSheets);
+    let clonedStyleSheet = null;
+    for (let i2 = styleSheets2.length - 1; i2 >= 0; i2--) {
+      if (styleSheets2[i2].href === href) {
+        clonedStyleSheet = styleSheets2[i2];
+        break;
+      }
+    }
+    if (!clonedStyleSheet) return this.removeCloneNode(href);
+    const newCssText = stringifyStylesheet(clonedStyleSheet);
+    this.removeCloneNode(href);
+    if (!newCssText) return;
+    this.clones[href].cssText = newCssText;
+    this.clones[href].loaded = true;
+    const original = document.querySelector(
+      `link[${DATA_ATTRIBUTE_CLONED_NAME}="source-${this.clones[href].cloneNodeAttrId}"]`
+    );
+    if (original) {
+      original.setAttribute("data-rrweb-mutation", Date.now().toString());
+      original.removeAttribute(DATA_ATTRIBUTE_CLONED_NAME);
+    } else {
+      this.clones[href].original.setAttribute(
+        "data-rrweb-mutation",
+        Date.now().toString()
+      );
+      this.clones[href].original.removeAttribute(DATA_ATTRIBUTE_CLONED_NAME);
+    }
+    window.dispatchEvent(
+      new CustomEvent("__rrweb_custom_event__", {
+        detail: {
+          type: 5,
+          timestamp: Date.now(),
+          data: {
+            tag: "async-css-resolution",
+            requestCssId: this.clones[href].requestCssId,
+            cssText: this.clones[href].cssText
+          }
+        }
+      })
+    );
+  }
+  onLoadError(href) {
+    if (!(href in this.clones) || this.clones[href] === void 0) return;
+    this.removeCloneNode(href);
+  }
+  removeAllCloneElements() {
+    for (const href of Object.keys(this.clones)) {
+      this.removeCloneNode(href);
+    }
+  }
+  onCleanTimeout() {
+    asyncStylesheetManager.cleanTimeout = null;
+    asyncStylesheetManager.removeAllCloneElements();
+  }
+  blowCache() {
+    this.removeAllCloneElements();
+    this.clones = {};
+  }
+  requestClone({
+    forElement,
+    requestCssId
+  }) {
+    if (!shouldTryAnonymousFetchingOnCorsError()) return;
+    if (this.currentHref != null && document.location.href !== this.currentHref)
+      this.blowCache();
+    this.currentHref = document.location.href;
+    const href = forElement.href;
+    if (!href) return;
+    if (href in this.clones && this.clones[href] !== void 0) return;
+    if (forElement.getAttribute("crossorigin") === "anonymous") return;
+    if (forElement.rel !== "stylesheet") {
+      const last = href.split("/").pop();
+      if (last && last.includes(".")) {
+        const [filename] = last.split("?");
+        const ext = filename.split(".").pop();
+        if (ext) {
+          if (DISALLOWED_EXTENSIONS.includes(ext.trim().toLowerCase())) return;
+        }
+      }
+    }
+    const clone = forElement.cloneNode();
+    const cloneNodeAttrId = Math.random().toString(36).slice(2);
+    clone.setAttribute("crossorigin", "anonymous");
+    clone.setAttribute(DATA_ATTRIBUTE_CLONED_NAME, cloneNodeAttrId);
+    forElement.setAttribute(
+      DATA_ATTRIBUTE_CLONED_NAME,
+      `source-${cloneNodeAttrId}`
+    );
+    document.head.appendChild(clone);
+    this.clones[href] = {
+      original: forElement,
+      clone,
+      loaded: false,
+      cssText: null,
+      cloneNodeAttrId,
+      requestCssId
+    };
+    clone.onload = () => {
+      this.onLoad(href);
+    };
+    clone.onerror = () => {
+      this.onLoadError(href);
+    };
+    if (this.cleanTimeout) clearTimeout(this.cleanTimeout);
+    this.cleanTimeout = setTimeout(
+      asyncStylesheetManager.onCleanTimeout,
+      CLEANUP_DEBOUNCE_TIME
+    );
+  }
+  getClonedCssTextIfAvailable(href) {
+    if (href in this.clones && this.clones[href] !== void 0 && this.clones[href].loaded === true) {
+      return this.clones[href].cssText;
+    }
+    return null;
+  }
+};
+__publicField22(_AsyncStylesheetManager2, "instance");
+let AsyncStylesheetManager = _AsyncStylesheetManager2;
+const asyncStylesheetManager = new AsyncStylesheetManager();
 function getDefaultExportFromCjs(x2) {
   return x2 && x2.__esModule && Object.prototype.hasOwnProperty.call(x2, "default") ? x2["default"] : x2;
 }
@@ -5949,7 +6505,7 @@ let Node$4 = class Node3 {
     let index2 = this.parent.index(this);
     return this.parent.nodes[index2 + 1];
   }
-  positionBy(opts) {
+  positionBy(opts = {}) {
     let pos = this.source.start;
     if (opts.index) {
       pos = this.positionInside(opts.index);
@@ -5978,27 +6534,38 @@ let Node$4 = class Node3 {
         column += 1;
       }
     }
-    return { column, line };
+    return { column, line, offset: end };
   }
   prev() {
     if (!this.parent) return void 0;
     let index2 = this.parent.index(this);
     return this.parent.nodes[index2 - 1];
   }
-  rangeBy(opts) {
+  rangeBy(opts = {}) {
+    let inputString = "document" in this.source.input ? this.source.input.document : this.source.input.css;
     let start = {
       column: this.source.start.column,
-      line: this.source.start.line
+      line: this.source.start.line,
+      offset: sourceOffset(inputString, this.source.start)
     };
     let end = this.source.end ? {
       column: this.source.end.column + 1,
-      line: this.source.end.line
+      line: this.source.end.line,
+      offset: typeof this.source.end.offset === "number" ? (
+        // `source.end.offset` is exclusive, so we don't need to add 1
+        this.source.end.offset
+      ) : (
+        // Since line/column in this.source.end is inclusive,
+        // the `sourceOffset(... , this.source.end)` returns an inclusive offset.
+        // So, we add 1 to convert it to exclusive.
+        sourceOffset(inputString, this.source.end) + 1
+      )
     } : {
       column: start.column + 1,
-      line: start.line
+      line: start.line,
+      offset: start.offset + 1
     };
     if (opts.word) {
-      let inputString = "document" in this.source.input ? this.source.input.document : this.source.input.css;
       let stringRepresentation = inputString.slice(
         sourceOffset(inputString, this.source.start),
         sourceOffset(inputString, this.source.end)
@@ -6006,15 +6573,14 @@ let Node$4 = class Node3 {
       let index2 = stringRepresentation.indexOf(opts.word);
       if (index2 !== -1) {
         start = this.positionInside(index2);
-        end = this.positionInside(
-          index2 + opts.word.length
-        );
+        end = this.positionInside(index2 + opts.word.length);
       }
     } else {
       if (opts.start) {
         start = {
           column: opts.start.column,
-          line: opts.start.line
+          line: opts.start.line,
+          offset: sourceOffset(inputString, opts.start)
         };
       } else if (opts.index) {
         start = this.positionInside(opts.index);
@@ -6022,7 +6588,8 @@ let Node$4 = class Node3 {
       if (opts.end) {
         end = {
           column: opts.end.column,
-          line: opts.end.line
+          line: opts.end.line,
+          offset: sourceOffset(inputString, opts.end)
         };
       } else if (typeof opts.endIndex === "number") {
         end = this.positionInside(opts.endIndex);
@@ -6031,7 +6598,11 @@ let Node$4 = class Node3 {
       }
     }
     if (end.line < start.line || end.line === start.line && end.column <= start.column) {
-      end = { column: start.column + 1, line: start.line };
+      end = {
+        column: start.column + 1,
+        line: start.line,
+        offset: start.offset + 1
+      };
     }
     return { end, start };
   }
@@ -6095,6 +6666,7 @@ let Node$4 = class Node3 {
       } else if (typeof value === "object" && value.toJSON) {
         fixed[name] = value.toJSON(null, inputs);
       } else if (name === "source") {
+        if (value == null) continue;
         let inputId = inputs.get(value.input);
         if (inputId == null) {
           inputId = inputsNextIndex;
@@ -6129,7 +6701,7 @@ let Node$4 = class Node3 {
     });
     return result2;
   }
-  warn(result2, text, opts) {
+  warn(result2, text, opts = {}) {
     let data = { node: this };
     for (let i2 in opts) data[i2] = opts[i2];
     return result2.warn(text, data);
@@ -6706,9 +7278,21 @@ let { fileURLToPath, pathToFileURL: pathToFileURL$1 } = require$$2;
 let CssSyntaxError$1 = cssSyntaxError;
 let PreviousMap$1 = previousMap;
 let terminalHighlight = require$$2;
-let fromOffsetCache = Symbol("fromOffsetCache");
+let lineToIndexCache = Symbol("lineToIndexCache");
 let sourceMapAvailable$1 = Boolean(SourceMapConsumer$1 && SourceMapGenerator$1);
 let pathAvailable$1 = Boolean(resolve$1 && isAbsolute);
+function getLineToIndex(input2) {
+  if (input2[lineToIndexCache]) return input2[lineToIndexCache];
+  let lines = input2.css.split("\n");
+  let lineToIndex = new Array(lines.length);
+  let prevIndex = 0;
+  for (let i2 = 0, l2 = lines.length; i2 < l2; i2++) {
+    lineToIndex[i2] = prevIndex;
+    prevIndex += lines[i2].length + 1;
+  }
+  input2[lineToIndexCache] = lineToIndex;
+  return lineToIndex;
+}
 let Input$4 = class Input2 {
   get from() {
     return this.file || this.id;
@@ -6747,30 +7331,37 @@ let Input$4 = class Input2 {
     if (this.map) this.map.file = this.from;
   }
   error(message, line, column, opts = {}) {
-    let endColumn, endLine, result2;
+    let endColumn, endLine, endOffset, offset, result2;
     if (line && typeof line === "object") {
       let start = line;
       let end = column;
       if (typeof start.offset === "number") {
-        let pos = this.fromOffset(start.offset);
+        offset = start.offset;
+        let pos = this.fromOffset(offset);
         line = pos.line;
         column = pos.col;
       } else {
         line = start.line;
         column = start.column;
+        offset = this.fromLineAndColumn(line, column);
       }
       if (typeof end.offset === "number") {
-        let pos = this.fromOffset(end.offset);
+        endOffset = end.offset;
+        let pos = this.fromOffset(endOffset);
         endLine = pos.line;
         endColumn = pos.col;
       } else {
         endLine = end.line;
         endColumn = end.column;
+        endOffset = this.fromLineAndColumn(end.line, end.column);
       }
     } else if (!column) {
-      let pos = this.fromOffset(line);
+      offset = line;
+      let pos = this.fromOffset(offset);
       line = pos.line;
       column = pos.col;
+    } else {
+      offset = this.fromLineAndColumn(line, column);
     }
     let origin = this.origin(line, column, endLine, endColumn);
     if (origin) {
@@ -6792,7 +7383,7 @@ let Input$4 = class Input2 {
         opts.plugin
       );
     }
-    result2.input = { column, endColumn, endLine, line, source: this.css };
+    result2.input = { column, endColumn, endLine, endOffset, line, offset, source: this.css };
     if (this.file) {
       if (pathToFileURL$1) {
         result2.input.url = pathToFileURL$1(this.file).toString();
@@ -6801,21 +7392,14 @@ let Input$4 = class Input2 {
     }
     return result2;
   }
+  fromLineAndColumn(line, column) {
+    let lineToIndex = getLineToIndex(this);
+    let index2 = lineToIndex[line - 1];
+    return index2 + column - 1;
+  }
   fromOffset(offset) {
-    let lastLine, lineToIndex;
-    if (!this[fromOffsetCache]) {
-      let lines = this.css.split("\n");
-      lineToIndex = new Array(lines.length);
-      let prevIndex = 0;
-      for (let i2 = 0, l2 = lines.length; i2 < l2; i2++) {
-        lineToIndex[i2] = prevIndex;
-        prevIndex += lines[i2].length + 1;
-      }
-      this[fromOffsetCache] = lineToIndex;
-    } else {
-      lineToIndex = this[fromOffsetCache];
-    }
-    lastLine = lineToIndex[lineToIndex.length - 1];
+    let lineToIndex = getLineToIndex(this);
+    let lastLine = lineToIndex[lineToIndex.length - 1];
     let min = 0;
     if (offset >= lastLine) {
       min = lineToIndex.length - 1;
@@ -8177,7 +8761,7 @@ let Result$3 = class Result2 {
     this.messages = [];
     this.root = root2;
     this.opts = opts;
-    this.css = void 0;
+    this.css = "";
     this.map = void 0;
   }
   toString() {
@@ -8789,7 +9373,7 @@ let NoWorkResult22 = noWorkResult;
 let Root$1 = root;
 let Processor$1 = class Processor2 {
   constructor(plugins = []) {
-    this.version = "8.5.3";
+    this.version = "8.5.4";
     this.plugins = this.normalize(plugins);
   }
   normalize(plugins) {
@@ -12068,7 +12652,7 @@ class StylesheetManager {
         styles.push({
           styleId,
           rules: Array.from(sheet.rules || CSSRule, (r2, index2) => ({
-            rule: stringifyRule(r2, sheet.href),
+            rule: stringifyRule$1(r2, sheet.href),
             index: index2
           }))
         });
@@ -12528,12 +13112,26 @@ function record(options = {}) {
         console.warn(error);
       }
     });
+    let initedAt = null;
     const init = () => {
+      initedAt = Date.now();
       takeFullSnapshot$1();
       handlers.push(observe(document));
       recording = true;
     };
+    const customOnLoad = () => {
+      window.removeEventListener("load", customOnLoad);
+      if (!recording || initedAt == null) return;
+      if (Date.now() - initedAt <= 10) {
+        return;
+      }
+      takeFullSnapshot$1();
+    };
+    window.addEventListener("load", customOnLoad);
     if (document.readyState === "interactive" || document.readyState === "complete") {
+      if (document.readyState === "complete") {
+        window.removeEventListener("load", customOnLoad);
+      }
       init();
     } else {
       handlers.push(
@@ -12542,7 +13140,9 @@ function record(options = {}) {
             type: EventType.DomContentLoaded,
             data: {}
           });
-          if (recordAfter === "DOMContentLoaded") init();
+          if (recordAfter === "DOMContentLoaded") {
+            init();
+          }
         })
       );
       handlers.push(
@@ -12553,7 +13153,9 @@ function record(options = {}) {
               type: EventType.Load,
               data: {}
             });
-            if (recordAfter === "load") init();
+            if (recordAfter === "load") {
+              init();
+            }
           },
           window
         )