@acemir/cssom 0.9.0 → 0.9.1

package/build/CSSOM.js

@@ -44,13 +44,24 @@ CSSOM.CSSStyleDeclaration.prototype = {
 				this[this.length] = name;
 				this.length++;
 			}
+	
+			// If the priority value of the incoming property is "important",
+			// or the value of the existing property is not "important", 
+			// then remove the existing property and rewrite it.
+			if (priority || !this._importants[name]) {
+				this.removeProperty(name);
+				this[this.length] = name;
+				this.length++;
+				this[name] = value + '';
+				this._importants[name] = priority;
+			}
 		} else {
 			// New property.
 			this[this.length] = name;
 			this.length++;
+			this[name] = value + '';
+			this._importants[name] = priority;
 		}
-		this[name] = value + "";
-		this._importants[name] = priority;
 	},
 
 	/**
@@ -632,6 +643,8 @@ CSSOM.CSSImportRule = function CSSImportRule() {
 	CSSOM.CSSRule.call(this);
 	this.href = "";
 	this.media = new CSSOM.MediaList();
+  this.layerName = null;
+  this.supportsText = null;
 	this.styleSheet = new CSSOM.CSSStyleSheet();
 };
 
@@ -642,7 +655,7 @@ CSSOM.CSSImportRule.prototype.type = 3;
 Object.defineProperty(CSSOM.CSSImportRule.prototype, "cssText", {
   get: function() {
     var mediaText = this.media.mediaText;
-    return "@import url(" + this.href + ")" + (mediaText ? " " + mediaText : "") + ";";
+    return "@import url(" + this.href + ")" + (this.layerName !== null ? " layer" + (this.layerName && "(" + this.layerName + ")") : "" ) + (this.supportsText ? " supports(" + this.supportsText + ")" : "" ) + (mediaText ? " " + mediaText : "") + ";";
   },
   set: function(cssText) {
     var i = 0;
@@ -658,6 +671,12 @@ Object.defineProperty(CSSOM.CSSImportRule.prototype, "cssText", {
 
     var buffer = '';
     var index;
+
+    var layerRegExp = /layer\(([^)]*)\)/;
+    var layerRuleNameRegExp = /^(-?[_a-zA-Z]+[_a-zA-Z0-9-]*)$/;
+    var supportsRegExp = /supports\(([^)]+)\)/;
+    var doubleOrMoreSpacesRegExp = /\s{2,}/g;
+
     for (var character; (character = cssText.charAt(i)); i++) {
 
       switch (character) {
@@ -682,6 +701,9 @@ Object.defineProperty(CSSOM.CSSImportRule.prototype, "cssText", {
           break;
 
         case 'u':
+          if (state === 'media') {
+            buffer += character;
+          }
           if (state === 'url' && cssText.indexOf('url(', i) === i) {
             index = cssText.indexOf(')', i + 1);
             if (index === -1) {
@@ -701,7 +723,7 @@ Object.defineProperty(CSSOM.CSSImportRule.prototype, "cssText", {
           break;
 
         case '"':
-          if (state === 'url') {
+          if (state === 'after-import' || state === 'url') {
             index = cssText.indexOf('"', i + 1);
             if (!index) {
               throw i + ": '\"' not found";
@@ -713,7 +735,7 @@ Object.defineProperty(CSSOM.CSSImportRule.prototype, "cssText", {
           break;
 
         case "'":
-          if (state === 'url') {
+          if (state === 'after-import' || state === 'url') {
             index = cssText.indexOf("'", i + 1);
             if (!index) {
               throw i + ': "\'" not found';
@@ -727,7 +749,47 @@ Object.defineProperty(CSSOM.CSSImportRule.prototype, "cssText", {
         case ';':
           if (state === 'media') {
             if (buffer) {
-              this.media.mediaText = buffer.trim();
+              var bufferTrimmed = buffer.trim();
+              
+              if (bufferTrimmed.indexOf('layer') === 0) {
+                var layerMatch =  bufferTrimmed.match(layerRegExp);
+
+                if (layerMatch) {
+                  var layerName = layerMatch[1].trim();
+                  bufferTrimmed = bufferTrimmed.replace(layerRegExp, '')
+                    .replace(doubleOrMoreSpacesRegExp, ' ') // Replace double or more spaces with single space
+                    .trim();
+
+                  if (layerName.match(layerRuleNameRegExp) !== null) {
+                    this.layerName = layerMatch[1].trim();
+                  } else {
+                    // REVIEW: In the browser, an empty layer() is not processed as a unamed layer
+                    // and treats the rest of the string as mediaText, ignoring the parse of supports()
+                    if (bufferTrimmed) {
+                      this.media.mediaText = bufferTrimmed;
+                      return;
+                    }
+                  }
+                } else {
+                  this.layerName = "";
+                  bufferTrimmed = bufferTrimmed.substring('layer'.length).trim()
+                }
+              }
+
+              var supportsMatch =  bufferTrimmed.match(supportsRegExp);
+
+              if (supportsMatch && supportsMatch.index === 0) {
+                // REVIEW: In the browser, an empty supports() invalidates and ignores the entire @import rule
+                this.supportsText = supportsMatch[1].trim();
+                bufferTrimmed = bufferTrimmed.replace(supportsRegExp, '')
+                .replace(doubleOrMoreSpacesRegExp, ' ') // Replace double or more spaces with single space
+                .trim();
+              }
+
+              // REVIEW: In the browser, any invalid media is replaced with 'not all'
+              if (bufferTrimmed) {
+                this.media.mediaText = bufferTrimmed;
+              }
             }
           }
           break;
@@ -862,11 +924,14 @@ CSSOM.CSSStyleSheet.prototype.constructor = CSSOM.CSSStyleSheet;
  *   -> "img{border:none;}body{margin:0;}"
  *
  * @param {string} rule
- * @param {number} index
+ * @param {number} [index=0]
  * @see http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleSheet-insertRule
  * @return {number} The index within the style sheet's rule collection of the newly inserted rule.
  */
 CSSOM.CSSStyleSheet.prototype.insertRule = function(rule, index) {
+	if (index === void 0) {
+		index = 0;
+	}
 	if (index < 0 || index > this.cssRules.length) {
 		throw new RangeError("INDEX_SIZE_ERR");
 	}
@@ -1431,7 +1496,7 @@ CSSOM.CSSValueExpression.prototype._findMatchedIdx = function(token, idx, sep) {
  */
 CSSOM.CSSLayerBlockRule = function CSSLayerBlockRule() {
   CSSOM.CSSGroupingRule.call(this);
-  this.layerName = "";
+  this.name = "";
   this.cssRules = [];
 };
 
@@ -1440,23 +1505,37 @@ CSSOM.CSSLayerBlockRule.prototype.constructor = CSSOM.CSSLayerBlockRule;
 CSSOM.CSSLayerBlockRule.prototype.type = 18;
 
 Object.defineProperties(CSSOM.CSSLayerBlockRule.prototype, {
-  layerNameText: {
+  cssText: {
     get: function () {
-      return this.layerName;
-    },
-    set: function (value) {
-      this.layerName = value;
+      var cssTexts = [];
+      for (var i = 0, length = this.cssRules.length; i < length; i++) {
+        cssTexts.push(this.cssRules[i].cssText);
+      }
+      return "@layer " + this.name + (this.name && " ") + "{" + cssTexts.join("") + "}";
     },
     configurable: true,
     enumerable: true,
   },
+});
+
+
+/**
+ * @constructor
+ * @see https://drafts.csswg.org/css-cascade-5/#csslayerstatementrule
+ */
+CSSOM.CSSLayerStatementRule = function CSSLayerStatementRule() {
+  CSSOM.CSSRule.call(this);
+  this.nameList = [];
+};
+
+CSSOM.CSSLayerStatementRule.prototype = new CSSOM.CSSRule();
+CSSOM.CSSLayerStatementRule.prototype.constructor = CSSOM.CSSLayerStatementRule;
+CSSOM.CSSLayerStatementRule.prototype.type = 0;
+
+Object.defineProperties(CSSOM.CSSLayerStatementRule.prototype, {
   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("") + "}";
+      return "@layer " + this.nameList.join(", ") + ";";
     },
     configurable: true,
     enumerable: true,
@@ -1511,17 +1590,57 @@ CSSOM.parse = function parse(token) {
 	var parentRule;
 
 	var ancestorRules = [];
-	var hasAncestors = false;
 	var prevScope;
 
-	var name, priority="", styleRule, mediaRule, containerRule, supportsRule, importRule, fontFaceRule, keyframesRule, documentRule, hostRule, startingStyleRule, layerBlockRule, nestedSelectorRule;
+	var name, priority="", styleRule, mediaRule, containerRule, supportsRule, importRule, fontFaceRule, keyframesRule, documentRule, hostRule, startingStyleRule, layerBlockRule, layerStatementRule, nestedSelectorRule;
 
 	var atKeyframesRegExp = /@(-(?:\w+-)+)?keyframes/g; // Match @keyframes and vendor-prefixed @keyframes
-	var atRulesStatemenRegExp = /(?<!{.*)[;}]\s*/; // Match a statement by verifying it finds a semicolon or closing brace not followed by another semicolon or closing brace
+	// Regex above is not ES5 compliant
+	// var atRulesStatemenRegExp = /(?<!{.*)[;}]\s*/; // Match a statement by verifying it finds a semicolon or closing brace not followed by another semicolon or closing brace
 	var beforeRulePortionRegExp = /{(?!.*{)|}(?!.*})|;(?!.*;)|\*\/(?!.*\*\/)/g; // Match the closest allowed character (a opening or closing brace, a semicolon or a comment ending) before the rule
 	var beforeRuleValidationRegExp = /^[\s{};]*(\*\/\s*)?$/; // Match that the portion before the rule is empty or contains only whitespace, semicolons, opening/closing braces, and optionally a comment ending (*/) followed by whitespace
 	var forwardRuleValidationRegExp = /(?:\(|\s|\/\*)/; // Match that the rule is followed by any whitespace, a opening comment or a condition opening parenthesis
+	var forwardImportRuleValidationRegExp = /(?:\s|\/\*|'|")/; // Match that the rule is followed by any whitespace, an opening comment, a single quote or double quote
 	var forwardRuleClosingBraceRegExp = /{[^{}]*}|}/; // Finds the next closing brace of a rule block
+	var forwardRuleSemicolonAndOpeningBraceRegExp = /^.*?({|;)/; // Finds the next semicolon or opening brace after the at-rule	
+	var layerRuleNameRegExp = /^(-?[_a-zA-Z]+[_a-zA-Z0-9-]*)$/; // Validates a single @layer name
+
+	/**
+	 * Searches for the first occurrence of a CSS at-rule statement terminator (`;` or `}`) 
+	 * that is not inside a brace block within the given string. Mimics the behavior of a 
+	 * regular expression match for such terminators, including any trailing whitespace.
+	 * @param {string} str - The string to search for at-rule statement terminators.
+	 * @returns {object | null} {0: string, index: number} or null if no match is found.
+	 */
+	function atRulesStatemenRegExpES5Alternative(ruleSlice) {
+		for (var i = 0; i < ruleSlice.length; i++) {
+			var char = ruleSlice[i];
+
+			if (char === ';' || char === '}') {
+				// Simulate negative lookbehind: check if there is a { before this position
+				var sliceBefore = ruleSlice.substring(0, i);
+				var openBraceIndex = sliceBefore.indexOf('{');
+
+				if (openBraceIndex === -1) {
+					// No { found before, so we treat it as a valid match
+					var match = char;
+					var j = i + 1;
+
+					while (j < ruleSlice.length && /\s/.test(ruleSlice[j])) {
+						match += ruleSlice[j];
+						j++;
+					}
+
+					var matchObj = [match];
+					matchObj.index = i;
+					matchObj.input = ruleSlice;
+					return matchObj;
+				}
+			}
+		}
+
+		return null;
+	}
 
 	/**
 	 * Finds the first balanced block (including nested braces) in the string, starting from fromIndex.
@@ -1530,17 +1649,18 @@ CSSOM.parse = function parse(token) {
 	 * @param {number} [fromIndex=0] - The index to start searching from.
 	 * @returns {object|null} - { 0: matchedString, index: startIndex, input: str } or null if not found.
 	 */
-	function matchBalancedBlock(str, fromIndex = 0) {
-		const openIndex = str.indexOf('{', fromIndex);
+	function matchBalancedBlock(str, fromIndex) {
+		fromIndex = fromIndex || 0;
+		var openIndex = str.indexOf('{', fromIndex);
 		if (openIndex === -1) return null;
-		let depth = 0;
-		for (let i = openIndex; i < str.length; i++) {
+		var depth = 0;
+		for (var i = openIndex; i < str.length; i++) {
 			if (str[i] === '{') {
 				depth++;
 			} else if (str[i] === '}') {
 				depth--;
 				if (depth === 0) {
-					const matchedString = str.slice(openIndex, i + 1);
+					var matchedString = str.slice(openIndex, i + 1);
 					return {
 						0: matchedString,
 						index: openIndex,
@@ -1566,7 +1686,8 @@ CSSOM.parse = function parse(token) {
 
 	var validateAtRule = function(atRuleKey, validCallback, cannotBeNested) {
 		var isValid = false;
-		var ruleRegExp = new RegExp(atRuleKey + forwardRuleValidationRegExp.source, forwardRuleValidationRegExp.flags);
+		var sourceRuleRegExp = atRuleKey === "@import" ? forwardImportRuleValidationRegExp : forwardRuleValidationRegExp;
+		var ruleRegExp = new RegExp(atRuleKey + sourceRuleRegExp.source, sourceRuleRegExp.flags);
 		var ruleSlice = token.slice(i);
 		// Not all rules can be nested, if the rule cannot be nested and is in the root scope, do not perform the check
 		var shouldPerformCheck = cannotBeNested && currentScope !== styleSheet ? false : true;
@@ -1588,7 +1709,9 @@ CSSOM.parse = function parse(token) {
 			// If it's invalid the browser will simply ignore the entire invalid block
 			// Use regex to find the closing brace of the invalid rule
 			
-			var ruleStatementMatch = ruleSlice.match(atRulesStatemenRegExp);
+			// Regex used above is not ES5 compliant. Using alternative.
+			// var ruleStatementMatch = ruleSlice.match(atRulesStatemenRegExp); //
+			var ruleStatementMatch = atRulesStatemenRegExpES5Alternative(ruleSlice);
 
 			// If it's a statement inside a nested rule, ignore only the statement
 			if (ruleStatementMatch && currentScope !== styleSheet) {
@@ -1597,10 +1720,21 @@ CSSOM.parse = function parse(token) {
 				return;
 			}
 
+			// Check if there's a semicolon before the invalid at-rule and the first opening brace
+			if (atRuleKey === "@layer") {
+				var ruleSemicolonAndOpeningBraceMatch = ruleSlice.match(forwardRuleSemicolonAndOpeningBraceRegExp);
+				if (ruleSemicolonAndOpeningBraceMatch && ruleSemicolonAndOpeningBraceMatch[1] === ";" ) {
+					// Ignore the rule block until the semicolon
+					i += ruleSemicolonAndOpeningBraceMatch.index + ruleSemicolonAndOpeningBraceMatch[0].length;
+					state = "before-selector";
+					return;
+				}
+			}
+
 			// Ignore the entire rule block (if it's a statement it should ignore the statement plus the next block)
 			var ruleClosingMatch = matchBalancedBlock(ruleSlice);
 			if (ruleClosingMatch) {
-				const ignoreRange = ruleClosingMatch.index + ruleClosingMatch[0].length;
+				var ignoreRange = ruleClosingMatch.index + ruleClosingMatch[0].length;
 				i+= ignoreRange;
 				if (token.charAt(i) === '}') {
 					i -= 1;
@@ -1614,8 +1748,17 @@ CSSOM.parse = function parse(token) {
 		}
 	}
 
-	for (var character; (character = token.charAt(i)); i++) {
+	var endingIndex = token.length - 1;
 
+	for (var character; (character = token.charAt(i)); i++) {
+		if (i === endingIndex) {
+			switch (state) {
+				case "importRule":
+				case "layerBlock":
+					token += ";"
+			}
+		}
+		
 		switch (character) {
 
 		case " ":
@@ -1645,6 +1788,9 @@ CSSOM.parse = function parse(token) {
 					break;
 				case 'importRule-begin':
 					state = 'importRule';
+					if (i === endingIndex) {
+						token += ';'
+					}
 					break;
 			}
 			break;
@@ -1793,7 +1939,7 @@ CSSOM.parse = function parse(token) {
 				nestedSelectorRule = null;
 			}
 			if (state === "selector" || state === "atRule") {
-				if (!nestedSelectorRule && buffer.includes(";")) {
+				if (!nestedSelectorRule && buffer.indexOf(";") !== -1) {
 					var ruleClosingMatch = token.slice(i).match(forwardRuleClosingBraceRegExp);
 					if (ruleClosingMatch) {
 						styleRule = null;
@@ -1851,15 +1997,19 @@ CSSOM.parse = function parse(token) {
 				buffer = "";
 				state = "before-selector";
 			} else if (state === "layerBlock") {
-				layerBlockRule.layerNameText = buffer.trim();
+				layerBlockRule.name = buffer.trim();
 
-				if (parentRule) {
-					layerBlockRule.parentRule = parentRule;
-					ancestorRules.push(parentRule);
-				}
+				var isValidName = layerBlockRule.name.length === 0 || layerBlockRule.name.match(layerRuleNameRegExp) !== null;
 
-				currentScope = parentRule = layerBlockRule;
-				layerBlockRule.parentStyleSheet = styleSheet;
+				if (isValidName) {
+					if (parentRule) {
+						layerBlockRule.parentRule = parentRule;
+						ancestorRules.push(parentRule);
+					}
+	
+					currentScope = parentRule = layerBlockRule;
+					layerBlockRule.parentStyleSheet = styleSheet;
+				}
 				buffer = "";
 				state = "before-selector";
 			} else if (state === "hostRule-begin") {
@@ -2022,10 +2172,34 @@ CSSOM.parse = function parse(token) {
 					state = "before-selector";
 					break;
 				case "importRule":
-					importRule = new CSSOM.CSSImportRule();
-					importRule.parentStyleSheet = importRule.styleSheet.parentStyleSheet = styleSheet;
-					importRule.cssText = buffer + character;
-					styleSheet.cssRules.push(importRule);
+					var isValid = styleSheet.cssRules.length === 0 || styleSheet.cssRules.some(function (rule) {
+						return ['CSSImportRule', 'CSSLayerStatementRule'].indexOf(rule.constructor.name) !== -1
+					});
+					if (isValid) {
+						importRule = new CSSOM.CSSImportRule();
+						importRule.parentStyleSheet = importRule.styleSheet.parentStyleSheet = styleSheet;
+						importRule.cssText = buffer + character;
+						styleSheet.cssRules.push(importRule);
+					}
+					buffer = "";
+					state = "before-selector";
+					break;
+				case "layerBlock":
+					var nameListStr = buffer.trim().split(",").map(function (name) {
+						return name.trim();
+					});
+					var isInvalid = parentRule !== undefined || nameListStr.some(function (name) {
+						return name.trim().match(layerRuleNameRegExp) === null;
+					});
+
+					if (!isInvalid) {
+						layerStatementRule = new CSSOM.CSSLayerStatementRule();
+						layerStatementRule.parentStyleSheet = styleSheet;
+						layerStatementRule.__starts = layerBlockRule.__starts;
+						layerStatementRule.__ends = i;
+						layerStatementRule.nameList = nameListStr;
+						styleSheet.cssRules.push(layerStatementRule);
+					}
 					buffer = "";
 					state = "before-selector";
 					break;
@@ -2084,8 +2258,6 @@ CSSOM.parse = function parse(token) {
 						//parseError("Unexpected }");
 					}
 
-					// Handle rules nested in @media or @supports
-					hasAncestors = ancestorRules.length > 0;
 
 					while (ancestorRules.length > 0) {
 						parentRule = ancestorRules.pop();
@@ -2116,10 +2288,6 @@ CSSOM.parse = function parse(token) {
 								break;
 							}
 						}
-
-						if (ancestorRules.length === 0) {
-							hasAncestors = false;
-						}
 					}
 					
 					if (currentScope.parentRule == null) {
@@ -2133,8 +2301,12 @@ CSSOM.parse = function parse(token) {
 						if (nestedSelectorRule === parentRule) {
 							// Check if this selector is really starting inside another selector
 							var nestedSelectorTokenToCurrentSelectorToken = token.slice(nestedSelectorRule.__starts, i + 1);
-							
-							if (nestedSelectorTokenToCurrentSelectorToken.match(/{/g)?.length === nestedSelectorTokenToCurrentSelectorToken.match(/}/g)?.length) {
+							var openingBraceMatch = nestedSelectorTokenToCurrentSelectorToken.match(/{/g);
+							var closingBraceMatch = nestedSelectorTokenToCurrentSelectorToken.match(/}/g);
+							var openingBraceLen = openingBraceMatch && openingBraceMatch.length;
+							var closingBraceLen = closingBraceMatch && closingBraceMatch.length;
+
+							if (openingBraceLen === closingBraceLen) {
 								// If the number of opening and closing braces are equal, we can assume that the new selector is starting outside the nestedSelectorRule
 								nestedSelectorRule.__ends = i + 1;
 								nestedSelectorRule = null;
@@ -2263,6 +2435,10 @@ CSSOM.clone = function clone(stylesheet) {
 			ruleClone.mediaText = rule.mediaText;
 		}
 
+		if (rule.hasOwnProperty('supportsText')) {
+			ruleClone.supports = rule.supports;
+		}
+
 		if (rule.hasOwnProperty('conditionText')) {
 			ruleClone.conditionText = rule.conditionText;
 		}
@@ -2271,6 +2447,18 @@ CSSOM.clone = function clone(stylesheet) {
 			ruleClone.layerName = rule.layerName;
 		}
 
+		if (rule.hasOwnProperty('href')) {
+			ruleClone.href = rule.href;
+		}
+
+		if (rule.hasOwnProperty('name')) {
+			ruleClone.name = rule.name;
+		}
+
+		if (rule.hasOwnProperty('nameList')) {
+			ruleClone.nameList = rule.nameList;
+		}
+
 		if (rule.hasOwnProperty('cssRules')) {
 			ruleClone.cssRules = clone(rule).cssRules;
 		}

package/lib/CSSImportRule.js

@@ -16,6 +16,8 @@ CSSOM.CSSImportRule = function CSSImportRule() {
 	CSSOM.CSSRule.call(this);
 	this.href = "";
 	this.media = new CSSOM.MediaList();
+  this.layerName = null;
+  this.supportsText = null;
 	this.styleSheet = new CSSOM.CSSStyleSheet();
 };
 
@@ -26,7 +28,7 @@ CSSOM.CSSImportRule.prototype.type = 3;
 Object.defineProperty(CSSOM.CSSImportRule.prototype, "cssText", {
   get: function() {
     var mediaText = this.media.mediaText;
-    return "@import url(" + this.href + ")" + (mediaText ? " " + mediaText : "") + ";";
+    return "@import url(" + this.href + ")" + (this.layerName !== null ? " layer" + (this.layerName && "(" + this.layerName + ")") : "" ) + (this.supportsText ? " supports(" + this.supportsText + ")" : "" ) + (mediaText ? " " + mediaText : "") + ";";
   },
   set: function(cssText) {
     var i = 0;
@@ -42,6 +44,12 @@ Object.defineProperty(CSSOM.CSSImportRule.prototype, "cssText", {
 
     var buffer = '';
     var index;
+
+    var layerRegExp = /layer\(([^)]*)\)/;
+    var layerRuleNameRegExp = /^(-?[_a-zA-Z]+[_a-zA-Z0-9-]*)$/;
+    var supportsRegExp = /supports\(([^)]+)\)/;
+    var doubleOrMoreSpacesRegExp = /\s{2,}/g;
+
     for (var character; (character = cssText.charAt(i)); i++) {
 
       switch (character) {
@@ -66,6 +74,9 @@ Object.defineProperty(CSSOM.CSSImportRule.prototype, "cssText", {
           break;
 
         case 'u':
+          if (state === 'media') {
+            buffer += character;
+          }
           if (state === 'url' && cssText.indexOf('url(', i) === i) {
             index = cssText.indexOf(')', i + 1);
             if (index === -1) {
@@ -85,7 +96,7 @@ Object.defineProperty(CSSOM.CSSImportRule.prototype, "cssText", {
           break;
 
         case '"':
-          if (state === 'url') {
+          if (state === 'after-import' || state === 'url') {
             index = cssText.indexOf('"', i + 1);
             if (!index) {
               throw i + ": '\"' not found";
@@ -97,7 +108,7 @@ Object.defineProperty(CSSOM.CSSImportRule.prototype, "cssText", {
           break;
 
         case "'":
-          if (state === 'url') {
+          if (state === 'after-import' || state === 'url') {
             index = cssText.indexOf("'", i + 1);
             if (!index) {
               throw i + ': "\'" not found';
@@ -111,7 +122,47 @@ Object.defineProperty(CSSOM.CSSImportRule.prototype, "cssText", {
         case ';':
           if (state === 'media') {
             if (buffer) {
-              this.media.mediaText = buffer.trim();
+              var bufferTrimmed = buffer.trim();
+              
+              if (bufferTrimmed.indexOf('layer') === 0) {
+                var layerMatch =  bufferTrimmed.match(layerRegExp);
+
+                if (layerMatch) {
+                  var layerName = layerMatch[1].trim();
+                  bufferTrimmed = bufferTrimmed.replace(layerRegExp, '')
+                    .replace(doubleOrMoreSpacesRegExp, ' ') // Replace double or more spaces with single space
+                    .trim();
+
+                  if (layerName.match(layerRuleNameRegExp) !== null) {
+                    this.layerName = layerMatch[1].trim();
+                  } else {
+                    // REVIEW: In the browser, an empty layer() is not processed as a unamed layer
+                    // and treats the rest of the string as mediaText, ignoring the parse of supports()
+                    if (bufferTrimmed) {
+                      this.media.mediaText = bufferTrimmed;
+                      return;
+                    }
+                  }
+                } else {
+                  this.layerName = "";
+                  bufferTrimmed = bufferTrimmed.substring('layer'.length).trim()
+                }
+              }
+
+              var supportsMatch =  bufferTrimmed.match(supportsRegExp);
+
+              if (supportsMatch && supportsMatch.index === 0) {
+                // REVIEW: In the browser, an empty supports() invalidates and ignores the entire @import rule
+                this.supportsText = supportsMatch[1].trim();
+                bufferTrimmed = bufferTrimmed.replace(supportsRegExp, '')
+                .replace(doubleOrMoreSpacesRegExp, ' ') // Replace double or more spaces with single space
+                .trim();
+              }
+
+              // REVIEW: In the browser, any invalid media is replaced with 'not all'
+              if (bufferTrimmed) {
+                this.media.mediaText = bufferTrimmed;
+              }
             }
           }
           break;

package/lib/CSSLayerBlockRule.js

@@ -11,7 +11,7 @@ var CSSOM = {
  */
 CSSOM.CSSLayerBlockRule = function CSSLayerBlockRule() {
   CSSOM.CSSGroupingRule.call(this);
-  this.layerName = "";
+  this.name = "";
   this.cssRules = [];
 };
 
@@ -20,23 +20,13 @@ 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("") + "}";
+      return "@layer " + this.name + (this.name && " ") + "{" + cssTexts.join("") + "}";
     },
     configurable: true,
     enumerable: true,

package/lib/CSSLayerStatementRule.js

@@ -0,0 +1,32 @@
+//.CommonJS
+var CSSOM = {
+  CSSRule: require("./CSSRule").CSSRule,
+};
+///CommonJS
+
+/**
+ * @constructor
+ * @see https://drafts.csswg.org/css-cascade-5/#csslayerstatementrule
+ */
+CSSOM.CSSLayerStatementRule = function CSSLayerStatementRule() {
+  CSSOM.CSSRule.call(this);
+  this.nameList = [];
+};
+
+CSSOM.CSSLayerStatementRule.prototype = new CSSOM.CSSRule();
+CSSOM.CSSLayerStatementRule.prototype.constructor = CSSOM.CSSLayerStatementRule;
+CSSOM.CSSLayerStatementRule.prototype.type = 0;
+
+Object.defineProperties(CSSOM.CSSLayerStatementRule.prototype, {
+  cssText: {
+    get: function () {
+      return "@layer " + this.nameList.join(", ") + ";";
+    },
+    configurable: true,
+    enumerable: true,
+  },
+});
+
+//.CommonJS
+exports.CSSLayerStatementRule = CSSOM.CSSLayerStatementRule;
+///CommonJS

package/lib/CSSStyleDeclaration.js

@@ -46,13 +46,24 @@ CSSOM.CSSStyleDeclaration.prototype = {
 				this[this.length] = name;
 				this.length++;
 			}
+	
+			// If the priority value of the incoming property is "important",
+			// or the value of the existing property is not "important", 
+			// then remove the existing property and rewrite it.
+			if (priority || !this._importants[name]) {
+				this.removeProperty(name);
+				this[this.length] = name;
+				this.length++;
+				this[name] = value + '';
+				this._importants[name] = priority;
+			}
 		} else {
 			// New property.
 			this[this.length] = name;
 			this.length++;
+			this[name] = value + '';
+			this._importants[name] = priority;
 		}
-		this[name] = value + "";
-		this._importants[name] = priority;
 	},
 
 	/**

package/lib/CSSStyleSheet.js

@@ -32,11 +32,14 @@ CSSOM.CSSStyleSheet.prototype.constructor = CSSOM.CSSStyleSheet;
  *   -> "img{border:none;}body{margin:0;}"
  *
  * @param {string} rule
- * @param {number} index
+ * @param {number} [index=0]
  * @see http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleSheet-insertRule
  * @return {number} The index within the style sheet's rule collection of the newly inserted rule.
  */
 CSSOM.CSSStyleSheet.prototype.insertRule = function(rule, index) {
+	if (index === void 0) {
+		index = 0;
+	}
 	if (index < 0 || index > this.cssRules.length) {
 		throw new RangeError("INDEX_SIZE_ERR");
 	}

package/lib/clone.js

@@ -12,7 +12,8 @@ var CSSOM = {
 	CSSStyleDeclaration: require("./CSSStyleDeclaration").CSSStyleDeclaration,
 	CSSKeyframeRule: require('./CSSKeyframeRule').CSSKeyframeRule,
 	CSSKeyframesRule: require('./CSSKeyframesRule').CSSKeyframesRule,
-	CSSLayerBlockRule: require('./CSSLayerBlockRule').CSSLayerBlockRule
+	CSSLayerBlockRule: require('./CSSLayerBlockRule').CSSLayerBlockRule,
+	CSSLayerStatementRule: require('./CSSLayerStatementRule').CSSLayerStatementRule
 };
 ///CommonJS
 
@@ -59,6 +60,10 @@ CSSOM.clone = function clone(stylesheet) {
 			ruleClone.mediaText = rule.mediaText;
 		}
 
+		if (rule.hasOwnProperty('supportsText')) {
+			ruleClone.supports = rule.supports;
+		}
+
 		if (rule.hasOwnProperty('conditionText')) {
 			ruleClone.conditionText = rule.conditionText;
 		}
@@ -67,6 +72,18 @@ CSSOM.clone = function clone(stylesheet) {
 			ruleClone.layerName = rule.layerName;
 		}
 
+		if (rule.hasOwnProperty('href')) {
+			ruleClone.href = rule.href;
+		}
+
+		if (rule.hasOwnProperty('name')) {
+			ruleClone.name = rule.name;
+		}
+
+		if (rule.hasOwnProperty('nameList')) {
+			ruleClone.nameList = rule.nameList;
+		}
+
 		if (rule.hasOwnProperty('cssRules')) {
 			ruleClone.cssRules = clone(rule).cssRules;
 		}

package/lib/index.js

@@ -23,5 +23,6 @@ exports.CSSDocumentRule = require('./CSSDocumentRule').CSSDocumentRule;
 exports.CSSValue = require('./CSSValue').CSSValue;
 exports.CSSValueExpression = require('./CSSValueExpression').CSSValueExpression;
 exports.CSSLayerBlockRule = require('./CSSLayerBlockRule').CSSLayerBlockRule;
+exports.CSSLayerStatementRule = require('./CSSLayerStatementRule').CSSLayerStatementRule;
 exports.parse = require('./parse').parse;
 exports.clone = require('./clone').clone;

package/lib/parse.js

@@ -50,17 +50,57 @@ CSSOM.parse = function parse(token) {
 	var parentRule;
 
 	var ancestorRules = [];
-	var hasAncestors = false;
 	var prevScope;
 
-	var name, priority="", styleRule, mediaRule, containerRule, supportsRule, importRule, fontFaceRule, keyframesRule, documentRule, hostRule, startingStyleRule, layerBlockRule, nestedSelectorRule;
+	var name, priority="", styleRule, mediaRule, containerRule, supportsRule, importRule, fontFaceRule, keyframesRule, documentRule, hostRule, startingStyleRule, layerBlockRule, layerStatementRule, nestedSelectorRule;
 
 	var atKeyframesRegExp = /@(-(?:\w+-)+)?keyframes/g; // Match @keyframes and vendor-prefixed @keyframes
-	var atRulesStatemenRegExp = /(?<!{.*)[;}]\s*/; // Match a statement by verifying it finds a semicolon or closing brace not followed by another semicolon or closing brace
+	// Regex above is not ES5 compliant
+	// var atRulesStatemenRegExp = /(?<!{.*)[;}]\s*/; // Match a statement by verifying it finds a semicolon or closing brace not followed by another semicolon or closing brace
 	var beforeRulePortionRegExp = /{(?!.*{)|}(?!.*})|;(?!.*;)|\*\/(?!.*\*\/)/g; // Match the closest allowed character (a opening or closing brace, a semicolon or a comment ending) before the rule
 	var beforeRuleValidationRegExp = /^[\s{};]*(\*\/\s*)?$/; // Match that the portion before the rule is empty or contains only whitespace, semicolons, opening/closing braces, and optionally a comment ending (*/) followed by whitespace
 	var forwardRuleValidationRegExp = /(?:\(|\s|\/\*)/; // Match that the rule is followed by any whitespace, a opening comment or a condition opening parenthesis
+	var forwardImportRuleValidationRegExp = /(?:\s|\/\*|'|")/; // Match that the rule is followed by any whitespace, an opening comment, a single quote or double quote
 	var forwardRuleClosingBraceRegExp = /{[^{}]*}|}/; // Finds the next closing brace of a rule block
+	var forwardRuleSemicolonAndOpeningBraceRegExp = /^.*?({|;)/; // Finds the next semicolon or opening brace after the at-rule	
+	var layerRuleNameRegExp = /^(-?[_a-zA-Z]+[_a-zA-Z0-9-]*)$/; // Validates a single @layer name
+
+	/**
+	 * Searches for the first occurrence of a CSS at-rule statement terminator (`;` or `}`) 
+	 * that is not inside a brace block within the given string. Mimics the behavior of a 
+	 * regular expression match for such terminators, including any trailing whitespace.
+	 * @param {string} str - The string to search for at-rule statement terminators.
+	 * @returns {object | null} {0: string, index: number} or null if no match is found.
+	 */
+	function atRulesStatemenRegExpES5Alternative(ruleSlice) {
+		for (var i = 0; i < ruleSlice.length; i++) {
+			var char = ruleSlice[i];
+
+			if (char === ';' || char === '}') {
+				// Simulate negative lookbehind: check if there is a { before this position
+				var sliceBefore = ruleSlice.substring(0, i);
+				var openBraceIndex = sliceBefore.indexOf('{');
+
+				if (openBraceIndex === -1) {
+					// No { found before, so we treat it as a valid match
+					var match = char;
+					var j = i + 1;
+
+					while (j < ruleSlice.length && /\s/.test(ruleSlice[j])) {
+						match += ruleSlice[j];
+						j++;
+					}
+
+					var matchObj = [match];
+					matchObj.index = i;
+					matchObj.input = ruleSlice;
+					return matchObj;
+				}
+			}
+		}
+
+		return null;
+	}
 
 	/**
 	 * Finds the first balanced block (including nested braces) in the string, starting from fromIndex.
@@ -69,17 +109,18 @@ CSSOM.parse = function parse(token) {
 	 * @param {number} [fromIndex=0] - The index to start searching from.
 	 * @returns {object|null} - { 0: matchedString, index: startIndex, input: str } or null if not found.
 	 */
-	function matchBalancedBlock(str, fromIndex = 0) {
-		const openIndex = str.indexOf('{', fromIndex);
+	function matchBalancedBlock(str, fromIndex) {
+		fromIndex = fromIndex || 0;
+		var openIndex = str.indexOf('{', fromIndex);
 		if (openIndex === -1) return null;
-		let depth = 0;
-		for (let i = openIndex; i < str.length; i++) {
+		var depth = 0;
+		for (var i = openIndex; i < str.length; i++) {
 			if (str[i] === '{') {
 				depth++;
 			} else if (str[i] === '}') {
 				depth--;
 				if (depth === 0) {
-					const matchedString = str.slice(openIndex, i + 1);
+					var matchedString = str.slice(openIndex, i + 1);
 					return {
 						0: matchedString,
 						index: openIndex,
@@ -105,7 +146,8 @@ CSSOM.parse = function parse(token) {
 
 	var validateAtRule = function(atRuleKey, validCallback, cannotBeNested) {
 		var isValid = false;
-		var ruleRegExp = new RegExp(atRuleKey + forwardRuleValidationRegExp.source, forwardRuleValidationRegExp.flags);
+		var sourceRuleRegExp = atRuleKey === "@import" ? forwardImportRuleValidationRegExp : forwardRuleValidationRegExp;
+		var ruleRegExp = new RegExp(atRuleKey + sourceRuleRegExp.source, sourceRuleRegExp.flags);
 		var ruleSlice = token.slice(i);
 		// Not all rules can be nested, if the rule cannot be nested and is in the root scope, do not perform the check
 		var shouldPerformCheck = cannotBeNested && currentScope !== styleSheet ? false : true;
@@ -127,7 +169,9 @@ CSSOM.parse = function parse(token) {
 			// If it's invalid the browser will simply ignore the entire invalid block
 			// Use regex to find the closing brace of the invalid rule
 			
-			var ruleStatementMatch = ruleSlice.match(atRulesStatemenRegExp);
+			// Regex used above is not ES5 compliant. Using alternative.
+			// var ruleStatementMatch = ruleSlice.match(atRulesStatemenRegExp); //
+			var ruleStatementMatch = atRulesStatemenRegExpES5Alternative(ruleSlice);
 
 			// If it's a statement inside a nested rule, ignore only the statement
 			if (ruleStatementMatch && currentScope !== styleSheet) {
@@ -136,10 +180,21 @@ CSSOM.parse = function parse(token) {
 				return;
 			}
 
+			// Check if there's a semicolon before the invalid at-rule and the first opening brace
+			if (atRuleKey === "@layer") {
+				var ruleSemicolonAndOpeningBraceMatch = ruleSlice.match(forwardRuleSemicolonAndOpeningBraceRegExp);
+				if (ruleSemicolonAndOpeningBraceMatch && ruleSemicolonAndOpeningBraceMatch[1] === ";" ) {
+					// Ignore the rule block until the semicolon
+					i += ruleSemicolonAndOpeningBraceMatch.index + ruleSemicolonAndOpeningBraceMatch[0].length;
+					state = "before-selector";
+					return;
+				}
+			}
+
 			// Ignore the entire rule block (if it's a statement it should ignore the statement plus the next block)
 			var ruleClosingMatch = matchBalancedBlock(ruleSlice);
 			if (ruleClosingMatch) {
-				const ignoreRange = ruleClosingMatch.index + ruleClosingMatch[0].length;
+				var ignoreRange = ruleClosingMatch.index + ruleClosingMatch[0].length;
 				i+= ignoreRange;
 				if (token.charAt(i) === '}') {
 					i -= 1;
@@ -153,8 +208,17 @@ CSSOM.parse = function parse(token) {
 		}
 	}
 
-	for (var character; (character = token.charAt(i)); i++) {
+	var endingIndex = token.length - 1;
 
+	for (var character; (character = token.charAt(i)); i++) {
+		if (i === endingIndex) {
+			switch (state) {
+				case "importRule":
+				case "layerBlock":
+					token += ";"
+			}
+		}
+		
 		switch (character) {
 
 		case " ":
@@ -184,6 +248,9 @@ CSSOM.parse = function parse(token) {
 					break;
 				case 'importRule-begin':
 					state = 'importRule';
+					if (i === endingIndex) {
+						token += ';'
+					}
 					break;
 			}
 			break;
@@ -332,7 +399,7 @@ CSSOM.parse = function parse(token) {
 				nestedSelectorRule = null;
 			}
 			if (state === "selector" || state === "atRule") {
-				if (!nestedSelectorRule && buffer.includes(";")) {
+				if (!nestedSelectorRule && buffer.indexOf(";") !== -1) {
 					var ruleClosingMatch = token.slice(i).match(forwardRuleClosingBraceRegExp);
 					if (ruleClosingMatch) {
 						styleRule = null;
@@ -390,15 +457,19 @@ CSSOM.parse = function parse(token) {
 				buffer = "";
 				state = "before-selector";
 			} else if (state === "layerBlock") {
-				layerBlockRule.layerNameText = buffer.trim();
+				layerBlockRule.name = buffer.trim();
 
-				if (parentRule) {
-					layerBlockRule.parentRule = parentRule;
-					ancestorRules.push(parentRule);
-				}
+				var isValidName = layerBlockRule.name.length === 0 || layerBlockRule.name.match(layerRuleNameRegExp) !== null;
 
-				currentScope = parentRule = layerBlockRule;
-				layerBlockRule.parentStyleSheet = styleSheet;
+				if (isValidName) {
+					if (parentRule) {
+						layerBlockRule.parentRule = parentRule;
+						ancestorRules.push(parentRule);
+					}
+	
+					currentScope = parentRule = layerBlockRule;
+					layerBlockRule.parentStyleSheet = styleSheet;
+				}
 				buffer = "";
 				state = "before-selector";
 			} else if (state === "hostRule-begin") {
@@ -561,10 +632,34 @@ CSSOM.parse = function parse(token) {
 					state = "before-selector";
 					break;
 				case "importRule":
-					importRule = new CSSOM.CSSImportRule();
-					importRule.parentStyleSheet = importRule.styleSheet.parentStyleSheet = styleSheet;
-					importRule.cssText = buffer + character;
-					styleSheet.cssRules.push(importRule);
+					var isValid = styleSheet.cssRules.length === 0 || styleSheet.cssRules.some(function (rule) {
+						return ['CSSImportRule', 'CSSLayerStatementRule'].indexOf(rule.constructor.name) !== -1
+					});
+					if (isValid) {
+						importRule = new CSSOM.CSSImportRule();
+						importRule.parentStyleSheet = importRule.styleSheet.parentStyleSheet = styleSheet;
+						importRule.cssText = buffer + character;
+						styleSheet.cssRules.push(importRule);
+					}
+					buffer = "";
+					state = "before-selector";
+					break;
+				case "layerBlock":
+					var nameListStr = buffer.trim().split(",").map(function (name) {
+						return name.trim();
+					});
+					var isInvalid = parentRule !== undefined || nameListStr.some(function (name) {
+						return name.trim().match(layerRuleNameRegExp) === null;
+					});
+
+					if (!isInvalid) {
+						layerStatementRule = new CSSOM.CSSLayerStatementRule();
+						layerStatementRule.parentStyleSheet = styleSheet;
+						layerStatementRule.__starts = layerBlockRule.__starts;
+						layerStatementRule.__ends = i;
+						layerStatementRule.nameList = nameListStr;
+						styleSheet.cssRules.push(layerStatementRule);
+					}
 					buffer = "";
 					state = "before-selector";
 					break;
@@ -623,8 +718,6 @@ CSSOM.parse = function parse(token) {
 						//parseError("Unexpected }");
 					}
 
-					// Handle rules nested in @media or @supports
-					hasAncestors = ancestorRules.length > 0;
 
 					while (ancestorRules.length > 0) {
 						parentRule = ancestorRules.pop();
@@ -655,10 +748,6 @@ CSSOM.parse = function parse(token) {
 								break;
 							}
 						}
-
-						if (ancestorRules.length === 0) {
-							hasAncestors = false;
-						}
 					}
 					
 					if (currentScope.parentRule == null) {
@@ -672,8 +761,12 @@ CSSOM.parse = function parse(token) {
 						if (nestedSelectorRule === parentRule) {
 							// Check if this selector is really starting inside another selector
 							var nestedSelectorTokenToCurrentSelectorToken = token.slice(nestedSelectorRule.__starts, i + 1);
-							
-							if (nestedSelectorTokenToCurrentSelectorToken.match(/{/g)?.length === nestedSelectorTokenToCurrentSelectorToken.match(/}/g)?.length) {
+							var openingBraceMatch = nestedSelectorTokenToCurrentSelectorToken.match(/{/g);
+							var closingBraceMatch = nestedSelectorTokenToCurrentSelectorToken.match(/}/g);
+							var openingBraceLen = openingBraceMatch && openingBraceMatch.length;
+							var closingBraceLen = closingBraceMatch && closingBraceMatch.length;
+
+							if (openingBraceLen === closingBraceLen) {
 								// If the number of opening and closing braces are equal, we can assume that the new selector is starting outside the nestedSelectorRule
 								nestedSelectorRule.__ends = i + 1;
 								nestedSelectorRule = null;
@@ -780,4 +873,5 @@ CSSOM.CSSKeyframesRule = require('./CSSKeyframesRule').CSSKeyframesRule;
 CSSOM.CSSValueExpression = require('./CSSValueExpression').CSSValueExpression;
 CSSOM.CSSDocumentRule = require('./CSSDocumentRule').CSSDocumentRule;
 CSSOM.CSSLayerBlockRule = require("./CSSLayerBlockRule").CSSLayerBlockRule;
+CSSOM.CSSLayerStatementRule = require("./CSSLayerStatementRule").CSSLayerStatementRule;
 ///CommonJS

package/package.json

@@ -7,7 +7,7 @@
     "parser",
     "styleSheet"
   ],
-  "version": "0.9.0",
+  "version": "0.9.1",
   "author": "Nikita Vasilyev <me@elv1s.ru>",
   "contributors": [
     "Acemir Sousa Mendes <acemirsm@gmail.com>"