Support for @layer CSS-rule

.changeset/simpleman383-layer-1.md

@@ -0,0 +1,5 @@
+---
+"rrweb-cssom": minor
+---
+
+Added support for @layer CSS rule

lib/CSSLayerBlockRule.js

@@ -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

lib/CSSRule.js

@@ -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;
@@ -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

lib/clone.js

@@ -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
 
@@ -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;
 		}

lib/index.js

@@ -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;

lib/parse.js

@@ -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();
@@ -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;
 
@@ -165,7 +166,15 @@ 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;
@@ -254,7 +263,18 @@ CSSOM.parse = function parse(token) {
 				supportsRule.parentStyleSheet = styleSheet;
 				buffer = "";
 				state = "before-selector";
-			} else if (state === "hostRule-begin") {
+			} 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);
 				}
@@ -430,6 +450,7 @@ CSSOM.parse = function parse(token) {
 							parentRule.constructor.name === "CSSMediaRule"
 							|| parentRule.constructor.name === "CSSSupportsRule"
 							|| parentRule.constructor.name === "CSSContainerRule"
+							|| parentRule.constructor.name === "CSSLayerBlockRule"
 						) {
 							prevScope = currentScope;
 							currentScope = parentRule;
@@ -500,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

spec/parse.spec.js

@@ -1328,7 +1328,35 @@ 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;
+		})()
+	},
 ];
 
 

src/files.js

@@ -16,6 +16,7 @@ exports.files = [
 	"CSSStyleSheet",
 	"CSSKeyframesRule",
 	"CSSKeyframeRule",
+	"CSSLayerBlockRule",
 	"MatcherList",
 	"CSSDocumentRule",
 	"CSSValue",