prefer base href for inline style urls, else fallback to doc.location

Author: megboehlert

.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,13 @@ 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;
+      const doc = s.ownerNode.ownerDocument;
+      const baseEl = doc.querySelector('base[href]');
+      if (baseEl && (baseEl as HTMLBaseElement).href) {
+        sheetHref = (baseEl as HTMLBaseElement).href;
+      } else {
+        sheetHref = s.ownerNode.ownerDocument.location.href;
+      }
     }
     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,98 @@ 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 .rules if present', () => {
+      const mockRule1 = { cssText: 'body { color: red; }' } as CSSRule;
+      const mockRule2 = { cssText: 'a { text-decoration: none; }' } as CSSRule;
+      const mockSheet = {
+        rules: [mockRule1, mockRule2],
+        cssRules: null,
+        href: 'https://example.com/styles.css',
+      } as unknown as CSSStyleSheet;
+      expect(stringifyStylesheet(mockSheet)).toBe(
+        'body { color: red; }a { text-decoration: none; }'
+      );
+    });
+
+    it('stringifies rules using .cssRules if .rules is missing', () => {
+      const mockRule1 = { cssText: 'div { margin: 0; }' } as CSSRule;
+      const mockSheet = {
+        rules: null,
+        cssRules: [mockRule1],
+        href: 'https://example.com/main.css',
+      } as unknown as CSSStyleSheet;
+      expect(stringifyStylesheet(mockSheet)).toBe('div { margin: 0; }');
+    });
+
+    it('uses ownerNode.ownerDocument.location.href for inline styles', () => {
+      const mockRule = { cssText: 'span { font-size: 12px; }' } as CSSRule;
+      const mockOwnerDocument = {
+        location: { href: 'https://example.com/page.html' },
+        querySelector: () => null,
+      } as unknown as Document;
+      const mockOwnerNode = {
+        ownerDocument: mockOwnerDocument,
+      } as unknown as Node;
+      const mockSheet = {
+        rules: [mockRule],
+        cssRules: null,
+        href: null,
+        ownerNode: mockOwnerNode,
+      } as unknown as CSSStyleSheet;
+      expect(stringifyStylesheet(mockSheet)).toBe('span { font-size: 12px; }');
+    });
+
+    it('uses <base href> if present for inline styles', () => {
+      const mockRule = { cssText: 'p { line-height: 1.5; }' } as CSSRule;
+      const mockBase = { href: '/test/' } as HTMLBaseElement;
+      const mockOwnerDocument = {
+        location: { href: 'https://example.com/test/#/page.html' },
+        querySelector: (selector: string) =>
+          selector === 'base[href]' ? 'https://example.com/test/' : null,
+      } as unknown as Document;
+      const mockOwnerNode = {
+        ownerDocument: mockOwnerDocument,
+      } as unknown as Node;
+      const mockSheet = {
+        rules: [mockRule],
+        cssRules: null,
+        href: null,
+        ownerNode: mockOwnerNode,
+      } as unknown as CSSStyleSheet;
+      expect(stringifyStylesheet(mockSheet)).toBe('p { line-height: 1.5; }');
+    });
+
+    it('returns null if an error is thrown', () => {
+      const mockSheet = {
+        get rules() {
+          throw new Error('Test error');
+        },
+      } as unknown as CSSStyleSheet;
+      expect(stringifyStylesheet(mockSheet)).toBeNull();
+    });
+
+    it('applies fixBrowserCompatibilityIssuesInCSS', () => {
+      // This test checks that fixBrowserCompatibilityIssuesInCSS is called.
+      // We'll use a rule that triggers the fix for background-clip.
+      const mockRule = {
+        cssText: 'h1 { background-clip: text; }',
+      } as CSSRule;
+      const mockSheet = {
+        rules: [mockRule],
+        cssRules: null,
+        href: 'https://example.com/styles.css',
+      } as unknown as CSSStyleSheet;
+      expect(stringifyStylesheet(mockSheet)).toContain('-webkit-background-clip: text;');
+    });
+  });
 });

turbo.json

@@ -18,7 +18,8 @@
         "typings/**",
         ".svelte-kit/**",
         "types/**"
-      ]
+      ],
+      "cache": false
     },
     "test": {
       "dependsOn": ["^prepublish"]

vite.config.default.ts

@@ -140,6 +140,10 @@ export default function (
 
       sourcemap: true,
 
+      rollupOptions: {
+        external: ['postcss']
+      },
+
       // rollupOptions: {
       //   output: {
       //     manualChunks: {},