Skip to content

Commit 6e61048

Browse files
authored
Feature/nested starting style (#4)
1 parent 07d1b24 commit 6e61048

File tree

3 files changed

+81
-1
lines changed

3 files changed

+81
-1
lines changed

Diff for: .changeset/brown-onions-relate.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"rrweb-cssom": patch
3+
---
4+
5+
fix parsing errors for nested starting-style rules

Diff for: lib/parse.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -181,7 +181,7 @@ CSSOM.parse = function parse(token) {
181181
break;
182182
} else if (token.indexOf("@starting-style", i) === i) {
183183
state = "startingStyleRule-begin";
184-
i += "startingStyle".length;
184+
i += "starting-style".length;
185185
startingStyleRule = new CSSOM.CSSStartingStyleRule();
186186
startingStyleRule.__starts = i;
187187
buffer = "";
@@ -430,6 +430,7 @@ CSSOM.parse = function parse(token) {
430430
parentRule.constructor.name === "CSSMediaRule"
431431
|| parentRule.constructor.name === "CSSSupportsRule"
432432
|| parentRule.constructor.name === "CSSContainerRule"
433+
|| parentRule.constructor.name === "CSSStartingStyleRule"
433434
) {
434435
prevScope = currentScope;
435436
currentScope = parentRule;

Diff for: spec/parse.spec.js

+74
Original file line numberDiff line numberDiff line change
@@ -999,6 +999,80 @@ var TESTS = [
999999
return result;
10001000
})()
10011001
},
1002+
{
1003+
input: "@starting-style { @media screen { body { background: red; } } }",
1004+
result: (function() {
1005+
var result = {
1006+
cssRules: [
1007+
{
1008+
cssRules: {
1009+
0: {
1010+
cssRules: {
1011+
0: {
1012+
parentRule: "../..",
1013+
parentStyleSheet: "../../../../../..",
1014+
selectorText: "body",
1015+
style: {
1016+
0: "background",
1017+
length: 1,
1018+
parentRule: "..",
1019+
background: "red",
1020+
},
1021+
},
1022+
},
1023+
parentRule: null,
1024+
media: {
1025+
0: "screen",
1026+
length: 1
1027+
}
1028+
},
1029+
},
1030+
parentRule: null,
1031+
},
1032+
],
1033+
parentStyleSheet: null,
1034+
};
1035+
result.cssRules[0].parentStyleSheet = result.cssRules[0].cssRules[0].parentStyleSheet = result;
1036+
return result;
1037+
})()
1038+
},
1039+
{
1040+
input: "@media screen { @starting-style { body { background: red; } } }",
1041+
result: (function() {
1042+
var result = {
1043+
cssRules: [
1044+
{
1045+
cssRules: {
1046+
0: {
1047+
cssRules: {
1048+
0: {
1049+
parentRule: "../..",
1050+
parentStyleSheet: "../../../../../..",
1051+
selectorText: "body",
1052+
style: {
1053+
0: "background",
1054+
length: 1,
1055+
parentRule: "..",
1056+
background: "red",
1057+
},
1058+
},
1059+
},
1060+
parentRule: null,
1061+
},
1062+
},
1063+
parentRule: null,
1064+
media: {
1065+
0: "screen",
1066+
length: 1
1067+
}
1068+
},
1069+
],
1070+
parentStyleSheet: null,
1071+
};
1072+
result.cssRules[0].parentStyleSheet = result.cssRules[0].cssRules[0].parentStyleSheet = result;
1073+
return result;
1074+
})()
1075+
},
10021076
{
10031077
// Non-vendor prefixed @keyframes rule, from Twitter Bootstrap (progress-bars):
10041078
input: '@keyframes progress-bar-stripes {\n from { background-position: 0 0; }\n to { background-position: 40px 0; }\n}',

0 commit comments

Comments
 (0)