Apply formatting changes

rrweb-io · May 17, 2024 · 4177e18 · 4177e18
1 parent ff52332
commit 4177e18
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 27 deletions.
diff --git a/packages/rrweb-snapshot/src/index.ts b/packages/rrweb-snapshot/src/index.ts
@@ -9,10 +9,7 @@ import snapshot, {
   IGNORED_NODE,
   genId,
 } from './snapshot';
-import rebuild, {
-  buildNodeWithSN,
-  createCache,
-} from './rebuild';
+import rebuild, { buildNodeWithSN, createCache } from './rebuild';
 export * from './types';
 export * from './utils';
 

diff --git a/packages/rrweb-snapshot/src/rebuild.ts b/packages/rrweb-snapshot/src/rebuild.ts
@@ -102,27 +102,35 @@ export function adaptStylesheetForReplay(cssRules: CSSRuleList) {
   for (const cssRule of cssRules) {
     if ('media' in cssRule) {
       const cssMediaRule = cssRule as CSSMediaRule;
-      if (cssMediaRule.media.mediaText &&
-          MEDIA_SELECTOR.test(cssMediaRule.media.mediaText)) {
+      if (
+        cssMediaRule.media.mediaText &&
+        MEDIA_SELECTOR.test(cssMediaRule.media.mediaText)
+      ) {
         // not attempting to maintain min-device-width along with min-width
-        // (it's non standard)       
-        cssMediaRule.media.mediaText = 
-          cssMediaRule.media.mediaText.replace(MEDIA_SELECTOR_GLOBAL, '$1-$2');
+        // (it's non standard)
+        cssMediaRule.media.mediaText = cssMediaRule.media.mediaText.replace(
+          MEDIA_SELECTOR_GLOBAL,
+          '$1-$2',
+        );
       }
     } else if ('selectorText' in cssRule) {
       const cssStyleRule = cssRule as CSSStyleRule;
-      if (cssStyleRule.selectorText &&
-          HOVER_SELECTOR.test(cssStyleRule.selectorText)) {
-        cssStyleRule.selectorText = splitSelector(cssStyleRule.selectorText).map((selector) => {
-          if (!HOVER_SELECTOR.test(selector)) {
-            return selector;
-          }
-          const newSelector = selector.replace(
-            HOVER_SELECTOR_GLOBAL,
-            '$1.\\:hover',
-          );
-          return `${selector}, ${newSelector}`;
-        }).join(', ');
+      if (
+        cssStyleRule.selectorText &&
+        HOVER_SELECTOR.test(cssStyleRule.selectorText)
+      ) {
+        cssStyleRule.selectorText = splitSelector(cssStyleRule.selectorText)
+          .map((selector) => {
+            if (!HOVER_SELECTOR.test(selector)) {
+              return selector;
+            }
+            const newSelector = selector.replace(
+              HOVER_SELECTOR_GLOBAL,
+              '$1.\\:hover',
+            );
+            return `${selector}, ${newSelector}`;
+          })
+          .join(', ');
       }
     }
     if ('cssRules' in cssRule) {
@@ -499,7 +507,11 @@ export function buildNodeWithSN(
       } else {
         node.appendChild(childNode);
       }
-      if (hackCss && childN.type === NodeType.Element && childN.tagName === 'STYLE') {
+      if (
+        hackCss &&
+        childN.type === NodeType.Element &&
+        childN.tagName === 'STYLE'
+      ) {
         const styleEl = childNode as HTMLStyleElement;
         if (styleEl.sheet) {
           adaptStylesheetForReplay(styleEl.sheet.cssRules);

diff --git a/packages/rrweb-snapshot/test/rebuild.test.ts b/packages/rrweb-snapshot/test/rebuild.test.ts
@@ -11,7 +11,6 @@ import {
 import { NodeType } from '../src/types';
 import { createMirror, Mirror, stringifyStylesheet } from '../src/utils';
 
-
 /*
 function toEqualCss(actual: string, expected: string) {
   const pass = actual.replace(/\s/g, '') === expected.replace(/\s/g, '');
@@ -43,7 +42,7 @@ expect.extend({
 });
 */
 
-export function adaptCssForReplay(cssText: string): string {  
+export function adaptCssForReplay(cssText: string): string {
   let tempStyleSheet = new CSSStyleSheet();
   if (tempStyleSheet.replaceSync) {
     tempStyleSheet.replaceSync(cssText);
@@ -57,7 +56,7 @@ export function adaptCssForReplay(cssText: string): string {
       return "error: can't find sheet";
     }
   }
-  adaptStylesheetForReplay(tempStyleSheet.cssRules); 
+  adaptStylesheetForReplay(tempStyleSheet.cssRules);
   let ss = stringifyStylesheet(tempStyleSheet);
   if (!ss) {
     return 'error' + tempStyleSheet.cssRules.length;
@@ -205,7 +204,9 @@ ul li.specified c.\\:hover img { color: white }`),
     it('can add hover class when there is a multi selector with the same prefix', () => {
       const cssText = '.a:hover, .a:hover::after { color: white }';
       expect(adaptCssForReplay(cssText, cache)).toEqual(
-        norm('.a:hover, .a.\\:hover, .a:hover::after, .a.\\:hover::after { color: white }'),
+        norm(
+          '.a:hover, .a.\\:hover, .a:hover::after, .a.\\:hover::after { color: white }',
+        ),
       );
     });
 
@@ -232,7 +233,9 @@ ul li.specified c.\\:hover img { color: white }`),
       const cssText =
         '@media only screen and (min-device-width : 1200px) { .a { width: 10px; }}';
       expect(adaptCssForReplay(cssText, cache)).toEqual(
-        norm('@media only screen and (min-width : 1200px) { .a { width: 10px; }}'),
+        norm(
+          '@media only screen and (min-width : 1200px) { .a { width: 10px; }}',
+        ),
       );
     });