Merge pull request #49 from pendo-io/meg-fix-stylesheet-href-when-base-tag-present

use document.baseURI for sheetHref when handling inline styles

Author: pendo-ops

.changeset/twelve-nails-occur.md

@@ -0,0 +1,5 @@
+---
+"rrweb-snapshot": patch
+---
+
+Prefer the <base href> for resolving inline <style> URLs, falling back to document location if not present.

packages/rrweb-snapshot/src/utils.ts

@@ -149,7 +149,7 @@ export function stringifyStylesheet(s: CSSStyleSheet): string | null {
     let sheetHref = s.href;
     if (!sheetHref && s.ownerNode && s.ownerNode.ownerDocument) {
       // an inline <style> element
-      sheetHref = s.ownerNode.ownerDocument.location.href;
+      sheetHref = s.ownerNode.ownerDocument.baseURI;
     }
     const stringifiedRules = Array.from(rules, (rule: CSSRule) =>
       stringifyRule(rule, sheetHref),

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

@@ -8,6 +8,7 @@ import {
   replaceChromeGridTemplateAreas,
   fixSafariColons,
   isNodeMetaEqual,
+  stringifyStylesheet
 } from '../src/utils';
 import { NodeType } from '@rrweb/types';
 import type { serializedNode, serializedNodeWithId } from '@rrweb/types';
@@ -374,4 +375,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; }"
+      );
+    });
+  });
 });