Add support for StylesheetRule in document fragment (#293)

* add failing test

* add stylesheet to dom to manipulate the rules

* cleanup

src/replay/index.ts

@@ -746,6 +746,22 @@ export class Replayer {
         }
 
         const styleEl = (target as Node) as HTMLStyleElement;
+        const parent = ((target.parentNode as unknown) as INode);
+        const usingVirtualParent = this.fragmentParentMap.has(parent);
+        let placeholderNode;
+
+        if (usingVirtualParent) {
+          /**
+           * styleEl.sheet is only accessible if the styleEl is part of the 
+           * dom. This doesn't work on DocumentFragments so we have to re-add
+           * it to the dom temporarily.
+           */
+          const domParent = this.fragmentParentMap.get((target.parentNode as unknown) as INode);
+          placeholderNode = document.createTextNode('');
+          parent.replaceChild(placeholderNode, target);
+          domParent!.appendChild(target);
+        }
+
         const styleSheet = <CSSStyleSheet>styleEl.sheet;
 
         if (d.adds) {
@@ -776,6 +792,11 @@ export class Replayer {
             }
           });
         }
+
+        if (usingVirtualParent && placeholderNode) {
+          parent.replaceChild(target, placeholderNode);
+        }
+
         break;
       }
       case IncrementalSource.CanvasMutation: {