@acemir/cssom 0.9.18 → 0.9.20

package/build/CSSOM.js

@@ -301,6 +301,27 @@ CSSOM.CSSRule = function CSSRule() {
   this.__parentStyleSheet = null;
 };
 
+CSSOM.CSSRule.UNKNOWN_RULE = 0; // obsolete
+CSSOM.CSSRule.STYLE_RULE = 1;
+CSSOM.CSSRule.CHARSET_RULE = 2; // obsolete
+CSSOM.CSSRule.IMPORT_RULE = 3;
+CSSOM.CSSRule.MEDIA_RULE = 4;
+CSSOM.CSSRule.FONT_FACE_RULE = 5;
+CSSOM.CSSRule.PAGE_RULE = 6;
+CSSOM.CSSRule.KEYFRAMES_RULE = 7;
+CSSOM.CSSRule.KEYFRAME_RULE = 8;
+CSSOM.CSSRule.MARGIN_RULE = 9;
+CSSOM.CSSRule.NAMESPACE_RULE = 10;
+CSSOM.CSSRule.COUNTER_STYLE_RULE = 11;
+CSSOM.CSSRule.SUPPORTS_RULE = 12;
+CSSOM.CSSRule.DOCUMENT_RULE = 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;
+
 Object.defineProperties(CSSOM.CSSRule.prototype, {
 
   constructor: { value: CSSOM.CSSRule },
@@ -337,7 +358,29 @@ Object.defineProperties(CSSOM.CSSRule.prototype, {
   CONTAINER_RULE: { value: 17, enumerable: true },
   LAYER_BLOCK_RULE: { value: 18, enumerable: true },
   STARTING_STYLE_RULE: { value: 1002, enumerable: true },
-})
+});
+
+
+
+
+
+/**
+ * @constructor
+ * @see https://drafts.csswg.org/cssom/#the-cssrulelist-interface
+ */
+CSSOM.CSSRuleList = function CSSRuleList(){
+  const arr = new Array();
+  Object.setPrototypeOf(arr, CSSOM.CSSRuleList.prototype);
+  return arr;
+};
+
+CSSOM.CSSRuleList.prototype = Object.create(Array.prototype);
+CSSOM.CSSRuleList.prototype.constructor = CSSOM.CSSRuleList;
+
+CSSOM.CSSRuleList.prototype.item = function(index) {
+    return this[index] || null;
+};
+
 
 
 
