new feature: add custom style in replayer (#87)

* new feature: add custom style in replayer

* concat style rules for loop

.gitignore

@@ -1,6 +1,7 @@
 .vscode
 node_modules
 package-lock.json
+yarn.lock
 build
 dist
 es

src/replay/index.ts

@@ -22,7 +22,7 @@ import {
   Emitter,
 } from '../types';
 import { mirror } from '../utils';
-import getInjectStyleRules from './styles/inject-style';
+import getInjectStyleRules  from './styles/inject-style';
 import './styles/style.css';
 
 const SKIP_TIME_THRESHOLD = 10 * 1000;
@@ -72,6 +72,7 @@ export class Replayer {
       showDebug: false,
       blockClass: 'rr-block',
       liveMode: false,
+      insertStyleRules: [],
     };
     this.config = Object.assign({}, defaultConfig, config);
 
@@ -286,9 +287,9 @@ export class Replayer {
     const styleEl = document.createElement('style');
     const { documentElement, head } = this.iframe.contentDocument!;
     documentElement!.insertBefore(styleEl, head);
-    const injectStyleRules = getInjectStyleRules(this.config.blockClass);
-    for (let idx = 0; idx < injectStyleRules.length; idx++) {
-      (styleEl.sheet! as CSSStyleSheet).insertRule(injectStyleRules[idx], idx);
+    const injectStylesRules = getInjectStyleRules(this.config.blockClass).concat(this.config.insertStyleRules);
+    for (let idx = 0; idx < injectStylesRules.length; idx++) {
+      (styleEl.sheet! as CSSStyleSheet).insertRule(injectStylesRules[idx], idx);
     }
     this.emitter.emit(ReplayerEvents.FullsnapshotRebuilded);
     this.waitForStylesheetLoad();

src/types.ts

@@ -244,6 +244,7 @@ export type playerConfig = {
   showDebug: boolean;
   blockClass: string;
   liveMode: boolean;
+  insertStyleRules: string[];
 };
 
 export type playerMetaData = {

typings/types.d.ts

@@ -195,6 +195,7 @@ export declare type playerConfig = {
     showDebug: boolean;
     blockClass: string;
     liveMode: boolean;
+    insertStyleRules: string[];
 };
 export declare type playerMetaData = {
     totalTime: number;