@acemir/cssom 0.9.0 → 0.9.2

package/lib/parse.js

@@ -6,7 +6,8 @@ var CSSOM = {};
 /**
  * @param {string} token
  */
-CSSOM.parse = function parse(token) {
+CSSOM.parse = function parse(token, errorHandler) {
+	errorHandler = errorHandler === undefined && (console && console.error);
 
 	var i = 0;
 
@@ -28,6 +29,8 @@ CSSOM.parse = function parse(token) {
 	var valueParenthesisDepth = 0;
 
 	var SIGNIFICANT_WHITESPACE = {
+		"name": true,
+		"before-name": true,
 		"selector": true,
 		"value": true,
 		"value-parenthesis": true,
@@ -50,17 +53,57 @@ CSSOM.parse = function parse(token) {
 	var parentRule;
 
 	var ancestorRules = [];
-	var hasAncestors = false;
 	var prevScope;
 
-	var name, priority="", styleRule, mediaRule, containerRule, supportsRule, importRule, fontFaceRule, keyframesRule, documentRule, hostRule, startingStyleRule, layerBlockRule, nestedSelectorRule;
+	var name, priority="", styleRule, mediaRule, containerRule, supportsRule, importRule, fontFaceRule, keyframesRule, documentRule, hostRule, startingStyleRule, layerBlockRule, layerStatementRule, nestedSelectorRule;
 
 	var atKeyframesRegExp = /@(-(?:\w+-)+)?keyframes/g; // Match @keyframes and vendor-prefixed @keyframes
-	var atRulesStatemenRegExp = /(?<!{.*)[;}]\s*/; // Match a statement by verifying it finds a semicolon or closing brace not followed by another semicolon or closing brace
+	// Regex above is not ES5 compliant
+	// var atRulesStatemenRegExp = /(?<!{.*)[;}]\s*/; // Match a statement by verifying it finds a semicolon or closing brace not followed by another semicolon or closing brace
 	var beforeRulePortionRegExp = /{(?!.*{)|}(?!.*})|;(?!.*;)|\*\/(?!.*\*\/)/g; // Match the closest allowed character (a opening or closing brace, a semicolon or a comment ending) before the rule
 	var beforeRuleValidationRegExp = /^[\s{};]*(\*\/\s*)?$/; // Match that the portion before the rule is empty or contains only whitespace, semicolons, opening/closing braces, and optionally a comment ending (*/) followed by whitespace
 	var forwardRuleValidationRegExp = /(?:\(|\s|\/\*)/; // Match that the rule is followed by any whitespace, a opening comment or a condition opening parenthesis
+	var forwardImportRuleValidationRegExp = /(?:\s|\/\*|'|")/; // Match that the rule is followed by any whitespace, an opening comment, a single quote or double quote
 	var forwardRuleClosingBraceRegExp = /{[^{}]*}|}/; // Finds the next closing brace of a rule block
+	var forwardRuleSemicolonAndOpeningBraceRegExp = /^.*?({|;)/; // Finds the next semicolon or opening brace after the at-rule	
+	var layerRuleNameRegExp = /^(-?[_a-zA-Z]+[_a-zA-Z0-9-]*)$/; // Validates a single @layer name
+
+	/**
+	 * Searches for the first occurrence of a CSS at-rule statement terminator (`;` or `}`) 
+	 * that is not inside a brace block within the given string. Mimics the behavior of a 
+	 * regular expression match for such terminators, including any trailing whitespace.
+	 * @param {string} str - The string to search for at-rule statement terminators.
+	 * @returns {object | null} {0: string, index: number} or null if no match is found.
+	 */
+	function atRulesStatemenRegExpES5Alternative(ruleSlice) {
+		for (var i = 0; i < ruleSlice.length; i++) {
+			var char = ruleSlice[i];
+
+			if (char === ';' || char === '}') {
+				// Simulate negative lookbehind: check if there is a { before this position
+				var sliceBefore = ruleSlice.substring(0, i);
+				var openBraceIndex = sliceBefore.indexOf('{');
+
+				if (openBraceIndex === -1) {
+					// No { found before, so we treat it as a valid match
+					var match = char;
+					var j = i + 1;
+
+					while (j < ruleSlice.length && /\s/.test(ruleSlice[j])) {
+						match += ruleSlice[j];
+						j++;
+					}
+
+					var matchObj = [match];
+					matchObj.index = i;
+					matchObj.input = ruleSlice;
+					return matchObj;
+				}
+			}
+		}
+
+		return null;
+	}
 
 	/**
 	 * Finds the first balanced block (including nested braces) in the string, starting from fromIndex.
@@ -69,17 +112,18 @@ CSSOM.parse = function parse(token) {
 	 * @param {number} [fromIndex=0] - The index to start searching from.
 	 * @returns {object|null} - { 0: matchedString, index: startIndex, input: str } or null if not found.
 	 */
-	function matchBalancedBlock(str, fromIndex = 0) {
-		const openIndex = str.indexOf('{', fromIndex);
+	function matchBalancedBlock(str, fromIndex) {
+		fromIndex = fromIndex || 0;
+		var openIndex = str.indexOf('{', fromIndex);
 		if (openIndex === -1) return null;
-		let depth = 0;
-		for (let i = openIndex; i < str.length; i++) {
+		var depth = 0;
+		for (var i = openIndex; i < str.length; i++) {
 			if (str[i] === '{') {
 				depth++;
 			} else if (str[i] === '}') {
 				depth--;
 				if (depth === 0) {
-					const matchedString = str.slice(openIndex, i + 1);
+					var matchedString = str.slice(openIndex, i + 1);
 					return {
 						0: matchedString,
 						index: openIndex,
@@ -91,6 +135,29 @@ CSSOM.parse = function parse(token) {
 		return null;
 	}
 
+	/**
+	 * Advances the index `i` to skip over a balanced block of curly braces in the given string.
+	 * This is typically used to ignore the contents of a CSS rule block.
+	 *
+	 * @param {number} i - The current index in the string to start searching from.
+	 * @param {string} str - The string containing the CSS code.
+	 * @param {number} fromIndex - The index in the string where the balanced block search should begin.
+	 * @returns {number} The updated index after skipping the balanced block.
+	 */
+	function ignoreBalancedBlock(i, str, fromIndex) {
+		var ruleClosingMatch = matchBalancedBlock(str, fromIndex);
+		if (ruleClosingMatch) {
+			var ignoreRange = ruleClosingMatch.index + ruleClosingMatch[0].length;
+			i+= ignoreRange;
+			if (token.charAt(i) === '}') {
+				i -= 1;
+			}
+		} else {
+			i += str.length;
+		}
+		return i;	
+	}
+
 	var parseError = function(message) {
 		var lines = token.substring(0, i).split('\n');
 		var lineCount = lines.length;
@@ -100,12 +167,18 @@ CSSOM.parse = function parse(token) {
 		/* jshint sub : true */
 		error['char'] = charCount;
 		error.styleSheet = styleSheet;
-		throw error;
+		// Print the error but continue parsing the sheet
+		try {
+			throw error;
+		} catch(e) {
+			errorHandler && errorHandler(e);
+		}
 	};
 
 	var validateAtRule = function(atRuleKey, validCallback, cannotBeNested) {
 		var isValid = false;
-		var ruleRegExp = new RegExp(atRuleKey + forwardRuleValidationRegExp.source, forwardRuleValidationRegExp.flags);
+		var sourceRuleRegExp = atRuleKey === "@import" ? forwardImportRuleValidationRegExp : forwardRuleValidationRegExp;
+		var ruleRegExp = new RegExp(atRuleKey + sourceRuleRegExp.source, sourceRuleRegExp.flags);
 		var ruleSlice = token.slice(i);
 		// Not all rules can be nested, if the rule cannot be nested and is in the root scope, do not perform the check
 		var shouldPerformCheck = cannotBeNested && currentScope !== styleSheet ? false : true;
@@ -127,7 +200,9 @@ CSSOM.parse = function parse(token) {
 			// If it's invalid the browser will simply ignore the entire invalid block
 			// Use regex to find the closing brace of the invalid rule
 			
-			var ruleStatementMatch = ruleSlice.match(atRulesStatemenRegExp);
+			// Regex used above is not ES5 compliant. Using alternative.
+			// var ruleStatementMatch = ruleSlice.match(atRulesStatemenRegExp); //
+			var ruleStatementMatch = atRulesStatemenRegExpES5Alternative(ruleSlice);
 
 			// If it's a statement inside a nested rule, ignore only the statement
 			if (ruleStatementMatch && currentScope !== styleSheet) {
@@ -136,25 +211,179 @@ CSSOM.parse = function parse(token) {
 				return;
 			}
 
-			// Ignore the entire rule block (if it's a statement it should ignore the statement plus the next block)
-			var ruleClosingMatch = matchBalancedBlock(ruleSlice);
-			if (ruleClosingMatch) {
-				const ignoreRange = ruleClosingMatch.index + ruleClosingMatch[0].length;
-				i+= ignoreRange;
-				if (token.charAt(i) === '}') {
-					i -= 1;
+			// Check if there's a semicolon before the invalid at-rule and the first opening brace
+			if (atRuleKey === "@layer") {
+				var ruleSemicolonAndOpeningBraceMatch = ruleSlice.match(forwardRuleSemicolonAndOpeningBraceRegExp);
+				if (ruleSemicolonAndOpeningBraceMatch && ruleSemicolonAndOpeningBraceMatch[1] === ";" ) {
+					// Ignore the rule block until the semicolon
+					i += ruleSemicolonAndOpeningBraceMatch.index + ruleSemicolonAndOpeningBraceMatch[0].length;
+					state = "before-selector";
+					return;
 				}
-			} else {
-				i += ruleSlice.length;
 			}
+
+			// Ignore the entire rule block (if it's a statement it should ignore the statement plus the next block)
+			i = ignoreBalancedBlock(i, ruleSlice);
 			state = "before-selector";
 		} else {
 			validCallback.call(this);
 		}
 	}
 
-	for (var character; (character = token.charAt(i)); i++) {
+	/**
+	 * Regular expression to match a basic CSS selector.
+	 *
+	 * This regex matches the following selector components:
+	 * - Type selectors (e.g., `div`, `span`)
+	 * - Universal selector (`*`)
+	 * - ID selectors (e.g., `#header`)
+	 * - Class selectors (e.g., `.container`)
+	 * - Attribute selectors (e.g., `[type="text"]`)
+	 * - Pseudo-classes and pseudo-elements (e.g., `:hover`, `::before`, `:nth-child(2)`)
+	 * - The parent selector (`&`)
+	 * - Combinators (`>`, `+`, `~`) with optional whitespace
+	 * - Whitespace (descendant combinator)
+	 *
+	 * The pattern ensures that a string consists only of valid basic selector components,
+	 * possibly repeated and combined, but does not match full CSS selector groups separated by commas.
+	 *
+	 * @type {RegExp}
+	 */
+	var basicSelectorRegExp = /^([a-zA-Z][a-zA-Z0-9_-]*|\*|#[a-zA-Z0-9_-]+|\.[a-zA-Z0-9_-]+|\[[^\[\]]*\]|::?[a-zA-Z0-9_-]+(?:\([^\(\)]*\))?|&|\s*[>+~]\s*|\s+)+$/;
+
+	/**
+	 * Regular expression to match CSS pseudo-classes with arguments.
+	 *
+	 * Matches patterns like `:pseudo-class(argument)`, capturing the pseudo-class name and its argument.
+	 *
+	 * Capture groups:
+	 *   1. The pseudo-class name (letters and hyphens).
+	 *   2. The argument inside the parentheses (any characters except a closing parenthesis).
+	 *
+	 * Global flag (`g`) is used to find all matches in the input string.
+	 *
+	 * Example match: `:nth-child(2n+1)`
+	 *   - Group 1: "nth-child"
+	 *   - Group 2: "2n+1"
+	 * @type {RegExp}
+	 */
+	var globalPseudoClassRegExp = /:([a-zA-Z-]+)\(([^)]*)\)/g;
+
+	/**
+	 * Parses a CSS selector string and splits it into parts, handling nested parentheses.
+	 *
+	 * This function is useful for splitting selectors that may contain nested function-like
+	 * syntax (e.g., :not(.foo, .bar)), ensuring that commas inside parentheses do not split
+	 * the selector.
+	 *
+	 * @param {string} selector - The CSS selector string to parse.
+	 * @returns {string[]} An array of selector parts, split by top-level commas, with whitespace trimmed.
+	 */
+	function parseNestedSelectors(selector) {
+		var depth = 0;
+		var buffer = "";
+		var parts = [];
+		var i, char;
+
+		for (i = 0; i < selector.length; i++) {
+			char = selector.charAt(i);
+
+			if (char === '(') {
+				depth++;
+				buffer += char;
+			} else if (char === ')') {
+				depth--;
+				buffer += char;
+				if (depth === 0) {
+					parts.push(buffer.replace(/^\s+|\s+$/g, ""));
+					buffer = "";
+				}
+			} else if (char === ',' && depth === 0) {
+				if (buffer.replace(/^\s+|\s+$/g, "")) {
+					parts.push(buffer.replace(/^\s+|\s+$/g, ""));
+				}
+				buffer = "";
+			} else {
+				buffer += char;
+			}
+		}
+
+		if (buffer.replace(/^\s+|\s+$/g, "")) {
+			parts.push(buffer.replace(/^\s+|\s+$/g, ""));
+		}
+
+		return parts;
+	}
+
+	/**
+	 * Validates a CSS selector string, including handling of nested selectors within certain pseudo-classes.
+	 *
+	 * This function checks if the provided selector is valid according to the rules defined by
+	 * `basicSelectorRegExp`. For pseudo-classes that accept selector lists (such as :not, :is, :has, :where),
+	 * it recursively validates each nested selector using the same validation logic.
+	 *
+	 * @param {string} selector - The CSS selector string to validate.
+	 * @returns {boolean} Returns `true` if the selector is valid, otherwise `false`.
+	 */
+	function validateSelector(selector) {
+		var match, nestedSelectors, i;
+
+		// Only pseudo-classes that accept selector lists should recurse
+		var selectorListPseudoClasses = {
+			'not': true,
+			'is': true,
+			'has': true,
+			'where': true
+		};
 
+		// Reset regex lastIndex for global regex in ES5 loop
+		var pseudoClassRegExp = new RegExp(globalPseudoClassRegExp.source, globalPseudoClassRegExp.flags);
+		while ((match = pseudoClassRegExp.exec(selector)) !== null) {
+			var pseudoClass = match[1];
+			if (selectorListPseudoClasses.hasOwnProperty(pseudoClass)) {
+				nestedSelectors = parseNestedSelectors(match[2]);
+				// Validate each nested selector
+				for (i = 0; i < nestedSelectors.length; i++) {
+					if (!validateSelector(nestedSelectors[i])) {
+						return false;
+					}
+				}
+			}
+		}
+
+		// Allow "&" anywhere in the selector for nested selectors
+		return basicSelectorRegExp.test(selector);
+	}
+
+	/**
+	 * Checks if a given CSS selector text is valid by splitting it by commas
+	 * and validating each individual selector using the `validateSelector` function.
+	 *
+	 * @param {string} selectorText - The CSS selector text to validate. Can contain multiple selectors separated by commas.
+	 * @returns {boolean} Returns true if all selectors are valid, otherwise false.
+	 */
+	function isValidSelectorText(selectorText) {
+		// Split selectorText by commas and validate each part
+		var selectors = selectorText.split(',');
+		for (var i = 0; i < selectors.length; i++) {
+			if (!validateSelector(selectors[i].replace(/^\s+|\s+$/g, ""))) {
+				return false;
+			}
+		}
+		return true;
+	}
+
+	var endingIndex = token.length - 1;
+
+	for (var character; (character = token.charAt(i)); i++) {
+		if (i === endingIndex) {
+			switch (state) {
+				case "importRule":
+				case "layerBlock":
+					token += ";"
+			}
+		}
+		
 		switch (character) {
 
 		case " ":
@@ -176,6 +405,9 @@ CSSOM.parse = function parse(token) {
 					parseError('Unmatched "');
 				}
 			} while (token[index - 2] === '\\');
+			if (index === 0) {
+				break;
+			}
 			buffer += token.slice(i, index);
 			i = index - 1;
 			switch (state) {
@@ -184,6 +416,9 @@ CSSOM.parse = function parse(token) {
 					break;
 				case 'importRule-begin':
 					state = 'importRule';
+					if (i === endingIndex) {
+						token += ';'
+					}
 					break;
 			}
 			break;
@@ -196,6 +431,9 @@ CSSOM.parse = function parse(token) {
 					parseError("Unmatched '");
 				}
 			} while (token[index - 2] === '\\');
+			if (index === 0) {
+				break;
+			}
 			buffer += token.slice(i, index);
 			i = index - 1;
 			switch (state) {
@@ -331,8 +569,13 @@ CSSOM.parse = function parse(token) {
 			if (currentScope === styleSheet) {
 				nestedSelectorRule = null;
 			}
+			if (state === 'before-selector') {
+				parseError("Unexpected {");
+				i = ignoreBalancedBlock(i, token.slice(i));
+				break;
+			}
 			if (state === "selector" || state === "atRule") {
-				if (!nestedSelectorRule && buffer.includes(";")) {
+				if (!nestedSelectorRule && buffer.indexOf(";") !== -1) {
 					var ruleClosingMatch = token.slice(i).match(forwardRuleClosingBraceRegExp);
 					if (ruleClosingMatch) {
 						styleRule = null;
@@ -349,6 +592,7 @@ CSSOM.parse = function parse(token) {
 				}
 
 				currentScope = parentRule = styleRule;
+				console.log('sel out', buffer);
 				styleRule.selectorText = buffer.trim();
 				styleRule.style.__starts = i;
 				styleRule.parentStyleSheet = styleSheet;
@@ -390,15 +634,19 @@ CSSOM.parse = function parse(token) {
 				buffer = "";
 				state = "before-selector";
 			} else if (state === "layerBlock") {
-				layerBlockRule.layerNameText = buffer.trim();
+				layerBlockRule.name = buffer.trim();
 
-				if (parentRule) {
-					layerBlockRule.parentRule = parentRule;
-					ancestorRules.push(parentRule);
-				}
+				var isValidName = layerBlockRule.name.length === 0 || layerBlockRule.name.match(layerRuleNameRegExp) !== null;
 
-				currentScope = parentRule = layerBlockRule;
-				layerBlockRule.parentStyleSheet = styleSheet;
+				if (isValidName) {
+					if (parentRule) {
+						layerBlockRule.parentRule = parentRule;
+						ancestorRules.push(parentRule);
+					}
+	
+					currentScope = parentRule = layerBlockRule;
+					layerBlockRule.parentStyleSheet = styleSheet;
+				}
 				buffer = "";
 				state = "before-selector";
 			} else if (state === "hostRule-begin") {
@@ -456,7 +704,7 @@ CSSOM.parse = function parse(token) {
 				documentRule.parentStyleSheet = styleSheet;
 				buffer = "";
 				state = "before-selector";
-			} else if (state === "name") {
+			} else if (state === "before-name" || state === "name") {
 				if (styleRule.constructor.name === "CSSNestedDeclarations") {
 					if (styleRule.style.length) {
 						parentRule.cssRules.push(styleRule);
@@ -473,9 +721,12 @@ CSSOM.parse = function parse(token) {
 					styleRule.parentStyleSheet = styleSheet;
 				}
 				
-				
 				styleRule = new CSSOM.CSSStyleRule();
-				styleRule.selectorText = buffer.trim();
+				console.log('sel in', buffer);
+				// In a nested selector, ensure each selector contains '&' at the beginning, except for selectors that already have '&' somewhere
+				styleRule.selectorText = parseNestedSelectors(buffer.trim()).map(function(sel) {
+						return sel.indexOf('&') === -1 ? '& ' + sel : sel;
+					}).join(', ');
 				styleRule.style.__starts = i - buffer.length;
 				styleRule.parentRule = parentRule;
 				nestedSelectorRule = styleRule;
@@ -550,8 +801,14 @@ CSSOM.parse = function parse(token) {
 
 		case ";":
 			switch (state) {
+				case "before-value":
+				case "before-name":
+					parseError("Unexpected ;");
+					buffer = "";
+					state = "before-name";
+					break;
 				case "value":
-					styleRule.style.setProperty(name, buffer.trim(), priority);
+					styleRule.style.setProperty(name, buffer.trim(), priority, parseError);
 					priority = "";
 					buffer = "";
 					state = "before-name";
@@ -561,10 +818,34 @@ CSSOM.parse = function parse(token) {
 					state = "before-selector";
 					break;
 				case "importRule":
-					importRule = new CSSOM.CSSImportRule();
-					importRule.parentStyleSheet = importRule.styleSheet.parentStyleSheet = styleSheet;
-					importRule.cssText = buffer + character;
-					styleSheet.cssRules.push(importRule);
+					var isValid = styleSheet.cssRules.length === 0 || styleSheet.cssRules.some(function (rule) {
+						return ['CSSImportRule', 'CSSLayerStatementRule'].indexOf(rule.constructor.name) !== -1
+					});
+					if (isValid) {
+						importRule = new CSSOM.CSSImportRule();
+						importRule.parentStyleSheet = importRule.styleSheet.parentStyleSheet = styleSheet;
+						importRule.cssText = buffer + character;
+						styleSheet.cssRules.push(importRule);
+					}
+					buffer = "";
+					state = "before-selector";
+					break;
+				case "layerBlock":
+					var nameListStr = buffer.trim().split(",").map(function (name) {
+						return name.trim();
+					});
+					var isInvalid = parentRule !== undefined || nameListStr.some(function (name) {
+						return name.trim().match(layerRuleNameRegExp) === null;
+					});
+
+					if (!isInvalid) {
+						layerStatementRule = new CSSOM.CSSLayerStatementRule();
+						layerStatementRule.parentStyleSheet = styleSheet;
+						layerStatementRule.__starts = layerBlockRule.__starts;
+						layerStatementRule.__ends = i;
+						layerStatementRule.nameList = nameListStr;
+						styleSheet.cssRules.push(layerStatementRule);
+					}
 					buffer = "";
 					state = "before-selector";
 					break;
@@ -577,9 +858,10 @@ CSSOM.parse = function parse(token) {
 		case "}":
 			switch (state) {
 				case "value":
-					styleRule.style.setProperty(name, buffer.trim(), priority);
+					styleRule.style.setProperty(name, buffer.trim(), priority, parseError);
 					priority = "";
 					/* falls through */
+				case "before-value":
 				case "before-name":
 				case "name":
 					styleRule.__ends = i + 1;
@@ -597,7 +879,14 @@ CSSOM.parse = function parse(token) {
 						currentScope = parentRule || styleSheet;
 					}
 
-					currentScope.cssRules.push(styleRule);
+					if (styleRule.constructor.name === "CSSStyleRule" && !isValidSelectorText(styleRule.selectorText)) {
+						if (styleRule === nestedSelectorRule) {
+							nestedSelectorRule = null;
+						}
+						parseError('Invalid CSSStyleRule.selectorText');
+					} else {
+						currentScope.cssRules.push(styleRule);
+					}
 					buffer = "";
 					if (currentScope.constructor === CSSOM.CSSKeyframesRule) {
 						state = "keyframeRule-begin";
@@ -619,12 +908,16 @@ CSSOM.parse = function parse(token) {
 				case "selector":
 					// End of media/supports/document rule.
 					if (!parentRule) {
+						parseError("Unexpected }");
+						
+						var hasPreviousStyleRule = currentScope.cssRules.length && currentScope.cssRules[currentScope.cssRules.length - 1].constructor.name === "CSSStyleRule";
+						if (hasPreviousStyleRule) {
+							i = ignoreBalancedBlock(i, token.slice(i), 1);
+						}
+						
 						break;
-						//parseError("Unexpected }");
 					}
 
-					// Handle rules nested in @media or @supports
-					hasAncestors = ancestorRules.length > 0;
 
 					while (ancestorRules.length > 0) {
 						parentRule = ancestorRules.pop();
@@ -651,14 +944,10 @@ CSSOM.parse = function parse(token) {
 							} else {
 								prevScope = currentScope;
 								currentScope = parentRule;
-								currentScope.cssRules.push(prevScope);
+								currentScope !== prevScope && currentScope.cssRules.push(prevScope);
 								break;
 							}
 						}
-
-						if (ancestorRules.length === 0) {
-							hasAncestors = false;
-						}
 					}
 					
 					if (currentScope.parentRule == null) {
@@ -672,8 +961,12 @@ CSSOM.parse = function parse(token) {
 						if (nestedSelectorRule === parentRule) {
 							// Check if this selector is really starting inside another selector
 							var nestedSelectorTokenToCurrentSelectorToken = token.slice(nestedSelectorRule.__starts, i + 1);
-							
-							if (nestedSelectorTokenToCurrentSelectorToken.match(/{/g)?.length === nestedSelectorTokenToCurrentSelectorToken.match(/}/g)?.length) {
+							var openingBraceMatch = nestedSelectorTokenToCurrentSelectorToken.match(/{/g);
+							var closingBraceMatch = nestedSelectorTokenToCurrentSelectorToken.match(/}/g);
+							var openingBraceLen = openingBraceMatch && openingBraceMatch.length;
+							var closingBraceLen = closingBraceMatch && closingBraceMatch.length;
+
+							if (openingBraceLen === closingBraceLen) {
 								// If the number of opening and closing braces are equal, we can assume that the new selector is starting outside the nestedSelectorRule
 								nestedSelectorRule.__ends = i + 1;
 								nestedSelectorRule = null;
@@ -780,4 +1073,5 @@ CSSOM.CSSKeyframesRule = require('./CSSKeyframesRule').CSSKeyframesRule;
 CSSOM.CSSValueExpression = require('./CSSValueExpression').CSSValueExpression;
 CSSOM.CSSDocumentRule = require('./CSSDocumentRule').CSSDocumentRule;
 CSSOM.CSSLayerBlockRule = require("./CSSLayerBlockRule").CSSLayerBlockRule;
+CSSOM.CSSLayerStatementRule = require("./CSSLayerStatementRule").CSSLayerStatementRule;
 ///CommonJS

package/package.json

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