xuguopeng/rrweb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Preserve url quotes (#47)

Browse Source 
* Preserve original quotes when rewriting CSS url() paths - important for inline SVG files which often have spaces

* Found an example in the wild with the 'charset=' part left off. This is supported by https://css-tricks.com/lodge/svg/09-svg-data-uris/ ... not sure why we aren't just testing for the 'data:' prefix here?

* Not sure why this is now coming back with a double quote after recent changes here; it's supposed to preserve the single quote from style.css??
This commit is contained in:
Eoghan Murray
2020-10-04 13:46:57 +01:00
committed by GitHub
parent 6728d12b3c
commit 8b0bc7c505
3 changed files with 26 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/snapshot.ts
View File

@@ -66,28 +66,29 @@ function extractOrigin(url: string): string {
return origin;
}
const URL_IN_CSS_REF = /url\((?:'([^']*)'|"([^"]*)"|([^)]*))\)/gm;
const URL_IN_CSS_REF = /url\((?:(')([^']*)'|(")([^"]*)"|([^)]*))\)/gm;
const RELATIVE_PATH = /^(?!www\.|(?:http|ftp)s?:\/\/|[A-Za-z]:\\|\/\/).*/;
const DATA_URI = /^(data:)([\w\/\+\-]+);(charset=[\w-]+|base64).*,(.*)/i;
const DATA_URI = /^(data:)([\w\/\+\-]+);(charset=[\w-]+|base64|utf-?8).*,(.*)/i;
export function absoluteToStylesheet(
cssText: string | null,
href: string,
): string {
return (cssText || '').replace(
URL_IN_CSS_REF,
(origin, path1, path2, path3) => {
(origin, quote1, path1, quote2, path2, path3) => {
const filePath = path1 || path2 || path3;
const maybe_quote = quote1 || quote2 || '';
if (!filePath) {
return origin;
}
if (!RELATIVE_PATH.test(filePath)) {
return `url('${filePath}')`;
return `url(${maybe_quote}${filePath}${maybe_quote})`;
}
if (DATA_URI.test(filePath)) {
return `url(${filePath})`;
return `url(${maybe_quote}${filePath}${maybe_quote})`;
}
if (filePath[0] === '/') {
return `url('${extractOrigin(href) + filePath}')`;
return `url(${maybe_quote}${extractOrigin(href) + filePath}${maybe_quote})`;
}
const stack = href.split('/');
const parts = filePath.split('/');
@@ -101,7 +102,7 @@ export function absoluteToStylesheet(
stack.push(part);
}
}
return `url('${stack.join('/')}')`;
return `url(${maybe_quote}${stack.join('/')}${maybe_quote})`;
},
);
}