@acemir/cssom 0.9.22 → 0.9.24

package/lib/parse.js

@@ -9,6 +9,8 @@ var CSSOM = {};
  * @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 {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.
  */
@@ -55,14 +57,26 @@ 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()
+	}
+
+	var topScope;
+	if (opts && opts.cssRules) {
+		topScope = { cssRules: opts.cssRules };
+	} else {
+		topScope = styleSheet;
+	}
 
 	if (opts && opts.globalObject) {
 		styleSheet.__globalObject = opts.globalObject;
 	}
 
 	// @type CSSStyleSheet|CSSMediaRule|CSSContainerRule|CSSSupportsRule|CSSFontFaceRule|CSSKeyframesRule|CSSDocumentRule
-	var currentScope = styleSheet;
+	var currentScope = topScope;
 
 	// @type CSSMediaRule|CSSContainerRule|CSSSupportsRule|CSSKeyframesRule|CSSDocumentRule
 	var parentRule;
@@ -391,7 +405,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)
@@ -523,7 +537,7 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 			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;
@@ -548,6 +562,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.
@@ -572,6 +835,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;
@@ -594,31 +863,69 @@ 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);
 	}
 	
 	/**
@@ -636,9 +943,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.
@@ -733,13 +1127,8 @@ 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];
@@ -880,6 +1269,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;
@@ -906,10 +1301,47 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 				case "importRule":
 				case "namespaceRule":
 				case "layerBlock":
-					token += ";"
+					if (character !== ";") {
+						token += ";";
+						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;
+					}
 			}
 		}
 		
+		// 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) {
 
 		case " ":
@@ -1007,6 +1439,15 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 
 		// At-rule
 		case "@":
+			if (nestedSelectorRule) {
+				if (styleRule && styleRule.constructor.name === "CSSNestedDeclarations") {
+					currentScope.cssRules.push(styleRule);
+				}
+				if (nestedSelectorRule.parentRule.constructor.name === "CSSStyleRule") {
+					styleRule = nestedSelectorRule.parentRule;
+				}
+				nestedSelectorRule = null;
+			}
 			if (token.indexOf("@-moz-document", i) === i) {
 				validateAtRule("@-moz-document", function(){
 					state = "documentRule-begin";
@@ -1141,7 +1582,7 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 			break;
 
 		case "{":
-			if (currentScope === styleSheet) {
+			if (currentScope === topScope) {
 				nestedSelectorRule = null;
 			}
 			if (state === 'before-selector') {
@@ -1163,7 +1604,7 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 
 				if (parentRule) {
 					styleRule.__parentRule = parentRule;
-					ancestorRules.push(parentRule);
+					pushToAncestorRules(parentRule);
 				}
 
 				currentScope = parentRule = styleRule;
@@ -1177,7 +1618,7 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 
 				if (parentRule) {
 					mediaRule.__parentRule = parentRule;
-					ancestorRules.push(parentRule);
+					pushToAncestorRules(parentRule);
 				}
 
 				currentScope = parentRule = mediaRule;
@@ -1189,7 +1630,7 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 
 				if (parentRule) {
 					containerRule.__parentRule = parentRule;
-					ancestorRules.push(parentRule);
+					pushToAncestorRules(parentRule);
 				}
 				currentScope = parentRule = containerRule;
 				containerRule.__parentStyleSheet = styleSheet;
@@ -1206,7 +1647,7 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 
 				if (parentRule) {
 					supportsRule.__parentRule = parentRule;
-					ancestorRules.push(parentRule);
+					pushToAncestorRules(parentRule);
 				}
 
 				currentScope = parentRule = supportsRule;
@@ -1228,7 +1669,7 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 
 				if (parentRule) {
 					scopeRule.__parentRule = parentRule;
-					ancestorRules.push(parentRule);
+					pushToAncestorRules(parentRule);
 				}
 				currentScope = parentRule = scopeRule;
 				scopeRule.__parentStyleSheet = styleSheet;
@@ -1242,7 +1683,7 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 				if (isValidName) {
 					if (parentRule) {
 						layerBlockRule.__parentRule = parentRule;
-						ancestorRules.push(parentRule);
+						pushToAncestorRules(parentRule);
 					}
 	
 					currentScope = parentRule = layerBlockRule;
@@ -1255,7 +1696,7 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 
 				if (parentRule) {
 					pageRule.__parentRule = parentRule;
-					ancestorRules.push(parentRule);
+					pushToAncestorRules(parentRule);
 				}
 
 				currentScope = parentRule = pageRule;
@@ -1265,7 +1706,7 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 				state = "before-name";
 			} else if (state === "hostRule-begin") {
 				if (parentRule) {
-					ancestorRules.push(parentRule);
+					pushToAncestorRules(parentRule);
 				}
 
 				currentScope = parentRule = hostRule;
@@ -1275,7 +1716,7 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 			} else if (state === "startingStyleRule-begin") {
 				if (parentRule) {
 					startingStyleRule.__parentRule = parentRule;
-					ancestorRules.push(parentRule);
+					pushToAncestorRules(parentRule);
 				}
 
 				currentScope = parentRule = startingStyleRule;
@@ -1294,7 +1735,7 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 			} else if (state === "keyframesRule-begin") {
 				keyframesRule.name = buffer.trim();
 				if (parentRule) {
-					ancestorRules.push(parentRule);
+					pushToAncestorRules(parentRule);
 					keyframesRule.__parentRule = parentRule;
 				}
 				keyframesRule.__parentStyleSheet = styleSheet;
@@ -1311,7 +1752,7 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 				// FIXME: what if this '{' is in the url text of the match function?
 				documentRule.matcher.matcherText = buffer.trim();
 				if (parentRule) {
-					ancestorRules.push(parentRule);
+					pushToAncestorRules(parentRule);
 					documentRule.__parentRule = parentRule;
 				}
 				currentScope = parentRule = documentRule;
@@ -1324,21 +1765,21 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 						parentRule.cssRules.push(styleRule);
 						styleRule.__parentRule = parentRule;
 						styleRule.__parentStyleSheet = styleSheet;
-						ancestorRules.push(parentRule);
+						pushToAncestorRules(parentRule);
 					} else {
 						// If the styleRule is empty, we can assume that it's a nested selector
-						ancestorRules.push(parentRule);
+						pushToAncestorRules(parentRule);
 					}
 				} else {
 					currentScope = parentRule = styleRule;
-					ancestorRules.push(parentRule);
+					pushToAncestorRules(parentRule);
 					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) {
+				if (parentRule.constructor.name === "CSSScopeRule" || (parentRule.constructor.name !== "CSSStyleRule" && parentRule.parentRule === null)) {
 					styleRule.selectorText = processedSelectorText;
 				} else {
 					styleRule.selectorText = parseAndSplitNestedSelectors(processedSelectorText).map(function(sel) {
@@ -1437,20 +1878,20 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 					state = "before-selector";
 					break;
 				case "importRule":
-					var isValid = styleSheet.cssRules.length === 0 || styleSheet.cssRules.some(function (rule) {
+					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.cssText = buffer + character;
-						styleSheet.cssRules.push(importRule);
+						topScope.cssRules.push(importRule);
 					}
 					buffer = "";
 					state = "before-selector";
 					break;
 				case "namespaceRule":
-					var isValid = styleSheet.cssRules.length === 0 || styleSheet.cssRules.every(function (rule) {
+					var isValid = topScope.cssRules.length === 0 || topScope.cssRules.every(function (rule) {
 						return ['CSSImportRule','CSSLayerStatementRule','CSSNamespaceRule'].indexOf(rule.constructor.name) !== -1
 					});
 					if (isValid) {
@@ -1461,7 +1902,7 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 							
 							namespaceRule = testNamespaceRule;
 							namespaceRule.__parentStyleSheet = styleSheet;
-							styleSheet.cssRules.push(namespaceRule);
+							topScope.cssRules.push(namespaceRule);
 							
 							// Track the namespace prefix for validation
 							if (namespaceRule.prefix) {
@@ -1488,7 +1929,7 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 						layerStatementRule.__starts = layerBlockRule.__starts;
 						layerStatementRule.__ends = i;
 						layerStatementRule.nameList = nameListStr;
-						styleSheet.cssRules.push(layerStatementRule);
+						topScope.cssRules.push(layerStatementRule);
 					}
 					buffer = "";
 					state = "before-selector";
@@ -1529,7 +1970,7 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 					styleRule.__parentStyleSheet = styleSheet;
 
 					if (currentScope === styleRule) {
-						currentScope = parentRule || styleSheet;
+						currentScope = parentRule || topScope;
 					}
 
 					if (styleRule.constructor.name === "CSSStyleRule" && !isValidSelectorText(styleRule.selectorText)) {
@@ -1538,7 +1979,11 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 						}
 						parseError('Invalid CSSStyleRule (selectorText = "' + styleRule.selectorText + '")', styleRule.parentRule !== null);
 					} else {
-						currentScope.cssRules.push(styleRule);
+						if (styleRule.parentRule) {
+							styleRule.parentRule.cssRules.push(styleRule);
+						} else {
+							currentScope.cssRules.push(styleRule);
+						}
 					}
 					buffer = "";
 					if (currentScope.constructor === CSSOM.CSSKeyframesRule) {
@@ -1548,7 +1993,7 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 					}
 
 					if (styleRule.constructor.name === "CSSNestedDeclarations") {
-						if (currentScope !== styleSheet) {
+						if (currentScope !== topScope) {
 							nestedSelectorRule = currentScope;
 						}
 						styleRule = null;
@@ -1571,7 +2016,6 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 						break;
 					}
 
-
 					while (ancestorRules.length > 0) {
 						parentRule = ancestorRules.pop();
 
@@ -1597,8 +2041,7 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 								}
 							} else {
 								prevScope = currentScope;
-								currentScope = parentRule;
-								currentScope !== prevScope && currentScope.cssRules.push(prevScope);
+								parentRule !== prevScope && parentRule.cssRules.push(prevScope);
 								break;
 							}
 						}
@@ -1606,12 +2049,12 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 					
 					if (currentScope.parentRule == null) {
 						currentScope.__ends = i + 1;
-						if (currentScope !== styleSheet && styleSheet.cssRules.findIndex(function (rule) {
+						if (currentScope !== topScope && topScope.cssRules.findIndex(function (rule) {
 							return rule === currentScope
 						}) === -1) {
-							styleSheet.cssRules.push(currentScope);
+							topScope.cssRules.push(currentScope);
 						}
-						currentScope = styleSheet;
+						currentScope = topScope;
 						if (nestedSelectorRule === parentRule) {
 							// Check if this selector is really starting inside another selector
 							var nestedSelectorTokenToCurrentSelectorToken = token.slice(nestedSelectorRule.__starts, i + 1);
@@ -1630,6 +2073,8 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 							parentRule = null;
 
 						}
+					} else {
+						currentScope = parentRule;
 					}
 
 					buffer = "";
@@ -1642,7 +2087,7 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 			switch (state) {
 				case "before-selector":
 					state = "selector";
-					if (styleRule && parentRule) {
+					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 (