diff --git a/.changeset/stale-llamas-divide.md b/.changeset/stale-llamas-divide.md deleted file mode 100644 index e165dc2d4b..0000000000 --- a/.changeset/stale-llamas-divide.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"rrweb-snapshot": patch ---- - -adds a correction for when chrome passes an incorrect grid-template-area cssText during snapshot diff --git a/packages/rrweb-snapshot/src/utils.ts b/packages/rrweb-snapshot/src/utils.ts index 5a6b2a352a..e50bd6afb6 100644 --- a/packages/rrweb-snapshot/src/utils.ts +++ b/packages/rrweb-snapshot/src/utils.ts @@ -62,9 +62,7 @@ export function getNative( export const nativeSetTimeout = typeof window !== 'undefined' - ? (getNative('setTimeout').bind( - window, - ) as typeof window.setTimeout) + ? getNative('setTimeout').bind(window) : global.setTimeout; /** @@ -159,44 +157,6 @@ export function stringifyStylesheet(s: CSSStyleSheet): string | null { } } -function replaceChromeGridTemplateAreas(rule: CSSStyleRule): string { - const hasGridTemplateInCSSText = rule.cssText.includes('grid-template:'); - const hasGridTemplateAreaInStyleRules = - rule.style.getPropertyValue('grid-template-areas') !== ''; - const hasGridTemplateAreaInCSSText = rule.cssText.includes( - 'grid-template-areas:', - ); - if ( - isCSSStyleRule(rule) && - hasGridTemplateInCSSText && - hasGridTemplateAreaInStyleRules && - !hasGridTemplateAreaInCSSText - ) { - // chrome does not correctly provide the grid template areas in the rules cssText - // e.g. https://bugs.chromium.org/p/chromium/issues/detail?id=1303968 - // we remove the grid-template rule from the text... so everything from grid-template: to the next semicolon - // and then add each grid-template-x rule into the css text because Chrome isn't doing this correctly - const parts = rule.cssText - .split(';') - .filter((s) => !s.includes('grid-template:')) - .map((s) => s.trim()); - - const gridStyles: string[] = []; - - for (let i = 0; i < rule.style.length; i++) { - const styleName = rule.style[i]; - if (styleName.startsWith('grid-template')) { - gridStyles.push( - `${styleName}: ${rule.style.getPropertyValue(styleName)}`, - ); - } - } - parts.splice(parts.length - 1, 0, gridStyles.join('; ')); - return parts.join('; '); - } - return rule.cssText; -} - export function stringifyRule(rule: CSSRule, sheetHref: string | null): string { if (isCSSImportRule(rule)) { let importStringified; @@ -222,9 +182,6 @@ export function stringifyRule(rule: CSSRule, sheetHref: string | null): string { // see https://bugs.webkit.org/show_bug.cgi?id=184604 ruleStringified = fixSafariColons(ruleStringified); } - if (isCSSStyleRule(rule)) { - ruleStringified = replaceChromeGridTemplateAreas(rule); - } if (sheetHref) { return absolutifyURLs(ruleStringified, sheetHref); }