Fixup for background-clip replacement (#1476)

eoghanmurray · web-flow · commit cbbd1e55f1f7 · 2024-05-17T17:28:37.000+02:00
* Fix that the `.replace()` function only replaces the first occurrence * This should have been included in #1174 * Create fast-pets-exist.md
diff --git a/.changeset/fast-pets-exist.md b/.changeset/fast-pets-exist.md
@@ -0,0 +1,6 @@
+---
+"rrweb-snapshot": patch
+"rrweb": patch
+---
+
+Fixup for multiple background-clip replacement
diff --git a/packages/rrweb-snapshot/src/utils.ts b/packages/rrweb-snapshot/src/utils.ts
@@ -47,7 +47,7 @@ function fixBrowserCompatibilityIssuesInCSS(cssText: string): string {
     !cssText.includes(' -webkit-background-clip: text;')
   ) {
     cssText = cssText.replace(
-      ' background-clip: text;',
+      /\sbackground-clip:\s*text;/g,
       ' -webkit-background-clip: text; background-clip: text;',
     );
   }
diff --git a/packages/rrweb-snapshot/test/__snapshots__/integration.test.ts.snap b/packages/rrweb-snapshot/test/__snapshots__/integration.test.ts.snap
@@ -364,6 +364,12 @@ exports[`integration tests [html file]: picture-in-frame.html 1`] = `
   </body></html>"
 `;
 
+exports[`integration tests [html file]: picture-with-inline-onload.html 1`] = `
+"<html xmlns=\\"http://www.w3.org/1999/xhtml\\"><head></head><body>
+    <img src=\\"http://localhost:3030/images/robot.png\\" alt=\\"This is a robot\\" style=\\"opacity: 1;\\" _onload=\\"this.style.opacity=1\\" />
+  </body></html>"
+`;
+
 exports[`integration tests [html file]: preload.html 1`] = `
 "<!DOCTYPE html><html lang=\\"en\\"><head>
     <meta charset=\\"UTF-8\\" />

Original file line number	Diff line number	Diff line change
`@@ -47,7 +47,7 @@ function fixBrowserCompatibilityIssuesInCSS(cssText: string): string {`
`47`	`47`	`!cssText.includes(' -webkit-background-clip: text;')`
`48`	`48`	`) {`
`49`	`49`	`cssText = cssText.replace(`
`50`		`- ' background-clip: text;',`
	`50`	`+ /\sbackground-clip:\s*text;/g,`
`51`	`51`	`' -webkit-background-clip: text; background-clip: text;',`
`52`	`52`	`);`
`53`	`53`	`}`