@acemir/cssom 0.9.2 → 0.9.4

package/build/CSSOM.js

@@ -1807,16 +1807,19 @@ CSSOM.parse = function parse(token, errorHandler) {
 	 * - Class selectors (e.g., `.container`)
 	 * - Attribute selectors (e.g., `[type="text"]`)
 	 * - Pseudo-classes and pseudo-elements (e.g., `:hover`, `::before`, `:nth-child(2)`)
+	 * - Pseudo-classes with nested parentheses, including cases where parentheses are nested inside arguments,
+	 *   such as `:has(.sel:nth-child(3n))`
 	 * - 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.
+	 * possibly repeated and combined, including pseudo-classes with nested parentheses,
+	 * 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+)+$/;
+	var basicSelectorRegExp = /^([a-zA-Z][a-zA-Z0-9_-]*|\*|#[a-zA-Z0-9_-]+|\.[a-zA-Z0-9_-]+|\[[^\[\]]*(?:\s+[iI])?\]|::?[a-zA-Z0-9_-]+(?:\(((?:[^()"]+|"[^"]*"|'[^']*'|\((?:[^()"]+|"[^"]*"|'[^']*')*\))*?)\))?|&|\s*[>+~]\s*|\s+)+$/;
 
 	/**
 	 * Regular expression to match CSS pseudo-classes with arguments.
@@ -1825,16 +1828,17 @@ CSSOM.parse = function parse(token, errorHandler) {
 	 *
 	 * Capture groups:
 	 *   1. The pseudo-class name (letters and hyphens).
-	 *   2. The argument inside the parentheses (any characters except a closing parenthesis).
+	 *   2. The argument inside the parentheses (can contain nested parentheses, quoted strings, and other characters.).
 	 *
 	 * 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"
+	 * Example matches:
+	 *   - :nth-child(2n+1)
+	 *   - :has(.sel:nth-child(3n))
+	 *   - :not(".foo, .bar")
 	 * @type {RegExp}
 	 */
-	var globalPseudoClassRegExp = /:([a-zA-Z-]+)\(([^)]*)\)/g;
+	var globalPseudoClassRegExp = /:([a-zA-Z-]+)\(((?:[^()"]+|"[^"]*"|'[^']*'|\((?:[^()"]+|"[^"]*"|'[^']*')*\))*?)\)/g;
 
 	/**
 	 * Parses a CSS selector string and splits it into parts, handling nested parentheses.
@@ -1846,30 +1850,42 @@ CSSOM.parse = function parse(token, errorHandler) {
 	 * @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) {
+	function parseAndSplitNestedSelectors(selector) {
 		var depth = 0;
 		var buffer = "";
 		var parts = [];
+		var inSingleQuote = false;
+		var inDoubleQuote = false;
 		var i, char;
 
 		for (i = 0; i < selector.length; i++) {
 			char = selector.charAt(i);
 
-			if (char === '(') {
-				depth++;
+			if (char === "'" && !inDoubleQuote) {
+				inSingleQuote = !inSingleQuote;
 				buffer += char;
-			} else if (char === ')') {
-				depth--;
+			} else if (char === '"' && !inSingleQuote) {
+				inDoubleQuote = !inDoubleQuote;
 				buffer += char;
-				if (depth === 0) {
-					parts.push(buffer.replace(/^\s+|\s+$/g, ""));
+			} else if (!inSingleQuote && !inDoubleQuote) {
+				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;
 				}
-			} else if (char === ',' && depth === 0) {
-				if (buffer.replace(/^\s+|\s+$/g, "")) {
-					parts.push(buffer.replace(/^\s+|\s+$/g, ""));
-				}
-				buffer = "";
 			} else {
 				buffer += char;
 			}
@@ -1908,7 +1924,7 @@ CSSOM.parse = function parse(token, errorHandler) {
 		while ((match = pseudoClassRegExp.exec(selector)) !== null) {
 			var pseudoClass = match[1];
 			if (selectorListPseudoClasses.hasOwnProperty(pseudoClass)) {
-				nestedSelectors = parseNestedSelectors(match[2]);
+				nestedSelectors = parseAndSplitNestedSelectors(match[2]);
 				// Validate each nested selector
 				for (i = 0; i < nestedSelectors.length; i++) {
 					if (!validateSelector(nestedSelectors[i])) {
@@ -1931,9 +1947,10 @@ CSSOM.parse = function parse(token, errorHandler) {
 	 */
 	function isValidSelectorText(selectorText) {
 		// Split selectorText by commas and validate each part
-		var selectors = selectorText.split(',');
+		var selectors = parseAndSplitNestedSelectors(selectorText);
 		for (var i = 0; i < selectors.length; i++) {
-			if (!validateSelector(selectors[i].replace(/^\s+|\s+$/g, ""))) {
+			var processedSelectors = selectors[i].replace(/^\s+|\s+$/g, "");
+			if (!validateSelector(processedSelectors)) {
 				return false;
 			}
 		}
@@ -2159,7 +2176,6 @@ CSSOM.parse = function parse(token, errorHandler) {
 				}
 
 				currentScope = parentRule = styleRule;
-				console.log('sel out', buffer);
 				styleRule.selectorText = buffer.trim();
 				styleRule.style.__starts = i;
 				styleRule.parentStyleSheet = styleSheet;
@@ -2289,9 +2305,8 @@ CSSOM.parse = function parse(token, errorHandler) {
 				}
 				
 				styleRule = new CSSOM.CSSStyleRule();
-				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) {
+				styleRule.selectorText = parseAndSplitNestedSelectors(buffer.trim()).map(function(sel) {
 						return sel.indexOf('&') === -1 ? '& ' + sel : sel;
 					}).join(', ');
 				styleRule.style.__starts = i - buffer.length;

package/lib/parse.js

@@ -240,16 +240,19 @@ CSSOM.parse = function parse(token, errorHandler) {
 	 * - Class selectors (e.g., `.container`)
 	 * - Attribute selectors (e.g., `[type="text"]`)
 	 * - Pseudo-classes and pseudo-elements (e.g., `:hover`, `::before`, `:nth-child(2)`)
+	 * - Pseudo-classes with nested parentheses, including cases where parentheses are nested inside arguments,
+	 *   such as `:has(.sel:nth-child(3n))`
 	 * - 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.
+	 * possibly repeated and combined, including pseudo-classes with nested parentheses,
+	 * 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+)+$/;
+	var basicSelectorRegExp = /^([a-zA-Z][a-zA-Z0-9_-]*|\*|#[a-zA-Z0-9_-]+|\.[a-zA-Z0-9_-]+|\[[^\[\]]*(?:\s+[iI])?\]|::?[a-zA-Z0-9_-]+(?:\(((?:[^()"]+|"[^"]*"|'[^']*'|\((?:[^()"]+|"[^"]*"|'[^']*')*\))*?)\))?|&|\s*[>+~]\s*|\s+)+$/;
 
 	/**
 	 * Regular expression to match CSS pseudo-classes with arguments.
@@ -258,16 +261,17 @@ CSSOM.parse = function parse(token, errorHandler) {
 	 *
 	 * Capture groups:
 	 *   1. The pseudo-class name (letters and hyphens).
-	 *   2. The argument inside the parentheses (any characters except a closing parenthesis).
+	 *   2. The argument inside the parentheses (can contain nested parentheses, quoted strings, and other characters.).
 	 *
 	 * 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"
+	 * Example matches:
+	 *   - :nth-child(2n+1)
+	 *   - :has(.sel:nth-child(3n))
+	 *   - :not(".foo, .bar")
 	 * @type {RegExp}
 	 */
-	var globalPseudoClassRegExp = /:([a-zA-Z-]+)\(([^)]*)\)/g;
+	var globalPseudoClassRegExp = /:([a-zA-Z-]+)\(((?:[^()"]+|"[^"]*"|'[^']*'|\((?:[^()"]+|"[^"]*"|'[^']*')*\))*?)\)/g;
 
 	/**
 	 * Parses a CSS selector string and splits it into parts, handling nested parentheses.
@@ -279,30 +283,42 @@ CSSOM.parse = function parse(token, errorHandler) {
 	 * @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) {
+	function parseAndSplitNestedSelectors(selector) {
 		var depth = 0;
 		var buffer = "";
 		var parts = [];
+		var inSingleQuote = false;
+		var inDoubleQuote = false;
 		var i, char;
 
 		for (i = 0; i < selector.length; i++) {
 			char = selector.charAt(i);
 
-			if (char === '(') {
-				depth++;
+			if (char === "'" && !inDoubleQuote) {
+				inSingleQuote = !inSingleQuote;
 				buffer += char;
-			} else if (char === ')') {
-				depth--;
+			} else if (char === '"' && !inSingleQuote) {
+				inDoubleQuote = !inDoubleQuote;
 				buffer += char;
-				if (depth === 0) {
-					parts.push(buffer.replace(/^\s+|\s+$/g, ""));
+			} else if (!inSingleQuote && !inDoubleQuote) {
+				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;
 				}
-			} else if (char === ',' && depth === 0) {
-				if (buffer.replace(/^\s+|\s+$/g, "")) {
-					parts.push(buffer.replace(/^\s+|\s+$/g, ""));
-				}
-				buffer = "";
 			} else {
 				buffer += char;
 			}
@@ -341,7 +357,7 @@ CSSOM.parse = function parse(token, errorHandler) {
 		while ((match = pseudoClassRegExp.exec(selector)) !== null) {
 			var pseudoClass = match[1];
 			if (selectorListPseudoClasses.hasOwnProperty(pseudoClass)) {
-				nestedSelectors = parseNestedSelectors(match[2]);
+				nestedSelectors = parseAndSplitNestedSelectors(match[2]);
 				// Validate each nested selector
 				for (i = 0; i < nestedSelectors.length; i++) {
 					if (!validateSelector(nestedSelectors[i])) {
@@ -364,9 +380,10 @@ CSSOM.parse = function parse(token, errorHandler) {
 	 */
 	function isValidSelectorText(selectorText) {
 		// Split selectorText by commas and validate each part
-		var selectors = selectorText.split(',');
+		var selectors = parseAndSplitNestedSelectors(selectorText);
 		for (var i = 0; i < selectors.length; i++) {
-			if (!validateSelector(selectors[i].replace(/^\s+|\s+$/g, ""))) {
+			var processedSelectors = selectors[i].replace(/^\s+|\s+$/g, "");
+			if (!validateSelector(processedSelectors)) {
 				return false;
 			}
 		}
@@ -592,7 +609,6 @@ CSSOM.parse = function parse(token, errorHandler) {
 				}
 
 				currentScope = parentRule = styleRule;
-				console.log('sel out', buffer);
 				styleRule.selectorText = buffer.trim();
 				styleRule.style.__starts = i;
 				styleRule.parentStyleSheet = styleSheet;
@@ -722,9 +738,8 @@ CSSOM.parse = function parse(token, errorHandler) {
 				}
 				
 				styleRule = new CSSOM.CSSStyleRule();
-				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) {
+				styleRule.selectorText = parseAndSplitNestedSelectors(buffer.trim()).map(function(sel) {
 						return sel.indexOf('&') === -1 ? '& ' + sel : sel;
 					}).join(', ');
 				styleRule.style.__starts = i - buffer.length;

package/package.json

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