Refactor CSS interfaces to include optional rules

rrweb-io · Mar 25, 2024 · 6cb07d3 · 6cb07d3
1 parent 53b8522
commit 6cb07d3
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 19 deletions.
diff --git a/packages/rrweb-snapshot/src/css.ts b/packages/rrweb-snapshot/src/css.ts
@@ -56,6 +56,11 @@ export interface Node {
   };
 }
 
+export interface NodeWithOptionalRules extends Node {
+  /** Array of nodes with the types rule, comment and any of the at-rule types. */
+  rules?: Array<Rule | Comment | AtRule>;
+}
+
 export interface Rule extends Node {
   /** The list of selectors of the rule, split on commas. Each selector is trimmed from whitespace and comments. */
   selectors?: string[];
@@ -98,13 +103,11 @@ export interface CustomMedia extends Node {
 /**
  * The @document at-rule.
  */
-export interface Document extends Node {
+export interface Document extends NodeWithOptionalRules {
   /** The part following @document. */
   document?: string;
   /** The vendor prefix in @document, or undefined if there is none. */
   vendor?: string;
-  /** Array of nodes with the types rule, comment and any of the at-rule types. */
-  rules?: Array<Rule | Comment | AtRule>;
 }
 
 /**
@@ -118,10 +121,7 @@ export interface FontFace extends Node {
 /**
  * The @host at-rule.
  */
-export interface Host extends Node {
-  /** Array of nodes with the types rule, comment and any of the at-rule types. */
-  rules?: Array<Rule | Comment | AtRule>;
-}
+export type Host = NodeWithOptionalRules;
 
 /**
  * The @import at-rule.
@@ -153,11 +153,9 @@ export interface KeyFrame extends Node {
 /**
  * The @media at-rule.
  */
-export interface Media extends Node {
+export interface Media extends NodeWithOptionalRules {
   /** The part following @media. */
   media?: string;
-  /** Array of nodes with the types rule, comment and any of the at-rule types. */
-  rules?: Array<Rule | Comment | AtRule>;
 }
 
 /**
@@ -181,11 +179,9 @@ export interface Page extends Node {
 /**
  * The @supports at-rule.
  */
-export interface Supports extends Node {
+export interface Supports extends NodeWithOptionalRules {
   /** The part following @supports. */
   supports?: string;
-  /** Array of nodes with the types rule, comment and any of the at-rule types. */
-  rules?: Array<Rule | Comment | AtRule>;
 }
 
 /** All at-rules. */

diff --git a/packages/rrweb-snapshot/src/rebuild.ts b/packages/rrweb-snapshot/src/rebuild.ts
@@ -1,4 +1,4 @@
-import { StyleRules, Rule, Media, parse } from './css';
+import { StyleRules, Rule, Media, NodeWithOptionalRules, parse } from './css';
 import {
   serializedNodeWithId,
   NodeType,
@@ -80,9 +80,11 @@ export function adaptCssForReplay(cssText: string, cache: BuildCache): string {
 
   const selectors: string[] = [];
   const medias: string[] = [];
-  function getSelectors(rule: StyleRules | Rule | Media) {
-    if ('selectors' in rule) {
-      (rule.selectors || []).forEach((selector: string) => {
+  function getSelectors(
+    rule: StyleRules | Rule | Media | NodeWithOptionalRules,
+  ) {
+    if ('selectors' in rule && rule.selectors) {
+      rule.selectors.forEach((selector: string) => {
         if (HOVER_SELECTOR.test(selector)) {
           selectors.push(selector);
         }
@@ -91,8 +93,8 @@ export function adaptCssForReplay(cssText: string, cache: BuildCache): string {
     if ('media' in rule && rule.media && MEDIA_SELECTOR.test(rule.media)) {
       medias.push(rule.media);
     }
-    if ('rules' in rule) {
-      (rule.rules || []).forEach(getSelectors);
+    if ('rules' in rule && rule.rules) {
+      rule.rules.forEach(getSelectors);
     }
   }
   getSelectors(ast.stylesheet);