From 982b515a7996da29437ba2c164e478fd4e489707 Mon Sep 17 00:00:00 2001 From: jaj1014 Date: Fri, 18 Oct 2024 15:29:51 -0400 Subject: [PATCH 1/4] Revert "fix: grid template is parsed incorrectly by chrome" This reverts commit a3126e0a23731d08bdc4628b598477ab1ff7f5a9. --- packages/rrweb-snapshot/src/utils.ts | 43 +--------------------------- 1 file changed, 1 insertion(+), 42 deletions(-) diff --git a/packages/rrweb-snapshot/src/utils.ts b/packages/rrweb-snapshot/src/utils.ts index 5a6b2a352a..d375b70dff 100644 --- a/packages/rrweb-snapshot/src/utils.ts +++ b/packages/rrweb-snapshot/src/utils.ts @@ -64,7 +64,7 @@ export const nativeSetTimeout = typeof window !== 'undefined' ? (getNative('setTimeout').bind( window, - ) as typeof window.setTimeout) + ) ) : global.setTimeout; /** @@ -159,44 +159,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 +184,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); } From 0c987819b0e2dde8e9d15e41f5d962315a6f5128 Mon Sep 17 00:00:00 2001 From: jaj1014 Date: Fri, 18 Oct 2024 15:32:33 -0400 Subject: [PATCH 2/4] Revert "typo:" This reverts commit 262e6a0d20b322019d00c7b64b1ee9e2382bc748. --- packages/rrweb-snapshot/test/css.test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/rrweb-snapshot/test/css.test.ts b/packages/rrweb-snapshot/test/css.test.ts index d51fad363f..b0f242ab06 100644 --- a/packages/rrweb-snapshot/test/css.test.ts +++ b/packages/rrweb-snapshot/test/css.test.ts @@ -20,7 +20,7 @@ describe('css parser', () => { const ast = postcss([plugin]).process(input, {}); return ast.css; } - + describe('mediaSelectorPlugin', () => { it('selectors without device remain unchanged', () => { const cssText = From 9de0f6d1a26e38e86226b0aab2857c66197b12e8 Mon Sep 17 00:00:00 2001 From: jaj1014 Date: Fri, 18 Oct 2024 15:35:01 -0400 Subject: [PATCH 3/4] Revert changeset commit --- .changeset/stale-llamas-divide.md | 5 ----- 1 file changed, 5 deletions(-) delete mode 100644 .changeset/stale-llamas-divide.md 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 From 1340c80e1045dba50d845f58106f15eb6ecf9b91 Mon Sep 17 00:00:00 2001 From: jaj1014 Date: Fri, 18 Oct 2024 19:47:21 +0000 Subject: [PATCH 4/4] Apply formatting changes --- packages/rrweb-snapshot/src/utils.ts | 4 +--- packages/rrweb-snapshot/test/css.test.ts | 2 +- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/rrweb-snapshot/src/utils.ts b/packages/rrweb-snapshot/src/utils.ts index d375b70dff..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, - ) ) + ? getNative('setTimeout').bind(window) : global.setTimeout; /** diff --git a/packages/rrweb-snapshot/test/css.test.ts b/packages/rrweb-snapshot/test/css.test.ts index b0f242ab06..d51fad363f 100644 --- a/packages/rrweb-snapshot/test/css.test.ts +++ b/packages/rrweb-snapshot/test/css.test.ts @@ -20,7 +20,7 @@ describe('css parser', () => { const ast = postcss([plugin]).process(input, {}); return ast.css; } - + describe('mediaSelectorPlugin', () => { it('selectors without device remain unchanged', () => { const cssText =