Feat(DOM-Snapshot) Serialization support for External StyleSheets (configurable)

packages/dom/src/serialize-cssom.js

@@ -25,6 +25,43 @@ function createStyleResource(styleSheet) {
   return resource;
 }
 
+export function serializeExternalStyles(ctx) {
+  let { dom, clone, warnings } = ctx;
+  let styleSheets = null;
+  try {
+    styleSheets = dom.styleSheets;
+  } catch {
+    warnings.add('Skipping `styleSheets` as it is not supported.');
+  }
+  if (styleSheets) {
+    for (let styleSheet of styleSheets) {
+      if (isCSSOM(styleSheet) || styleSheet.href?.startsWith('blob:')) {
+        continue;
+      } else if (styleSheet.href) {
+        let corsAccessible = false;
+        try {
+          if (styleSheet.cssRules) corsAccessible = true;
+        } catch (err) {
+          // Not CORS accessible
+        }
+        if (corsAccessible) {
+          try {
+            let styleTag = document.createElement('style');
+            styleTag.type = 'text/css';
+            styleTag.innerHTML = Array.from(styleSheet.cssRules)
+              .map(cssRule => cssRule.cssText).join('\n');
+            clone.head.appendChild(styleTag);
+          } catch (err) {
+            handleErrors(err, 'Error serializing external stylesheet: ', null, {
+              stylesheetHref: styleSheet.href
+            });
+          }
+        }
+      }
+    }
+  }
+}
+
 export function serializeCSSOM(ctx) {
   let { dom, clone, resources, cache, warnings } = ctx;
   // in-memory CSSOM into their respective DOM nodes.

packages/dom/src/serialize-dom.js

@@ -1,6 +1,6 @@
 import serializeInputs from './serialize-inputs';
 import serializeFrames from './serialize-frames';
-import serializeCSSOM from './serialize-cssom';
+import serializeCSSOM, { serializeExternalStyles } from './serialize-cssom';
 import serializeCanvas from './serialize-canvas';
 import serializeVideos from './serialize-video';
 import { cloneNodeAndShadow, getOuterHTML } from './clone-dom';
@@ -36,6 +36,7 @@ function serializeElements(ctx) {
   serializeVideos(ctx);
 
   if (!ctx.enableJavaScript) {
+    if (ctx.serializeExternalStyles) serializeExternalStyles(ctx);
     serializeCSSOM(ctx);
     serializeCanvas(ctx);
   }
@@ -64,7 +65,8 @@ export function serializeDOM(options) {
     domTransformation = options?.dom_transformation,
     stringifyResponse = options?.stringify_response,
     disableShadowDOM = options?.disable_shadow_dom,
-    reshuffleInvalidTags = options?.reshuffle_invalid_tags
+    reshuffleInvalidTags = options?.reshuffle_invalid_tags,
+    serializeExternalStyles = options?.serialize_external_styles
   } = options || {};
 
   // keep certain records throughout serialization
@@ -74,7 +76,8 @@ export function serializeDOM(options) {
     hints: new Set(),
     cache: new Map(),
     enableJavaScript,
-    disableShadowDOM
+    disableShadowDOM,
+    serializeExternalStyles
   };
 
   ctx.dom = dom;