@acemir/cssom 0.9.0 → 0.9.2

package/build/CSSOM.js

@@ -1,6 +1,29 @@
 var CSSOM = {};
 
 
+// NOTE: Check viability to add a validation for css values or use a dependency like csstree-validator
+/**
+ * Regular expression to detect invalid characters in the value portion of a CSS style declaration.
+ *
+ * This regex matches a colon (:) that is not inside parentheses and not inside single or double quotes.
+ * It is used to ensure that the value part of a CSS property does not contain unexpected colons,
+ * which would indicate a malformed declaration (e.g., "color: foo:bar;" is invalid).
+ *
+ * The negative lookahead `(?![^(]*\))` ensures that the colon is not followed by a closing
+ * parenthesis without encountering an opening parenthesis, effectively ignoring colons inside
+ * function-like values (e.g., `url(data:image/png;base64,...)`).
+ *
+ * The lookahead `(?=(?:[^'"]|'[^']*'|"[^"]*")*$)` ensures that the colon is not inside single or double quotes,
+ * allowing colons within quoted strings (e.g., `content: ":";` or `background: url("foo:bar.png");`).
+ *
+ * Example:
+ *   "color: red;"         // valid, does not match
+ *   "background: url(data:image/png;base64,...);" // valid, does not match
+ *   "content: ':';"       // valid, does not match
+ *   "color: foo:bar;"     // invalid, matches
+ */
+var basicStylePropertyValueValidationRegExp = /:(?![^(]*\))(?=(?:[^'"]|'[^']*'|"[^"]*")*$)/;
+
 /**
  * @constructor
  * @see http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration
@@ -36,21 +59,36 @@ CSSOM.CSSStyleDeclaration.prototype = {
 	 * @param {string} [priority=null] "important" or null
 	 * @see http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration-setProperty
 	 */
-	setProperty: function(name, value, priority) {
-		if (this[name]) {
+	setProperty: function(name, value, priority, parseErrorHandler) 
+	{
+		// NOTE: Check viability to add a validation for css values or use a dependency like csstree-validator
+		if (basicStylePropertyValueValidationRegExp.test(value)) {
+			parseErrorHandler && parseErrorHandler('Invalid CSSStyleDeclaration property value');
+		} else if (this[name]) {
 			// Property already exist. Overwrite it.
 			var index = Array.prototype.indexOf.call(this, name);
 			if (index < 0) {
 				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 +670,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 +682,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 +698,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 +728,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 +750,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 +762,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 +776,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 +951,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 +1523,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 +1532,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,
@@ -1467,7 +1573,8 @@ Object.defineProperties(CSSOM.CSSLayerBlockRule.prototype, {
 /**
  * @param {string} token
  */
-CSSOM.parse = function parse(token) {
+CSSOM.parse = function parse(token, errorHandler) {
+	errorHandler = errorHandler === undefined && (console && console.error);
 
 	var i = 0;
 
@@ -1489,6 +1596,8 @@ CSSOM.parse = function parse(token) {
 	var valueParenthesisDepth = 0;
 
 	var SIGNIFICANT_WHITESPACE = {
+		"name": true,
+		"before-name": true,
 		"selector": true,
 		"value": true,
 		"value-parenthesis": true,
@@ -1511,17 +1620,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 +1679,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,
@@ -1552,6 +1702,29 @@ CSSOM.parse = function parse(token) {
 		return null;
 	}
 
+	/**
+	 * Advances the index `i` to skip over a balanced block of curly braces in the given string.
+	 * This is typically used to ignore the contents of a CSS rule block.
+	 *
+	 * @param {number} i - The current index in the string to start searching from.
+	 * @param {string} str - The string containing the CSS code.
+	 * @param {number} fromIndex - The index in the string where the balanced block search should begin.
+	 * @returns {number} The updated index after skipping the balanced block.
+	 */
+	function ignoreBalancedBlock(i, str, fromIndex) {
+		var ruleClosingMatch = matchBalancedBlock(str, fromIndex);
+		if (ruleClosingMatch) {
+			var ignoreRange = ruleClosingMatch.index + ruleClosingMatch[0].length;
+			i+= ignoreRange;
+			if (token.charAt(i) === '}') {
+				i -= 1;
+			}
+		} else {
+			i += str.length;
+		}
+		return i;	
+	}
+
 	var parseError = function(message) {
 		var lines = token.substring(0, i).split('\n');
 		var lineCount = lines.length;
@@ -1561,12 +1734,18 @@ CSSOM.parse = function parse(token) {
 		/* jshint sub : true */
 		error['char'] = charCount;
 		error.styleSheet = styleSheet;
-		throw error;
+		// Print the error but continue parsing the sheet
+		try {
+			throw error;
+		} catch(e) {
+			errorHandler && errorHandler(e);
+		}
 	};
 
 	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 +1767,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,25 +1778,179 @@ CSSOM.parse = function parse(token) {
 				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;
-				i+= ignoreRange;
-				if (token.charAt(i) === '}') {
-					i -= 1;
+			// 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;
 				}
-			} else {
-				i += ruleSlice.length;
 			}
+
+			// Ignore the entire rule block (if it's a statement it should ignore the statement plus the next block)
+			i = ignoreBalancedBlock(i, ruleSlice);
 			state = "before-selector";
 		} else {
 			validCallback.call(this);
 		}
 	}
 
-	for (var character; (character = token.charAt(i)); i++) {
+	/**
+	 * Regular expression to match a basic CSS selector.
+	 *
+	 * This regex matches the following selector components:
+	 * - Type selectors (e.g., `div`, `span`)
+	 * - Universal selector (`*`)
+	 * - ID selectors (e.g., `#header`)
+	 * - Class selectors (e.g., `.container`)
+	 * - Attribute selectors (e.g., `[type="text"]`)
+	 * - Pseudo-classes and pseudo-elements (e.g., `:hover`, `::before`, `:nth-child(2)`)
+	 * - The parent selector (`&`)
+	 * - Combinators (`>`, `+`, `~`) with optional whitespace
+	 * - Whitespace (descendant combinator)
+	 *
+	 * The pattern ensures that a string consists only of valid basic selector components,
+	 * possibly repeated and combined, but does not match full CSS selector groups separated by commas.
+	 *
+	 * @type {RegExp}
+	 */
+	var basicSelectorRegExp = /^([a-zA-Z][a-zA-Z0-9_-]*|\*|#[a-zA-Z0-9_-]+|\.[a-zA-Z0-9_-]+|\[[^\[\]]*\]|::?[a-zA-Z0-9_-]+(?:\([^\(\)]*\))?|&|\s*[>+~]\s*|\s+)+$/;
+
+	/**
+	 * Regular expression to match CSS pseudo-classes with arguments.
+	 *
+	 * Matches patterns like `:pseudo-class(argument)`, capturing the pseudo-class name and its argument.
+	 *
+	 * Capture groups:
+	 *   1. The pseudo-class name (letters and hyphens).
+	 *   2. The argument inside the parentheses (any characters except a closing parenthesis).
+	 *
+	 * Global flag (`g`) is used to find all matches in the input string.
+	 *
+	 * Example match: `:nth-child(2n+1)`
+	 *   - Group 1: "nth-child"
+	 *   - Group 2: "2n+1"
+	 * @type {RegExp}
+	 */
+	var globalPseudoClassRegExp = /:([a-zA-Z-]+)\(([^)]*)\)/g;
+
+	/**
+	 * Parses a CSS selector string and splits it into parts, handling nested parentheses.
+	 *
+	 * This function is useful for splitting selectors that may contain nested function-like
+	 * syntax (e.g., :not(.foo, .bar)), ensuring that commas inside parentheses do not split
+	 * the selector.
+	 *
+	 * @param {string} selector - The CSS selector string to parse.
+	 * @returns {string[]} An array of selector parts, split by top-level commas, with whitespace trimmed.
+	 */
+	function parseNestedSelectors(selector) {
+		var depth = 0;
+		var buffer = "";
+		var parts = [];
+		var i, char;
+
+		for (i = 0; i < selector.length; i++) {
+			char = selector.charAt(i);
 
+			if (char === '(') {
+				depth++;
+				buffer += char;
+			} else if (char === ')') {
+				depth--;
+				buffer += char;
+				if (depth === 0) {
+					parts.push(buffer.replace(/^\s+|\s+$/g, ""));
+					buffer = "";
+				}
+			} else if (char === ',' && depth === 0) {
+				if (buffer.replace(/^\s+|\s+$/g, "")) {
+					parts.push(buffer.replace(/^\s+|\s+$/g, ""));
+				}
+				buffer = "";
+			} else {
+				buffer += char;
+			}
+		}
+
+		if (buffer.replace(/^\s+|\s+$/g, "")) {
+			parts.push(buffer.replace(/^\s+|\s+$/g, ""));
+		}
+
+		return parts;
+	}
+
+	/**
+	 * Validates a CSS selector string, including handling of nested selectors within certain pseudo-classes.
+	 *
+	 * This function checks if the provided selector is valid according to the rules defined by
+	 * `basicSelectorRegExp`. For pseudo-classes that accept selector lists (such as :not, :is, :has, :where),
+	 * it recursively validates each nested selector using the same validation logic.
+	 *
+	 * @param {string} selector - The CSS selector string to validate.
+	 * @returns {boolean} Returns `true` if the selector is valid, otherwise `false`.
+	 */
+	function validateSelector(selector) {
+		var match, nestedSelectors, i;
+
+		// Only pseudo-classes that accept selector lists should recurse
+		var selectorListPseudoClasses = {
+			'not': true,
+			'is': true,
+			'has': true,
+			'where': true
+		};
+
+		// Reset regex lastIndex for global regex in ES5 loop
+		var pseudoClassRegExp = new RegExp(globalPseudoClassRegExp.source, globalPseudoClassRegExp.flags);
+		while ((match = pseudoClassRegExp.exec(selector)) !== null) {
+			var pseudoClass = match[1];
+			if (selectorListPseudoClasses.hasOwnProperty(pseudoClass)) {
+				nestedSelectors = parseNestedSelectors(match[2]);
+				// Validate each nested selector
+				for (i = 0; i < nestedSelectors.length; i++) {
+					if (!validateSelector(nestedSelectors[i])) {
+						return false;
+					}
+				}
+			}
+		}
+
+		// Allow "&" anywhere in the selector for nested selectors
+		return basicSelectorRegExp.test(selector);
+	}
+
+	/**
+	 * Checks if a given CSS selector text is valid by splitting it by commas
+	 * and validating each individual selector using the `validateSelector` function.
+	 *
+	 * @param {string} selectorText - The CSS selector text to validate. Can contain multiple selectors separated by commas.
+	 * @returns {boolean} Returns true if all selectors are valid, otherwise false.
+	 */
+	function isValidSelectorText(selectorText) {
+		// Split selectorText by commas and validate each part
+		var selectors = selectorText.split(',');
+		for (var i = 0; i < selectors.length; i++) {
+			if (!validateSelector(selectors[i].replace(/^\s+|\s+$/g, ""))) {
+				return false;
+			}
+		}
+		return true;
+	}
+
+	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 " ":
@@ -1637,6 +1972,9 @@ CSSOM.parse = function parse(token) {
 					parseError('Unmatched "');
 				}
 			} while (token[index - 2] === '\\');
+			if (index === 0) {
+				break;
+			}
 			buffer += token.slice(i, index);
 			i = index - 1;
 			switch (state) {
@@ -1645,6 +1983,9 @@ CSSOM.parse = function parse(token) {
 					break;
 				case 'importRule-begin':
 					state = 'importRule';
+					if (i === endingIndex) {
+						token += ';'
+					}
 					break;
 			}
 			break;
@@ -1657,6 +1998,9 @@ CSSOM.parse = function parse(token) {
 					parseError("Unmatched '");
 				}
 			} while (token[index - 2] === '\\');
+			if (index === 0) {
+				break;
+			}
 			buffer += token.slice(i, index);
 			i = index - 1;
 			switch (state) {
@@ -1792,8 +2136,13 @@ CSSOM.parse = function parse(token) {
 			if (currentScope === styleSheet) {
 				nestedSelectorRule = null;
 			}
+			if (state === 'before-selector') {
+				parseError("Unexpected {");
+				i = ignoreBalancedBlock(i, token.slice(i));
+				break;
+			}
 			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;
@@ -1810,6 +2159,7 @@ CSSOM.parse = function parse(token) {
 				}
 
 				currentScope = parentRule = styleRule;
+				console.log('sel out', buffer);
 				styleRule.selectorText = buffer.trim();
 				styleRule.style.__starts = i;
 				styleRule.parentStyleSheet = styleSheet;
@@ -1851,15 +2201,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") {
@@ -1917,7 +2271,7 @@ CSSOM.parse = function parse(token) {
 				documentRule.parentStyleSheet = styleSheet;
 				buffer = "";
 				state = "before-selector";
-			} else if (state === "name") {
+			} else if (state === "before-name" || state === "name") {
 				if (styleRule.constructor.name === "CSSNestedDeclarations") {
 					if (styleRule.style.length) {
 						parentRule.cssRules.push(styleRule);
@@ -1934,9 +2288,12 @@ CSSOM.parse = function parse(token) {
 					styleRule.parentStyleSheet = styleSheet;
 				}
 				
-				
 				styleRule = new CSSOM.CSSStyleRule();
-				styleRule.selectorText = buffer.trim();
+				console.log('sel in', buffer);
+				// In a nested selector, ensure each selector contains '&' at the beginning, except for selectors that already have '&' somewhere
+				styleRule.selectorText = parseNestedSelectors(buffer.trim()).map(function(sel) {
+						return sel.indexOf('&') === -1 ? '& ' + sel : sel;
+					}).join(', ');
 				styleRule.style.__starts = i - buffer.length;
 				styleRule.parentRule = parentRule;
 				nestedSelectorRule = styleRule;
@@ -2011,8 +2368,14 @@ CSSOM.parse = function parse(token) {
 
 		case ";":
 			switch (state) {
+				case "before-value":
+				case "before-name":
+					parseError("Unexpected ;");
+					buffer = "";
+					state = "before-name";
+					break;
 				case "value":
-					styleRule.style.setProperty(name, buffer.trim(), priority);
+					styleRule.style.setProperty(name, buffer.trim(), priority, parseError);
 					priority = "";
 					buffer = "";
 					state = "before-name";
@@ -2022,10 +2385,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;
@@ -2038,9 +2425,10 @@ CSSOM.parse = function parse(token) {
 		case "}":
 			switch (state) {
 				case "value":
-					styleRule.style.setProperty(name, buffer.trim(), priority);
+					styleRule.style.setProperty(name, buffer.trim(), priority, parseError);
 					priority = "";
 					/* falls through */
+				case "before-value":
 				case "before-name":
 				case "name":
 					styleRule.__ends = i + 1;
@@ -2058,7 +2446,14 @@ CSSOM.parse = function parse(token) {
 						currentScope = parentRule || styleSheet;
 					}
 
-					currentScope.cssRules.push(styleRule);
+					if (styleRule.constructor.name === "CSSStyleRule" && !isValidSelectorText(styleRule.selectorText)) {
+						if (styleRule === nestedSelectorRule) {
+							nestedSelectorRule = null;
+						}
+						parseError('Invalid CSSStyleRule.selectorText');
+					} else {
+						currentScope.cssRules.push(styleRule);
+					}
 					buffer = "";
 					if (currentScope.constructor === CSSOM.CSSKeyframesRule) {
 						state = "keyframeRule-begin";
@@ -2080,12 +2475,16 @@ CSSOM.parse = function parse(token) {
 				case "selector":
 					// End of media/supports/document rule.
 					if (!parentRule) {
+						parseError("Unexpected }");
+						
+						var hasPreviousStyleRule = currentScope.cssRules.length && currentScope.cssRules[currentScope.cssRules.length - 1].constructor.name === "CSSStyleRule";
+						if (hasPreviousStyleRule) {
+							i = ignoreBalancedBlock(i, token.slice(i), 1);
+						}
+						
 						break;
-						//parseError("Unexpected }");
 					}
 
-					// Handle rules nested in @media or @supports
-					hasAncestors = ancestorRules.length > 0;
 
 					while (ancestorRules.length > 0) {
 						parentRule = ancestorRules.pop();
@@ -2112,14 +2511,10 @@ CSSOM.parse = function parse(token) {
 							} else {
 								prevScope = currentScope;
 								currentScope = parentRule;
-								currentScope.cssRules.push(prevScope);
+								currentScope !== prevScope && currentScope.cssRules.push(prevScope);
 								break;
 							}
 						}
-
-						if (ancestorRules.length === 0) {
-							hasAncestors = false;
-						}
 					}
 					
 					if (currentScope.parentRule == null) {
@@ -2133,8 +2528,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 +2662,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 +2674,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;
 		}