fix(snapshot): use link.sheet for CSS capture on WebKit

[d0ugal]

Problem

When inlineStylesheet is enabled, rrweb searches document.styleSheets to find the CSSStyleSheet for each <link> element and inline its rules as _cssText.

On WebKit (Safari), at readyState: "interactive", external stylesheets loaded via <link> are not yet listed in document.styleSheets — only inline <style> elements appear. This means full snapshots taken at page load capture _cssText: "" for all external stylesheets, producing unstyled replays.

However, HTMLLinkElement.sheet is already populated at this point on WebKit.

Fix

Check link.sheet before falling back to document.styleSheets.find():

const stylesheet =
  (n as HTMLLinkElement).sheet ||
  Array.from(doc.styleSheets).find((s) => {
    return s.href === (n as HTMLLinkElement).href;
  });

Testing

Verified with Angular apps across Chrome, Firefox, and Safari (Playwright WebKit)

[changeset-bot]

🦋 Changeset detected

Latest commit: 5c3e5f9

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 19 packages

Name	Type
rrweb-snapshot	Patch
rrweb	Patch
rrdom	Patch
rrdom-nodejs	Patch
rrweb-player	Patch
@rrweb/all	Patch
@rrweb/replay	Patch
@rrweb/record	Patch
@rrweb/types	Patch
@rrweb/packer	Patch
@rrweb/utils	Patch
@rrweb/web-extension	Patch
rrvideo	Patch
@rrweb/rrweb-plugin-console-record	Patch
@rrweb/rrweb-plugin-console-replay	Patch
@rrweb/rrweb-plugin-sequential-id-record	Patch
@rrweb/rrweb-plugin-sequential-id-replay	Patch
@rrweb/rrweb-plugin-canvas-webrtc-record	Patch
@rrweb/rrweb-plugin-canvas-webrtc-replay	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[eoghanmurray]

That's super and yes I think .sheet is fully usable now (maybe it always was?)

I've made a similar change in the StyleSheet Assets branch which will become rrweb 2.1:
4206030

I think you might not need the fallback to searching the array?