Skip to content

Commit

Permalink
Support for @layer CSS-rule (#5)
Browse files Browse the repository at this point in the history
  • Loading branch information
simpleman383 authored Oct 14, 2024
1 parent 64dfbde commit 9f7e335
Show file tree
Hide file tree
Showing 8 changed files with 149 additions and 15 deletions.
5 changes: 5 additions & 0 deletions .changeset/simpleman383-layer-1.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"rrweb-cssom": minor
---

Added support for @layer CSS rule
48 changes: 48 additions & 0 deletions lib/CSSLayerBlockRule.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
//.CommonJS
var CSSOM = {
CSSRule: require("./CSSRule").CSSRule,
CSSGroupingRule: require("./CSSGroupingRule").CSSGroupingRule,
};
///CommonJS

/**
* @constructor
* @see https://drafts.csswg.org/css-cascade-5/#csslayerblockrule
*/
CSSOM.CSSLayerBlockRule = function CSSLayerBlockRule() {
CSSOM.CSSGroupingRule.call(this);
this.layerName = "";
this.cssRules = [];
};

CSSOM.CSSLayerBlockRule.prototype = new CSSOM.CSSGroupingRule();
CSSOM.CSSLayerBlockRule.prototype.constructor = CSSOM.CSSLayerBlockRule;
CSSOM.CSSLayerBlockRule.prototype.type = 18;

Object.defineProperties(CSSOM.CSSLayerBlockRule.prototype, {
layerNameText: {
get: function () {
return this.layerName;
},
set: function (value) {
this.layerName = value;
},
configurable: true,
enumerable: true,
},
cssText: {
get: function () {
var cssTexts = [];
for (var i = 0, length = this.cssRules.length; i < length; i++) {
cssTexts.push(this.cssRules[i].cssText);
}
return "@layer " + this.layerNameText + " {" + cssTexts.join("") + "}";
},
configurable: true,
enumerable: true,
},
});

//.CommonJS
exports.CSSLayerBlockRule = CSSOM.CSSLayerBlockRule;
///CommonJS
17 changes: 7 additions & 10 deletions lib/CSSRule.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,19 @@
var CSSOM = {};
///CommonJS


/**
* @constructor
* @see http://dev.w3.org/csswg/cssom/#the-cssrule-interface
* @see http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSRule
*/
CSSOM.CSSRule = function CSSRule() {
this.parentRule = null;
this.parentStyleSheet = null;
this.parentRule = null;
this.parentStyleSheet = null;
};

CSSOM.CSSRule.UNKNOWN_RULE = 0; // obsolete
CSSOM.CSSRule.UNKNOWN_RULE = 0; // obsolete
CSSOM.CSSRule.STYLE_RULE = 1;
CSSOM.CSSRule.CHARSET_RULE = 2; // obsolete
CSSOM.CSSRule.CHARSET_RULE = 2; // obsolete
CSSOM.CSSRule.IMPORT_RULE = 3;
CSSOM.CSSRule.MEDIA_RULE = 4;
CSSOM.CSSRule.FONT_FACE_RULE = 5;
Expand All @@ -31,15 +30,13 @@ CSSOM.CSSRule.FONT_FEATURE_VALUES_RULE = 14;
CSSOM.CSSRule.VIEWPORT_RULE = 15;
CSSOM.CSSRule.REGION_STYLE_RULE = 16;
CSSOM.CSSRule.CONTAINER_RULE = 17;
CSSOM.CSSRule.LAYER_BLOCK_RULE = 18;
CSSOM.CSSRule.STARTING_STYLE_RULE = 1002;


CSSOM.CSSRule.prototype = {
constructor: CSSOM.CSSRule
//FIXME
constructor: CSSOM.CSSRule,
//FIXME
};


//.CommonJS
exports.CSSRule = CSSOM.CSSRule;
///CommonJS
7 changes: 6 additions & 1 deletion lib/clone.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@ var CSSOM = {
CSSSupportsRule: require("./CSSSupportsRule").CSSSupportsRule,
CSSStyleDeclaration: require("./CSSStyleDeclaration").CSSStyleDeclaration,
CSSKeyframeRule: require('./CSSKeyframeRule').CSSKeyframeRule,
CSSKeyframesRule: require('./CSSKeyframesRule').CSSKeyframesRule
CSSKeyframesRule: require('./CSSKeyframesRule').CSSKeyframesRule,
CSSLayerBlockRule: require('./CSSLayerBlockRule').CSSLayerBlockRule
};
///CommonJS

Expand Down Expand Up @@ -61,6 +62,10 @@ CSSOM.clone = function clone(stylesheet) {
ruleClone.conditionText = rule.conditionText;
}

if (rule.hasOwnProperty('layerName')) {
ruleClone.layerName = rule.layerName;
}

if (rule.hasOwnProperty('cssRules')) {
ruleClone.cssRules = clone(rule).cssRules;
}
Expand Down
1 change: 1 addition & 0 deletions lib/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,5 +21,6 @@ exports.MatcherList = require('./MatcherList').MatcherList;
exports.CSSDocumentRule = require('./CSSDocumentRule').CSSDocumentRule;
exports.CSSValue = require('./CSSValue').CSSValue;
exports.CSSValueExpression = require('./CSSValueExpression').CSSValueExpression;
exports.CSSLayerBlockRule = require('./CSSLayerBlockRule').CSSLayerBlockRule;
exports.parse = require('./parse').parse;
exports.clone = require('./clone').clone;
27 changes: 24 additions & 3 deletions lib/parse.js
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,8 @@ CSSOM.parse = function parse(token) {
"atBlock": true,
"containerBlock": true,
"conditionBlock": true,
'documentRule-begin': true
'documentRule-begin': true,
"layerBlock": true
};

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

var name, priority="", styleRule, mediaRule, containerRule, supportsRule, importRule, fontFaceRule, keyframesRule, documentRule, hostRule, startingStyleRule;
var name, priority="", styleRule, mediaRule, containerRule, supportsRule, importRule, fontFaceRule, keyframesRule, documentRule, hostRule, startingStyleRule, layerBlockRule;

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

Expand Down Expand Up @@ -165,7 +166,14 @@ CSSOM.parse = function parse(token) {
i += "container".length;
buffer = "";
break;
} else if (token.indexOf("@supports", i) === i) {
} else if (token.indexOf("@layer", i) === i) {
state = "layerBlock"
layerBlockRule = new CSSOM.CSSLayerBlockRule();
layerBlockRule.__starts = i;
i += "layer".length;
buffer = "";
break;
} else if (token.indexOf("@supports", i) === i) {
state = "conditionBlock";
supportsRule = new CSSOM.CSSSupportsRule();
supportsRule.__starts = i;
Expand Down Expand Up @@ -254,6 +262,17 @@ CSSOM.parse = function parse(token) {
supportsRule.parentStyleSheet = styleSheet;
buffer = "";
state = "before-selector";
} else if (state === "layerBlock") {
layerBlockRule.layerNameText = buffer.trim();

if (parentRule) {
ancestorRules.push(parentRule);
}

currentScope = parentRule = layerBlockRule;
layerBlockRule.parentStyleSheet = styleSheet;
buffer = "";
state = "before-selector";
} else if (state === "hostRule-begin") {
if (parentRule) {
ancestorRules.push(parentRule);
Expand Down Expand Up @@ -430,6 +449,7 @@ CSSOM.parse = function parse(token) {
parentRule.constructor.name === "CSSMediaRule"
|| parentRule.constructor.name === "CSSSupportsRule"
|| parentRule.constructor.name === "CSSContainerRule"
|| parentRule.constructor.name === "CSSLayerBlockRule"
|| parentRule.constructor.name === "CSSStartingStyleRule"
) {
prevScope = currentScope;
Expand Down Expand Up @@ -501,4 +521,5 @@ CSSOM.CSSKeyframeRule = require('./CSSKeyframeRule').CSSKeyframeRule;
CSSOM.CSSKeyframesRule = require('./CSSKeyframesRule').CSSKeyframesRule;
CSSOM.CSSValueExpression = require('./CSSValueExpression').CSSValueExpression;
CSSOM.CSSDocumentRule = require('./CSSDocumentRule').CSSDocumentRule;
CSSOM.CSSLayerBlockRule = require("./CSSLayerBlockRule").CSSLayerBlockRule;
///CommonJS
58 changes: 57 additions & 1 deletion spec/parse.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -1402,7 +1402,63 @@ var TESTS = [

return result;
})()
}
},
{
input: "@layer custom-layer { div { display: block; } }",
result: (function() {
var result = {
cssRules: [
{
layerName: "custom-layer",
cssRules: [
{
selectorText: "div",
style: {
0: "display",
display: "block",
length: 1
},
}
],
parentRule: null,
}
],
parentStyleSheet: null
};
result.cssRules[0].parentStyleSheet = result.cssRules[0].cssRules[0].parentStyleSheet = result;
result.cssRules[0].cssRules[0].parentRule = result.cssRules[0];
result.cssRules[0].cssRules[0].style.parentRule = result.cssRules[0].cssRules[0];
return result;
})()
},
{
input: "@layer { div { display: block; } }",
result: (function() {
var result = {
cssRules: [
{
layerName: "",
cssRules: [
{
selectorText: "div",
style: {
0: "display",
display: "block",
length: 1
},
}
],
parentRule: null,
}
],
parentStyleSheet: null
};
result.cssRules[0].parentStyleSheet = result.cssRules[0].cssRules[0].parentStyleSheet = result;
result.cssRules[0].cssRules[0].parentRule = result.cssRules[0];
result.cssRules[0].cssRules[0].style.parentRule = result.cssRules[0].cssRules[0];
return result;
})()
},
];


Expand Down
1 change: 1 addition & 0 deletions src/files.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ exports.files = [
"CSSStyleSheet",
"CSSKeyframesRule",
"CSSKeyframeRule",
"CSSLayerBlockRule",
"MatcherList",
"CSSDocumentRule",
"CSSValue",
Expand Down

0 comments on commit 9f7e335

Please sign in to comment.