Skip to content

Commit 9f7e335

Browse files
simpleman383simpleman383
authored
Support for @layer CSS-rule (#5)
1 parent 64dfbde commit 9f7e335

File tree

8 files changed

+149
-15
lines changed

8 files changed

+149
-15
lines changed

‎.changeset/simpleman383-layer-1.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"rrweb-cssom": minor
3+
---
4+
5+
Added support for @layer CSS rule

‎lib/CSSLayerBlockRule.js

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
//.CommonJS
2+
var CSSOM = {
3+
CSSRule: require("./CSSRule").CSSRule,
4+
CSSGroupingRule: require("./CSSGroupingRule").CSSGroupingRule,
5+
};
6+
///CommonJS
7+
8+
/**
9+
* @constructor
10+
* @see https://drafts.csswg.org/css-cascade-5/#csslayerblockrule
11+
*/
12+
CSSOM.CSSLayerBlockRule = function CSSLayerBlockRule() {
13+
CSSOM.CSSGroupingRule.call(this);
14+
this.layerName = "";
15+
this.cssRules = [];
16+
};
17+
18+
CSSOM.CSSLayerBlockRule.prototype = new CSSOM.CSSGroupingRule();
19+
CSSOM.CSSLayerBlockRule.prototype.constructor = CSSOM.CSSLayerBlockRule;
20+
CSSOM.CSSLayerBlockRule.prototype.type = 18;
21+
22+
Object.defineProperties(CSSOM.CSSLayerBlockRule.prototype, {
23+
layerNameText: {
24+
get: function () {
25+
return this.layerName;
26+
},
27+
set: function (value) {
28+
this.layerName = value;
29+
},
30+
configurable: true,
31+
enumerable: true,
32+
},
33+
cssText: {
34+
get: function () {
35+
var cssTexts = [];
36+
for (var i = 0, length = this.cssRules.length; i < length; i++) {
37+
cssTexts.push(this.cssRules[i].cssText);
38+
}
39+
return "@layer " + this.layerNameText + " {" + cssTexts.join("") + "}";
40+
},
41+
configurable: true,
42+
enumerable: true,
43+
},
44+
});
45+
46+
//.CommonJS
47+
exports.CSSLayerBlockRule = CSSOM.CSSLayerBlockRule;
48+
///CommonJS

‎lib/CSSRule.js

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,19 @@
22
var CSSOM = {};
33
///CommonJS
44

5-
65
/**
76
* @constructor
87
* @see http://dev.w3.org/csswg/cssom/#the-cssrule-interface
98
* @see http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSRule
109
*/
1110
CSSOM.CSSRule = function CSSRule() {
12-
this.parentRule = null;
13-
this.parentStyleSheet = null;
11+
this.parentRule = null;
12+
this.parentStyleSheet = null;
1413
};
1514

16-
CSSOM.CSSRule.UNKNOWN_RULE = 0; // obsolete
15+
CSSOM.CSSRule.UNKNOWN_RULE = 0; // obsolete
1716
CSSOM.CSSRule.STYLE_RULE = 1;
18-
CSSOM.CSSRule.CHARSET_RULE = 2; // obsolete
17+
CSSOM.CSSRule.CHARSET_RULE = 2; // obsolete
1918
CSSOM.CSSRule.IMPORT_RULE = 3;
2019
CSSOM.CSSRule.MEDIA_RULE = 4;
2120
CSSOM.CSSRule.FONT_FACE_RULE = 5;
@@ -31,15 +30,13 @@ CSSOM.CSSRule.FONT_FEATURE_VALUES_RULE = 14;
3130
CSSOM.CSSRule.VIEWPORT_RULE = 15;
3231
CSSOM.CSSRule.REGION_STYLE_RULE = 16;
3332
CSSOM.CSSRule.CONTAINER_RULE = 17;
33+
CSSOM.CSSRule.LAYER_BLOCK_RULE = 18;
3434
CSSOM.CSSRule.STARTING_STYLE_RULE = 1002;
3535

36-
3736
CSSOM.CSSRule.prototype = {
38-
constructor: CSSOM.CSSRule
39-
//FIXME
37+
constructor: CSSOM.CSSRule,
38+
//FIXME
4039
};
4140

42-
43-
//.CommonJS
4441
exports.CSSRule = CSSOM.CSSRule;
4542
///CommonJS

‎lib/clone.js

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@ var CSSOM = {
1010
CSSSupportsRule: require("./CSSSupportsRule").CSSSupportsRule,
1111
CSSStyleDeclaration: require("./CSSStyleDeclaration").CSSStyleDeclaration,
1212
CSSKeyframeRule: require('./CSSKeyframeRule').CSSKeyframeRule,
13-
CSSKeyframesRule: require('./CSSKeyframesRule').CSSKeyframesRule
13+
CSSKeyframesRule: require('./CSSKeyframesRule').CSSKeyframesRule,
14+
CSSLayerBlockRule: require('./CSSLayerBlockRule').CSSLayerBlockRule
1415
};
1516
///CommonJS
1617

@@ -61,6 +62,10 @@ CSSOM.clone = function clone(stylesheet) {
6162
ruleClone.conditionText = rule.conditionText;
6263
}
6364

65+
if (rule.hasOwnProperty('layerName')) {
66+
ruleClone.layerName = rule.layerName;
67+
}
68+
6469
if (rule.hasOwnProperty('cssRules')) {
6570
ruleClone.cssRules = clone(rule).cssRules;
6671
}

‎lib/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,5 +21,6 @@ exports.MatcherList = require('./MatcherList').MatcherList;
2121
exports.CSSDocumentRule = require('./CSSDocumentRule').CSSDocumentRule;
2222
exports.CSSValue = require('./CSSValue').CSSValue;
2323
exports.CSSValueExpression = require('./CSSValueExpression').CSSValueExpression;
24+
exports.CSSLayerBlockRule = require('./CSSLayerBlockRule').CSSLayerBlockRule;
2425
exports.parse = require('./parse').parse;
2526
exports.clone = require('./clone').clone;

‎lib/parse.js

Lines changed: 24 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,8 @@ CSSOM.parse = function parse(token) {
3737
"atBlock": true,
3838
"containerBlock": true,
3939
"conditionBlock": true,
40-
'documentRule-begin': true
40+
'documentRule-begin': true,
41+
"layerBlock": true
4142
};
4243

4344
var styleSheet = new CSSOM.CSSStyleSheet();
@@ -52,7 +53,7 @@ CSSOM.parse = function parse(token) {
5253
var hasAncestors = false;
5354
var prevScope;
5455

55-
var name, priority="", styleRule, mediaRule, containerRule, supportsRule, importRule, fontFaceRule, keyframesRule, documentRule, hostRule, startingStyleRule;
56+
var name, priority="", styleRule, mediaRule, containerRule, supportsRule, importRule, fontFaceRule, keyframesRule, documentRule, hostRule, startingStyleRule, layerBlockRule;
5657

5758
var atKeyframesRegExp = /@(-(?:\w+-)+)?keyframes/g;
5859

@@ -165,7 +166,14 @@ CSSOM.parse = function parse(token) {
165166
i += "container".length;
166167
buffer = "";
167168
break;
168-
} else if (token.indexOf("@supports", i) === i) {
169+
} else if (token.indexOf("@layer", i) === i) {
170+
state = "layerBlock"
171+
layerBlockRule = new CSSOM.CSSLayerBlockRule();
172+
layerBlockRule.__starts = i;
173+
i += "layer".length;
174+
buffer = "";
175+
break;
176+
} else if (token.indexOf("@supports", i) === i) {
169177
state = "conditionBlock";
170178
supportsRule = new CSSOM.CSSSupportsRule();
171179
supportsRule.__starts = i;
@@ -254,6 +262,17 @@ CSSOM.parse = function parse(token) {
254262
supportsRule.parentStyleSheet = styleSheet;
255263
buffer = "";
256264
state = "before-selector";
265+
} else if (state === "layerBlock") {
266+
layerBlockRule.layerNameText = buffer.trim();
267+
268+
if (parentRule) {
269+
ancestorRules.push(parentRule);
270+
}
271+
272+
currentScope = parentRule = layerBlockRule;
273+
layerBlockRule.parentStyleSheet = styleSheet;
274+
buffer = "";
275+
state = "before-selector";
257276
} else if (state === "hostRule-begin") {
258277
if (parentRule) {
259278
ancestorRules.push(parentRule);
@@ -430,6 +449,7 @@ CSSOM.parse = function parse(token) {
430449
parentRule.constructor.name === "CSSMediaRule"
431450
|| parentRule.constructor.name === "CSSSupportsRule"
432451
|| parentRule.constructor.name === "CSSContainerRule"
452+
|| parentRule.constructor.name === "CSSLayerBlockRule"
433453
|| parentRule.constructor.name === "CSSStartingStyleRule"
434454
) {
435455
prevScope = currentScope;
@@ -501,4 +521,5 @@ CSSOM.CSSKeyframeRule = require('./CSSKeyframeRule').CSSKeyframeRule;
501521
CSSOM.CSSKeyframesRule = require('./CSSKeyframesRule').CSSKeyframesRule;
502522
CSSOM.CSSValueExpression = require('./CSSValueExpression').CSSValueExpression;
503523
CSSOM.CSSDocumentRule = require('./CSSDocumentRule').CSSDocumentRule;
524+
CSSOM.CSSLayerBlockRule = require("./CSSLayerBlockRule").CSSLayerBlockRule;
504525
///CommonJS

‎spec/parse.spec.js

Lines changed: 57 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1402,7 +1402,63 @@ var TESTS = [
14021402

14031403
return result;
14041404
})()
1405-
}
1405+
},
1406+
{
1407+
input: "@layer custom-layer { div { display: block; } }",
1408+
result: (function() {
1409+
var result = {
1410+
cssRules: [
1411+
{
1412+
layerName: "custom-layer",
1413+
cssRules: [
1414+
{
1415+
selectorText: "div",
1416+
style: {
1417+
0: "display",
1418+
display: "block",
1419+
length: 1
1420+
},
1421+
}
1422+
],
1423+
parentRule: null,
1424+
}
1425+
],
1426+
parentStyleSheet: null
1427+
};
1428+
result.cssRules[0].parentStyleSheet = result.cssRules[0].cssRules[0].parentStyleSheet = result;
1429+
result.cssRules[0].cssRules[0].parentRule = result.cssRules[0];
1430+
result.cssRules[0].cssRules[0].style.parentRule = result.cssRules[0].cssRules[0];
1431+
return result;
1432+
})()
1433+
},
1434+
{
1435+
input: "@layer { div { display: block; } }",
1436+
result: (function() {
1437+
var result = {
1438+
cssRules: [
1439+
{
1440+
layerName: "",
1441+
cssRules: [
1442+
{
1443+
selectorText: "div",
1444+
style: {
1445+
0: "display",
1446+
display: "block",
1447+
length: 1
1448+
},
1449+
}
1450+
],
1451+
parentRule: null,
1452+
}
1453+
],
1454+
parentStyleSheet: null
1455+
};
1456+
result.cssRules[0].parentStyleSheet = result.cssRules[0].cssRules[0].parentStyleSheet = result;
1457+
result.cssRules[0].cssRules[0].parentRule = result.cssRules[0];
1458+
result.cssRules[0].cssRules[0].style.parentRule = result.cssRules[0].cssRules[0];
1459+
return result;
1460+
})()
1461+
},
14061462
];
14071463

14081464

‎src/files.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ exports.files = [
1616
"CSSStyleSheet",
1717
"CSSKeyframesRule",
1818
"CSSKeyframeRule",
19+
"CSSLayerBlockRule",
1920
"MatcherList",
2021
"CSSDocumentRule",
2122
"CSSValue",

0 commit comments

Comments
 (0)