rrweb-io / rrweb-snapshot

rrweb-snapshot produce the wrong CSS if original has inlined SVG

Here you can see some examples:
https://codesandbox.io/s/inlined-svg-in-css-d6sso?file=/index.html

There are two problems:

This regular expression does not catch data URI if it does not have charset=
I know it should be there, but sometimes people copying most voted StackOverflow answers like this one https://stackoverflow.com/a/10768631

rrweb-snapshot/src/snapshot.ts

Line 68 in f7d43f5

const DATA_URI = /^(data:)([\w\/\+\-]+);(charset=[\w-]+|base64).*,(.*)/i;
SVG could have quotes, so we need escaping or much easier return origin here

rrweb-snapshot/src/snapshot.ts

Line 84 in f7d43f5

return `url(${filePath})`;

+1 Noticed that inline data:SVGs had href appended incorrectly breaking stylesheet parsing on receiving end.

It seems like inline svgs may have escaped quotes (\") when retrieved from sheet.cssRules. This causes the regex match not to match the complete data:(...) leading to CSS corruption. Fixed this by modifying URL_IN_CSS_REF to this new regex:

/url$(?:(')([^']*)'|(")((?:[^"]|\\")*)"|([^)]*))$/gm

This sets filePath to the correct data:(...)

Example:
url("data:image/svg+xml;utf8,<svg version=\"1.1\" viewBox=\"0 0 8 5\" xmlns=\"http://www.w3.org/2000/svg\"><g fill=\"none\" fill-rule=\"evenodd\"><g transform=\"translate(-4 -6)\" fill=\"%23006fff\" stroke-width=\"0\"><path transform=\"translate(8.0055 7.0355) rotate(-45) translate(-8.0055 -7.0355)\" d=\"m6.5055 8.5355h4v1h-4-1v-5h1v4z\"/></g></g></svg>")

In addition, modification to the data-url matcher:

Based on MDN spec of Data URLs it seems like DATA_URI regex also misses a couple of the examples. [mediatype] and [base64] are optional fields, so I've updated the matcher to:

const DATA_URI = /^(data:)([^,]*),(.*)/i

@lele0108 Thanks! Looking forward to your PR next time:)

Wrong CSS if original has inlined SVG