fix: nested stylesheets should have absolute URLs (#1533)

* Replace relative URLs with absolute URLs when stringifying stylesheets

* Add test to show desired behavior for imported stylesheets from seperate directory

* Rename `absoluteToStylesheet` to `absolutifyURLs` and call it once after stringifying imported stylesheet

* Don't create the intermediary array of the spread operator

* Formalize that `stringifyRule` should expect a sheet href

* Ensure a <style> element can also import and gets it's url absolutized

* Handle case where non imported stylesheet has relative urls that need to be absolutified

* Clarify in test files where jpegs are expected to appear in absolutified urls

* Move absolutifyURLs call for import rules out of trycatch

* Add a benchmarking test for stringifyStylesheet

* Avoid the duplication on how to fall back

---------

Co-authored-by: Eoghan Murray <eoghan@getthere.ie>
Co-authored-by: eoghanmurray <eoghanmurray@users.noreply.github.com>

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

@@ -3,63 +3,59 @@
  */
 import { JSDOM } from 'jsdom';
 import { describe, it, expect } from 'vitest';
-import {
-  absoluteToStylesheet,
-  serializeNodeWithId,
-  _isBlockedElement,
-} from '../src/snapshot';
+import { serializeNodeWithId, _isBlockedElement } from '../src/snapshot';
 import snapshot from '../src/snapshot';
 import { serializedNodeWithId, elementNode } from '../src/types';
-import { Mirror } from '../src/utils';
+import { Mirror, absolutifyURLs } from '../src/utils';
 
 describe('absolute url to stylesheet', () => {
   const href = 'http://localhost/css/style.css';
 
   it('can handle relative path', () => {
-    expect(absoluteToStylesheet('url(a.jpg)', href)).toEqual(
+    expect(absolutifyURLs('url(a.jpg)', href)).toEqual(
       `url(http://localhost/css/a.jpg)`,
     );
   });
 
   it('can handle same level path', () => {
-    expect(absoluteToStylesheet('url("./a.jpg")', href)).toEqual(
+    expect(absolutifyURLs('url("./a.jpg")', href)).toEqual(
       `url("http://localhost/css/a.jpg")`,
     );
   });
 
   it('can handle parent level path', () => {
-    expect(absoluteToStylesheet('url("../a.jpg")', href)).toEqual(
+    expect(absolutifyURLs('url("../a.jpg")', href)).toEqual(
       `url("http://localhost/a.jpg")`,
     );
   });
 
   it('can handle absolute path', () => {
-    expect(absoluteToStylesheet('url("/a.jpg")', href)).toEqual(
+    expect(absolutifyURLs('url("/a.jpg")', href)).toEqual(
       `url("http://localhost/a.jpg")`,
     );
   });
 
   it('can handle external path', () => {
-    expect(absoluteToStylesheet('url("http://localhost/a.jpg")', href)).toEqual(
+    expect(absolutifyURLs('url("http://localhost/a.jpg")', href)).toEqual(
       `url("http://localhost/a.jpg")`,
     );
   });
 
   it('can handle single quote path', () => {
-    expect(absoluteToStylesheet(`url('./a.jpg')`, href)).toEqual(
+    expect(absolutifyURLs(`url('./a.jpg')`, href)).toEqual(
       `url('http://localhost/css/a.jpg')`,
     );
   });
 
   it('can handle no quote path', () => {
-    expect(absoluteToStylesheet('url(./a.jpg)', href)).toEqual(
+    expect(absolutifyURLs('url(./a.jpg)', href)).toEqual(
       `url(http://localhost/css/a.jpg)`,
     );
   });
 
   it('can handle multiple no quote paths', () => {
     expect(
-      absoluteToStylesheet(
+      absolutifyURLs(
         'background-image: url(images/b.jpg);background: #aabbcc url(images/a.jpg) 50% 50% repeat;',
         href,
       ),
@@ -70,11 +66,11 @@ describe('absolute url to stylesheet', () => {
   });
 
   it('can handle data url image', () => {
+    expect(absolutifyURLs('url(data:image/gif;base64,ABC)', href)).toEqual(
+      'url(data:image/gif;base64,ABC)',
+    );
     expect(
-      absoluteToStylesheet('url(data:image/gif;base64,ABC)', href),
-    ).toEqual('url(data:image/gif;base64,ABC)');
-    expect(
-      absoluteToStylesheet(
+      absolutifyURLs(
         'url(data:application/font-woff;base64,d09GMgABAAAAAAm)',
         href,
       ),
@@ -83,7 +79,7 @@ describe('absolute url to stylesheet', () => {
 
   it('preserves quotes around inline svgs with spaces', () => {
     expect(
-      absoluteToStylesheet(
+      absolutifyURLs(
         "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%2328a745' d='M3'/%3E%3C/svg%3E\")",
         href,
       ),
@@ -91,7 +87,7 @@ describe('absolute url to stylesheet', () => {
       "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%2328a745' d='M3'/%3E%3C/svg%3E\")",
     );
     expect(
-      absoluteToStylesheet(
+      absolutifyURLs(
         'url(\'data:image/svg+xml;utf8,<svg width="28" height="32" viewBox="0 0 28 32" xmlns="http://www.w3.org/2000/svg"><path d="M27 14C28" fill="white"/></svg>\')',
         href,
       ),
@@ -99,7 +95,7 @@ describe('absolute url to stylesheet', () => {
       'url(\'data:image/svg+xml;utf8,<svg width="28" height="32" viewBox="0 0 28 32" xmlns="http://www.w3.org/2000/svg"><path d="M27 14C28" fill="white"/></svg>\')',
     );
     expect(
-      absoluteToStylesheet(
+      absolutifyURLs(
         'url("data:image/svg+xml;utf8,<svg width="28" height="32" viewBox="0 0 28 32" xmlns="http://www.w3.org/2000/svg"><path d="M27 14C28" fill="white"/></svg>")',
         href,
       ),
@@ -108,7 +104,7 @@ describe('absolute url to stylesheet', () => {
     );
   });
   it('can handle empty path', () => {
-    expect(absoluteToStylesheet(`url('')`, href)).toEqual(`url('')`);
+    expect(absolutifyURLs(`url('')`, href)).toEqual(`url('')`);
   });
 });