adopt a couple of rrweb proposed PRs (#82)

rrweb-io/rrweb#1686
rrweb-io/rrweb#1700

Author: pauldambra

packages/rrweb-snapshot/src/utils.ts

@@ -108,8 +108,13 @@ export function stringifyStylesheet(s: CSSStyleSheet): string | null {
     if (!rules) {
       return null;
     }
+    let sheetHref = s.href;
+    if (!sheetHref && s.ownerNode && s.ownerNode.ownerDocument) {
+      // an inline <style> element
+      sheetHref = s.ownerNode.ownerDocument.baseURI;
+    }
     const stringifiedRules = Array.from(rules, (rule: CSSRule) =>
-      stringifyRule(rule, s.href),
+      stringifyRule(rule, sheetHref),
     ).join('');
     return fixBrowserCompatibilityIssuesInCSS(stringifiedRules);
   } catch (error) {
@@ -130,9 +135,17 @@ export function stringifyRule(rule: CSSRule, sheetHref: string | null): string {
     } catch (error) {
       importStringified = rule.cssText;
     }
-    if (rule.styleSheet.href) {
-      // url()s within the imported stylesheet are relative to _that_ sheet's href
-      return absolutifyURLs(importStringified, rule.styleSheet.href);
+    // if importStringified is not null,
+    // there should be a stylesheet and a rule here,
+    // but we avoid errors in this method by checking for null
+    // see https://github.com/rrweb-io/rrweb/pull/1686
+    try {
+      if (importStringified && rule.styleSheet?.href) {
+        // url()s within the imported stylesheet are relative to _that_ sheet's href
+        return absolutifyURLs(importStringified, rule.styleSheet.href);
+      }
+    } catch {
+      // swallow this, we'll return null
     }
     return importStringified;
   } else {

packages/rrweb-snapshot/test/utils.test.ts

@@ -7,6 +7,7 @@ import {
   extractFileExtension,
   fixSafariColons,
   isNodeMetaEqual,
+  stringifyStylesheet,
 } from '../src/utils';
 import { NodeType } from '@posthog/rrweb-types';
 import type {
@@ -283,4 +284,53 @@ describe('utils', () => {
       expect(out3).toEqual('[data-aa\\:other] { color: red; }');
     });
   });
+
+  describe('stringifyStylesheet', () => {
+    it('returns null if rules are missing', () => {
+      const mockSheet = {
+        rules: null,
+        cssRules: null,
+      } as unknown as CSSStyleSheet;
+      expect(stringifyStylesheet(mockSheet)).toBeNull();
+    });
+
+    it('stringifies rules using .cssRules if .rules is missing', () => {
+      const mockRule1 = { cssText: 'div { margin: 0; }' } as CSSRule;
+      const mockSheet = {
+        cssRules: [mockRule1],
+        href: 'https://example.com/main.css',
+      } as unknown as CSSStyleSheet;
+      expect(stringifyStylesheet(mockSheet)).toBe('div { margin: 0; }');
+    });
+
+    it('uses ownerNode.ownerDocument.baseURI for inline styles', () => {
+      const mockFontFaceRule = {
+        cssText: `
+          @font-face {
+            font-family: 'MockFont';
+            src: url('../fonts/mockfont.woff2') format('woff2');
+            font-weight: normal;
+            font-style: normal;
+          }
+        `,
+      } as CSSRule;
+      const mockOwnerDocument = {
+        location: { href: 'https://example.com/page.html' },
+        baseURI: 'https://example.com/fonts/',
+      } as unknown as Document;
+      const mockOwnerNode = {
+        ownerDocument: mockOwnerDocument,
+      } as unknown as Node;
+      const mockSheet = {
+        cssRules: [mockFontFaceRule],
+        href: null,
+        ownerNode: mockOwnerNode,
+      } as unknown as CSSStyleSheet;
+      expect(
+        stringifyStylesheet(mockSheet)?.replace(/\s+/g, ' ').trim(),
+      ).toEqual(
+        "@font-face { font-family: 'MockFont'; src: url('https://example.com/fonts/mockfont.woff2') format('woff2'); font-weight: normal; font-style: normal; }",
+      );
+    });
+  });
 });