ignore style sheet changes before the target DOM was serialized

The serialized DOM will contains all the styles, so this looks safe.

src/record/observer.ts

@@ -523,19 +523,25 @@ function initInputObserver(
 function initStyleSheetObserver(cb: styleSheetRuleCallback): listenerHandler {
   const insertRule = CSSStyleSheet.prototype.insertRule;
   CSSStyleSheet.prototype.insertRule = function(rule: string, index?: number) {
-    cb({
-      id: mirror.getId(this.ownerNode as INode),
-      adds: [{ rule, index }],
-    });
+    const id = mirror.getId(this.ownerNode as INode);
+    if (id !== -1) {
+      cb({
+        id,
+        adds: [{ rule, index }],
+      });
+    }
     return insertRule.apply(this, arguments);
   };
 
   const deleteRule = CSSStyleSheet.prototype.deleteRule;
   CSSStyleSheet.prototype.deleteRule = function(index: number) {
-    cb({
-      id: mirror.getId(this.ownerNode as INode),
-      removes: [{ index }],
-    });
+    const id = mirror.getId(this.ownerNode as INode);
+    if (id !== -1) {
+      cb({
+        id,
+        removes: [{ index }],
+      });
+    }
     return deleteRule.apply(this, arguments);
   };
 

test/__snapshots__/record.test.ts.snap

@@ -399,18 +399,6 @@ exports[`stylesheet-rules 1`] = `
       }
     }
   },
-  {
-    \\"type\\": 3,
-    \\"data\\": {
-      \\"source\\": 8,
-      \\"id\\": -1,
-      \\"adds\\": [
-        {
-          \\"rule\\": \\"body { background: #000; }\\"
-        }
-      ]
-    }
-  },
   {
     \\"type\\": 3,
     \\"data\\": {

test/integration.test.ts

@@ -11,6 +11,8 @@ interface ISuite extends Suite {
 }
 
 describe('record integration tests', function(this: ISuite) {
+  this.timeout(10_000);
+
   const getHtml = (fileName: string, options: recordOptions = {}): string => {
     const filePath = path.resolve(__dirname, `./html/${fileName}`);
     const html = fs.readFileSync(filePath, 'utf8');
@@ -214,4 +216,4 @@ describe('record integration tests', function(this: ISuite) {
     const snapshots = await page.evaluate('window.snapshots');
     assertSnapshot(snapshots, __filename, 'react-styled-components');
   });
-}).timeout(10000);
+});

test/record.test.ts

@@ -9,6 +9,8 @@ import {
   listenerHandler,
   eventWithTime,
   EventType,
+  IncrementalSource,
+  styleSheetRuleData,
 } from '../src/types';
 import { assertSnapshot, launchPuppeteer } from './utils';
 import { Suite } from 'mocha';
@@ -207,6 +209,8 @@ describe('record', function(this: ISuite) {
 
       const styleSheet = <CSSStyleSheet>styleElement.sheet;
       const ruleIdx0 = styleSheet.insertRule('body { background: #000; }');
+      const ruleIdx1 = styleSheet.insertRule('body { background: #111; }');
+      styleSheet.deleteRule(ruleIdx1);
       setTimeout(() => {
         styleSheet.insertRule('body { color: #fff; }');
       }, 0);
@@ -218,7 +222,20 @@ describe('record', function(this: ISuite) {
       }, 10);
     });
     await this.page.waitFor(10);
-    expect(this.events.length).to.equal(7);
+    const styleSheetRuleEvents = this.events.filter(
+      e =>
+        e.type === EventType.IncrementalSnapshot &&
+        e.data.source === IncrementalSource.StyleSheetRule,
+    );
+    const addRuleCount = styleSheetRuleEvents.filter(e =>
+      Boolean((e.data as styleSheetRuleData).adds),
+    ).length;
+    const removeRuleCount = styleSheetRuleEvents.filter(e =>
+      Boolean((e.data as styleSheetRuleData).removes),
+    ).length;
+    // sync insert/delete should be ignored
+    expect(addRuleCount).to.equal(2);
+    expect(removeRuleCount).to.equal(1);
     assertSnapshot(this.events, __filename, 'stylesheet-rules');
   });
 });

tslint.json

@@ -15,7 +15,8 @@
       "check-format",
       "allow-leading-underscore"
     ],
-    "arrow-parens": false
+    "arrow-parens": false,
+    "only-arrow-functions": false
   },
   "rulesDirectory": []
 }