@@ -387,7 +430,7 @@ Object.defineProperty(CSSOM.CSSNestedDeclarations.prototype, "cssText", {
  */
 CSSOM.CSSGroupingRule = function CSSGroupingRule() {
 	CSSOM.CSSRule.call(this);
-	this.cssRules = [];
+	this.cssRules = new CSSOM.CSSRuleList();
 };
 
 CSSOM.CSSGroupingRule.prototype = new CSSOM.CSSRule();
@@ -504,7 +547,6 @@ CSSOM.CSSCounterStyleRule.prototype.type = 11;
  */
 CSSOM.CSSConditionRule = function CSSConditionRule() {
   CSSOM.CSSGroupingRule.call(this);
-  this.cssRules = [];
 };
 
 CSSOM.CSSConditionRule.prototype = new CSSOM.CSSGroupingRule();
@@ -1198,7 +1240,7 @@ Object.defineProperty(CSSOM.CSSFontFaceRule.prototype, "cssText", {
  */
 CSSOM.CSSHostRule = function CSSHostRule() {
 	CSSOM.CSSRule.call(this);
-	this.cssRules = [];
+	this.cssRules = new CSSOM.CSSRuleList();
 };
 
 CSSOM.CSSHostRule.prototype = new CSSOM.CSSRule();
@@ -1228,11 +1270,10 @@ Object.defineProperty(CSSOM.CSSHostRule.prototype, "cssText", {
  * @see http://www.w3.org/TR/shadow-dom/#host-at-rule
  */
 CSSOM.CSSStartingStyleRule = function CSSStartingStyleRule() {
-	CSSOM.CSSRule.call(this);
-	this.cssRules = [];
+	CSSOM.CSSGroupingRule.call(this);
 };
 
-CSSOM.CSSStartingStyleRule.prototype = new CSSOM.CSSRule();
+CSSOM.CSSStartingStyleRule.prototype = new CSSOM.CSSGroupingRule();
 CSSOM.CSSStartingStyleRule.prototype.constructor = CSSOM.CSSStartingStyleRule;
 CSSOM.CSSStartingStyleRule.prototype.type = 1002;
 //FIXME
@@ -1280,13 +1321,18 @@ Object.defineProperties(CSSOM.StyleSheet.prototype, {
  */
 CSSOM.CSSStyleSheet = function CSSStyleSheet() {
 	CSSOM.StyleSheet.call(this);
-	this.cssRules = [];
+	this.cssRules = new CSSOM.CSSRuleList();
 };
 
 
 CSSOM.CSSStyleSheet.prototype = new CSSOM.StyleSheet();
 CSSOM.CSSStyleSheet.prototype.constructor = CSSOM.CSSStyleSheet;
 
+Object.defineProperty(CSSOM.CSSStyleSheet.prototype, "rules", {
+	get: function() {
+		return this.cssRules;
+	}
+});
 
 /**
  * Used to insert a new rule into the style sheet. The new rule now becomes part of the cascade.
@@ -1417,6 +1463,13 @@ CSSOM.CSSStyleSheet.prototype.insertRule = function(rule, index) {
 	return index;
 };
 
+CSSOM.CSSStyleSheet.prototype.addRule = function(selector, styleBlock, index) {
+	if (index === void 0) {
+		index = this.cssRules.length;
+	}
+	this.insertRule(selector + "{" + styleBlock + "}", index);
+	return -1;
+};
 
 /**
  * Used to delete a rule from the style sheet.
@@ -1453,6 +1506,9 @@ CSSOM.CSSStyleSheet.prototype.deleteRule = function(index) {
 	this.cssRules.splice(index, 1);
 };
 
+CSSOM.CSSStyleSheet.prototype.removeRule = function(index) {
+	this.deleteRule(index);
+};
 
 /**
  * NON-STANDARD
@@ -1479,7 +1535,7 @@ CSSOM.CSSStyleSheet.prototype.toString = function() {
 CSSOM.CSSKeyframesRule = function CSSKeyframesRule() {
 	CSSOM.CSSRule.call(this);
 	this.name = '';
-	this.cssRules = [];
+	this.cssRules = new CSSOM.CSSRuleList();
 	
 	// Set up initial indexed access
 	this._setupIndexedAccess();
@@ -1805,7 +1861,7 @@ CSSOM.MatcherList.prototype = {
 CSSOM.CSSDocumentRule = function CSSDocumentRule() {
     CSSOM.CSSRule.call(this);
     this.matcher = new CSSOM.MatcherList();
-    this.cssRules = [];
+    this.cssRules = new CSSOM.CSSRuleList();
 };
 
 CSSOM.CSSDocumentRule.prototype = new CSSOM.CSSRule();
@@ -2206,6 +2262,51 @@ CSSOM.CSSValueExpression.prototype._findMatchedIdx = function(token, idx, sep) {
 
 
 
+/**
+ * @constructor
+ * @see https://drafts.csswg.org/css-cascade-6/#cssscoperule
+ */
+CSSOM.CSSScopeRule = function CSSScopeRule() {
+  CSSOM.CSSGroupingRule.call(this);
+  this.__start = null;
+  this.__end = null;
+};
+
+CSSOM.CSSScopeRule.prototype = new CSSOM.CSSGroupingRule();
+CSSOM.CSSScopeRule.prototype.constructor = CSSOM.CSSScopeRule;
+
+
+Object.defineProperties(CSSOM.CSSScopeRule.prototype, {
+  type: {
+    value: 0,
+    writable: false,
+  },
+  cssText: {
+    get: function () {
+      var cssTexts = [];
+      for (var i = 0, length = this.cssRules.length; i < length; i++) {
+        cssTexts.push(this.cssRules[i].cssText);
+      }
+      return "@scope " + (this.start ? "(" + this.start + ") " : "") + (this.end ? "to (" + this.end + ") " : "") + "{" + (cssTexts.length ? "\n  " + cssTexts.join("\n  ") : "") + "\n}";
+    },
+    configurable: true,
+    enumerable: true,
+  },
+  start: {
+    get: function () {
+      return this.__start;
+    }
+  },
+  end: {
+    get: function () {
+      return this.__end;
+    }
+  }
+});
+
+
+
+
 /**
  * @constructor
  * @see https://drafts.csswg.org/css-cascade-5/#csslayerblockrule
@@ -2213,7 +2314,6 @@ CSSOM.CSSValueExpression.prototype._findMatchedIdx = function(token, idx, sep) {
 CSSOM.CSSLayerBlockRule = function CSSLayerBlockRule() {
   CSSOM.CSSGroupingRule.call(this);
   this.name = "";
-  this.cssRules = [];
 };
 
 CSSOM.CSSLayerBlockRule.prototype = new CSSOM.CSSGroupingRule();
@@ -2311,6 +2411,7 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 		"conditionBlock": true,
 		"counterStyleBlock": true,
 		'documentRule-begin': true,
+		"scopeBlock": true,
 		"layerBlock": true
 	};
 
@@ -2329,7 +2430,7 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 	var ancestorRules = [];
 	var prevScope;
 
-	var name, priority="", styleRule, mediaRule, containerRule, counterStyleRule, supportsRule, importRule, fontFaceRule, keyframesRule, documentRule, hostRule, startingStyleRule, layerBlockRule, layerStatementRule, nestedSelectorRule, namespaceRule;
+	var name, priority="", styleRule, mediaRule, containerRule, counterStyleRule, supportsRule, importRule, fontFaceRule, keyframesRule, documentRule, hostRule, startingStyleRule, scopeRule, layerBlockRule, layerStatementRule, nestedSelectorRule, namespaceRule;
 
 	// Track defined namespace prefixes for validation
 	var definedNamespacePrefixes = {};
@@ -2339,11 +2440,12 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 	// 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 forwardRuleValidationRegExp = /(?:\s|\/\*|\{|\()/; // Match that the rule is followed by any whitespace, a opening comment, a condition opening parenthesis or a opening brace
 	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-Z]+)*[_a-zA-Z0-9-]*)$/; // Validates a single @layer name
+	var startsWithCombinatorRegExp = /^\s*[>+~]/; // Checks if a selector starts with a CSS combinator (>, +, ~)
 
 	/**
 	 * Searches for the first occurrence of a CSS at-rule statement terminator (`;` or `}`) 
@@ -2435,24 +2537,214 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 		return i;	
 	}
 
-	var parseError = function(message) {
-		var lines = token.substring(0, i).split('\n');
-		var lineCount = lines.length;
-		var charCount = lines.pop().length + 1;
-		var error = new Error(message + ' (line ' + lineCount + ', char ' + charCount + ')');
-		error.line = lineCount;
-		/* jshint sub : true */
-		error['char'] = charCount;
-		error.styleSheet = styleSheet;
-		// Print the error but continue parsing the sheet
-		try {
-			throw error;
-		} catch(e) {
-			errorHandler && errorHandler(e);
+	/**
+	 * Parses the scope prelude and extracts start and end selectors.
+	 * @param {string} preludeContent - The scope prelude content (without @scope keyword)
+	 * @returns {object} Object with startSelector and endSelector properties
+	 */
+	function parseScopePrelude(preludeContent) {
+		var parts = preludeContent.split(/\s*\)\s*to\s+\(/);
+		
+		// Restore the parentheses that were consumed by the split
+		if (parts.length === 2) {
+			parts[0] = parts[0] + ')';
+			parts[1] = '(' + parts[1];
+		}
+		
+		var hasStart = parts[0] &&
+			parts[0].charAt(0) === '(' &&
+			parts[0].charAt(parts[0].length - 1) === ')';
+		var hasEnd = parts[1] &&
+			parts[1].charAt(0) === '(' &&
+			parts[1].charAt(parts[1].length - 1) === ')';
+		
+		// Handle case: @scope to (<end>)
+		var hasOnlyEnd = !hasStart &&
+			!hasEnd &&
+			parts[0].indexOf('to (') === 0 &&
+			parts[0].charAt(parts[0].length - 1) === ')';
+		
+		var startSelector = '';
+		var endSelector = '';
+		
+		if (hasStart) {
+			startSelector = parts[0].slice(1, -1).trim();
+		}
+		if (hasEnd) {
+			endSelector = parts[1].slice(1, -1).trim();
+		}
+		if (hasOnlyEnd) {
+			endSelector = parts[0].slice(4, -1).trim();
+		}
+		
+		return {
+			startSelector: startSelector,
+			endSelector: endSelector,
+			hasStart: hasStart,
+			hasEnd: hasEnd,
+			hasOnlyEnd: hasOnlyEnd
+		};
+	};
+
+	/**
+	 * Checks if a selector contains pseudo-elements.
+	 * @param {string} selector - The CSS selector to check
+	 * @returns {boolean} True if the selector contains pseudo-elements
+	 */
+	function hasPseudoElement(selector) {
+		// Match only double-colon (::) pseudo-elements
+		// Also match legacy single-colon pseudo-elements: :before, :after, :first-line, :first-letter
+		// These must NOT be followed by alphanumeric characters (to avoid matching :before-x or similar)
+		var pseudoElementRegex = /::[a-zA-Z][\w-]*|:(before|after|first-line|first-letter)(?![a-zA-Z0-9_-])/;
+		return pseudoElementRegex.test(selector);
+	};
+
+	/**
+	 * Validates balanced parentheses, brackets, and quotes in a selector.
+	 * 
+	 * @param {string} selector - The CSS selector to validate
+	 * @param {boolean} trackAttributes - Whether to track attribute selector context
+	 * @param {boolean} useStack - Whether to use a stack for parentheses (needed for nested validation)
+	 * @returns {boolean} True if the syntax is valid (all brackets, parentheses, and quotes are balanced)
+	 */
+	function validateBalancedSyntax(selector, trackAttributes, useStack) {
+		var parenDepth = 0;
+		var bracketDepth = 0;
+		var inSingleQuote = false;
+		var inDoubleQuote = false;
+		var inAttr = false;
+		var stack = useStack ? [] : null;
+		
+		for (var i = 0; i < selector.length; i++) {
+			var char = selector[i];
+			var prevChar = i > 0 ? selector[i - 1] : '';
+			
+			if (inSingleQuote) {
+				if (char === "'" && prevChar !== "\\") {
+					inSingleQuote = false;
+				}
+			} else if (inDoubleQuote) {
+				if (char === '"' && prevChar !== "\\") {
+					inDoubleQuote = false;
+				}
+			} else if (trackAttributes && inAttr) {
+				if (char === "]") {
+					inAttr = false;
+				} else if (char === "'") {
+					inSingleQuote = true;
+				} else if (char === '"') {
+					inDoubleQuote = true;
+				}
+			} else {
+				if (trackAttributes && char === "[") {
+					inAttr = true;
+				} else if (char === "'") {
+					inSingleQuote = true;
+				} else if (char === '"') {
+					inDoubleQuote = true;
+				} else if (char === '(') {
+					if (useStack) {
+						stack.push("(");
+					} else {
+						parenDepth++;
+					}
+				} else if (char === ')') {
+					if (useStack) {
+						if (!stack.length || stack.pop() !== "(") {
+							return false;
+						}
+					} else {
+						parenDepth--;
+						if (parenDepth < 0) {
+							return false;
+						}
+					}
+				} else if (char === '[') {
+					bracketDepth++;
+				} else if (char === ']') {
+					bracketDepth--;
+					if (bracketDepth < 0) {
+						return false;
+					}
+				}
+			}
 		}
+		
+		// Check if everything is balanced
+		if (useStack) {
+			return stack.length === 0 && bracketDepth === 0 && !inSingleQuote && !inDoubleQuote && !inAttr;
+		} else {
+			return parenDepth === 0 && bracketDepth === 0 && !inSingleQuote && !inDoubleQuote;
+		}
+	};
+
+	/**
+	 * Checks for basic syntax errors in selectors (mismatched parentheses, brackets, quotes).
+	 * @param {string} selector - The CSS selector to check
+	 * @returns {boolean} True if there are syntax errors
+	 */
+	function hasBasicSyntaxError(selector) {
+		return !validateBalancedSyntax(selector, false, false);
 	};
 
-	var validateAtRule = function(atRuleKey, validCallback, cannotBeNested) {
+	/**
+	 * Checks for invalid combinator patterns in selectors.
+	 * @param {string} selector - The CSS selector to check
+	 * @returns {boolean} True if the selector contains invalid combinators
+	 */
+	function hasInvalidCombinators(selector) {
+		// Check for invalid combinator patterns:
+		// - <> (not a valid combinator)
+		// - >> (deep descendant combinator, deprecated and invalid)
+		// - Multiple consecutive combinators like >>, >~, etc.
+		if (/<>/.test(selector)) return true;
+		if (/>>/.test(selector)) return true;
+		// Check for other invalid consecutive combinator patterns
+		if (/[>+~]\s*[>+~]/.test(selector)) return true;
+		return false;
+	};
+
+	/**
+	 * Checks for invalid pseudo-like syntax (function calls without proper pseudo prefix).
+	 * @param {string} selector - The CSS selector to check
+	 * @returns {boolean} True if the selector contains invalid pseudo-like syntax
+	 */
+	function hasInvalidPseudoSyntax(selector) {
+		// Check for specific known pseudo-elements used without : or :: prefix
+		// Examples: slotted(div), part(name), cue(selector)
+		// These are ONLY valid as ::slotted(), ::part(), ::cue()
+		var invalidPatterns = [
+			/(?:^|[\s>+~,\[])slotted\s*\(/i,
+			/(?:^|[\s>+~,\[])part\s*\(/i,
+			/(?:^|[\s>+~,\[])cue\s*\(/i,
+			/(?:^|[\s>+~,\[])cue-region\s*\(/i
+		];
+		
+		for (var i = 0; i < invalidPatterns.length; i++) {
+			if (invalidPatterns[i].test(selector)) {
+				return true;
+			}
+		}
+		return false;
+	};
+
+	/**
+	 * Checks for invalid nesting selector (&) usage.
+	 * The & selector cannot be directly followed by a type selector without a delimiter.
+	 * Valid: &.class, &#id, &[attr], &:hover, &::before, & div, &>div
+	 * Invalid: &div, &span
+	 * @param {string} selector - The CSS selector to check
+	 * @returns {boolean} True if the selector contains invalid & usage
+	 */
+	function hasInvalidNestingSelector(selector) {
+		// Check for & followed directly by a letter (type selector) without any delimiter
+		// This regex matches & followed by a letter (start of type selector) that's not preceded by an escape
+		// We need to exclude valid cases like &.class, &#id, &[attr], &:pseudo, &::pseudo, & (with space), &>
+		var invalidNestingPattern = /&(?![.\#\[:>\+~\s])[a-zA-Z]/;
+		return invalidNestingPattern.test(selector);
+	};
+
+	function validateAtRule(atRuleKey, validCallback, cannotBeNested) {
 		var isValid = false;
 		var sourceRuleRegExp = atRuleKey === "@import" ? forwardImportRuleValidationRegExp : forwardRuleValidationRegExp;
 		var ruleRegExp = new RegExp(atRuleKey + sourceRuleRegExp.source, sourceRuleRegExp.flags);
@@ -2473,6 +2765,56 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 				isValid = true;
 			}
 		}
+		
+		// Additional validation for @scope rule
+		if (isValid && atRuleKey === "@scope") {
+			var openBraceIndex = ruleSlice.indexOf('{');
+			if (openBraceIndex !== -1) {
+				// Extract the scope prelude (everything between @scope and {)
+				var scopePrelude = ruleSlice.slice(0, openBraceIndex).trim();
+				
+				// Skip past '@scope' keyword and whitespace
+				var preludeContent = scopePrelude.slice(6).trim();
+				
+				if (preludeContent.length > 0) {
+					// Parse the scope prelude
+					var parsedScopePrelude = parseScopePrelude(preludeContent);
+					var startSelector = parsedScopePrelude.startSelector;
+					var endSelector = parsedScopePrelude.endSelector;
+					var hasStart = parsedScopePrelude.hasStart;
+					var hasEnd = parsedScopePrelude.hasEnd;
+					var hasOnlyEnd = parsedScopePrelude.hasOnlyEnd;
+					
+					// Validation rules for @scope:
+					// 1. Empty selectors in parentheses are invalid: @scope () {} or @scope (.a) to () {}
+					if ((hasStart && startSelector === '') || (hasEnd && endSelector === '') || (hasOnlyEnd && endSelector === '')) {
+						isValid = false;
+					}
+					// 2. Pseudo-elements are invalid in scope selectors
+					else if ((startSelector && hasPseudoElement(startSelector)) || (endSelector && hasPseudoElement(endSelector))) {
+						isValid = false;
+					}
+					// 3. Basic syntax errors (mismatched parens, brackets, quotes)
+					else if ((startSelector && hasBasicSyntaxError(startSelector)) || (endSelector && hasBasicSyntaxError(endSelector))) {
+						isValid = false;
+					}
+					// 4. Invalid combinator patterns
+					else if ((startSelector && hasInvalidCombinators(startSelector)) || (endSelector && hasInvalidCombinators(endSelector))) {
+						isValid = false;
+					}
+					// 5. Invalid pseudo-like syntax (function without : or :: prefix)
+					else if ((startSelector && hasInvalidPseudoSyntax(startSelector)) || (endSelector && hasInvalidPseudoSyntax(endSelector))) {
+						isValid = false;
+					}
+					// 6. Invalid structure (no proper parentheses found when prelude is not empty)
+					else if (!hasStart && !hasOnlyEnd) {
+						isValid = false;
+					}
+				}
+				// Empty prelude (@scope {}) is valid
+			}
+		}
+		
 		if (!isValid) {
 			// If it's invalid the browser will simply ignore the entire invalid block
 			// Use regex to find the closing brace of the invalid rule
@@ -2531,52 +2873,23 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 	 * @returns {boolean}
 	 */
 	function basicSelectorValidator(selector) {
-		var length = selector.length;
-		var i = 0;
-		var stack = [];
-		var inAttr = false;
-		var inSingleQuote = false;
-		var inDoubleQuote = false;
+		// Validate balanced syntax with attribute tracking and stack-based parentheses matching
+		if (!validateBalancedSyntax(selector, true, true)) {
+			return false;
+		}
 
-		while (i < length) {
-			var char = selector[i];
+		// Check for invalid combinator patterns
+		if (hasInvalidCombinators(selector)) {
+			return false;
+		}
 
-			if (inSingleQuote) {
-				if (char === "'" && selector[i - 1] !== "\\") {
-					inSingleQuote = false;
-				}
-			} else if (inDoubleQuote) {
-				if (char === '"' && selector[i - 1] !== "\\") {
-					inDoubleQuote = false;
-				}
-			} else if (inAttr) {
-				if (char === "]") {
-					inAttr = false;
-				} else if (char === "'") {
-					inSingleQuote = true;
-				} else if (char === '"') {
-					inDoubleQuote = true;
-				}
-			} else {
-				if (char === "[") {
-					inAttr = true;
-				} else if (char === "'") {
-					inSingleQuote = true;
-				} else if (char === '"') {
-					inDoubleQuote = true;
-				} else if (char === "(") {
-					stack.push("(");
-				} else if (char === ")") {
-					if (!stack.length || stack.pop() !== "(") {
-						return false;
-					}
-				}
-			}
-			i++;
+		// Check for invalid pseudo-like syntax
+		if (hasInvalidPseudoSyntax(selector)) {
+			return false;
 		}
 
-		// If any stack or quote/attr context remains, it's invalid
-		if (stack.length || inAttr || inSingleQuote || inDoubleQuote) {
+		// Check for invalid nesting selector (&) usage
+		if (hasInvalidNestingSelector(selector)) {
 			return false;
 		}
 
@@ -2587,7 +2900,7 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 		var looseSelectorRegExp = /^((?:(?:\*|[a-zA-Z_\u00A0-\uFFFF\\][a-zA-Z0-9_\u00A0-\uFFFF\-\\]*|)\|)?[a-zA-Z_\u00A0-\uFFFF\\][a-zA-Z0-9_\u00A0-\uFFFF\-\\]*|(?:(?:\*|[a-zA-Z_\u00A0-\uFFFF\\][a-zA-Z0-9_\u00A0-\uFFFF\-\\]*|)\|)?\*|#[a-zA-Z0-9_\u00A0-\uFFFF\-\\]+|\.[a-zA-Z0-9_\u00A0-\uFFFF\-\\]+|\[(?:[^\[\]'"]|'(?:[^'\\]|\\.)*'|"(?:[^"\\]|\\.)*")*(?:\s+[iI])?\]|::?[a-zA-Z0-9_\u00A0-\uFFFF\-\\]+(?:\((.*)\))?|&|\s*[>+~]\s*|\s+)+$/;
 		return looseSelectorRegExp.test(selector);
 	}
-
+	
 	/**
 	 * Regular expression to match CSS pseudo-classes with arguments.
 	 *
@@ -2618,48 +2931,56 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 	 * @returns {string[]} An array of selector parts, split by top-level commas, with whitespace trimmed.
 	 */
 	function parseAndSplitNestedSelectors(selector) {
-		var depth = 0;
-		var buffer = "";
-		var parts = [];
-		var inSingleQuote = false;
-		var inDoubleQuote = false;
+		var depth = 0;           // Track parenthesis nesting depth
+		var buffer = "";         // Accumulate characters for current selector part
+		var parts = [];          // Array of split selector parts
+		var inSingleQuote = false; // Track if we're inside single quotes
+		var inDoubleQuote = false; // Track if we're inside double quotes
 		var i, char;
 
 		for (i = 0; i < selector.length; i++) {
 			char = selector.charAt(i);
 
+			// Handle single quote strings
 			if (char === "'" && !inDoubleQuote) {
 				inSingleQuote = !inSingleQuote;
 				buffer += char;
-			} else if (char === '"' && !inSingleQuote) {
+			}
+			// Handle double quote strings
+			else if (char === '"' && !inSingleQuote) {
 				inDoubleQuote = !inDoubleQuote;
 				buffer += char;
-			} else if (!inSingleQuote && !inDoubleQuote) {
+			}
+			// Process characters outside of quoted strings
+			else if (!inSingleQuote && !inDoubleQuote) {
 				if (char === '(') {
+					// Entering a nested level (e.g., :is(...))
 					depth++;
 					buffer += char;
 				} else if (char === ')') {
+					// Exiting a nested level
 					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, ""));
+					// Found a top-level comma separator - split here
+					if (buffer.trim()) {
+						parts.push(buffer.trim());
 					}
 					buffer = "";
 				} else {
+					// Regular character - add to buffer
 					buffer += char;
 				}
-			} else {
+			}
+			// Characters inside quoted strings - add to buffer
+			else {
 				buffer += char;
 			}
 		}
 
-		if (buffer.replace(/^\s+|\s+$/g, "")) {
-			parts.push(buffer.replace(/^\s+|\s+$/g, ""));
+		// Add any remaining content in buffer as the last part
+		if (buffer.trim()) {
+			parts.push(buffer.trim());
 		}
 
 		return parts;
@@ -2676,8 +2997,8 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 	 * @returns {boolean} Returns `true` if the selector is valid, otherwise `false`.
 	 */
 
-	// Cache to store validated selectors
-	var validatedSelectorsCache = new Map();
+	// Cache to store validated selectors (ES5-compliant object)
+	var validatedSelectorsCache = {};
 
 	// Only pseudo-classes that accept selector lists should recurse
 	var selectorListPseudoClasses = {
@@ -2688,8 +3009,8 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 	};
 
 	function validateSelector(selector) {
-		if (validatedSelectorsCache.has(selector)) {
-			return validatedSelectorsCache.get(selector);
+		if (validatedSelectorsCache.hasOwnProperty(selector)) {
+			return validatedSelectorsCache[selector];
 		}
 
 		// Use a non-global regex to find all pseudo-classes with arguments
@@ -2706,15 +3027,15 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 				var nestedSelectors = parseAndSplitNestedSelectors(pseudoClassMatches[j][2]);
 				for (var i = 0; i < nestedSelectors.length; i++) {
 					var nestedSelector = nestedSelectors[i];
-					if (!validatedSelectorsCache.has(nestedSelector)) {
+					if (!validatedSelectorsCache.hasOwnProperty(nestedSelector)) {
 						var nestedSelectorValidation = validateSelector(nestedSelector);
-						validatedSelectorsCache.set(nestedSelector, nestedSelectorValidation);
+						validatedSelectorsCache[nestedSelector] = nestedSelectorValidation;
 						if (!nestedSelectorValidation) {
-							validatedSelectorsCache.set(selector, false);
+							validatedSelectorsCache[selector] = false;
 							return false;
 						}
-					} else if (!validatedSelectorsCache.get(nestedSelector)) {
-						validatedSelectorsCache.set(selector, false);
+					} else if (!validatedSelectorsCache[nestedSelector]) {
+						validatedSelectorsCache[selector] = false;
 						return false;
 					}
 				}
@@ -2722,7 +3043,7 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 		}
 
 		var basicSelectorValidation = basicSelectorValidator(selector);
-		validatedSelectorsCache.set(selector, basicSelectorValidation);
+		validatedSelectorsCache[selector] = basicSelectorValidation;
 
 		return basicSelectorValidation;
 	}
@@ -2814,6 +3135,23 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 		return true;
 	}
 
+	function parseError(message) {
+		var lines = token.substring(0, i).split('\n');
+		var lineCount = lines.length;
+		var charCount = lines.pop().length + 1;
+		var error = new Error(message + ' (line ' + lineCount + ', char ' + charCount + ')');
+		error.line = lineCount;
+		/* jshint sub : true */
+		error['char'] = charCount;
+		error.styleSheet = styleSheet;
+		// Print the error but continue parsing the sheet
+		try {
+			throw error;
+		} catch(e) {
+			errorHandler && errorHandler(e);
+		}
+	};
+
 	var endingIndex = token.length - 1;
 
 	for (var character; (character = token.charAt(i)); i++) {
@@ -2958,6 +3296,15 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 				}, true);
 				buffer = "";
 				break;
+			} else if (token.indexOf("@scope", i) === i) {
+				validateAtRule("@scope", function(){
+					state = "scopeBlock";
+					scopeRule = new CSSOM.CSSScopeRule();
+					scopeRule.__starts = i;
+					i += "scope".length;
+				});
+				buffer = "";
+				break;
 			} else if (token.indexOf("@layer", i) === i) {
 				validateAtRule("@layer", function(){
 					state = "layerBlock"
@@ -3113,6 +3460,27 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 				supportsRule.__parentStyleSheet = styleSheet;
 				buffer = "";
 				state = "before-selector";
+			} else if (state === "scopeBlock") {
+				var parsedScopePrelude = parseScopePrelude(buffer.trim());
+				
+				if (parsedScopePrelude.hasStart) {
+					scopeRule.__start = parsedScopePrelude.startSelector;
+				}
+				if (parsedScopePrelude.hasEnd) {
+					scopeRule.__end = parsedScopePrelude.endSelector;
+				}
+				if (parsedScopePrelude.hasOnlyEnd) {
+					scopeRule.__end = parsedScopePrelude.endSelector;
+				}
+
+				if (parentRule) {
+					scopeRule.__parentRule = parentRule;
+					ancestorRules.push(parentRule);
+				}
+				currentScope = parentRule = scopeRule;
+				scopeRule.__parentStyleSheet = styleSheet;
+				buffer = "";
+				state = "before-selector";
 			} else if (state === "layerBlock") {
 				layerBlockRule.name = buffer.trim();
 
@@ -3211,8 +3579,9 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 					styleRule.selectorText = processedSelectorText;
 				} else {
 					styleRule.selectorText = parseAndSplitNestedSelectors(processedSelectorText).map(function(sel) {
-							return sel.indexOf('&') === -1 ? '& ' + sel : sel;
-						}).join(', ');
+						// Add & at the beginning if there's no & in the selector, or if it starts with a combinator
+						return (sel.indexOf('&') === -1 || startsWithCombinatorRegExp.test(sel)) ? '& ' + sel : sel;
+					}).join(', ');
 				}
 				styleRule.style.__starts = i - buffer.length;
 				styleRule.__parentRule = parentRule;
@@ -3448,6 +3817,7 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 							|| parentRule.constructor.name === "CSSMediaRule"
 							|| parentRule.constructor.name === "CSSSupportsRule"
 							|| parentRule.constructor.name === "CSSContainerRule"
+							|| parentRule.constructor.name === "CSSScopeRule"
 							|| parentRule.constructor.name === "CSSLayerBlockRule"
 							|| parentRule.constructor.name === "CSSStartingStyleRule"
 						) {
@@ -3517,6 +3887,7 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 							|| parentRule.constructor.name === "CSSMediaRule"
 							|| parentRule.constructor.name === "CSSSupportsRule"
 							|| parentRule.constructor.name === "CSSContainerRule"
+							|| parentRule.constructor.name === "CSSScopeRule"
 							|| parentRule.constructor.name === "CSSLayerBlockRule"
 							|| parentRule.constructor.name === "CSSStartingStyleRule"
 						) {