From 4177e18959246bcd07b08cd563e2c129ecde7965 Mon Sep 17 00:00:00 2001 From: eoghanmurray Date: Fri, 17 May 2024 17:04:05 +0000 Subject: [PATCH] Apply formatting changes --- packages/rrweb-snapshot/src/index.ts | 5 +- packages/rrweb-snapshot/src/rebuild.ts | 48 ++++++++++++-------- packages/rrweb-snapshot/test/rebuild.test.ts | 13 ++++-- 3 files changed, 39 insertions(+), 27 deletions(-) diff --git a/packages/rrweb-snapshot/src/index.ts b/packages/rrweb-snapshot/src/index.ts index 18044433f8..6b244e6799 100644 --- 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 index 7ea39dd97a..c269546a58 100644 --- 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 index a51858fcd2..a09334a4da 100644 --- 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; }}', + ), ); });