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

add support for css @import rules (#11)

Browse Source
This commit is contained in:
Whalefreezer
2019-05-07 01:56:33 +12:00
committed by yz-yu
parent fe6627aed5
commit 78c8c11e6b
4 changed files with 37 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/snapshot.ts
View File

@@ -21,13 +21,21 @@ function getCssRulesString(s: CSSStyleSheet): string | null {
try {
const rules = s.rules || s.cssRules;
return rules
? Array.from(rules).reduce((prev, cur) => (prev += cur.cssText), '')
? Array.from(rules).reduce((prev, cur) => prev + getCssRuleString(cur), '')
: null;
} catch (error) {
return null;
}
}
function getCssRuleString(rule: CSSRule): string {
return isCSSImportRule(rule) ? getCssRulesString(rule.styleSheet) || '' : rule.cssText;
}
function isCSSImportRule(rule: CSSRule): rule is CSSImportRule {
return 'styleSheet' in rule;
}
function extractOrigin(url: string): string {
let origin;
if (url.indexOf('//') > -1) {

11
test/__snapshots__/integration.ts.snap
View File

@@ -205,3 +205,14 @@ exports[`[html file]: with-style-sheet.html 1`] = `
</head><body>
</body></html>"
`;
exports[`[html file]: with-style-sheet-with-import.html 1`] = `
"<!DOCTYPE html><html xmlns=\\"http://www.w3.org/1999/xhtml\\" lang=\\"en\\"><head>
<meta charset=\\"UTF-8\\" />
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
<title>with style sheet with import</title>
<style>body { margin: 0px; background: url('http://localhost:3030/a.jpg'); }p { color: red; background: url('http://localhost:3030/css/b.jpg'); }body &gt; p { color: yellow; }</style>
</head><body>
</body></html>"
`;

1
test/css/style-with-import.css vendored Normal file
View File

@@ -0,0 +1 @@
@import "./style.css";

16
test/html/with-style-sheet-with-import.html Normal file
View File

@@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>with style sheet with import</title>
<link rel="stylesheet" href="/css/style-with-import.css">
</head>
<body>
</body>
</html>