iterate style element to get css rules string

src/rebuild.ts

@@ -95,11 +95,12 @@ function buildNode(n: serializedNodeWithId, doc: Document): Node | null {
           let value = n.attributes[name];
           value = typeof value === 'boolean' ? '' : value;
           const isTextarea = tagName === 'textarea' && name === 'value';
-          const isRemoteCss = tagName === 'style' && name === '_cssText';
-          if (isRemoteCss) {
+          const isRemoteOrDynamicCss =
+            tagName === 'style' && name === '_cssText';
+          if (isRemoteOrDynamicCss) {
             value = addHoverClass(value);
           }
-          if (isTextarea || isRemoteCss) {
+          if (isTextarea || isRemoteOrDynamicCss) {
             const child = doc.createTextNode(value);
             node.appendChild(child);
             continue;

src/snapshot.ts

@@ -122,9 +122,25 @@ function serializeNode(n: Node, doc: Document): serializedNode | false {
         });
         const cssText = getCssRulesString(stylesheet as CSSStyleSheet);
         if (cssText) {
-          attributes = {
-            _cssText: absoluteToStylesheet(cssText, stylesheet!.href!),
-          };
+          delete attributes.rel;
+          delete attributes.href;
+          attributes._cssText = absoluteToStylesheet(
+            cssText,
+            stylesheet!.href!,
+          );
+        }
+      }
+      // dynamic stylesheet
+      if (
+        tagName === 'style' &&
+        (n as HTMLStyleElement).sheet &&
+        // TODO: Currently we only try to get dynamic stylesheet when it is an empty style element
+        !(n as HTMLElement).innerText.trim().length
+      ) {
+        const cssText = getCssRulesString((n as HTMLStyleElement)
+          .sheet as CSSStyleSheet);
+        if (cssText) {
+          attributes._cssText = absoluteToStylesheet(cssText, location.href);
         }
       }
       // form fields