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/stringify-stylesheet.bench.ts

@@ -0,0 +1,37 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { bench } from 'vitest';
+import * as fs from 'fs';
+import * as path from 'path';
+import { stringifyStylesheet } from '../src/utils';
+import * as CSSOM from 'cssom';
+
+describe('stringifyStylesheet', () => {
+  let benchmarkStylesheet: CSSStyleSheet;
+
+  const cssText = fs.readFileSync(
+    path.resolve(__dirname, './css/benchmark.css'),
+    'utf8',
+  );
+  benchmarkStylesheet = CSSOM.parse(cssText);
+  benchmarkStylesheet.href = 'https://example.com/style.css';
+
+  it.skip('stringify', () => {
+    // written just to ensure it's working
+    const cssText = '.x { background: url(./relative.jpg) }';
+    const styleSheet = CSSOM.parse(cssText);
+    styleSheet.href = 'https://example.com/style.css';
+    expect(stringifyStylesheet(styleSheet)).toEqual(
+      'x {background: url(https://example.com/relative.jpg);}',
+    );
+  });
+
+  bench(
+    'stringify',
+    () => {
+      stringifyStylesheet(benchmarkStylesheet);
+    },
+    { time: 1000 },
+  );
+});