@acemir/cssom 0.9.23 → 0.9.25

package/build/CSSOM.js

@@ -1,4 +1,18 @@
-var CSSOM = {};
+var __globalObject = null;
+
+var CSSOM = {
+    setup: function(opts) {
+        if (opts.globalObject) {
+            __globalObject = opts.globalObject;
+        }
+    },
+    getGlobalObject: function() {
+        return __globalObject;
+    }
+};
+
+
+
 
 
 // Utility functions for CSSOM error handling
@@ -13,19 +27,8 @@ var CSSOM = {};
  * @return {Function} The error constructor
  */
 function getErrorConstructor(context, errorType) {
-	// Try parentStyleSheet.__globalObject first
-	if (context.parentStyleSheet && context.parentStyleSheet.__globalObject && context.parentStyleSheet.__globalObject[errorType]) {
-		return context.parentStyleSheet.__globalObject[errorType];
-	}
-	
-	// Try __parentStyleSheet (alternative naming)
-	if (context.__parentStyleSheet && context.__parentStyleSheet.__globalObject && context.__parentStyleSheet.__globalObject[errorType]) {
-		return context.__parentStyleSheet.__globalObject[errorType];
-	}
-	
-	// Try __globalObject on the context itself
-	if (context.__globalObject && context.__globalObject[errorType]) {
-		return context.__globalObject[errorType];
+	if (CSSOM.getGlobalObject() && CSSOM.getGlobalObject()[errorType]) {
+		return CSSOM.getGlobalObject()[errorType];
 	}
 	
 	// Fall back to native constructor
@@ -34,6 +37,19 @@ function getErrorConstructor(context, errorType) {
 	       eval(errorType);
 }
 
+/**
+ * Creates an appropriate error with context-aware constructor.
+ * 
+ * @param {Object} context - The CSSOM object (rule, stylesheet, etc.)
+ * @param {string} errorType - The error type ('TypeError', 'RangeError', 'DOMException', etc.)
+ * @param {string} message - The error message
+ * @param {string} [name] - Optional name for DOMException
+ */
+function createError(context, errorType, message, name) {
+	var ErrorConstructor = getErrorConstructor(context, errorType);
+	return new ErrorConstructor(message, name);
+}
+
 /**
  * Creates and throws an appropriate error with context-aware constructor.
  * 
@@ -43,9 +59,7 @@ function getErrorConstructor(context, errorType) {
  * @param {string} [name] - Optional name for DOMException
  */
 function throwError(context, errorType, message, name) {
-	var ErrorConstructor = getErrorConstructor(context, errorType);
-	var error = new ErrorConstructor(message, name);
-	throw error;
+	throw createError(context, errorType, message, name);
 }
 
 /**
@@ -98,6 +112,7 @@ function throwIndexError(context, methodName, objectName, index, maxIndex, name)
 }
 
 var errorUtils = {
+	createError: createError,
 	getErrorConstructor: getErrorConstructor,
 	throwError: throwError,
 	throwMissingArguments: throwMissingArguments,
@@ -332,6 +347,16 @@ Object.defineProperties(CSSOM.CSSRule.prototype, {
     enumerable: true
   },
 
+  cssText: {
+    get: function() {
+      // Default getter: subclasses should override this
+      return "";
+    },
+    set: function(cssText) {
+      return cssText;
+    }
+  },
+
   parentRule: {
     get: function() {
       return this.__parentRule
@@ -402,9 +427,15 @@ CSSOM.CSSNestedDeclarations = function CSSNestedDeclarations() {
   this.__style.parentRule = this;
 };
 
-CSSOM.CSSNestedDeclarations.prototype = new CSSOM.CSSRule();
+CSSOM.CSSNestedDeclarations.prototype = Object.create(CSSOM.CSSRule.prototype);
 CSSOM.CSSNestedDeclarations.prototype.constructor = CSSOM.CSSNestedDeclarations;
-CSSOM.CSSNestedDeclarations.prototype.type = 0;
+
+Object.setPrototypeOf(CSSOM.CSSNestedDeclarations, CSSOM.CSSRule);
+
+Object.defineProperty(CSSOM.CSSNestedDeclarations.prototype, "type", {
+  value: 0,
+  writable: false
+});
 
 Object.defineProperty(CSSOM.CSSNestedDeclarations.prototype, "style", {
 	get: function() {
@@ -422,9 +453,7 @@ Object.defineProperty(CSSOM.CSSNestedDeclarations.prototype, "style", {
 Object.defineProperty(CSSOM.CSSNestedDeclarations.prototype, "cssText", {
   get: function () {
     return this.style.cssText;
-  },
-  configurable: true,
-  enumerable: true,
+  }
 });
 
 
@@ -436,12 +465,19 @@ Object.defineProperty(CSSOM.CSSNestedDeclarations.prototype, "cssText", {
  */
 CSSOM.CSSGroupingRule = function CSSGroupingRule() {
 	CSSOM.CSSRule.call(this);
-	this.cssRules = new CSSOM.CSSRuleList();
+	this.__cssRules = new CSSOM.CSSRuleList();
 };
 
-CSSOM.CSSGroupingRule.prototype = new CSSOM.CSSRule();
+CSSOM.CSSGroupingRule.prototype  = Object.create(CSSOM.CSSRule.prototype);
 CSSOM.CSSGroupingRule.prototype.constructor = CSSOM.CSSGroupingRule;
 
+Object.setPrototypeOf(CSSOM.CSSGroupingRule, CSSOM.CSSRule);
+
+Object.defineProperty(CSSOM.CSSGroupingRule.prototype, "cssRules", {
+	get: function() {
+		return this.__cssRules;
+	}
+});
 
 /**
  * Used to insert a new CSS rule to a list of CSS rules.
@@ -473,13 +509,60 @@ CSSOM.CSSGroupingRule.prototype.constructor = CSSOM.CSSGroupingRule;
 	if (index > this.cssRules.length) {
 		errorUtils.throwIndexError(this, 'insertRule', this.constructor.name, index, this.cssRules.length);
 	}
-	
-	var ruleToParse = String(rule);
-	var parsedSheet = CSSOM.parse(ruleToParse);
-	if (parsedSheet.cssRules.length !== 1) {
-		errorUtils.throwParseError(this, 'insertRule', this.constructor.name, ruleToParse, 'SyntaxError');
+	var ruleToParse = processedRuleToParse = String(rule);
+	ruleToParse = ruleToParse.trim().replace(/^\/\*[\s\S]*?\*\/\s*/, "");
+	var isNestedSelector = this.constructor.name === "CSSStyleRule";
+	if (isNestedSelector === false) {
+		var currentRule = this;
+		while (currentRule.parentRule) {
+			currentRule = currentRule.parentRule;
+			if (currentRule.constructor.name === "CSSStyleRule") {
+				isNestedSelector = true;
+				break;
+			}
+		}
+	}
+	if (isNestedSelector) {
+		processedRuleToParse = 's { n { } ' + ruleToParse + '}';
+	}
+	var isScopeRule = this.constructor.name === "CSSScopeRule";
+	if (isScopeRule) {
+		if (isNestedSelector) {
+			processedRuleToParse = 's { ' + '@scope {' + ruleToParse + '}}';
+		} else {
+			processedRuleToParse = '@scope {' + ruleToParse + '}';
+		}
+	}
+	var parsedRules = new CSSOM.CSSRuleList();
+	CSSOM.parse(processedRuleToParse, {
+		styleSheet: this.parentStyleSheet,
+		cssRules: parsedRules
+	});
+	if (isScopeRule) {
+		if (isNestedSelector) {
+			parsedRules = parsedRules[0].cssRules[0].cssRules;
+		} else {
+			parsedRules = parsedRules[0].cssRules
+		}
+	}
+	if (isNestedSelector) {
+		parsedRules = parsedRules[0].cssRules.slice(1);
+	}
+	if (parsedRules.length !== 1) {
+		if (isNestedSelector && parsedRules.length === 0 && ruleToParse.indexOf('@font-face') === 0) {
+			errorUtils.throwError(this, 'DOMException', 
+				"Failed to execute 'insertRule' on '" + this.constructor.name + "': " +
+				"Only conditional nested group rules, style rules, @scope rules, @apply rules, and nested declaration rules may be nested.",
+				'HierarchyRequestError');
+		} else {
+			errorUtils.throwParseError(this, 'insertRule', this.constructor.name, ruleToParse, 'SyntaxError');
+		}
+	}
+	var cssRule = parsedRules[0];
+
+	if (cssRule.constructor.name === 'CSSNestedDeclarations' && cssRule.style.length === 0) {
+		errorUtils.throwParseError(this, 'insertRule', this.constructor.name, ruleToParse, 'SyntaxError');	
 	}
-	var cssRule = parsedSheet.cssRules[0];
 	
 	// Check for rules that cannot be inserted inside a CSSGroupingRule
 	if (cssRule.constructor.name === 'CSSImportRule' || cssRule.constructor.name === 'CSSNamespaceRule') {
@@ -523,7 +606,9 @@ CSSOM.CSSGroupingRule.prototype.constructor = CSSOM.CSSGroupingRule;
 	if (index >= this.cssRules.length) {
 		errorUtils.throwIndexError(this, 'deleteRule', this.constructor.name, index, this.cssRules.length);
 	}
-	this.cssRules.splice(index, 1)[0].__parentRule = null;
+	this.cssRules[index].__parentRule = null;
+	this.cssRules[index].__parentStyleSheet = null;
+	this.cssRules.splice(index, 1);
 };
 
 
@@ -537,11 +622,45 @@ CSSOM.CSSGroupingRule.prototype.constructor = CSSOM.CSSGroupingRule;
 CSSOM.CSSCounterStyleRule = function CSSCounterStyleRule() {
 	CSSOM.CSSRule.call(this);
     this.name = "";
+	this.__props = "";
 };
 
-CSSOM.CSSCounterStyleRule.prototype = new CSSOM.CSSRule();
+CSSOM.CSSCounterStyleRule.prototype = Object.create(CSSOM.CSSRule.prototype);
 CSSOM.CSSCounterStyleRule.prototype.constructor = CSSOM.CSSCounterStyleRule;
-CSSOM.CSSCounterStyleRule.prototype.type = 11;
+
+Object.setPrototypeOf(CSSOM.CSSCounterStyleRule, CSSOM.CSSRule);
+
+Object.defineProperty(CSSOM.CSSCounterStyleRule.prototype, "type", {
+	value: 11,
+	writable: false
+});
+
+Object.defineProperty(CSSOM.CSSCounterStyleRule.prototype, "cssText", {
+	get: function() {
+		// FIXME : Implement real cssText generation based on properties
+		return "@counter-style " + this.name + " { " + this.__props + " }";
+	}
+});
+
+/**
+ * NON-STANDARD
+ * Rule text parser.
+ * @param {string} cssText
+ */
+Object.defineProperty(CSSOM.CSSCounterStyleRule.prototype, "parse", {
+	value: function(cssText) {
+		// Extract the name from "@counter-style <name> { ... }"
+		var match = cssText.match(/@counter-style\s+([^\s{]+)\s*\{([^]*)\}/);
+		if (match) {
+			this.name = match[1];
+			// Get the text inside the brackets and clean it up
+			var propsText = match[2];
+			this.__props = propsText.trim().replace(/\n/g, " ").replace(/(['"])(?:\\.|[^\\])*?\1|(\s{2,})/g, function (match, quote) {
+				return quote ? match : ' ';
+			});
+		}
+	}
+});
 
 
 
@@ -556,9 +675,11 @@ CSSOM.CSSConditionRule = function CSSConditionRule() {
   this.__conditionText = '';
 };
 
-CSSOM.CSSConditionRule.prototype = new CSSOM.CSSGroupingRule();
+CSSOM.CSSConditionRule.prototype = Object.create(CSSOM.CSSGroupingRule.prototype);
 CSSOM.CSSConditionRule.prototype.constructor = CSSOM.CSSConditionRule;
 
+Object.setPrototypeOf(CSSOM.CSSConditionRule, CSSOM.CSSGroupingRule);
+
 Object.defineProperty(CSSOM.CSSConditionRule.prototype, "conditionText", {
   get: function () {
     return this.__conditionText;
@@ -581,9 +702,11 @@ CSSOM.CSSStyleRule = function CSSStyleRule() {
 	this.__style.parentRule = this;
 };
 
-CSSOM.CSSStyleRule.prototype = new CSSOM.CSSGroupingRule();
+CSSOM.CSSStyleRule.prototype = Object.create(CSSOM.CSSGroupingRule.prototype);
 CSSOM.CSSStyleRule.prototype.constructor = CSSOM.CSSStyleRule;
 
+Object.setPrototypeOf(CSSOM.CSSStyleRule, CSSOM.CSSGroupingRule);
+
 Object.defineProperty(CSSOM.CSSStyleRule.prototype, "type", {
 	value: 1,
 	writable: false
@@ -628,12 +751,17 @@ Object.defineProperty(CSSOM.CSSStyleRule.prototype, "cssText", {
 	get: function() {
 		var text;
 		if (this.selectorText) {
-			var values = ""
+			var values = "";
 			if (this.cssRules.length) {
 				var valuesArr = [" {"];
 				this.style.cssText && valuesArr.push(this.style.cssText);
-				valuesArr.push(this.cssRules.map(function(rule){ return rule.cssText }).join("\n  "));
-				values = valuesArr.join("\n  ") + "\n}"
+				valuesArr.push(this.cssRules.reduce(function(acc, rule){ 
+					if (rule.cssText !== "") {
+						acc.push(rule.cssText);
+					}
+					return acc;
+				}, []).join("\n  "));
+				values = valuesArr.join("\n  ") + "\n}";
 			} else {
 				values = " {" + (this.style.cssText ? " " + this.style.cssText : "") + " }";
 			}
@@ -642,163 +770,10 @@ Object.defineProperty(CSSOM.CSSStyleRule.prototype, "cssText", {
 			text = "";
 		}
 		return text;
-	},
-	set: function(cssText) {
-		if (typeof cssText === "string") {
-			var rule = CSSOM.CSSStyleRule.parse(cssText);
-			this.__style = rule.style;
-			this.selectorText = rule.selectorText;
-		}
 	}
 });
 
 
-/**
- * NON-STANDARD
- * lightweight version of parse.js.
- * @param {string} ruleText
- * @return CSSStyleRule
- */
-CSSOM.CSSStyleRule.parse = function(ruleText) {
-	var i = 0;
-	var state = "selector";
-	var index;
-	var j = i;
-	var buffer = "";
-
-	var SIGNIFICANT_WHITESPACE = {
-		"selector": true,
-		"value": true
-	};
-
-	var styleRule = new CSSOM.CSSStyleRule();
-	var name, priority="";
-
-	for (var character; (character = ruleText.charAt(i)); i++) {
-
-		switch (character) {
-
-		case " ":
-		case "\t":
-		case "\r":
-		case "\n":
-		case "\f":
-			if (SIGNIFICANT_WHITESPACE[state]) {
-				// Squash 2 or more white-spaces in the row into 1
-				switch (ruleText.charAt(i - 1)) {
-					case " ":
-					case "\t":
-					case "\r":
-					case "\n":
-					case "\f":
-						break;
-					default:
-						buffer += " ";
-						break;
-				}
-			}
-			break;
-
-		// String
-		case '"':
-			j = i + 1;
-			index = ruleText.indexOf('"', j) + 1;
-			if (!index) {
-				throw '" is missing';
-			}
-			buffer += ruleText.slice(i, index);
-			i = index - 1;
-			break;
-
-		case "'":
-			j = i + 1;
-			index = ruleText.indexOf("'", j) + 1;
-			if (!index) {
-				throw "' is missing";
-			}
-			buffer += ruleText.slice(i, index);
-			i = index - 1;
-			break;
-
-		// Comment
-		case "/":
-			if (ruleText.charAt(i + 1) === "*") {
-				i += 2;
-				index = ruleText.indexOf("*/", i);
-				if (index === -1) {
-					throw new SyntaxError("Missing */");
-				} else {
-					i = index + 1;
-				}
-			} else {
-				buffer += character;
-			}
-			break;
-
-		case "{":
-			if (state === "selector") {
-				styleRule.selectorText = buffer.trim();
-				buffer = "";
-				state = "name";
-			}
-			break;
-
-		case ":":
-			if (state === "name") {
-				name = buffer.trim();
-				buffer = "";
-				state = "value";
-			} else {
-				buffer += character;
-			}
-			break;
-
-		case "!":
-			if (state === "value" && ruleText.indexOf("!important", i) === i) {
-				priority = "important";
-				i += "important".length;
-			} else {
-				buffer += character;
-			}
-			break;
-
-		case ";":
-			if (state === "value") {
-				styleRule.style.setProperty(name, buffer.trim(), priority);
-				priority = "";
-				buffer = "";
-				state = "name";
-			} else {
-				buffer += character;
-			}
-			break;
-
-		case "}":
-			if (state === "value") {
-				styleRule.style.setProperty(name, buffer.trim(), priority);
-				priority = "";
-				buffer = "";
-			} else if (state === "name") {
-				break;
-			} else {
-				buffer += character;
-			}
-			state = "selector";
-			break;
-
-		default:
-			buffer += character;
-			break;
-
-		}
-	}
-
-	return styleRule;
-
-};
-
-
-
 
 
 
@@ -825,7 +800,9 @@ CSSOM.MediaList.prototype = {
 	 * @param {string} value
 	 */
 	set mediaText(value) {
-		var values = value.split(",");
+		var values = value.split(",").filter(function(text){
+			return !!text;
+		});
 		var length = this.length = values.length;
 		for (var i=0; i<length; i++) {
 			this[i] = values[i].trim();
@@ -869,9 +846,15 @@ CSSOM.CSSMediaRule = function CSSMediaRule() {
 	this.__media = new CSSOM.MediaList();
 };
 
-CSSOM.CSSMediaRule.prototype = new CSSOM.CSSConditionRule();
+CSSOM.CSSMediaRule.prototype = Object.create(CSSOM.CSSConditionRule.prototype);
 CSSOM.CSSMediaRule.prototype.constructor = CSSOM.CSSMediaRule;
-CSSOM.CSSMediaRule.prototype.type = 4;
+
+Object.setPrototypeOf(CSSOM.CSSMediaRule, CSSOM.CSSConditionRule);
+
+Object.defineProperty(CSSOM.CSSMediaRule.prototype, "type", {
+	value: 4,
+	writable: false
+});
 
 // https://opensource.apple.com/source/WebCore/WebCore-7611.1.21.161.3/css/CSSMediaRule.cpp
 Object.defineProperties(CSSOM.CSSMediaRule.prototype, {
@@ -895,14 +878,19 @@ Object.defineProperties(CSSOM.CSSMediaRule.prototype, {
   },
   "cssText": {
     get: function() {
-      var cssTexts = [];
-      for (var i=0, length=this.cssRules.length; i < length; i++) {
-        cssTexts.push(this.cssRules[i].cssText);
+			var values = "";
+			var valuesArr = [" {"];
+      if (this.cssRules.length) {
+        valuesArr.push(this.cssRules.reduce(function(acc, rule){ 
+          if (rule.cssText !== "") {
+            acc.push(rule.cssText);
+          }
+          return acc;
+        }, []).join("\n  "));
       }
-      return "@media " + this.media.mediaText + " {" + (cssTexts.length ? "\n  " + cssTexts.join("\n  ") : "") + "\n}";
-    },
-    configurable: true,
-    enumerable: true
+      values = valuesArr.join("\n  ") + "\n}";
+      return "@media " + this.media.mediaText + values;
+    }
   }
 });
 
@@ -920,21 +908,32 @@ CSSOM.CSSContainerRule = function CSSContainerRule() {
 	CSSOM.CSSConditionRule.call(this);
 };
 
-CSSOM.CSSContainerRule.prototype = new CSSOM.CSSConditionRule();
+CSSOM.CSSContainerRule.prototype = Object.create(CSSOM.CSSConditionRule.prototype);
 CSSOM.CSSContainerRule.prototype.constructor = CSSOM.CSSContainerRule;
-CSSOM.CSSContainerRule.prototype.type = 17;
+
+Object.setPrototypeOf(CSSOM.CSSContainerRule, CSSOM.CSSConditionRule);
+
+Object.defineProperty(CSSOM.CSSContainerRule.prototype, "type", {
+	value: 17,
+	writable: false
+});
 
 Object.defineProperties(CSSOM.CSSContainerRule.prototype, {
   "cssText": {
     get: function() {
-      var cssTexts = [];
-      for (var i=0, length=this.cssRules.length; i < length; i++) {
-        cssTexts.push(this.cssRules[i].cssText);
+			var values = "";
+			var valuesArr = [" {"];
+      if (this.cssRules.length) {
+        valuesArr.push(this.cssRules.reduce(function(acc, rule){ 
+          if (rule.cssText !== "") {
+            acc.push(rule.cssText);
+          }
+          return acc;
+        }, []).join("\n  "));
       }
-      return "@container " + this.conditionText + " {" + (cssTexts.length ? "\n  " + cssTexts.join("\n  ") : "") + "\n}";
-    },
-    configurable: true,
-    enumerable: true
+      values = valuesArr.join("\n  ") + "\n}";
+      return "@container " + this.conditionText + values;
+    }
   },
   "containerName": {
       get: function() {
@@ -969,19 +968,30 @@ CSSOM.CSSSupportsRule = function CSSSupportsRule() {
   CSSOM.CSSConditionRule.call(this);
 };
 
-CSSOM.CSSSupportsRule.prototype = new CSSOM.CSSConditionRule();
+CSSOM.CSSSupportsRule.prototype = Object.create(CSSOM.CSSConditionRule.prototype);
 CSSOM.CSSSupportsRule.prototype.constructor = CSSOM.CSSSupportsRule;
-CSSOM.CSSSupportsRule.prototype.type = 12;
+  
+Object.setPrototypeOf(CSSOM.CSSSupportsRule, CSSOM.CSSConditionRule);
+
+Object.defineProperty(CSSOM.CSSSupportsRule.prototype, "type", {
+	value: 12,
+	writable: false
+});
 
 Object.defineProperty(CSSOM.CSSSupportsRule.prototype, "cssText", {
   get: function() {
-    var cssTexts = [];
-
-    for (var i = 0, length = this.cssRules.length; i < length; i++) {
-      cssTexts.push(this.cssRules[i].cssText);
+    var values = "";
+    var valuesArr = [" {"];
+    if (this.cssRules.length) {
+      valuesArr.push(this.cssRules.reduce(function(acc, rule){ 
+        if (rule.cssText !== "") {
+          acc.push(rule.cssText);
+        }
+        return acc;
+      }, []).join("\n  "));
     }
-
-    return "@supports " + this.conditionText + " {" + (cssTexts.length ? "\n  " + cssTexts.join("\n  ") : "") + "\n}";
+    values = valuesArr.join("\n  ") + "\n}";
+    return "@supports " + this.conditionText + values;
   }
 });
 
@@ -1003,9 +1013,11 @@ CSSOM.CSSImportRule = function CSSImportRule() {
 	this.__styleSheet = new CSSOM.CSSStyleSheet();
 };
 
-CSSOM.CSSImportRule.prototype = new CSSOM.CSSRule();
+CSSOM.CSSImportRule.prototype = Object.create(CSSOM.CSSRule.prototype);
 CSSOM.CSSImportRule.prototype.constructor = CSSOM.CSSImportRule;
 
+Object.setPrototypeOf(CSSOM.CSSImportRule, CSSOM.CSSRule);
+
 Object.defineProperty(CSSOM.CSSImportRule.prototype, "type", {
 	value: 3,
 	writable: false
@@ -1015,8 +1027,53 @@ Object.defineProperty(CSSOM.CSSImportRule.prototype, "cssText", {
   get: function() {
     var mediaText = this.media.mediaText;
     return "@import url(\"" + this.href.replace(/\\/g, '\\\\').replace(/"/g, '\\"') + "\")" + (this.layerName !== null ? " layer" + (this.layerName && "(" + this.layerName + ")") : "" ) + (this.supportsText ? " supports(" + this.supportsText + ")" : "" ) + (mediaText ? " " + mediaText : "") + ";";
+  }
+});
+
+Object.defineProperty(CSSOM.CSSImportRule.prototype, "href", {
+  get: function() {
+    return this.__href;
+  }
+});
+
+Object.defineProperty(CSSOM.CSSImportRule.prototype, "media", {
+  get: function() {
+    return this.__media;
   },
-  set: function(cssText) {
+	set: function(value) {
+		if (typeof value === "string") {
+			this.__media.mediaText = value;
+		} else {
+			this.__media = value;
+		}
+	}
+});
+
+Object.defineProperty(CSSOM.CSSImportRule.prototype, "layerName", {
+  get: function() {
+    return this.__layerName;
+  }
+});
+
+Object.defineProperty(CSSOM.CSSImportRule.prototype, "supportsText", {
+  get: function() {
+    return this.__supportsText;
+  }
+});
+
+Object.defineProperty(CSSOM.CSSImportRule.prototype, "styleSheet", {
+  get: function() {
+    return this.__styleSheet;
+  }
+});
+
+/**
+ * NON-STANDARD
+ * Rule text parser.
+ * @param {string} cssText
+ */
+Object.defineProperty(CSSOM.CSSImportRule.prototype, "parse", {
+  value: function(cssText) {
     var i = 0;
 
     /**
@@ -1195,71 +1252,57 @@ Object.defineProperty(CSSOM.CSSImportRule.prototype, "cssText", {
   }
 });
 
-Object.defineProperty(CSSOM.CSSImportRule.prototype, "href", {
+
+
+
+
+
+/**
+ * @constructor
+ * @see https://drafts.csswg.org/cssom/#the-cssnamespacerule-interface
+ */
+CSSOM.CSSNamespaceRule = function CSSNamespaceRule() {
+	CSSOM.CSSRule.call(this);
+	this.__prefix = "";
+	this.__namespaceURI = "";
+};
+
+CSSOM.CSSNamespaceRule.prototype = Object.create(CSSOM.CSSRule.prototype);
+CSSOM.CSSNamespaceRule.prototype.constructor = CSSOM.CSSNamespaceRule;
+
+Object.setPrototypeOf(CSSOM.CSSNamespaceRule, CSSOM.CSSRule);
+
+Object.defineProperty(CSSOM.CSSNamespaceRule.prototype, "type", {
+  value: 10,
+  writable: false
+});
+
+Object.defineProperty(CSSOM.CSSNamespaceRule.prototype, "cssText", {
   get: function() {
-    return this.__href;
+    return "@namespace" + (this.prefix && " " + this.prefix) + " url(\"" + this.namespaceURI + "\");";
   }
 });
 
-Object.defineProperty(CSSOM.CSSImportRule.prototype, "media", {
+Object.defineProperty(CSSOM.CSSNamespaceRule.prototype, "prefix", {
   get: function() {
-    return this.__media;
-  },
-	set: function(value) {
-		if (typeof value === "string") {
-			this.__media.mediaText = value;
-		} else {
-			this.__media = value;
-		}
-	}
-});
-
-Object.defineProperty(CSSOM.CSSImportRule.prototype, "layerName", {
-  get: function() {
-    return this.__layerName;
-  }
-});
-
-Object.defineProperty(CSSOM.CSSImportRule.prototype, "supportsText", {
-  get: function() {
-    return this.__supportsText;
+    return this.__prefix;
   }
 });
 
-Object.defineProperty(CSSOM.CSSImportRule.prototype, "styleSheet", {
+Object.defineProperty(CSSOM.CSSNamespaceRule.prototype, "namespaceURI", {
   get: function() {
-    return this.__styleSheet;
+    return this.__namespaceURI;
   }
 });
 
 
-
-
-
-
 /**
- * @constructor
- * @see https://drafts.csswg.org/cssom/#the-cssnamespacerule-interface
+ * NON-STANDARD
+ * Rule text parser.
+ * @param {string} cssText
  */
-CSSOM.CSSNamespaceRule = function CSSNamespaceRule() {
-	CSSOM.CSSRule.call(this);
-	this.__prefix = "";
-	this.__namespaceURI = "";
-};
-
-CSSOM.CSSNamespaceRule.prototype = new CSSOM.CSSRule();
-CSSOM.CSSNamespaceRule.prototype.constructor = CSSOM.CSSNamespaceRule;
-
-Object.defineProperty(CSSOM.CSSNamespaceRule.prototype, "type", {
-  value: 10,
-	writable: false
-});
-
-Object.defineProperty(CSSOM.CSSNamespaceRule.prototype, "cssText", {
-  get: function() {
-    return "@namespace" + (this.prefix && " " + this.prefix) + " url(\"" + this.namespaceURI + "\");";
-  },
-  set: function(cssText) {
+Object.defineProperty(CSSOM.CSSNamespaceRule.prototype, "parse", {
+  value: function(cssText) {
     var newPrefix = "";
     var newNamespaceURI = "";
 
@@ -1307,19 +1350,6 @@ Object.defineProperty(CSSOM.CSSNamespaceRule.prototype, "cssText", {
   }
 });
 
-Object.defineProperty(CSSOM.CSSNamespaceRule.prototype, "prefix", {
-  get: function() {
-    return this.__prefix;
-  }
-});
-
-Object.defineProperty(CSSOM.CSSNamespaceRule.prototype, "namespaceURI", {
-  get: function() {
-    return this.__namespaceURI;
-  }
-});
-
-
 
 
 
@@ -1333,9 +1363,16 @@ CSSOM.CSSFontFaceRule = function CSSFontFaceRule() {
 	this.__style.parentRule = this;
 };
 
-CSSOM.CSSFontFaceRule.prototype = new CSSOM.CSSRule();
+CSSOM.CSSFontFaceRule.prototype = Object.create(CSSOM.CSSRule.prototype);
 CSSOM.CSSFontFaceRule.prototype.constructor = CSSOM.CSSFontFaceRule;
-CSSOM.CSSFontFaceRule.prototype.type = 5;
+
+Object.setPrototypeOf(CSSOM.CSSFontFaceRule, CSSOM.CSSRule);
+
+Object.defineProperty(CSSOM.CSSFontFaceRule.prototype, "type", {
+	value: 5,
+	writable: false
+});
+
 //FIXME
 //CSSOM.CSSFontFaceRule.prototype.insertRule = CSSStyleSheet.prototype.insertRule;
 //CSSOM.CSSFontFaceRule.prototype.deleteRule = CSSStyleSheet.prototype.deleteRule;
@@ -1368,26 +1405,42 @@ Object.defineProperty(CSSOM.CSSFontFaceRule.prototype, "cssText", {
 /**
  * @constructor
  * @see http://www.w3.org/TR/shadow-dom/#host-at-rule
+ * @see http://html5index.org/Shadow%20DOM%20-%20CSSHostRule.html
+ * @deprecated This rule was part of early Shadow DOM drafts but was removed in favor of the more flexible :host and :host-context() pseudo-classes in modern CSS for Web Components.
  */
 CSSOM.CSSHostRule = function CSSHostRule() {
 	CSSOM.CSSRule.call(this);
 	this.cssRules = new CSSOM.CSSRuleList();
 };
 
-CSSOM.CSSHostRule.prototype = new CSSOM.CSSRule();
+CSSOM.CSSHostRule.prototype = Object.create(CSSOM.CSSRule.prototype);
 CSSOM.CSSHostRule.prototype.constructor = CSSOM.CSSHostRule;
-CSSOM.CSSHostRule.prototype.type = 1001;
+
+Object.setPrototypeOf(CSSOM.CSSHostRule, CSSOM.CSSRule);
+
+Object.defineProperty(CSSOM.CSSHostRule.prototype, "type", {
+	value: 1001,
+	writable: false
+});
+
 //FIXME
 //CSSOM.CSSHostRule.prototype.insertRule = CSSStyleSheet.prototype.insertRule;
 //CSSOM.CSSHostRule.prototype.deleteRule = CSSStyleSheet.prototype.deleteRule;
 
 Object.defineProperty(CSSOM.CSSHostRule.prototype, "cssText", {
 	get: function() {
-		var cssTexts = [];
-		for (var i=0, length=this.cssRules.length; i < length; i++) {
-			cssTexts.push(this.cssRules[i].cssText);
+		var values = "";
+		var valuesArr = [" {"];
+		if (this.cssRules.length) {
+			valuesArr.push(this.cssRules.reduce(function(acc, rule){ 
+			if (rule.cssText !== "") {
+				acc.push(rule.cssText);
+			}
+			return acc;
+			}, []).join("\n  "));
 		}
-		return "@host {" + (cssTexts.length ? "\n  " + cssTexts.join("\n  ") : "") + "\n}";
+		values = valuesArr.join("\n  ") + "\n}";
+		return "@host" + values;
 	}
 });
 
@@ -1404,20 +1457,34 @@ CSSOM.CSSStartingStyleRule = function CSSStartingStyleRule() {
 	CSSOM.CSSGroupingRule.call(this);
 };
 
-CSSOM.CSSStartingStyleRule.prototype = new CSSOM.CSSGroupingRule();
+CSSOM.CSSStartingStyleRule.prototype = Object.create(CSSOM.CSSGroupingRule.prototype);
 CSSOM.CSSStartingStyleRule.prototype.constructor = CSSOM.CSSStartingStyleRule;
-CSSOM.CSSStartingStyleRule.prototype.type = 1002;
+
+Object.setPrototypeOf(CSSOM.CSSStartingStyleRule, CSSOM.CSSGroupingRule);
+
+Object.defineProperty(CSSOM.CSSStartingStyleRule.prototype, "type", {
+	value: 1002,
+	writable: false
+});
+
 //FIXME
 //CSSOM.CSSStartingStyleRule.prototype.insertRule = CSSStyleSheet.prototype.insertRule;
 //CSSOM.CSSStartingStyleRule.prototype.deleteRule = CSSStyleSheet.prototype.deleteRule;
 
 Object.defineProperty(CSSOM.CSSStartingStyleRule.prototype, "cssText", {
 	get: function() {
-		var cssTexts = [];
-		for (var i=0, length=this.cssRules.length; i < length; i++) {
-			cssTexts.push(this.cssRules[i].cssText);
+		var values = "";
+		var valuesArr = [" {"];
+		if (this.cssRules.length) {
+			valuesArr.push(this.cssRules.reduce(function(acc, rule){ 
+			if (rule.cssText !== "") {
+				acc.push(rule.cssText);
+			}
+			return acc;
+			}, []).join("\n  "));
 		}
-		return "@starting-style {" + (cssTexts.length ? "\n  " + cssTexts.join("\n  ") : "") + "\n}";
+		values = valuesArr.join("\n  ") + "\n}";
+		return "@starting-style" + values;
 	}
 });
 
@@ -1427,15 +1494,38 @@ Object.defineProperty(CSSOM.CSSStartingStyleRule.prototype, "cssText", {
 
 
 /**
- * @constructor
  * @see http://dev.w3.org/csswg/cssom/#the-stylesheet-interface
  */
 CSSOM.StyleSheet = function StyleSheet() {
+	this.__href = null;
+	this.__ownerNode = null;
+	this.__title = null;
 	this.__media = new CSSOM.MediaList();
 	this.__parentStyleSheet = null;
+	this.disabled = false;
 };
 
 Object.defineProperties(CSSOM.StyleSheet.prototype, {
+	type: {
+		get: function() {
+			return "text/css";
+		}
+	},
+	href: {
+		get: function() {
+			return this.__href;
+		}
+	},
+	ownerNode: {
+		get: function() {
+			return this.__ownerNode;
+		}
+	},
+	title: {
+		get: function() {
+			return this.__title;
+		}
+	},
 	media: {
 		get: function() {
 			return this.__media;
@@ -1461,20 +1551,52 @@ Object.defineProperties(CSSOM.StyleSheet.prototype, {
 
 /**
  * @constructor
+ * @param {CSSStyleSheetInit} [opts] - CSSStyleSheetInit options.
+ * @param {string} [opts.baseURL] - The base URL of the stylesheet.
+ * @param {boolean} [opts.disabled] - The disabled attribute of the stylesheet.
+ * @param {MediaList | string} [opts.media] - The media attribute of the stylesheet.
  * @see http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleSheet
  */
-CSSOM.CSSStyleSheet = function CSSStyleSheet() {
+CSSOM.CSSStyleSheet = function CSSStyleSheet(opts) {
 	CSSOM.StyleSheet.call(this);
-	this.cssRules = new CSSOM.CSSRuleList();
+	this.__constructed = true;
+	this.__cssRules = new CSSOM.CSSRuleList();
+	this.__ownerRule = null; 
+
+	if (opts && typeof opts === "object") {
+		if (opts.baseURL && typeof opts.baseURL === "string") {
+			this.__baseURL = opts.baseURL;
+		}
+		if (opts.media && typeof opts.media === "string") {
+			this.media.mediaText = opts.media;
+		}
+		if (typeof opts.disabled === "boolean") {
+			this.disabled = opts.disabled;
+		}
+	}
 };
 
 
-CSSOM.CSSStyleSheet.prototype = new CSSOM.StyleSheet();
+CSSOM.CSSStyleSheet.prototype = Object.create(CSSOM.StyleSheet.prototype);
 CSSOM.CSSStyleSheet.prototype.constructor = CSSOM.CSSStyleSheet;
 
+Object.setPrototypeOf(CSSOM.CSSStyleSheet, CSSOM.StyleSheet);
+
+Object.defineProperty(CSSOM.CSSStyleSheet.prototype, "cssRules", {
+	get: function() {
+		return this.__cssRules;
+	}
+});
+
 Object.defineProperty(CSSOM.CSSStyleSheet.prototype, "rules", {
 	get: function() {
-		return this.cssRules;
+		return this.__cssRules;
+	}
+});
+
+Object.defineProperty(CSSOM.CSSStyleSheet.prototype, "ownerRule", {
+	get: function() {
+		return this.__ownerRule;
 	}
 });
 
@@ -1677,6 +1799,84 @@ CSSOM.CSSStyleSheet.prototype.removeRule = function(index) {
 	this.deleteRule(index);
 };
 
+
+/**
+ * Replaces the rules of a {@link CSSStyleSheet}
+ * 
+ * @returns a promise
+ * @see https://www.w3.org/TR/cssom-1/#dom-cssstylesheet-replace
+ */
+CSSOM.CSSStyleSheet.prototype.replace = function(text) {
+	var _Promise;
+	if (CSSOM.getGlobalObject() && CSSOM.getGlobalObject()['Promise']) {
+		_Promise = CSSOM.getGlobalObject()['Promise'];
+	} else {
+		_Promise = Promise;
+	}
+	var sheet = this;
+	return new _Promise(function (resolve, reject) {
+		// If the constructed flag is not set, or the disallow modification flag is set, throw a NotAllowedError DOMException.
+		if (!sheet.__constructed || sheet.__disallowModification) {
+			reject(errorUtils.createError(sheet, 'DOMException',
+				"Failed to execute 'replaceSync' on '" + sheet.constructor.name + "': Not allowed.",
+				'NotAllowedError'));
+		}
+		// Set the disallow modification flag.
+		sheet.__disallowModification = true;
+
+		// In parallel, do these steps:
+		setTimeout(function() {
+			// Let rules be the result of running parse a stylesheet's contents from text.
+			var rules = new CSSOM.CSSRuleList();
+			CSSOM.parse(text, { styleSheet: sheet, cssRules: rules });
+			// If rules contains one or more @import rules, remove those rules from rules.
+			var i = 0;
+			while (i < rules.length) {
+				if (rules[i].constructor.name === 'CSSImportRule') {
+					rules.splice(i, 1);
+				} else {
+					i++;
+				}
+			}
+			// Set sheet's CSS rules to rules.
+			sheet.__cssRules = rules;
+			// Unset sheet’s disallow modification flag.
+			delete sheet.__disallowModification;
+			// Resolve promise with sheet.
+			resolve(sheet);
+		})
+	});
+}
+
+/**
+ * Synchronously replaces the rules of a {@link CSSStyleSheet}
+ * 
+ * @see https://www.w3.org/TR/cssom-1/#dom-cssstylesheet-replacesync
+ */
+CSSOM.CSSStyleSheet.prototype.replaceSync = function(text) {
+	var sheet = this;
+	// If the constructed flag is not set, or the disallow modification flag is set, throw a NotAllowedError DOMException.
+	if (!sheet.__constructed || sheet.__disallowModification) {
+		errorUtils.throwError(sheet, 'DOMException',
+			"Failed to execute 'replaceSync' on '" + sheet.constructor.name + "': Not allowed.",
+			'NotAllowedError');
+	}
+	// Let rules be the result of running parse a stylesheet's contents from text.
+	var rules = new CSSOM.CSSRuleList();
+	CSSOM.parse(text, { styleSheet: sheet, cssRules: rules });
+	// If rules contains one or more @import rules, remove those rules from rules.
+	var i = 0;
+	while (i < rules.length) {
+		if (rules[i].constructor.name === 'CSSImportRule') {
+			rules.splice(i, 1);
+		} else {
+			i++;
+		}
+	}
+	// Set sheet's CSS rules to rules.
+	sheet.__cssRules = rules;
+}
+
 /**
  * NON-STANDARD
  * @return {string} serialize stylesheet
@@ -1736,20 +1936,33 @@ CSSOM.CSSKeyframesRule = function CSSKeyframesRule() {
 	});
 };
 
-CSSOM.CSSKeyframesRule.prototype = new CSSOM.CSSRule();
+CSSOM.CSSKeyframesRule.prototype = Object.create(CSSOM.CSSRule.prototype);
 CSSOM.CSSKeyframesRule.prototype.constructor = CSSOM.CSSKeyframesRule;
-CSSOM.CSSKeyframesRule.prototype.type = 7;
+
+Object.setPrototypeOf(CSSOM.CSSKeyframesRule, CSSOM.CSSRule);
+
+Object.defineProperty(CSSOM.CSSKeyframesRule.prototype, "type", {
+	value: 7,
+	writable: false
+});
 
 // http://www.opensource.apple.com/source/WebCore/WebCore-955.66.1/css/WebKitCSSKeyframesRule.cpp
 Object.defineProperty(CSSOM.CSSKeyframesRule.prototype, "cssText", {
   get: function() {
-    var cssTexts = [];
-    for (var i=0, length=this.cssRules.length; i < length; i++) {
-      cssTexts.push(this.cssRules[i].cssText);
-    }
+    var values = "";
+	var valuesArr = [" {"];
+	if (this.cssRules.length) {
+	valuesArr.push(this.cssRules.reduce(function(acc, rule){ 
+		if (rule.cssText !== "") {
+		acc.push(rule.cssText);
+		}
+		return acc;
+	}, []).join("\n  "));
+	}
+	values = valuesArr.join("\n  ") + "\n}";
     var cssWideKeywords = ['initial', 'inherit', 'revert', 'revert-layer', 'unset', 'none'];
     var processedName = cssWideKeywords.includes(this.name) ? '"' + this.name + '"' : this.name;
-    return "@" + (this._vendorPrefix || '') + "keyframes " + processedName + (processedName && " ") + "{" + (cssTexts.length ? "\n  " + cssTexts.join("\n  ") : "") + "\n}";
+    return "@" + (this._vendorPrefix || '') + "keyframes " + processedName + values;
   }
 });
 
@@ -1931,9 +2144,16 @@ CSSOM.CSSKeyframeRule = function CSSKeyframeRule() {
 	this.__style.parentRule = this;
 };
 
-CSSOM.CSSKeyframeRule.prototype = new CSSOM.CSSRule();
+CSSOM.CSSKeyframeRule.prototype = Object.create(CSSOM.CSSRule.prototype);
 CSSOM.CSSKeyframeRule.prototype.constructor = CSSOM.CSSKeyframeRule;
-CSSOM.CSSKeyframeRule.prototype.type = 8;
+
+Object.setPrototypeOf(CSSOM.CSSKeyframeRule, CSSOM.CSSRule);
+
+Object.defineProperty(CSSOM.CSSKeyframeRule.prototype, "type", {
+	value: 8,
+	writable: false
+});
+
 //FIXME
 //CSSOM.CSSKeyframeRule.prototype.insertRule = CSSStyleSheet.prototype.insertRule;
 //CSSOM.CSSKeyframeRule.prototype.deleteRule = CSSStyleSheet.prototype.deleteRule;
@@ -2024,6 +2244,7 @@ CSSOM.MatcherList.prototype = {
 /**
  * @constructor
  * @see https://developer.mozilla.org/en/CSS/@-moz-document
+ * @deprecated This rule is a non-standard Mozilla-specific extension and is not part of any official CSS specification.
  */
 CSSOM.CSSDocumentRule = function CSSDocumentRule() {
     CSSOM.CSSRule.call(this);
@@ -2031,9 +2252,16 @@ CSSOM.CSSDocumentRule = function CSSDocumentRule() {
     this.cssRules = new CSSOM.CSSRuleList();
 };
 
-CSSOM.CSSDocumentRule.prototype = new CSSOM.CSSRule();
+CSSOM.CSSDocumentRule.prototype = Object.create(CSSOM.CSSRule.prototype);
 CSSOM.CSSDocumentRule.prototype.constructor = CSSOM.CSSDocumentRule;
-CSSOM.CSSDocumentRule.prototype.type = 10;
+
+Object.setPrototypeOf(CSSOM.CSSDocumentRule, CSSOM.CSSRule);
+
+Object.defineProperty(CSSOM.CSSDocumentRule.prototype, "type", {
+	value: 10,
+	writable: false
+});
+
 //FIXME
 //CSSOM.CSSDocumentRule.prototype.insertRule = CSSStyleSheet.prototype.insertRule;
 //CSSOM.CSSDocumentRule.prototype.deleteRule = CSSStyleSheet.prototype.deleteRule;
@@ -2102,9 +2330,11 @@ CSSOM.CSSValueExpression = function CSSValueExpression(token, idx) {
 	this._idx = idx;
 };
 
-CSSOM.CSSValueExpression.prototype = new CSSOM.CSSValue();
+CSSOM.CSSValueExpression.prototype = Object.create(CSSOM.CSSValue.prototype);
 CSSOM.CSSValueExpression.prototype.constructor = CSSOM.CSSValueExpression;
 
+Object.setPrototypeOf(CSSOM.CSSValueExpression, CSSOM.CSSValue);
+
 /**
  * parse css expression() value
  *
@@ -2439,9 +2669,10 @@ CSSOM.CSSScopeRule = function CSSScopeRule() {
   this.__end = null;
 };
 
-CSSOM.CSSScopeRule.prototype = new CSSOM.CSSGroupingRule();
+CSSOM.CSSScopeRule.prototype = Object.create(CSSOM.CSSGroupingRule.prototype);
 CSSOM.CSSScopeRule.prototype.constructor = CSSOM.CSSScopeRule;
 
+Object.setPrototypeOf(CSSOM.CSSScopeRule, CSSOM.CSSGroupingRule);
 
 Object.defineProperties(CSSOM.CSSScopeRule.prototype, {
   type: {
@@ -2450,11 +2681,18 @@ Object.defineProperties(CSSOM.CSSScopeRule.prototype, {
   },
   cssText: {
     get: function () {
-      var cssTexts = [];
-      for (var i = 0, length = this.cssRules.length; i < length; i++) {
-        cssTexts.push(this.cssRules[i].cssText);
+			var values = "";
+			var valuesArr = [" {"];
+      if (this.cssRules.length) {
+        valuesArr.push(this.cssRules.reduce(function(acc, rule){ 
+          if (rule.cssText !== "") {
+            acc.push(rule.cssText);
+          }
+          return acc;
+        }, []).join("\n  "));
       }
-      return "@scope " + (this.start ? "(" + this.start + ") " : "") + (this.end ? "to (" + this.end + ") " : "") + "{" + (cssTexts.length ? "\n  " + cssTexts.join("\n  ") : "") + "\n}";
+      values = valuesArr.join("\n  ") + "\n}";
+      return "@scope" + (this.start ? " (" + this.start + ")" : "") + (this.end ? " to (" + this.end + ")" : "") + values;
     },
     configurable: true,
     enumerable: true,
@@ -2483,21 +2721,32 @@ CSSOM.CSSLayerBlockRule = function CSSLayerBlockRule() {
   this.name = "";
 };
 
-CSSOM.CSSLayerBlockRule.prototype = new CSSOM.CSSGroupingRule();
+CSSOM.CSSLayerBlockRule.prototype = Object.create(CSSOM.CSSGroupingRule.prototype);
 CSSOM.CSSLayerBlockRule.prototype.constructor = CSSOM.CSSLayerBlockRule;
-CSSOM.CSSLayerBlockRule.prototype.type = 18;
+
+Object.setPrototypeOf(CSSOM.CSSLayerBlockRule, CSSOM.CSSRule);
+
+Object.defineProperty(CSSOM.CSSLayerBlockRule.prototype, "type", {
+	value: 18,
+	writable: false
+});
 
 Object.defineProperties(CSSOM.CSSLayerBlockRule.prototype, {
   cssText: {
     get: function () {
-      var cssTexts = [];
-      for (var i = 0, length = this.cssRules.length; i < length; i++) {
-        cssTexts.push(this.cssRules[i].cssText);
+			var values = "";
+			var valuesArr = [" {"];
+      if (this.cssRules.length) {
+        valuesArr.push(this.cssRules.reduce(function(acc, rule){ 
+          if (rule.cssText !== "") {
+            acc.push(rule.cssText);
+          }
+          return acc;
+        }, []).join("\n  "));
       }
-      return "@layer " + this.name + (this.name && " ") + "{" + (cssTexts.length ? "\n  " + cssTexts.join("\n  ") : "") + "\n}";
-    },
-    configurable: true,
-    enumerable: true,
+      values = valuesArr.join("\n  ") + "\n}";
+      return "@layer" + (this.name ? " " + this.name : "") + values;
+    }
   },
 });
 
@@ -2513,17 +2762,21 @@ CSSOM.CSSLayerStatementRule = function CSSLayerStatementRule() {
   this.nameList = [];
 };
 
-CSSOM.CSSLayerStatementRule.prototype = new CSSOM.CSSRule();
+CSSOM.CSSLayerStatementRule.prototype = Object.create(CSSOM.CSSRule.prototype);
 CSSOM.CSSLayerStatementRule.prototype.constructor = CSSOM.CSSLayerStatementRule;
-CSSOM.CSSLayerStatementRule.prototype.type = 0;
+
+Object.setPrototypeOf(CSSOM.CSSLayerStatementRule, CSSOM.CSSRule);
+
+Object.defineProperty(CSSOM.CSSLayerStatementRule.prototype, "type", {
+	value: 0,
+	writable: false
+});
 
 Object.defineProperties(CSSOM.CSSLayerStatementRule.prototype, {
   cssText: {
     get: function () {
       return "@layer " + this.nameList.join(", ") + ";";
-    },
-    configurable: true,
-    enumerable: true,
+    }
   },
 });
 
@@ -2541,9 +2794,11 @@ CSSOM.CSSPageRule = function CSSPageRule() {
 	this.__style.parentRule = this;
 };
 
-CSSOM.CSSPageRule.prototype = new CSSOM.CSSGroupingRule();
+CSSOM.CSSPageRule.prototype = Object.create(CSSOM.CSSGroupingRule.prototype);
 CSSOM.CSSPageRule.prototype.constructor = CSSOM.CSSPageRule;
 
+Object.setPrototypeOf(CSSOM.CSSPageRule, CSSOM.CSSGroupingRule);
+
 Object.defineProperty(CSSOM.CSSPageRule.prototype, "type", {
 	value: 6,
 	writable: false
@@ -2623,171 +2878,24 @@ Object.defineProperty(CSSOM.CSSPageRule.prototype, "style", {
 
 Object.defineProperty(CSSOM.CSSPageRule.prototype, "cssText", {
 	get: function() {
-        var values = ""
+        var values = "";
         if (this.cssRules.length) {
             var valuesArr = [" {"];
             this.style.cssText && valuesArr.push(this.style.cssText);
-            valuesArr.push(this.cssRules.map(function(rule){ return rule.cssText }).join("\n  "));
-            values = valuesArr.join("\n  ") + "\n}"
+            valuesArr.push(this.cssRules.reduce(function(acc, rule){ 
+				if (rule.cssText !== "") {
+					acc.push(rule.cssText);
+				}
+				return acc;
+			}, []).join("\n  "));
+            values = valuesArr.join("\n  ") + "\n}";
         } else {
             values = " {" + (this.style.cssText ? " " + this.style.cssText : "") + " }";
         }
 		return "@page" + (this.selectorText ? " " + this.selectorText : "") + values;
-	},
-	set: function(cssText) {
-		if (typeof value === "string") {
-			var rule = CSSOM.CSSPageRule.parse(cssText);
-			this.__style = rule.style;
-			this.selectorText = rule.selectorText;
-		}
 	}
 });
 
-/**
- * NON-STANDARD
- * lightweight version of parse.js.
- * @param {string} ruleText
- * @return CSSPageRule
- */
-CSSOM.CSSPageRule.parse = function(ruleText) {
-	var i = 0;
-	var state = "selector";
-	var index;
-	var j = i;
-	var buffer = "";
-
-	var SIGNIFICANT_WHITESPACE = {
-		"selector": true,
-		"value": true
-	};
-
-	var pageRule = new CSSOM.CSSPageRule();
-	var name, priority="";
-
-	for (var character; (character = ruleText.charAt(i)); i++) {
-
-		switch (character) {
-
-		case " ":
-		case "\t":
-		case "\r":
-		case "\n":
-		case "\f":
-			if (SIGNIFICANT_WHITESPACE[state]) {
-				// Squash 2 or more white-spaces in the row into 1
-				switch (ruleText.charAt(i - 1)) {
-					case " ":
-					case "\t":
-					case "\r":
-					case "\n":
-					case "\f":
-						break;
-					default:
-						buffer += " ";
-						break;
-				}
-			}
-			break;
-
-		// String
-		case '"':
-			j = i + 1;
-			index = ruleText.indexOf('"', j) + 1;
-			if (!index) {
-				throw '" is missing';
-			}
-			buffer += ruleText.slice(i, index);
-			i = index - 1;
-			break;
-
-		case "'":
-			j = i + 1;
-			index = ruleText.indexOf("'", j) + 1;
-			if (!index) {
-				throw "' is missing";
-			}
-			buffer += ruleText.slice(i, index);
-			i = index - 1;
-			break;
-
-		// Comment
-		case "/":
-			if (ruleText.charAt(i + 1) === "*") {
-				i += 2;
-				index = ruleText.indexOf("*/", i);
-				if (index === -1) {
-					throw new SyntaxError("Missing */");
-				} else {
-					i = index + 1;
-				}
-			} else {
-				buffer += character;
-			}
-			break;
-
-		case "{":
-			if (state === "selector") {
-				pageRule.selectorText = buffer.trim();
-				buffer = "";
-				state = "name";
-			}
-			break;
-
-		case ":":
-			if (state === "name") {
-				name = buffer.trim();
-				buffer = "";
-				state = "value";
-			} else {
-				buffer += character;
-			}
-			break;
-
-		case "!":
-			if (state === "value" && ruleText.indexOf("!important", i) === i) {
-				priority = "important";
-				i += "important".length;
-			} else {
-				buffer += character;
-			}
-			break;
-
-		case ";":
-			if (state === "value") {
-				pageRule.style.setProperty(name, buffer.trim(), priority);
-				priority = "";
-				buffer = "";
-				state = "name";
-			} else {
-				buffer += character;
-			}
-			break;
-
-		case "}":
-			if (state === "value") {
-				pageRule.style.setProperty(name, buffer.trim(), priority);
-				priority = "";
-				buffer = "";
-			} else if (state === "name") {
-				break;
-			} else {
-				buffer += character;
-			}
-			state = "selector";
-			break;
-
-		default:
-			buffer += character;
-			break;
-
-		}
-	}
-
-	return pageRule;
-
-};
-
-
 
 
 
@@ -2796,7 +2904,11 @@ CSSOM.CSSPageRule.parse = function(ruleText) {
  *
  * @param {string} token - The CSS string to parse.
  * @param {object} [opts] - Optional parsing options.
- * @param {object} [opts.globalObject] - An optional global object to attach to the stylesheet. Useful on jsdom webplatform tests.
+ * @param {object} [opts.globalObject] - @deprecated This property will be removed in the next release. Use CSSOM.setup({ globalObject }) instead. - An optional global object to override globals and window. Useful on jsdom webplatform tests.
+ * @param {Element | ProcessingInstruction} [opts.ownerNode] - The owner node of the stylesheet.
+ * @param {CSSRule} [opts.ownerRule] - The owner rule of the stylesheet.
+ * @param {CSSOM.CSSStyleSheet} [opts.styleSheet] - Reuse a style sheet instead of creating a new one (e.g. as `parentStyleSheet`)
+ * @param {CSSOM.CSSRuleList} [opts.cssRules] - Prepare all rules in this list instead of mutating the style sheet continually
  * @param {function|boolean} [errorHandler] - Optional error handler function or `true` to use `console.error`.
  * @returns {CSSOM.CSSStyleSheet} The parsed CSSStyleSheet object.
  */
@@ -2843,14 +2955,35 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 		"pageBlock": true
 	};
 
-	var styleSheet = new CSSOM.CSSStyleSheet();
+	var styleSheet;
+	if (opts && opts.styleSheet) {
+		styleSheet = opts.styleSheet;
+	} else {
+		styleSheet = new CSSOM.CSSStyleSheet()
+		styleSheet.__constructed = false;
+	}
+
+	var topScope;
+	if (opts && opts.cssRules) {
+		topScope = { cssRules: opts.cssRules };
+	} else {
+		topScope = styleSheet;
+	}
 
 	if (opts && opts.globalObject) {
-		styleSheet.__globalObject = opts.globalObject;
+		CSSOM.setup({ globalObject: opts.globalObject });
+	}
+
+	if (opts && opts.ownerNode) {
+		styleSheet.__ownerNode = opts.ownerNode;
+	}
+
+	if (opts && opts.ownerRule) {
+		styleSheet.__ownerRule = opts.ownerRule;
 	}
 
 	// @type CSSStyleSheet|CSSMediaRule|CSSContainerRule|CSSSupportsRule|CSSFontFaceRule|CSSKeyframesRule|CSSDocumentRule
-	var currentScope = styleSheet;
+	var currentScope = topScope;
 
 	// @type CSSMediaRule|CSSContainerRule|CSSSupportsRule|CSSKeyframesRule|CSSDocumentRule
 	var parentRule;
@@ -2858,7 +2991,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, scopeRule, pageRule, layerBlockRule, layerStatementRule, nestedSelectorRule, namespaceRule;
+	var name, priority = "", styleRule, mediaRule, containerRule, counterStyleRule, supportsRule, importRule, fontFaceRule, keyframesRule, documentRule, hostRule, startingStyleRule, scopeRule, pageRule, layerBlockRule, layerStatementRule, nestedSelectorRule, namespaceRule;
 
 	// Track defined namespace prefixes for validation
 	var definedNamespacePrefixes = {};
@@ -2956,14 +3089,14 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 		var ruleClosingMatch = matchBalancedBlock(str, fromIndex);
 		if (ruleClosingMatch) {
 			var ignoreRange = ruleClosingMatch.index + ruleClosingMatch[0].length;
-			i+= ignoreRange;
+			i += ignoreRange;
 			if (token.charAt(i) === '}') {
 				i -= 1;
 			}
 		} else {
 			i += str.length;
 		}
-		return i;	
+		return i;
 	}
 
 	/**
@@ -2973,29 +3106,29 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 	 */
 	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();
 		}
@@ -3005,7 +3138,7 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 		if (hasOnlyEnd) {
 			endSelector = parts[0].slice(4, -1).trim();
 		}
-		
+
 		return {
 			startSelector: startSelector,
 			endSelector: endSelector,
@@ -3043,11 +3176,11 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 		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;
@@ -3098,7 +3231,7 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 				}
 			}
 		}
-		
+
 		// Check if everything is balanced
 		if (useStack) {
 			return stack.length === 0 && bracketDepth === 0 && !inSingleQuote && !inDoubleQuote && !inAttr;
@@ -3148,7 +3281,7 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 			/(?:^|[\s>+~,\[])cue\s*\(/i,
 			/(?:^|[\s>+~,\[])cue-region\s*\(/i
 		];
-		
+
 		for (var i = 0; i < invalidPatterns.length; i++) {
 			if (invalidPatterns[i].test(selector)) {
 				return true;
@@ -3179,7 +3312,7 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 		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;
+		var shouldPerformCheck = cannotBeNested && currentScope !== topScope ? false : true;
 		// First, check if there is no invalid characters just after the at-rule
 		if (shouldPerformCheck && ruleSlice.search(ruleRegExp) === 0) {
 			// Find the closest allowed character before the at-rule (a opening or closing brace, a semicolon or a comment ending)
@@ -3194,7 +3327,7 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 				isValid = true;
 			}
 		}
-		
+
 		// Additional validation for @scope rule
 		if (isValid && atRuleKey === "@scope") {
 			var openBraceIndex = ruleSlice.indexOf('{');
@@ -3213,7 +3346,7 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 					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 === '')) {
@@ -3249,13 +3382,13 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 			if (openBraceIndex !== -1) {
 				// Extract the rule prelude (everything between the at-rule and {)
 				var rulePrelude = ruleSlice.slice(0, openBraceIndex).trim();
-				
+
 				// Skip past at-rule keyword and whitespace
 				var preludeContent = rulePrelude.slice("@page".length).trim();
 
 				if (preludeContent.length > 0) {
 					var trimmedValue = preludeContent.trim();
-            
+
 					// Empty selector is valid for @page
 					if (trimmedValue !== '') {
 						// Parse @page selectorText for page name and pseudo-pages
@@ -3279,7 +3412,7 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 
 							// Validate pseudo-pages if present
 							if (pseudoPages) {
-								var pseudos = pseudoPages.split(':').filter(function(p) { return p; });
+								var pseudos = pseudoPages.split(':').filter(function (p) { return p; });
 								var validPseudos = ['left', 'right', 'first', 'blank'];
 								var allValid = true;
 								for (var j = 0; j < pseudos.length; j++) {
@@ -3288,7 +3421,7 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 										break;
 									}
 								}
-								
+
 								if (!allValid) {
 									isValid = false;
 								}
@@ -3297,21 +3430,21 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 							isValid = false;
 						}
 					}
-					
+
 				}
 			}
 		}
-		
+
 		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
-			
+
 			// 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) {
+			if (ruleStatementMatch && currentScope !== topScope) {
 				var ignoreEnd = ruleStatementMatch[0].indexOf(";");
 				i += ruleStatementMatch.index + ignoreEnd;
 				return;
@@ -3320,7 +3453,7 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 			// 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] === ";" ) {
+				if (ruleSemicolonAndOpeningBraceMatch && ruleSemicolonAndOpeningBraceMatch[1] === ";") {
 					// Ignore the rule block until the semicolon
 					i += ruleSemicolonAndOpeningBraceMatch.index + ruleSemicolonAndOpeningBraceMatch[0].length;
 					state = "before-selector";
@@ -3336,6 +3469,255 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 		}
 	}
 
+	// Helper functions for looseSelectorValidator
+	// Defined outside to avoid recreation on every validation call
+
+	/**
+	 * Check if character is a valid identifier start
+	 * @param {string} c - Character to check
+	 * @returns {boolean}
+	 */
+	function isIdentStart(c) {
+		return /[a-zA-Z_\u00A0-\uFFFF]/.test(c);
+	}
+
+	/**
+	 * Check if character is a valid identifier character
+	 * @param {string} c - Character to check
+	 * @returns {boolean}
+	 */
+	function isIdentChar(c) {
+		return /[a-zA-Z0-9_\u00A0-\uFFFF\-]/.test(c);
+	}
+
+	/**
+	 * Helper function to validate CSS selector syntax without regex backtracking.
+	 * Iteratively parses the selector string to identify valid components.
+	 * 
+	 * Supports:
+	 * - Escaped special characters (e.g., .class\!, #id\@name)
+	 * - Namespace selectors (ns|element, *|element, |element)
+	 * - All standard CSS selectors (class, ID, type, attribute, pseudo, etc.)
+	 * - Combinators (>, +, ~, whitespace)
+	 * - Nesting selector (&)
+	 * 
+	 * This approach eliminates exponential backtracking by using explicit character-by-character
+	 * parsing instead of nested quantifiers in regex.
+	 * 
+	 * @param {string} selector - The selector to validate
+	 * @returns {boolean} - True if valid selector syntax
+	 */
+	function looseSelectorValidator(selector) {
+		if (!selector || selector.length === 0) {
+			return false;
+		}
+
+		var i = 0;
+		var len = selector.length;
+		var hasMatchedComponent = false;
+
+		// Helper: Skip escaped character (backslash + any char)
+		function skipEscape() {
+			if (i < len && selector[i] === '\\') {
+				i += 2; // Skip backslash and next character
+				return true;
+			}
+			return false;
+		}
+
+		// Helper: Parse identifier (with possible escapes)
+		function parseIdentifier() {
+			var start = i;
+			while (i < len) {
+				if (skipEscape()) {
+					continue;
+				} else if (isIdentChar(selector[i])) {
+					i++;
+				} else {
+					break;
+				}
+			}
+			return i > start;
+		}
+
+		// Helper: Parse namespace prefix (optional)
+		function parseNamespace() {
+			var start = i;
+
+			// Match: *| or identifier| or |
+			if (i < len && selector[i] === '*') {
+				i++;
+			} else if (i < len && (isIdentStart(selector[i]) || selector[i] === '\\')) {
+				parseIdentifier();
+			}
+
+			if (i < len && selector[i] === '|') {
+				i++;
+				return true;
+			}
+
+			// Rollback if no pipe found
+			i = start;
+			return false;
+		}
+
+		// Helper: Parse pseudo-class/element arguments (with balanced parens)
+		function parsePseudoArgs() {
+			if (i >= len || selector[i] !== '(') {
+				return false;
+			}
+
+			i++; // Skip opening paren
+			var depth = 1;
+			var inString = false;
+			var stringChar = '';
+
+			while (i < len && depth > 0) {
+				var c = selector[i];
+
+				if (c === '\\' && i + 1 < len) {
+					i += 2; // Skip escaped character
+				} else if (!inString && (c === '"' || c === '\'')) {
+					inString = true;
+					stringChar = c;
+					i++;
+				} else if (inString && c === stringChar) {
+					inString = false;
+					i++;
+				} else if (!inString && c === '(') {
+					depth++;
+					i++;
+				} else if (!inString && c === ')') {
+					depth--;
+					i++;
+				} else {
+					i++;
+				}
+			}
+
+			return depth === 0;
+		}
+
+		// Main parsing loop
+		while (i < len) {
+			var matched = false;
+			var start = i;
+
+			// Skip whitespace
+			while (i < len && /\s/.test(selector[i])) {
+				i++;
+			}
+			if (i > start) {
+				hasMatchedComponent = true;
+				continue;
+			}
+
+			// Match combinators: >, +, ~
+			if (i < len && /[>+~]/.test(selector[i])) {
+				i++;
+				hasMatchedComponent = true;
+				// Skip trailing whitespace
+				while (i < len && /\s/.test(selector[i])) {
+					i++;
+				}
+				continue;
+			}
+
+			// Match nesting selector: &
+			if (i < len && selector[i] === '&') {
+				i++;
+				hasMatchedComponent = true;
+				matched = true;
+			}
+			// Match class selector: .identifier
+			else if (i < len && selector[i] === '.') {
+				i++;
+				if (parseIdentifier()) {
+					hasMatchedComponent = true;
+					matched = true;
+				}
+			}
+			// Match ID selector: #identifier
+			else if (i < len && selector[i] === '#') {
+				i++;
+				if (parseIdentifier()) {
+					hasMatchedComponent = true;
+					matched = true;
+				}
+			}
+			// Match pseudo-class/element: :identifier or ::identifier
+			else if (i < len && selector[i] === ':') {
+				i++;
+				if (i < len && selector[i] === ':') {
+					i++; // Pseudo-element
+				}
+				if (parseIdentifier()) {
+					parsePseudoArgs(); // Optional arguments
+					hasMatchedComponent = true;
+					matched = true;
+				}
+			}
+			// Match attribute selector: [...]
+			else if (i < len && selector[i] === '[') {
+				i++;
+				var depth = 1;
+				while (i < len && depth > 0) {
+					if (selector[i] === '\\') {
+						i += 2;
+					} else if (selector[i] === '\'') {
+						i++;
+						while (i < len && selector[i] !== '\'') {
+							if (selector[i] === '\\') i += 2;
+							else i++;
+						}
+						if (i < len) i++; // Skip closing quote
+					} else if (selector[i] === '"') {
+						i++;
+						while (i < len && selector[i] !== '"') {
+							if (selector[i] === '\\') i += 2;
+							else i++;
+						}
+						if (i < len) i++; // Skip closing quote
+					} else if (selector[i] === '[') {
+						depth++;
+						i++;
+					} else if (selector[i] === ']') {
+						depth--;
+						i++;
+					} else {
+						i++;
+					}
+				}
+				if (depth === 0) {
+					hasMatchedComponent = true;
+					matched = true;
+				}
+			}
+			// Match type selector with optional namespace: [namespace|]identifier
+			else if (i < len && (isIdentStart(selector[i]) || selector[i] === '\\' || selector[i] === '*' || selector[i] === '|')) {
+				parseNamespace(); // Optional namespace prefix
+
+				if (i < len && selector[i] === '*') {
+					i++; // Universal selector
+					hasMatchedComponent = true;
+					matched = true;
+				} else if (i < len && (isIdentStart(selector[i]) || selector[i] === '\\')) {
+					if (parseIdentifier()) {
+						hasMatchedComponent = true;
+						matched = true;
+					}
+				}
+			}
+
+			// If no match found, invalid selector
+			if (!matched && i === start) {
+				return false;
+			}
+		}
+
+		return hasMatchedComponent;
+	}
+
 	/**
 	 * Validates a basic CSS selector, allowing for deeply nested balanced parentheses in pseudo-classes.
 	 * This function replaces the previous basicSelectorRegExp.
@@ -3360,6 +3742,12 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 	 * @returns {boolean}
 	 */
 	function basicSelectorValidator(selector) {
+		// Guard against extremely long selectors to prevent potential regex performance issues
+		// Reasonable selectors are typically under 1000 characters
+		if (selector.length > 10000) {
+			return false;
+		}
+
 		// Validate balanced syntax with attribute tracking and stack-based parentheses matching
 		if (!validateBalancedSyntax(selector, true, true)) {
 			return false;
@@ -3382,33 +3770,71 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 
 		// Check for invalid pseudo-class usage with quoted strings
 		// Pseudo-classes like :lang(), :dir(), :nth-*() should not accept quoted strings
-		var pseudoPattern = /::?([a-zA-Z][\w-]*)\(([^)]+)\)/g;
-		var pseudoMatch;
-		while ((pseudoMatch = pseudoPattern.exec(selector)) !== null) {
-			var pseudoName = pseudoMatch[1];
-			var pseudoContent = pseudoMatch[2];
-			
-			// List of pseudo-classes that should not accept quoted strings
-			// :lang() - accepts language codes: en, fr-CA
-			// :dir() - accepts direction: ltr, rtl
-			// :nth-*() - accepts An+B notation: 2n+1, odd, even
-			var noQuotesPseudos = ['lang', 'dir', 'nth-child', 'nth-last-child', 'nth-of-type', 'nth-last-of-type'];
-			
-			for (var i = 0; i < noQuotesPseudos.length; i++) {
-				if (pseudoName === noQuotesPseudos[i] && /['"]/.test(pseudoContent)) {
-					return false;
+		// Using iterative parsing instead of regex to avoid exponential backtracking
+		var noQuotesPseudos = ['lang', 'dir', 'nth-child', 'nth-last-child', 'nth-of-type', 'nth-last-of-type'];
+
+		for (var idx = 0; idx < selector.length; idx++) {
+			// Look for pseudo-class/element start
+			if (selector[idx] === ':') {
+				var pseudoStart = idx;
+				idx++;
+
+				// Skip second colon for pseudo-elements
+				if (idx < selector.length && selector[idx] === ':') {
+					idx++;
+				}
+
+				// Extract pseudo name
+				var nameStart = idx;
+				while (idx < selector.length && /[a-zA-Z0-9\-]/.test(selector[idx])) {
+					idx++;
+				}
+
+				if (idx === nameStart) {
+					continue; // No name found
+				}
+
+				var pseudoName = selector.substring(nameStart, idx).toLowerCase();
+
+				// Check if this pseudo has arguments
+				if (idx < selector.length && selector[idx] === '(') {
+					idx++;
+					var contentStart = idx;
+					var depth = 1;
+
+					// Find matching closing paren (handle nesting)
+					while (idx < selector.length && depth > 0) {
+						if (selector[idx] === '\\') {
+							idx += 2; // Skip escaped character
+						} else if (selector[idx] === '(') {
+							depth++;
+							idx++;
+						} else if (selector[idx] === ')') {
+							depth--;
+							idx++;
+						} else {
+							idx++;
+						}
+					}
+
+					if (depth === 0) {
+						var pseudoContent = selector.substring(contentStart, idx - 1);
+
+						// Check if this pseudo should not have quoted strings
+						for (var j = 0; j < noQuotesPseudos.length; j++) {
+							if (pseudoName === noQuotesPseudos[j] && /['"]/.test(pseudoContent)) {
+								return false;
+							}
+						}
+					}
 				}
 			}
 		}
 
-		// Fallback to a loose regexp for the overall selector structure (without deep paren matching)
-		// This is similar to the original, but without nested paren limitations
-		// Modified to support namespace selectors: *|element, prefix|element, |element
-		// Fixed attribute selector regex to properly handle |=, ~=, ^=, $=, *= operators
-		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);
+		// Use the iterative validator to avoid regex backtracking issues
+		return looseSelectorValidator(selector);
 	}
-	
+
 	/**
 	 * Regular expression to match CSS pseudo-classes with arguments.
 	 *
@@ -3424,9 +3850,96 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 	 *   - :nth-child(2n+1)
 	 *   - :has(.sel:nth-child(3n))
 	 *   - :not(".foo, .bar")
-	 * @type {RegExp}
+	 *
+	 * REPLACED WITH FUNCTION to avoid exponential backtracking.
 	 */
-	var globalPseudoClassRegExp = /:([a-zA-Z-]+)\(((?:[^()"]+|"[^"]*"|'[^']*'|\((?:[^()"]+|"[^"]*"|'[^']*')*\))*?)\)/g;
+
+	/**
+	 * Extract pseudo-classes with arguments from a selector using iterative parsing.
+	 * Replaces the previous globalPseudoClassRegExp to avoid exponential backtracking.
+	 * 
+	 * Handles:
+	 * - Regular content without parentheses or quotes
+	 * - Single-quoted strings
+	 * - Double-quoted strings  
+	 * - Nested parentheses (arbitrary depth)
+	 * 
+	 * @param {string} selector - The CSS selector to parse
+	 * @returns {Array} Array of matches, each with: [fullMatch, pseudoName, pseudoArgs, startIndex]
+	 */
+	function extractPseudoClasses(selector) {
+		var matches = [];
+
+		for (var i = 0; i < selector.length; i++) {
+			// Look for pseudo-class start (single or double colon)
+			if (selector[i] === ':') {
+				var pseudoStart = i;
+				i++;
+
+				// Skip second colon for pseudo-elements (::)
+				if (i < selector.length && selector[i] === ':') {
+					i++;
+				}
+
+				// Extract pseudo name
+				var nameStart = i;
+				while (i < selector.length && /[a-zA-Z\-]/.test(selector[i])) {
+					i++;
+				}
+
+				if (i === nameStart) {
+					continue; // No name found
+				}
+
+				var pseudoName = selector.substring(nameStart, i);
+
+				// Check if this pseudo has arguments
+				if (i < selector.length && selector[i] === '(') {
+					i++;
+					var argsStart = i;
+					var depth = 1;
+					var inSingleQuote = false;
+					var inDoubleQuote = false;
+
+					// Find matching closing paren (handle nesting and strings)
+					while (i < selector.length && depth > 0) {
+						var ch = selector[i];
+
+						if (ch === '\\') {
+							i += 2; // Skip escaped character
+						} else if (ch === "'" && !inDoubleQuote) {
+							inSingleQuote = !inSingleQuote;
+							i++;
+						} else if (ch === '"' && !inSingleQuote) {
+							inDoubleQuote = !inDoubleQuote;
+							i++;
+						} else if (ch === '(' && !inSingleQuote && !inDoubleQuote) {
+							depth++;
+							i++;
+						} else if (ch === ')' && !inSingleQuote && !inDoubleQuote) {
+							depth--;
+							i++;
+						} else {
+							i++;
+						}
+					}
+
+					if (depth === 0) {
+						var pseudoArgs = selector.substring(argsStart, i - 1);
+						var fullMatch = selector.substring(pseudoStart, i);
+
+						// Store match in same format as regex: [fullMatch, pseudoName, pseudoArgs, startIndex]
+						matches.push([fullMatch, pseudoName, pseudoArgs, pseudoStart]);
+					}
+
+					// Move back one since loop will increment
+					i--;
+				}
+			}
+		}
+
+		return matches;
+	}
 
 	/**
 	 * Parses a CSS selector string and splits it into parts, handling nested parentheses.
@@ -3521,18 +4034,30 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 			return validatedSelectorsCache[selector];
 		}
 
-		// Use a non-global regex to find all pseudo-classes with arguments
-		var pseudoClassMatches = [];
-		var pseudoClassRegExp = new RegExp(globalPseudoClassRegExp.source, globalPseudoClassRegExp.flags);
-		var match;
-		while ((match = pseudoClassRegExp.exec(selector)) !== null) {
-			pseudoClassMatches.push(match);
-		}
+		// Use function-based parsing to extract pseudo-classes (avoids backtracking)
+		var pseudoClassMatches = extractPseudoClasses(selector);
 
 		for (var j = 0; j < pseudoClassMatches.length; j++) {
 			var pseudoClass = pseudoClassMatches[j][1];
 			if (selectorListPseudoClasses.hasOwnProperty(pseudoClass)) {
 				var nestedSelectors = parseAndSplitNestedSelectors(pseudoClassMatches[j][2]);
+
+				// Check if ANY selector in the list contains & (nesting selector)
+				// If so, skip validation for the entire selector list since & will be replaced at runtime
+				var hasAmpersand = false;
+				for (var k = 0; k < nestedSelectors.length; k++) {
+					if (/&/.test(nestedSelectors[k])) {
+						hasAmpersand = true;
+						break;
+					}
+				}
+
+				// If any selector has &, skip validation for this entire pseudo-class
+				if (hasAmpersand) {
+					continue;
+				}
+
+				// Otherwise, validate each selector normally
 				for (var i = 0; i < nestedSelectors.length; i++) {
 					var nestedSelector = nestedSelectors[i];
 					if (!validatedSelectorsCache.hasOwnProperty(nestedSelector)) {
@@ -3569,10 +4094,10 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 		var inAttr = false;
 		var inSingleQuote = false;
 		var inDoubleQuote = false;
-		
+
 		for (var i = 0; i < selector.length; i++) {
 			var char = selector[i];
-			
+
 			if (inSingleQuote) {
 				if (char === "'" && selector[i - 1] !== "\\") {
 					inSingleQuote = false;
@@ -3599,18 +4124,18 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 				}
 			}
 		}
-		
+
 		if (pipeIndex === -1) {
 			return true; // No namespace, always valid
 		}
-		
+
 		var namespacePrefix = selector.substring(0, pipeIndex);
-		
+
 		// Universal namespace (*|) and default namespace (|) are always valid
 		if (namespacePrefix === '*' || namespacePrefix === '') {
 			return true;
 		}
-		
+
 		// Check if the custom namespace prefix is defined
 		return definedNamespacePrefixes.hasOwnProperty(namespacePrefix);
 	}
@@ -3619,22 +4144,92 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 	 * Processes a CSS selector text 
 	 * 
 	 * @param {string} selectorText - The CSS selector text to process
-	 * @returns {string} The processed selector text with normalized whitespace
+	 * @returns {string} The processed selector text with normalized whitespace and invalid selectors removed
 	 */
 	function processSelectorText(selectorText) {
-		// TODO: Remove invalid selectors that appears inside pseudo classes
-		// TODO: The same processing here needs to be reused in CSSStyleRule.selectorText setter
-		// TODO: Move these validation logic to a shared function to be reused in CSSStyleRule.selectorText setter
-
-		/**
-		 * Normalizes whitespace and preserving quoted strings.
-		 * Replaces all newline characters (CRLF, CR, or LF) with spaces while keeping quoted
-		 * strings (single or double quotes) intact, including any escaped characters within them.
-		 */
-		return selectorText.replace(/(['"])(?:\\.|[^\\])*?\1|(\r\n|\r|\n)/g, function(match, _, newline) {
+		// Normalize whitespace first
+		var normalized = selectorText.replace(/(['"])(?:\\.|[^\\])*?\1|(\r\n|\r|\n)/g, function (match, _, newline) {
 			if (newline) return " ";
 			return match;
 		});
+
+		// Recursively process pseudo-classes to handle nesting
+		return processNestedPseudoClasses(normalized);
+	}
+
+	/**
+	 * Recursively processes pseudo-classes to filter invalid selectors
+	 * 
+	 * @param {string} selectorText - The CSS selector text to process
+	 * @param {number} depth - Current recursion depth (to prevent infinite loops)
+	 * @returns {string} The processed selector text with invalid selectors removed
+	 */
+	function processNestedPseudoClasses(selectorText, depth) {
+		// Prevent infinite recursion
+		if (typeof depth === 'undefined') {
+			depth = 0;
+		}
+		if (depth > 10) {
+			return selectorText;
+		}
+
+		var pseudoClassMatches = extractPseudoClasses(selectorText);
+
+		// If no pseudo-classes found, return as-is
+		if (pseudoClassMatches.length === 0) {
+			return selectorText;
+		}
+
+		// Build result by processing matches from right to left (to preserve positions)
+		var result = selectorText;
+
+		for (var j = pseudoClassMatches.length - 1; j >= 0; j--) {
+			var pseudoClass = pseudoClassMatches[j][1];
+			if (selectorListPseudoClasses.hasOwnProperty(pseudoClass)) {
+				var fullMatch = pseudoClassMatches[j][0];
+				var pseudoArgs = pseudoClassMatches[j][2];
+				var matchStart = pseudoClassMatches[j][3];
+
+				// Check if ANY selector contains & BEFORE processing
+				var nestedSelectorsRaw = parseAndSplitNestedSelectors(pseudoArgs);
+				var hasAmpersand = false;
+				for (var k = 0; k < nestedSelectorsRaw.length; k++) {
+					if (/&/.test(nestedSelectorsRaw[k])) {
+						hasAmpersand = true;
+						break;
+					}
+				}
+
+				// If & is present, skip all processing (keep everything unchanged)
+				if (hasAmpersand) {
+					continue;
+				}
+
+				// Recursively process the arguments
+				var processedArgs = processNestedPseudoClasses(pseudoArgs, depth + 1);
+				var nestedSelectors = parseAndSplitNestedSelectors(processedArgs);
+
+				// Filter out invalid selectors
+				var validSelectors = [];
+				for (var i = 0; i < nestedSelectors.length; i++) {
+					var nestedSelector = nestedSelectors[i];
+					if (basicSelectorValidator(nestedSelector)) {
+						validSelectors.push(nestedSelector);
+					}
+				}
+
+				// Reconstruct the pseudo-class with only valid selectors
+				var newArgs = validSelectors.join(', ');
+				var newPseudoClass = ':' + pseudoClass + '(' + newArgs + ')';
+
+				// Replace in the result string using position (processing right to left preserves positions)
+				result = result.substring(0, matchStart) + newPseudoClass + result.substring(matchStart + fullMatch.length);
+			}
+		}
+
+		return result;
+
+		return normalized;
 	}
 
 	/**
@@ -3648,6 +4243,12 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 		// TODO: The same validations here needs to be reused in CSSStyleRule.selectorText setter
 		// TODO: Move these validation logic to a shared function to be reused in CSSStyleRule.selectorText setter
 
+		// Check for empty selector lists in pseudo-classes (e.g., :is(), :not(), :where(), :has())
+		// These are invalid after filtering out invalid selectors
+		if (/:(?:is|not|where|has)\(\s*\)/.test(selectorText)) {
+			return false;
+		}
+
 		// Check for newlines inside single or double quotes using regex
 		// This matches any quoted string (single or double) containing a newline
 		var quotedNewlineRegExp = /(['"])(?:\\.|[^\\])*?\1/g;
@@ -3668,6 +4269,12 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 		return true;
 	}
 
+	function pushToAncestorRules(rule) {
+		if (ancestorRules.indexOf(rule) === -1) {
+			ancestorRules.push(rule);
+		}
+	}
+
 	function parseError(message, isNested) {
 		var lines = token.substring(0, i).split('\n');
 		var lineCount = lines.length;
@@ -3681,12 +4288,22 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 		// Print the error but continue parsing the sheet
 		try {
 			throw error;
-		} catch(e) {
+		} catch (e) {
 			errorHandler && errorHandler(e);
 		}
 	};
 
+	// Helper functions to check character types
+	function isSelectorStartChar(char) {
+		return '.:#&*['.indexOf(char) !== -1;
+	}
+
+	function isWhitespaceChar(char) {
+		return ' \t\n\r'.indexOf(char) !== -1;
+	}
+
 	var endingIndex = token.length - 1;
+	var initialEndingIndex = endingIndex;
 
 	for (var character; (character = token.charAt(i)); i++) {
 		if (i === endingIndex) {
@@ -3695,804 +4312,1031 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 				case "namespaceRule":
 				case "layerBlock":
 					if (character !== ";") {
-						token += ";"
+						token += ";";
+						endingIndex += 1;
+					}
+					break;
+				case "value":
+					if (character !== "}") {
+						if (character === ";") {
+							token += "}"
+						} else {
+							token += ";";
+						}
+						endingIndex += 1;
+						break;
+					}
+				case "name":
+				case "before-name":
+					if (character === "}") {
+						token += " "
+					} else {
+						token += "}"
+					}
+					endingIndex += 1
+					break;
+				case "before-selector":
+					if (character !== "}" && currentScope !== styleSheet) {
+						token += "}"
+						endingIndex += 1
+						break;
 					}
 			}
 		}
-		
-		switch (character) {
 
-		case " ":
-		case "\t":
-		case "\r":
-		case "\n":
-		case "\f":
-			if (SIGNIFICANT_WHITESPACE[state]) {
-				buffer += character;
-			}
-			break;
+		// Handle escape sequences before processing special characters
+		// If we encounter a backslash, add both the backslash and the next character to buffer
+		// and skip the next iteration to prevent the escaped character from being interpreted
+		if (character === '\\' && i + 1 < token.length) {
+			buffer += character + token.charAt(i + 1);
+			i++; // Skip the next character
+			continue;
+		}
+
+		switch (character) {
 
-		// String
-		case '"':
-			index = i + 1;
-			do {
-				index = token.indexOf('"', index) + 1;
-				if (!index) {
-					parseError('Unmatched "');
+			case " ":
+			case "\t":
+			case "\r":
+			case "\n":
+			case "\f":
+				if (SIGNIFICANT_WHITESPACE[state]) {
+					buffer += character;
 				}
-			} while (token[index - 2] === '\\');
-			if (index === 0) {
 				break;
-			}
-			buffer += token.slice(i, index);
-			i = index - 1;
-			switch (state) {
-				case 'before-value':
-					state = 'value';
-					break;
-				case 'importRule-begin':
-					state = 'importRule';
-					if (i === endingIndex) {
-						token += ';'
+
+			// String
+			case '"':
+				index = i + 1;
+				do {
+					index = token.indexOf('"', index) + 1;
+					if (!index) {
+						parseError('Unmatched "');
 					}
+				} while (token[index - 2] === '\\');
+				if (index === 0) {
 					break;
-				case 'namespaceRule-begin':
-					state = 'namespaceRule';
-					if (i === endingIndex) {
-						token += ';'
+				}
+				buffer += token.slice(i, index);
+				i = index - 1;
+				switch (state) {
+					case 'before-value':
+						state = 'value';
+						break;
+					case 'importRule-begin':
+						state = 'importRule';
+						if (i === endingIndex) {
+							token += ';'
+						}
+						break;
+					case 'namespaceRule-begin':
+						state = 'namespaceRule';
+						if (i === endingIndex) {
+							token += ';'
+						}
+						break;
+				}
+				break;
+
+			case "'":
+				index = i + 1;
+				do {
+					index = token.indexOf("'", index) + 1;
+					if (!index) {
+						parseError("Unmatched '");
 					}
+				} while (token[index - 2] === '\\');
+				if (index === 0) {
 					break;
-			}
-			break;
+				}
+				buffer += token.slice(i, index);
+				i = index - 1;
+				switch (state) {
+					case 'before-value':
+						state = 'value';
+						break;
+					case 'importRule-begin':
+						state = 'importRule';
+						break;
+					case 'namespaceRule-begin':
+						state = 'namespaceRule';
+						break;
+				}
+				break;
 
-		case "'":
-			index = i + 1;
-			do {
-				index = token.indexOf("'", index) + 1;
-				if (!index) {
-					parseError("Unmatched '");
+			// Comment
+			case "/":
+				if (token.charAt(i + 1) === "*") {
+					i += 2;
+					index = token.indexOf("*/", i);
+					if (index === -1) {
+						i = token.length - 1;
+						buffer = "";
+					} else {
+						i = index + 1;
+					}
+				} else {
+					buffer += character;
+				}
+				if (state === "importRule-begin") {
+					buffer += " ";
+					state = "importRule";
+				}
+				if (state === "namespaceRule-begin") {
+					buffer += " ";
+					state = "namespaceRule";
 				}
-			} while (token[index - 2] === '\\');
-			if (index === 0) {
 				break;
-			}
-			buffer += token.slice(i, index);
-			i = index - 1;
-			switch (state) {
-				case 'before-value':
-					state = 'value';
+
+			// At-rule
+			case "@":
+				if (nestedSelectorRule) {
+					if (styleRule && styleRule.constructor.name === "CSSNestedDeclarations") {
+						currentScope.cssRules.push(styleRule);
+					}
+					if (nestedSelectorRule.parentRule && nestedSelectorRule.parentRule.constructor.name === "CSSStyleRule") {
+						styleRule = nestedSelectorRule.parentRule;
+					}
+					// Don't reset nestedSelectorRule here - preserve it through @-rules
+				}
+				if (token.indexOf("@-moz-document", i) === i) {
+					validateAtRule("@-moz-document", function () {
+						state = "documentRule-begin";
+						documentRule = new CSSOM.CSSDocumentRule();
+						documentRule.__starts = i;
+						i += "-moz-document".length;
+					});
+					buffer = "";
 					break;
-				case 'importRule-begin':
-					state = 'importRule';
+				} else if (token.indexOf("@media", i) === i) {
+					validateAtRule("@media", function () {
+						state = "atBlock";
+						mediaRule = new CSSOM.CSSMediaRule();
+						mediaRule.__starts = i;
+						i += "media".length;
+					});
+					buffer = "";
 					break;
-				case 'namespaceRule-begin':
-					state = 'namespaceRule';
+				} else if (token.indexOf("@container", i) === i) {
+					validateAtRule("@container", function () {
+						state = "containerBlock";
+						containerRule = new CSSOM.CSSContainerRule();
+						containerRule.__starts = i;
+						i += "container".length;
+					});
+					buffer = "";
 					break;
-			}
-			break;
-
-		// Comment
-		case "/":
-			if (token.charAt(i + 1) === "*") {
-				i += 2;
-				index = token.indexOf("*/", i);
-				if (index === -1) {
-					i = token.length - 1;
+				} else if (token.indexOf("@counter-style", i) === i) {
+					validateAtRule("@counter-style", function () {
+						state = "counterStyleBlock"
+						counterStyleRule = new CSSOM.CSSCounterStyleRule();
+						counterStyleRule.__starts = i;
+						i += "counter-style".length;
+					}, true);
 					buffer = "";
-				} else {
-					i = index + 1;
-				}
-			} else {
-				buffer += character;
-			}
-			if (state === "importRule-begin") {
-				buffer += " ";
-				state = "importRule";
-			}
-			if (state === "namespaceRule-begin") {
-				buffer += " ";
-				state = "namespaceRule";
-			}
-			break;
-
-		// At-rule
-		case "@":
-			if (token.indexOf("@-moz-document", i) === i) {
-				validateAtRule("@-moz-document", function(){
-					state = "documentRule-begin";
-					documentRule = new CSSOM.CSSDocumentRule();
-					documentRule.__starts = i;
-					i += "-moz-document".length;
-				});
-				buffer = "";
-				break;
-			} else if (token.indexOf("@media", i) === i) {
-				validateAtRule("@media", function(){
-					state = "atBlock";
-					mediaRule = new CSSOM.CSSMediaRule();
-					mediaRule.__starts = i;
-					i += "media".length;
-				});
-				buffer = "";
-				break;
-			} else if (token.indexOf("@container", i) === i) {
-				validateAtRule("@container", function(){
-					state = "containerBlock";
-					containerRule = new CSSOM.CSSContainerRule();
-					containerRule.__starts = i;
-					i += "container".length;
-				});
-				buffer = "";
-				break;
-			} else if (token.indexOf("@counter-style", i) === i) {
-				validateAtRule("@counter-style", function(){
-					state = "counterStyleBlock"
-					counterStyleRule = new CSSOM.CSSCounterStyleRule();
-					counterStyleRule.__starts = i;
-					i += "counter-style".length;
-				}, 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"
-					layerBlockRule = new CSSOM.CSSLayerBlockRule();
-					layerBlockRule.__starts = i;
-					i += "layer".length;
-				});
-				buffer = "";
-				break;
-			} else if (token.indexOf("@page", i) === i) {
-				validateAtRule("@page", function(){
-					state = "pageBlock"
-					pageRule = new CSSOM.CSSPageRule();
-					pageRule.__starts = i;
-					i += "page".length;
-				});
-				buffer = "";
-				break;
-			} else if (token.indexOf("@supports", i) === i) {
-				validateAtRule("@supports", function(){
-					state = "conditionBlock";
-					supportsRule = new CSSOM.CSSSupportsRule();
-					supportsRule.__starts = i;
-					i += "supports".length;
-				});
-				buffer = "";
-				break;
-			} else if (token.indexOf("@host", i) === i) {
-				validateAtRule("@host", function(){
-					state = "hostRule-begin";
-					i += "host".length;
-					hostRule = new CSSOM.CSSHostRule();
-					hostRule.__starts = i;
-				});
-				buffer = "";
-				break;
-			} else if (token.indexOf("@starting-style", i) === i) {
-				validateAtRule("@starting-style", function(){
-					state = "startingStyleRule-begin";
-					i += "starting-style".length;
-					startingStyleRule = new CSSOM.CSSStartingStyleRule();
-					startingStyleRule.__starts = i;
-				});
-				buffer = "";
-				break;
-			} else if (token.indexOf("@import", i) === i) {
-				buffer = "";
-				validateAtRule("@import", function(){
-					state = "importRule-begin";
-					i += "import".length;
-					buffer += "@import";
-				}, true);
-				break;
-			} else if (token.indexOf("@namespace", i) === i) {
-				buffer = "";
-				validateAtRule("@namespace", function(){
-					state = "namespaceRule-begin";
-					i += "namespace".length;
-					buffer += "@namespace";
-				}, true);
-				break;
-			} else if (token.indexOf("@font-face", i) === i) {
-				buffer = "";
-				validateAtRule("@font-face", function(){
-					state = "fontFaceRule-begin";
-					i += "font-face".length;
-					fontFaceRule = new CSSOM.CSSFontFaceRule();
-					fontFaceRule.__starts = i;
-				}, true);
-				break;
-			} else {
-				atKeyframesRegExp.lastIndex = i;
-				var matchKeyframes = atKeyframesRegExp.exec(token);
-				if (matchKeyframes && matchKeyframes.index === i) {
-					state = "keyframesRule-begin";
-					keyframesRule = new CSSOM.CSSKeyframesRule();
-					keyframesRule.__starts = i;
-					keyframesRule._vendorPrefix = matchKeyframes[1]; // Will come out as undefined if no prefix was found
-					i += matchKeyframes[0].length - 1;
+					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 (state === "selector") {
-					state = "atRule";
-				}
-			}
-			buffer += character;
-			break;
+				} else if (token.indexOf("@layer", i) === i) {
+					validateAtRule("@layer", function () {
+						state = "layerBlock"
+						layerBlockRule = new CSSOM.CSSLayerBlockRule();
+						layerBlockRule.__starts = i;
+						i += "layer".length;
+					});
+					buffer = "";
+					break;
+				} else if (token.indexOf("@page", i) === i) {
+					validateAtRule("@page", function () {
+						state = "pageBlock"
+						pageRule = new CSSOM.CSSPageRule();
+						pageRule.__starts = i;
+						i += "page".length;
+					});
+					buffer = "";
+					break;
+				} else if (token.indexOf("@supports", i) === i) {
+					validateAtRule("@supports", function () {
+						state = "conditionBlock";
+						supportsRule = new CSSOM.CSSSupportsRule();
+						supportsRule.__starts = i;
+						i += "supports".length;
+					});
+					buffer = "";
+					break;
+				} else if (token.indexOf("@host", i) === i) {
+					validateAtRule("@host", function () {
+						state = "hostRule-begin";
+						i += "host".length;
+						hostRule = new CSSOM.CSSHostRule();
+						hostRule.__starts = i;
+					});
+					buffer = "";
+					break;
+				} else if (token.indexOf("@starting-style", i) === i) {
+					validateAtRule("@starting-style", function () {
+						state = "startingStyleRule-begin";
+						i += "starting-style".length;
+						startingStyleRule = new CSSOM.CSSStartingStyleRule();
+						startingStyleRule.__starts = i;
+					});
+					buffer = "";
+					break;
+				} else if (token.indexOf("@import", i) === i) {
+					buffer = "";
+					validateAtRule("@import", function () {
+						state = "importRule-begin";
+						i += "import".length;
+						buffer += "@import";
+					}, true);
+					break;
+				} else if (token.indexOf("@namespace", i) === i) {
+					buffer = "";
+					validateAtRule("@namespace", function () {
+						state = "namespaceRule-begin";
+						i += "namespace".length;
+						buffer += "@namespace";
+					}, true);
+					break;
+				} else if (token.indexOf("@font-face", i) === i) {
+					buffer = "";
+					// @font-face can be nested only inside CSSScopeRule or CSSConditionRule
+					// and only if there's no CSSStyleRule in the parent chain
+					var cannotBeNested = true;
+					if (currentScope !== topScope) {
+						var hasStyleRuleInChain = false;
+						var hasValidParent = false;
+
+						// Check currentScope
+						if (currentScope.constructor.name === 'CSSStyleRule') {
+							hasStyleRuleInChain = true;
+						} else if (currentScope instanceof CSSOM.CSSScopeRule || currentScope instanceof CSSOM.CSSConditionRule) {
+							hasValidParent = true;
+						}
 
-		case "{":
-			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.indexOf(";") !== -1) {
-					var ruleClosingMatch = token.slice(i).match(forwardRuleClosingBraceRegExp);
-					if (ruleClosingMatch) {
-						styleRule = null;
+						// Check ancestorRules for CSSStyleRule
+						if (!hasStyleRuleInChain) {
+							for (var j = 0; j < ancestorRules.length; j++) {
+								if (ancestorRules[j].constructor.name === 'CSSStyleRule') {
+									hasStyleRuleInChain = true;
+									break;
+								}
+								if (ancestorRules[j] instanceof CSSOM.CSSScopeRule || ancestorRules[j] instanceof CSSOM.CSSConditionRule) {
+									hasValidParent = true;
+								}
+							}
+						}
+
+						// Allow nesting if we have a valid parent and no style rule in the chain
+						if (hasValidParent && !hasStyleRuleInChain) {
+							cannotBeNested = false;
+						}
+					}
+					validateAtRule("@font-face", function () {
+						state = "fontFaceRule-begin";
+						i += "font-face".length;
+						fontFaceRule = new CSSOM.CSSFontFaceRule();
+						fontFaceRule.__starts = i;
+					}, cannotBeNested);
+					break;
+				} else {
+					atKeyframesRegExp.lastIndex = i;
+					var matchKeyframes = atKeyframesRegExp.exec(token);
+					if (matchKeyframes && matchKeyframes.index === i) {
+						state = "keyframesRule-begin";
+						keyframesRule = new CSSOM.CSSKeyframesRule();
+						keyframesRule.__starts = i;
+						keyframesRule._vendorPrefix = matchKeyframes[1]; // Will come out as undefined if no prefix was found
+						i += matchKeyframes[0].length - 1;
 						buffer = "";
-						state = "before-selector";
-						i += ruleClosingMatch.index + ruleClosingMatch[0].length;
 						break;
+					} else if (state === "selector") {
+						state = "atRule";
 					}
 				}
+				buffer += character;
+				break;
 
-				if (parentRule) {
-					styleRule.__parentRule = parentRule;
-					ancestorRules.push(parentRule);
-				}
-
-				currentScope = parentRule = styleRule;
-				styleRule.selectorText = processSelectorText(buffer.trim());
-				styleRule.style.__starts = i;
-				styleRule.__parentStyleSheet = styleSheet;
-				buffer = "";
-				state = "before-name";
-			} else if (state === "atBlock") {
-				mediaRule.media.mediaText = buffer.trim();
-
-				if (parentRule) {
-					mediaRule.__parentRule = parentRule;
-					ancestorRules.push(parentRule);
-				}
-
-				currentScope = parentRule = mediaRule;
-				mediaRule.__parentStyleSheet = styleSheet;
-				buffer = "";
-				state = "before-selector";
-			} else if (state === "containerBlock") {
-				containerRule.__conditionText = buffer.trim();
-
-				if (parentRule) {
-					containerRule.__parentRule = parentRule;
-					ancestorRules.push(parentRule);
-				}
-				currentScope = parentRule = containerRule;
-				containerRule.__parentStyleSheet = styleSheet;
-				buffer = "";
-				state = "before-selector";
-			} else if (state === "counterStyleBlock") {
-				// TODO: Validate counter-style name. At least that it cannot be empty nor multiple
-				counterStyleRule.name = buffer.trim().replace(/\n/g, "");
-				currentScope = parentRule = counterStyleRule;
-				counterStyleRule.__parentStyleSheet = styleSheet;
-				buffer = "";
-			} else if (state === "conditionBlock") {
-				supportsRule.__conditionText = buffer.trim();
-
-				if (parentRule) {
-					supportsRule.__parentRule = parentRule;
-					ancestorRules.push(parentRule);
-				}
-
-				currentScope = parentRule = supportsRule;
-				supportsRule.__parentStyleSheet = styleSheet;
-				buffer = "";
-				state = "before-selector";
-			} else if (state === "scopeBlock") {
-				var parsedScopePrelude = parseScopePrelude(buffer.trim());
-				
-				if (parsedScopePrelude.hasStart) {
-					scopeRule.__start = parsedScopePrelude.startSelector;
+			case "{":
+				if (currentScope === topScope) {
+					nestedSelectorRule = null;
 				}
-				if (parsedScopePrelude.hasEnd) {
-					scopeRule.__end = parsedScopePrelude.endSelector;
-				}
-				if (parsedScopePrelude.hasOnlyEnd) {
-					scopeRule.__end = parsedScopePrelude.endSelector;
+				if (state === 'before-selector') {
+					parseError("Unexpected {");
+					i = ignoreBalancedBlock(i, token.slice(i));
+					break;
 				}
+				if (state === "selector" || state === "atRule") {
+					if (!nestedSelectorRule && buffer.indexOf(";") !== -1) {
+						var ruleClosingMatch = token.slice(i).match(forwardRuleClosingBraceRegExp);
+						if (ruleClosingMatch) {
+							styleRule = null;
+							buffer = "";
+							state = "before-selector";
+							i += ruleClosingMatch.index + ruleClosingMatch[0].length;
+							break;
+						}
+					}
 
-				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();
+					// Ensure styleRule exists before trying to set properties on it
+					if (!styleRule) {
+						styleRule = new CSSOM.CSSStyleRule();
+						styleRule.__starts = i;
+					}
 
-				var isValidName = layerBlockRule.name.length === 0 || layerBlockRule.name.match(cssCustomIdentifierRegExp) !== null;
+					var originalParentRule = parentRule;
 
-				if (isValidName) {
 					if (parentRule) {
-						layerBlockRule.__parentRule = parentRule;
-						ancestorRules.push(parentRule);
+						styleRule.__parentRule = parentRule;
+						pushToAncestorRules(parentRule);
 					}
-	
-					currentScope = parentRule = layerBlockRule;
-					layerBlockRule.__parentStyleSheet = styleSheet;
-				}
-				buffer = "";
-				state = "before-selector";
-			} else if (state === "pageBlock") {
-				pageRule.selectorText = buffer.trim();
-
-				if (parentRule) {
-					pageRule.__parentRule = parentRule;
-					ancestorRules.push(parentRule);
-				}
-
-				currentScope = parentRule = pageRule;
-				pageRule.__parentStyleSheet = styleSheet;
-				styleRule = pageRule;
-				buffer = "";
-				state = "before-name";
-			} else if (state === "hostRule-begin") {
-				if (parentRule) {
-					ancestorRules.push(parentRule);
-				}
-
-				currentScope = parentRule = hostRule;
-				hostRule.__parentStyleSheet = styleSheet;
-				buffer = "";
-				state = "before-selector";
-			} else if (state === "startingStyleRule-begin") {
-				if (parentRule) {
-					startingStyleRule.__parentRule = parentRule;
-					ancestorRules.push(parentRule);
-				}
 
-				currentScope = parentRule = startingStyleRule;
-				startingStyleRule.__parentStyleSheet = styleSheet;
-				buffer = "";
-				state = "before-selector";
-
-			} else if (state === "fontFaceRule-begin") {
-				if (parentRule) {
-					fontFaceRule.__parentRule = parentRule;
-				}
-				fontFaceRule.__parentStyleSheet = styleSheet;
-				styleRule = fontFaceRule;
-				buffer = "";
-				state = "before-name";
-			} else if (state === "keyframesRule-begin") {
-				keyframesRule.name = buffer.trim();
-				if (parentRule) {
-					ancestorRules.push(parentRule);
-					keyframesRule.__parentRule = parentRule;
-				}
-				keyframesRule.__parentStyleSheet = styleSheet;
-				currentScope = parentRule = keyframesRule;
-				buffer = "";
-				state = "keyframeRule-begin";
-			} else if (state === "keyframeRule-begin") {
-				styleRule = new CSSOM.CSSKeyframeRule();
-				styleRule.keyText = buffer.trim();
-				styleRule.__starts = i;
-				buffer = "";
-				state = "before-name";
-			} else if (state === "documentRule-begin") {
-				// FIXME: what if this '{' is in the url text of the match function?
-				documentRule.matcher.matcherText = buffer.trim();
-				if (parentRule) {
-					ancestorRules.push(parentRule);
-					documentRule.__parentRule = parentRule;
-				}
-				currentScope = parentRule = documentRule;
-				documentRule.__parentStyleSheet = styleSheet;
-				buffer = "";
-				state = "before-selector";
-			} else if (state === "before-name" || state === "name") {
-				if (styleRule.constructor.name === "CSSNestedDeclarations") {
-					if (styleRule.style.length) {
-						parentRule.cssRules.push(styleRule);
-						styleRule.__parentRule = parentRule;
-						styleRule.__parentStyleSheet = styleSheet;
-						ancestorRules.push(parentRule);
+					currentScope = parentRule = styleRule;
+					var processedSelectorText = processSelectorText(buffer.trim());
+					// In a nested selector, ensure each selector contains '&' at the beginning, except for selectors that already have '&' somewhere
+					if (originalParentRule && originalParentRule.constructor.name === "CSSStyleRule") {
+						styleRule.selectorText = parseAndSplitNestedSelectors(processedSelectorText).map(function (sel) {
+							// 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(', ');
 					} else {
-						// If the styleRule is empty, we can assume that it's a nested selector
-						ancestorRules.push(parentRule);
+						styleRule.selectorText = processedSelectorText;
 					}
-				} else {
-					currentScope = parentRule = styleRule;
-					ancestorRules.push(parentRule);
+					styleRule.style.__starts = i;
 					styleRule.__parentStyleSheet = styleSheet;
-				}
-				
-				styleRule = new CSSOM.CSSStyleRule();
-				var processedSelectorText = processSelectorText(buffer.trim());
-				// In a nested selector, ensure each selector contains '&' at the beginning, except for selectors that already have '&' somewhere
-				if (parentRule.constructor.name !== "CSSStyleRule" && parentRule.parentRule === null) {
-					styleRule.selectorText = processedSelectorText;
-				} else {
-					styleRule.selectorText = parseAndSplitNestedSelectors(processedSelectorText).map(function(sel) {
-						// 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;
-				nestedSelectorRule = styleRule;
-
-				buffer = "";
-				state = "before-name";
-			}
-			break;
-
-		case ":":
-			if (state === "name") {
-				// It can be a nested selector, let's check
-				var openBraceBeforeMatch = token.slice(i).match(/[{;}]/);
-				var hasOpenBraceBefore = openBraceBeforeMatch && openBraceBeforeMatch[0] === '{';
-				if (hasOpenBraceBefore) {
-					// Is a selector
-					buffer += character;
-				} else {
-					// Is a declaration
-					name = buffer.trim();
 					buffer = "";
-					state = "before-value";
-				}
-			} else {
-				buffer += character;
-			}
-			break;
-
-		case "(":
-			if (state === 'value') {
-				// ie css expression mode
-				if (buffer.trim() === 'expression') {
-					var info = (new CSSOM.CSSValueExpression(token, i)).parse();
+					state = "before-name";
+				} else if (state === "atBlock") {
+					mediaRule.media.mediaText = buffer.trim();
 
-					if (info.error) {
-						parseError(info.error);
-					} else {
-						buffer += info.expression;
-						i = info.idx;
+					if (parentRule) {
+						mediaRule.__parentRule = parentRule;
+						pushToAncestorRules(parentRule);
+						// If entering @media from within a CSSStyleRule, set nestedSelectorRule
+						// so that & selectors and declarations work correctly inside
+						if (parentRule.constructor.name === "CSSStyleRule" && !nestedSelectorRule) {
+							nestedSelectorRule = parentRule;
+						}
 					}
-				} else {
-					state = 'value-parenthesis';
-					//always ensure this is reset to 1 on transition
-					//from value to value-parenthesis
-					valueParenthesisDepth = 1;
-					buffer += character;
-				}
-			} else if (state === 'value-parenthesis') {
-				valueParenthesisDepth++;
-				buffer += character;
-			} else {
-				buffer += character;
-			}
-			break;
 
-		case ")":
-			if (state === 'value-parenthesis') {
-				valueParenthesisDepth--;
-				if (valueParenthesisDepth === 0) state = 'value';
-			}
-			buffer += character;
-			break;
-
-		case "!":
-			if (state === "value" && token.indexOf("!important", i) === i) {
-				priority = "important";
-				i += "important".length;
-			} else {
-				buffer += character;
-			}
-			break;
+					currentScope = parentRule = mediaRule;
+					pushToAncestorRules(mediaRule);
+					mediaRule.__parentStyleSheet = styleSheet;
+					styleRule = null; // Reset styleRule when entering @-rule
+					buffer = "";
+					state = "before-selector";
+				} else if (state === "containerBlock") {
+					containerRule.__conditionText = buffer.trim();
 
-		case ";":
-			switch (state) {
-				case "before-value":
-				case "before-name":
-					parseError("Unexpected ;");
+					if (parentRule) {
+						containerRule.__parentRule = parentRule;
+						pushToAncestorRules(parentRule);
+						if (parentRule.constructor.name === "CSSStyleRule" && !nestedSelectorRule) {
+							nestedSelectorRule = parentRule;
+						}
+					}
+					currentScope = parentRule = containerRule;
+					pushToAncestorRules(containerRule);
+					containerRule.__parentStyleSheet = styleSheet;
+					styleRule = null; // Reset styleRule when entering @-rule
 					buffer = "";
-					state = "before-name";
-					break;
-				case "value":
-					styleRule.style.setProperty(name, buffer.trim(), priority, parseError);
-					priority = "";
+					state = "before-selector";
+				} else if (state === "counterStyleBlock") {
+					var counterStyleName = buffer.trim().replace(/\n/g, "");
+					// Validate: name cannot be empty, contain whitespace, or contain dots
+					var isValidCounterStyleName = counterStyleName.length > 0 && !/[\s.]/.test(counterStyleName);
+
+					if (isValidCounterStyleName) {
+						counterStyleRule.name = counterStyleName;
+						currentScope = parentRule = counterStyleRule;
+						counterStyleRule.__parentStyleSheet = styleSheet;
+					}
 					buffer = "";
-					state = "before-name";
-					break;
-				case "atRule":
+				} else if (state === "conditionBlock") {
+					supportsRule.__conditionText = buffer.trim();
+
+					if (parentRule) {
+						supportsRule.__parentRule = parentRule;
+						pushToAncestorRules(parentRule);
+						if (parentRule.constructor.name === "CSSStyleRule" && !nestedSelectorRule) {
+							nestedSelectorRule = parentRule;
+						}
+					}
+
+					currentScope = parentRule = supportsRule;
+					pushToAncestorRules(supportsRule);
+					supportsRule.__parentStyleSheet = styleSheet;
+					styleRule = null; // Reset styleRule when entering @-rule
 					buffer = "";
 					state = "before-selector";
-					break;
-				case "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);
+				} 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;
+						pushToAncestorRules(parentRule);
+						if (parentRule.constructor.name === "CSSStyleRule" && !nestedSelectorRule) {
+							nestedSelectorRule = parentRule;
+						}
+					}
+					currentScope = parentRule = scopeRule;
+					pushToAncestorRules(scopeRule);
+					scopeRule.__parentStyleSheet = styleSheet;
+					styleRule = null; // Reset styleRule when entering @-rule
 					buffer = "";
 					state = "before-selector";
-					break;
-				case "namespaceRule":
-					var isValid = styleSheet.cssRules.length === 0 || styleSheet.cssRules.every(function (rule) {
-						return ['CSSImportRule','CSSLayerStatementRule','CSSNamespaceRule'].indexOf(rule.constructor.name) !== -1
-					});
-					if (isValid) {
-						try {
-							// Validate namespace syntax before creating the rule
-							var testNamespaceRule = new CSSOM.CSSNamespaceRule();
-							testNamespaceRule.cssText = buffer + character;
-							
-							namespaceRule = testNamespaceRule;
-							namespaceRule.__parentStyleSheet = styleSheet;
-							styleSheet.cssRules.push(namespaceRule);
-							
-							// Track the namespace prefix for validation
-							if (namespaceRule.prefix) {
-								definedNamespacePrefixes[namespaceRule.prefix] = namespaceRule.namespaceURI;
+				} else if (state === "layerBlock") {
+					layerBlockRule.name = buffer.trim();
+
+					var isValidName = layerBlockRule.name.length === 0 || layerBlockRule.name.match(cssCustomIdentifierRegExp) !== null;
+
+					if (isValidName) {
+						if (parentRule) {
+							layerBlockRule.__parentRule = parentRule;
+							pushToAncestorRules(parentRule);
+							if (parentRule.constructor.name === "CSSStyleRule" && !nestedSelectorRule) {
+								nestedSelectorRule = parentRule;
 							}
-						} catch(e) {
-							parseError(e.message);
 						}
+
+						currentScope = parentRule = layerBlockRule;
+						pushToAncestorRules(layerBlockRule);
+						layerBlockRule.__parentStyleSheet = styleSheet;
 					}
+					styleRule = null; // Reset styleRule when entering @-rule
 					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(cssCustomIdentifierRegExp) === null;
-					});
+				} else if (state === "pageBlock") {
+					pageRule.selectorText = buffer.trim();
 
-					if (!isInvalid) {
-						layerStatementRule = new CSSOM.CSSLayerStatementRule();
-						layerStatementRule.__parentStyleSheet = styleSheet;
-						layerStatementRule.__starts = layerBlockRule.__starts;
-						layerStatementRule.__ends = i;
-						layerStatementRule.nameList = nameListStr;
-						styleSheet.cssRules.push(layerStatementRule);
+					if (parentRule) {
+						pageRule.__parentRule = parentRule;
+						pushToAncestorRules(parentRule);
 					}
+
+					currentScope = parentRule = pageRule;
+					pageRule.__parentStyleSheet = styleSheet;
+					styleRule = pageRule;
+					buffer = "";
+					state = "before-name";
+				} else if (state === "hostRule-begin") {
+					if (parentRule) {
+						pushToAncestorRules(parentRule);
+					}
+
+					currentScope = parentRule = hostRule;
+					pushToAncestorRules(hostRule);
+					hostRule.__parentStyleSheet = styleSheet;
 					buffer = "";
 					state = "before-selector";
-					break;
-				default:
-					buffer += character;
-					break;
-			}
-			break;
+				} else if (state === "startingStyleRule-begin") {
+					if (parentRule) {
+						startingStyleRule.__parentRule = parentRule;
+						pushToAncestorRules(parentRule);
+						if (parentRule.constructor.name === "CSSStyleRule" && !nestedSelectorRule) {
+							nestedSelectorRule = parentRule;
+						}
+					}
 
-		case "}":
-			if (state === "counterStyleBlock") {
-				// FIXME : Implement cssText get setter that parses the real implementation
-				counterStyleRule.cssText = "@counter-style " + counterStyleRule.name + " { " + buffer.trim().replace(/\n/g, " ").replace(/(['"])(?:\\.|[^\\])*?\1|(\s{2,})/g, function(match, quote) {
-					return quote ? match : ' ';
-				}) + " }";
-				buffer = "";
-				state = "before-selector";
-			}
+					currentScope = parentRule = startingStyleRule;
+					pushToAncestorRules(startingStyleRule);
+					startingStyleRule.__parentStyleSheet = styleSheet;
+					styleRule = null; // Reset styleRule when entering @-rule
+					buffer = "";
+					state = "before-selector";
 
-			switch (state) {
-				case "value":
-					styleRule.style.setProperty(name, buffer.trim(), priority, parseError);
-					priority = "";
-					/* falls through */
-				case "before-value":
-				case "before-name":
-				case "name":
-					styleRule.__ends = i + 1;
-					
-					if (parentRule === styleRule) {
-						parentRule = ancestorRules.pop()
+				} else if (state === "fontFaceRule-begin") {
+					if (parentRule) {
+						fontFaceRule.__parentRule = parentRule;
 					}
-
+					fontFaceRule.__parentStyleSheet = styleSheet;
+					styleRule = fontFaceRule;
+					buffer = "";
+					state = "before-name";
+				} else if (state === "keyframesRule-begin") {
+					keyframesRule.name = buffer.trim();
 					if (parentRule) {
-						styleRule.__parentRule = parentRule;
+						pushToAncestorRules(parentRule);
+						keyframesRule.__parentRule = parentRule;
 					}
-					styleRule.__parentStyleSheet = styleSheet;
-
-					if (currentScope === styleRule) {
-						currentScope = parentRule || styleSheet;
+					keyframesRule.__parentStyleSheet = styleSheet;
+					currentScope = parentRule = keyframesRule;
+					buffer = "";
+					state = "keyframeRule-begin";
+				} else if (state === "keyframeRule-begin") {
+					styleRule = new CSSOM.CSSKeyframeRule();
+					styleRule.keyText = buffer.trim();
+					styleRule.__starts = i;
+					buffer = "";
+					state = "before-name";
+				} else if (state === "documentRule-begin") {
+					// FIXME: what if this '{' is in the url text of the match function?
+					documentRule.matcher.matcherText = buffer.trim();
+					if (parentRule) {
+						pushToAncestorRules(parentRule);
+						documentRule.__parentRule = parentRule;
+					}
+					currentScope = parentRule = documentRule;
+					pushToAncestorRules(documentRule);
+					documentRule.__parentStyleSheet = styleSheet;
+					buffer = "";
+					state = "before-selector";
+				} else if (state === "before-name" || state === "name") {
+					// @font-face and similar rules don't support nested selectors
+					// If we encounter a nested selector block inside them, skip it
+					if (styleRule.constructor.name === "CSSFontFaceRule" ||
+						styleRule.constructor.name === "CSSKeyframeRule" ||
+						(styleRule.constructor.name === "CSSPageRule" && parentRule === styleRule)) {
+						// Skip the nested block
+						var ruleClosingMatch = token.slice(i).match(forwardRuleClosingBraceRegExp);
+						if (ruleClosingMatch) {
+							i += ruleClosingMatch.index + ruleClosingMatch[0].length - 1;
+							buffer = "";
+							state = "before-name";
+							break;
+						}
 					}
 
-					if (styleRule.constructor.name === "CSSStyleRule" && !isValidSelectorText(styleRule.selectorText)) {
-						if (styleRule === nestedSelectorRule) {
-							nestedSelectorRule = null;
+					if (styleRule.constructor.name === "CSSNestedDeclarations") {
+						if (styleRule.style.length) {
+							parentRule.cssRules.push(styleRule);
+							styleRule.__parentRule = parentRule;
+							styleRule.__parentStyleSheet = styleSheet;
+							pushToAncestorRules(parentRule);
+						} else {
+							// If the styleRule is empty, we can assume that it's a nested selector
+							pushToAncestorRules(parentRule);
 						}
-						parseError('Invalid CSSStyleRule (selectorText = "' + styleRule.selectorText + '")', styleRule.parentRule !== null);
 					} else {
-						currentScope.cssRules.push(styleRule);
+						currentScope = parentRule = styleRule;
+						pushToAncestorRules(parentRule);
+						styleRule.__parentStyleSheet = styleSheet;
 					}
-					buffer = "";
-					if (currentScope.constructor === CSSOM.CSSKeyframesRule) {
-						state = "keyframeRule-begin";
+
+					styleRule = new CSSOM.CSSStyleRule();
+					var processedSelectorText = processSelectorText(buffer.trim());
+					// In a nested selector, ensure each selector contains '&' at the beginning, except for selectors that already have '&' somewhere
+					if (parentRule.constructor.name === "CSSScopeRule" || (parentRule.constructor.name !== "CSSStyleRule" && parentRule.parentRule === null)) {
+						styleRule.selectorText = processedSelectorText;
 					} else {
-						state = "before-selector";
+						styleRule.selectorText = parseAndSplitNestedSelectors(processedSelectorText).map(function (sel) {
+							// 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;
+					// Only set nestedSelectorRule if we're directly inside a CSSStyleRule or CSSScopeRule,
+					// not inside other grouping rules like @media/@supports
+					if (parentRule.constructor.name === "CSSStyleRule" || parentRule.constructor.name === "CSSScopeRule") {
+						nestedSelectorRule = styleRule;
 					}
 
-					if (styleRule.constructor.name === "CSSNestedDeclarations") {
-						if (currentScope !== styleSheet) {
-							nestedSelectorRule = currentScope;
-						}
-						styleRule = null;
+					buffer = "";
+					state = "before-name";
+				}
+				break;
+
+			case ":":
+				if (state === "name") {
+					// It can be a nested selector, let's check
+					var openBraceBeforeMatch = token.slice(i).match(/[{;}]/);
+					var hasOpenBraceBefore = openBraceBeforeMatch && openBraceBeforeMatch[0] === '{';
+					if (hasOpenBraceBefore) {
+						// Is a selector
+						buffer += character;
 					} else {
-						styleRule = null;
-						break;
+						// Is a declaration
+						name = buffer.trim();
+						buffer = "";
+						state = "before-value";
 					}
-				case "keyframeRule-begin":
-				case "before-selector":
-				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);
+				} else {
+					buffer += character;
+				}
+				break;
+
+			case "(":
+				if (state === 'value') {
+					// ie css expression mode
+					if (buffer.trim() === 'expression') {
+						var info = (new CSSOM.CSSValueExpression(token, i)).parse();
+
+						if (info.error) {
+							parseError(info.error);
+						} else {
+							buffer += info.expression;
+							i = info.idx;
 						}
-						
-						break;
+					} else {
+						state = 'value-parenthesis';
+						//always ensure this is reset to 1 on transition
+						//from value to value-parenthesis
+						valueParenthesisDepth = 1;
+						buffer += character;
 					}
+				} else if (state === 'value-parenthesis') {
+					valueParenthesisDepth++;
+					buffer += character;
+				} else {
+					buffer += character;
+				}
+				break;
 
+			case ")":
+				if (state === 'value-parenthesis') {
+					valueParenthesisDepth--;
+					if (valueParenthesisDepth === 0) state = 'value';
+				}
+				buffer += character;
+				break;
 
-					while (ancestorRules.length > 0) {
-						parentRule = ancestorRules.pop();
-
-						if (
-							parentRule.constructor.name === "CSSStyleRule"
-							|| parentRule.constructor.name === "CSSMediaRule"
-							|| parentRule.constructor.name === "CSSSupportsRule"
-							|| parentRule.constructor.name === "CSSContainerRule"
-							|| parentRule.constructor.name === "CSSScopeRule"
-							|| parentRule.constructor.name === "CSSLayerBlockRule"
-							|| parentRule.constructor.name === "CSSStartingStyleRule"
-						) {
-							if (nestedSelectorRule) {
-								if (nestedSelectorRule.parentRule) {
-									prevScope = nestedSelectorRule;
-									currentScope = nestedSelectorRule.parentRule;
-									if (currentScope.cssRules.findIndex(function (rule) {
-										return rule === prevScope
-									}) === -1) {
-										currentScope.cssRules.push(prevScope);
-									}
-									nestedSelectorRule = currentScope;
+			case "!":
+				if (state === "value" && token.indexOf("!important", i) === i) {
+					priority = "important";
+					i += "important".length;
+				} else {
+					buffer += character;
+				}
+				break;
+
+			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, parseError);
+						priority = "";
+						buffer = "";
+						state = "before-name";
+						break;
+					case "atRule":
+						buffer = "";
+						state = "before-selector";
+						break;
+					case "importRule":
+						var isValid = topScope.cssRules.length === 0 || topScope.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.parse(buffer + character);
+							topScope.cssRules.push(importRule);
+						}
+						buffer = "";
+						state = "before-selector";
+						break;
+					case "namespaceRule":
+						var isValid = topScope.cssRules.length === 0 || topScope.cssRules.every(function (rule) {
+							return ['CSSImportRule', 'CSSLayerStatementRule', 'CSSNamespaceRule'].indexOf(rule.constructor.name) !== -1
+						});
+						if (isValid) {
+							try {
+								// Validate namespace syntax before creating the rule
+								var testNamespaceRule = new CSSOM.CSSNamespaceRule();
+								testNamespaceRule.parse(buffer + character);
+
+								namespaceRule = testNamespaceRule;
+								namespaceRule.__parentStyleSheet = styleSheet;
+								topScope.cssRules.push(namespaceRule);
+
+								// Track the namespace prefix for validation
+								if (namespaceRule.prefix) {
+									definedNamespacePrefixes[namespaceRule.prefix] = namespaceRule.namespaceURI;
+								}
+							} catch (e) {
+								parseError(e.message);
+							}
+						}
+						buffer = "";
+						state = "before-selector";
+						break;
+					case "layerBlock":
+						var nameListStr = buffer.trim().split(",").map(function (name) {
+							return name.trim();
+						});
+						var isInvalid = nameListStr.some(function (name) {
+							return name.trim().match(cssCustomIdentifierRegExp) === null;
+						});
+
+						// Check if there's a CSSStyleRule in the parent chain
+						var hasStyleRuleParent = false;
+						if (parentRule) {
+							var checkParent = parentRule;
+							while (checkParent) {
+								if (checkParent.constructor.name === "CSSStyleRule") {
+									hasStyleRuleParent = true;
+									break;
 								}
+								checkParent = checkParent.__parentRule;
+							}
+						}
+
+						if (!isInvalid && !hasStyleRuleParent) {
+							layerStatementRule = new CSSOM.CSSLayerStatementRule();
+							layerStatementRule.__parentStyleSheet = styleSheet;
+							layerStatementRule.__starts = layerBlockRule.__starts;
+							layerStatementRule.__ends = i;
+							layerStatementRule.nameList = nameListStr;
+
+							// Add to parent rule if nested, otherwise to top scope
+							if (parentRule) {
+								layerStatementRule.__parentRule = parentRule;
+								parentRule.cssRules.push(layerStatementRule);
 							} else {
-								prevScope = currentScope;
-								currentScope = parentRule;
-								currentScope !== prevScope && currentScope.cssRules.push(prevScope);
-								break;
+								topScope.cssRules.push(layerStatementRule);
 							}
 						}
-					}
-					
-					if (currentScope.parentRule == null) {
-						currentScope.__ends = i + 1;
-						if (currentScope !== styleSheet && styleSheet.cssRules.findIndex(function (rule) {
-							return rule === currentScope
-						}) === -1) {
-							styleSheet.cssRules.push(currentScope);
+						buffer = "";
+						state = "before-selector";
+						break;
+					default:
+						buffer += character;
+						break;
+				}
+				break;
+
+			case "}":
+				if (state === "counterStyleBlock") {
+					// FIXME : Implement missing properties on CSSCounterStyleRule interface and update parse method
+					// For now it's just assigning entire rule text
+					counterStyleRule.parse("@counter-style " + counterStyleRule.name + " { " + buffer + " }");
+					buffer = "";
+					state = "before-selector";
+				}
+
+				switch (state) {
+					case "value":
+						styleRule.style.setProperty(name, buffer.trim(), priority, parseError);
+						priority = "";
+					/* falls through */
+					case "before-value":
+					case "before-name":
+					case "name":
+						styleRule.__ends = i + 1;
+
+						if (parentRule === styleRule) {
+							parentRule = ancestorRules.pop()
+						}
+
+						if (parentRule) {
+							styleRule.__parentRule = parentRule;
 						}
-						currentScope = styleSheet;
-						if (nestedSelectorRule === parentRule) {
-							// Check if this selector is really starting inside another selector
-							var nestedSelectorTokenToCurrentSelectorToken = token.slice(nestedSelectorRule.__starts, i + 1);
-							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;
+						styleRule.__parentStyleSheet = styleSheet;
+
+						if (currentScope === styleRule) {
+							currentScope = parentRule || topScope;
+						}
+
+						if (styleRule.constructor.name === "CSSStyleRule" && !isValidSelectorText(styleRule.selectorText)) {
+							if (styleRule === nestedSelectorRule) {
 								nestedSelectorRule = null;
-								parentRule = null;
 							}
+							parseError('Invalid CSSStyleRule (selectorText = "' + styleRule.selectorText + '")', styleRule.parentRule !== null);
 						} else {
-							parentRule = null;
+							if (styleRule.parentRule) {
+								styleRule.parentRule.cssRules.push(styleRule);
+							} else {
+								currentScope.cssRules.push(styleRule);
+							}
+						}
+						buffer = "";
+						if (currentScope.constructor === CSSOM.CSSKeyframesRule) {
+							state = "keyframeRule-begin";
+						} else {
+							state = "before-selector";
+						}
 
+						if (styleRule.constructor.name === "CSSNestedDeclarations") {
+							if (currentScope !== topScope) {
+								// Only set nestedSelectorRule if currentScope is CSSStyleRule or CSSScopeRule
+								// Not for other grouping rules like @media/@supports
+								if (currentScope.constructor.name === "CSSStyleRule" || currentScope.constructor.name === "CSSScopeRule") {
+									nestedSelectorRule = currentScope;
+								}
+							}
+							styleRule = null;
+						} else {
+							// Update nestedSelectorRule when closing a CSSStyleRule
+							if (styleRule === nestedSelectorRule) {
+								var selector = styleRule.selectorText && styleRule.selectorText.trim();
+								// Check if this is proper nesting (&.class, &:pseudo) vs prepended & (& :is, & .class with space)
+								// Prepended & has pattern "& X" where X starts with : or .
+								var isPrependedAmpersand = selector && selector.match(/^&\s+[:\.]/);
+
+								// Check if parent is a grouping rule that can contain nested selectors
+								var isGroupingRule = currentScope && currentScope instanceof CSSOM.CSSGroupingRule;
+
+								if (!isPrependedAmpersand && isGroupingRule) {
+									// Proper nesting - set nestedSelectorRule to parent for more nested selectors
+									// But only if it's a CSSStyleRule or CSSScopeRule, not other grouping rules like @media
+									if (currentScope.constructor.name === "CSSStyleRule" || currentScope.constructor.name === "CSSScopeRule") {
+										nestedSelectorRule = currentScope;
+									}
+									// If currentScope is another type of grouping rule (like @media), keep nestedSelectorRule unchanged
+								} else {
+									// Prepended & or not nested in grouping rule - reset to prevent CSSNestedDeclarations
+									nestedSelectorRule = null;
+								}
+							} else if (nestedSelectorRule && currentScope instanceof CSSOM.CSSGroupingRule) {
+								// When closing a nested rule that's not the nestedSelectorRule itself,
+								// maintain nestedSelectorRule if we're still inside a grouping rule
+								// This ensures declarations after nested selectors inside @media/@supports etc. work correctly
+							}
+							styleRule = null;
+							break;
 						}
-					}
+					case "keyframeRule-begin":
+					case "before-selector":
+					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);
+							}
 
-					buffer = "";
-					state = "before-selector";
-					break;
-			}
-			break;
+							break;
+						}
 
-		default:
-			switch (state) {
-				case "before-selector":
-					state = "selector";
-					if (styleRule && parentRule) {
-						// Assuming it's a declaration inside Nested Selector OR a Nested Declaration
-						// If Declaration inside Nested Selector let's keep the same styleRule
-						if (
-							parentRule.constructor.name === "CSSStyleRule"
-							|| parentRule.constructor.name === "CSSMediaRule"
-							|| parentRule.constructor.name === "CSSSupportsRule"
-							|| parentRule.constructor.name === "CSSContainerRule"
-							|| parentRule.constructor.name === "CSSScopeRule"
-							|| parentRule.constructor.name === "CSSLayerBlockRule"
-							|| parentRule.constructor.name === "CSSStartingStyleRule"
-						) {
-							// parentRule.__parentRule = styleRule;
-							state = "before-name";
-							if (styleRule !== parentRule) {
-								styleRule = new CSSOM.CSSNestedDeclarations();
-								styleRule.__starts = i;	
+						while (ancestorRules.length > 0) {
+							parentRule = ancestorRules.pop();
+
+							if (parentRule instanceof CSSOM.CSSGroupingRule && (parentRule.constructor.name !== 'CSSStyleRule' || parentRule.__parentRule)) {
+								if (nestedSelectorRule) {
+									if (nestedSelectorRule.parentRule) {
+										prevScope = nestedSelectorRule;
+										currentScope = nestedSelectorRule.parentRule;
+										if (currentScope.cssRules.findIndex(function (rule) {
+											return rule === prevScope
+										}) === -1) {
+											currentScope.cssRules.push(prevScope);
+										}
+										nestedSelectorRule = currentScope;
+									} else {
+										// If nestedSelectorRule doesn't have a parentRule, we're closing a grouping rule
+										// inside a top-level CSSStyleRule. We need to push currentScope to the parentRule.
+										prevScope = currentScope;
+										// Push to actual parent from ancestorRules if available
+										var actualParent = ancestorRules.length > 0 ? ancestorRules[ancestorRules.length - 1] : nestedSelectorRule;
+										actualParent !== prevScope && actualParent.cssRules.push(prevScope);
+										// Update currentScope to the nestedSelectorRule before breaking
+										currentScope = actualParent;
+										parentRule = actualParent;
+										break;
+									}
+								} else {
+									prevScope = currentScope;
+									parentRule !== prevScope && parentRule.cssRules.push(prevScope);
+									break;
+								}
 							}
 						}
-						
-					} else if (nestedSelectorRule && parentRule && (
-						parentRule.constructor.name === "CSSStyleRule"
-						|| parentRule.constructor.name === "CSSMediaRule"
-						|| parentRule.constructor.name === "CSSSupportsRule"
-						|| parentRule.constructor.name === "CSSContainerRule"
-						|| parentRule.constructor.name === "CSSLayerBlockRule"
-						|| parentRule.constructor.name === "CSSStartingStyleRule"
-					)) {
-						state = "before-name";
-						if (parentRule.cssRules.length) {
-							currentScope = nestedSelectorRule = parentRule;
-							styleRule = new CSSOM.CSSNestedDeclarations();
-							styleRule.__starts = i;	
-						} else {
-							if (parentRule.constructor.name === "CSSStyleRule") {
-								styleRule = parentRule;
+
+						// If currentScope has a __parentRule and wasn't added yet, add it
+						if (ancestorRules.length === 0 && currentScope.__parentRule && currentScope.__parentRule.cssRules) {
+							if (currentScope.__parentRule.cssRules.findIndex(function (rule) {
+								return rule === currentScope
+							}) === -1) {
+								currentScope.__parentRule.cssRules.push(currentScope);
+							}
+						}
+
+						// Only handle top-level rule closing if we processed all ancestors
+						if (ancestorRules.length === 0 && currentScope.parentRule == null) {
+							currentScope.__ends = i + 1;
+							if (currentScope !== topScope && topScope.cssRules.findIndex(function (rule) {
+								return rule === currentScope
+							}) === -1) {
+								topScope.cssRules.push(currentScope);
+							}
+							currentScope = topScope;
+							if (nestedSelectorRule === parentRule) {
+								// Check if this selector is really starting inside another selector
+								var nestedSelectorTokenToCurrentSelectorToken = token.slice(nestedSelectorRule.__starts, i + 1);
+								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;
+									parentRule = null;
+								}
 							} else {
+								parentRule = null;
+							}
+						} else {
+							currentScope = parentRule;
+						}
+
+						buffer = "";
+						state = "before-selector";
+						break;
+				}
+				break;
+
+			default:
+				switch (state) {
+					case "before-selector":
+						state = "selector";
+						if ((styleRule || scopeRule) && parentRule) {
+							// Assuming it's a declaration inside Nested Selector OR a Nested Declaration
+							// If Declaration inside Nested Selector let's keep the same styleRule
+							if (!isSelectorStartChar(character) && !isWhitespaceChar(character) && parentRule instanceof CSSOM.CSSGroupingRule) {
+								// parentRule.__parentRule = styleRule;
+								state = "before-name";
+								if (styleRule !== parentRule) {
+									styleRule = new CSSOM.CSSNestedDeclarations();
+									styleRule.__starts = i;
+								}
+							}
+
+						} else if (nestedSelectorRule && parentRule && parentRule instanceof CSSOM.CSSGroupingRule) {
+							if (isSelectorStartChar(character)) {
+								// If starting with a selector character, create CSSStyleRule instead of CSSNestedDeclarations
 								styleRule = new CSSOM.CSSStyleRule();
-								styleRule.__starts = i;								
+								styleRule.__starts = i;
+							} else if (!isWhitespaceChar(character)) {
+								// Starting a declaration (not whitespace, not a selector)
+								state = "before-name";
+								// Check if we should create CSSNestedDeclarations
+								// This happens if: parent has cssRules OR nestedSelectorRule exists (indicating CSSStyleRule in hierarchy)
+								if (parentRule.cssRules.length || nestedSelectorRule) {
+									currentScope = parentRule;
+									// Only set nestedSelectorRule if parentRule is CSSStyleRule or CSSScopeRule
+									if (parentRule.constructor.name === "CSSStyleRule" || parentRule.constructor.name === "CSSScopeRule") {
+										nestedSelectorRule = parentRule;
+									}
+									styleRule = new CSSOM.CSSNestedDeclarations();
+									styleRule.__starts = i;
+								} else {
+									if (parentRule.constructor.name === "CSSStyleRule") {
+										styleRule = parentRule;
+									} else {
+										styleRule = new CSSOM.CSSStyleRule();
+										styleRule.__starts = i;
+									}
+								}
 							}
 						}
-					} else {
-						styleRule = new CSSOM.CSSStyleRule();
-						styleRule.__starts = i;
-					}
-					break;
-				case "before-name":
-					state = "name";
-					break;
-				case "before-value":
-					state = "value";
-					break;
-				case "importRule-begin":
-					state = "importRule";
-					break;
-				case "namespaceRule-begin":
-					state = "namespaceRule";
-					break;
+						break;
+					case "before-name":
+						state = "name";
+						break;
+					case "before-value":
+						state = "value";
+						break;
+					case "importRule-begin":
+						state = "importRule";
+						break;
+					case "namespaceRule-begin":
+						state = "namespaceRule";
+						break;
+				}
+				buffer += character;
+				break;
+		}
+
+		// Auto-close all unclosed nested structures
+		// Check AFTER processing the character, at the ORIGINAL ending index
+		// Only add closing braces if CSS is incomplete (not at top scope)
+		if (i === initialEndingIndex && (currentScope !== topScope || ancestorRules.length > 0)) {
+			var needsClosing = ancestorRules.length;
+			if (currentScope !== topScope && ancestorRules.indexOf(currentScope) === -1) {
+				needsClosing += 1;
+			}
+			// Add closing braces for all unclosed structures
+			for (var closeIdx = 0; closeIdx < needsClosing; closeIdx++) {
+				token += "}";
+				endingIndex += 1;
 			}
-			buffer += character;
-			break;
 		}
 	}