@acemir/cssom 0.9.10 → 0.9.12

package/build/CSSOM.js

@@ -847,6 +847,73 @@ Object.defineProperty(CSSOM.CSSImportRule.prototype, "cssText", {
 
 
 
+/**
+ * @constructor
+ * @see https://drafts.csswg.org/cssom/#the-cssnamespacerule-interface
+ */
+CSSOM.CSSNamespaceRule = function CSSNamespaceRule() {
+	CSSOM.CSSRule.call(this);
+	this.prefix = "";
+	this.namespaceURI = "";
+	this.styleSheet = new CSSOM.CSSStyleSheet();
+};
+
+CSSOM.CSSNamespaceRule.prototype = new CSSOM.CSSRule();
+CSSOM.CSSNamespaceRule.prototype.constructor = CSSOM.CSSNamespaceRule;
+CSSOM.CSSNamespaceRule.prototype.type = 10;
+
+Object.defineProperty(CSSOM.CSSNamespaceRule.prototype, "cssText", {
+  get: function() {
+    return "@namespace" + (this.prefix && " " + this.prefix) + " url(" + this.namespaceURI + ");";
+  },
+  set: function(cssText) {
+    // Reset prefix and namespaceURI
+    this.prefix = "";
+    this.namespaceURI = "";
+
+    // Remove @namespace and trim
+    var text = cssText.trim();
+    if (text.indexOf('@namespace') === 0) {
+      text = text.slice('@namespace'.length).trim();
+    }
+
+    // Remove trailing semicolon if present
+    if (text.charAt(text.length - 1) === ';') {
+      text = text.slice(0, -1).trim();
+    }
+
+    // Regex to match valid namespace syntax:
+    // 1. [optional prefix] url("...") or [optional prefix] url('...') or [optional prefix] url() or [optional prefix] url(unquoted)
+    // 2. [optional prefix] "..." or [optional prefix] '...'
+    // The prefix must be a valid CSS identifier (letters, digits, hyphens, underscores, starting with letter or underscore)
+    var re = /^(?:([a-zA-Z_][a-zA-Z0-9_-]*)\s+)?(?:url\(\s*(?:(['"])(.*?)\2\s*|([^)]*?))\s*\)|(['"])(.*?)\5)$/;
+    var match = text.match(re);
+
+    if (match) {
+      // If prefix is present
+      if (match[1]) {
+        this.prefix = match[1];
+      }
+      // If url(...) form with quotes
+      if (typeof match[3] !== "undefined") {
+        this.namespaceURI = match[3];
+      }
+      // If url(...) form without quotes
+      else if (typeof match[4] !== "undefined") {
+        this.namespaceURI = match[4].trim();
+      }
+      // If quoted string form
+      else if (typeof match[6] !== "undefined") {
+        this.namespaceURI = match[6];
+      }
+    } else {
+      throw new DOMException("Invalid @namespace rule", "InvalidStateError");
+    }
+  }
+});
+
+
+
 /**
  * @constructor
  * @see http://dev.w3.org/csswg/cssom/#css-font-face-rule
@@ -970,13 +1037,25 @@ CSSOM.CSSStyleSheet.prototype.constructor = CSSOM.CSSStyleSheet;
  * @return {number} The index within the style sheet's rule collection of the newly inserted rule.
  */
 CSSOM.CSSStyleSheet.prototype.insertRule = function(rule, index) {
+	if (rule === undefined && index === undefined) {
+		throw new TypeError("Failed to execute 'insertRule' on 'CSSStyleSheet': 1 argument required, but only 0 present.")
+	}
 	if (index === void 0) {
 		index = 0;
 	}
 	if (index < 0 || index > this.cssRules.length) {
 		throw new RangeError("INDEX_SIZE_ERR");
 	}
-	var cssRule = CSSOM.parse(rule).cssRules[0];
+	var ruleToParse = String(rule);
+	var parsedSheet = CSSOM.parse(ruleToParse);
+	if (parsedSheet.cssRules.length !== 1) {
+		var domExceptionName = "SyntaxError";
+		if (ruleToParse.trimStart().startsWith('@namespace')) {
+			domExceptionName = "InvalidStateError";
+		}
+		throw new DOMException("Failed to execute 'insertRule' on 'CSSStyleSheet': Failed to parse the rule '" + ruleToParse + "'.", domExceptionName);
+	}
+	var cssRule = parsedSheet.cssRules[0];
 	cssRule.parentStyleSheet = this;
 	this.cssRules.splice(index, 0, cssRule);
 	return index;
@@ -997,8 +1076,23 @@ CSSOM.CSSStyleSheet.prototype.insertRule = function(rule, index) {
  * @see http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleSheet-deleteRule
  */
 CSSOM.CSSStyleSheet.prototype.deleteRule = function(index) {
-	if (index < 0 || index >= this.cssRules.length) {
-		throw new RangeError("INDEX_SIZE_ERR");
+	if (index === undefined) {
+		throw new TypeError("Failed to execute 'deleteRule' on 'CSSStyleSheet': 1 argument required, but only 0 present.")
+	}
+	index = Number(index);
+	if (index < 0) {
+		index = 4294967296 + index;
+	}
+	if (index >= this.cssRules.length) {
+		throw new DOMException("Failed to execute 'deleteRule' on 'CSSStyleSheet': The index provided (" + index + ") is larger than the maximum index (" + this.cssRules.length + ").", "IndexSizeError");
+	}
+	if (this.cssRules[index] && this.cssRules[index].constructor.name == "CSSNamespaceRule") {
+		var shouldContinue = this.cssRules.every(function (rule) {
+			return ['CSSImportRule','CSSLayerStatementRule','CSSNamespaceRule'].indexOf(rule.constructor.name) !== -1
+		});
+		if (!shouldContinue) {
+			throw new DOMException("Failed to execute 'deleteRule' on 'CSSStyleSheet': Deleting a CSSNamespaceRule is not allowed when there is rules other than @import, @layer statement, or @namespace.", "InvalidStateError");
+		}
 	}
 	this.cssRules.splice(index, 1);
 };
@@ -1618,6 +1712,8 @@ CSSOM.parse = function parse(token, errorHandler) {
 		"atRule": true,
 		"importRule-begin": true,
 		"importRule": true,
+		"namespaceRule-begin": true,
+		"namespaceRule": true,
 		"atBlock": true,
 		"containerBlock": true,
 		"conditionBlock": true,
@@ -1637,7 +1733,10 @@ CSSOM.parse = function parse(token, errorHandler) {
 	var ancestorRules = [];
 	var prevScope;
 
-	var name, priority="", styleRule, mediaRule, containerRule, counterStyleRule, supportsRule, importRule, fontFaceRule, keyframesRule, documentRule, hostRule, startingStyleRule, layerBlockRule, layerStatementRule, nestedSelectorRule;
+	var name, priority="", styleRule, mediaRule, containerRule, counterStyleRule, supportsRule, importRule, fontFaceRule, keyframesRule, documentRule, hostRule, startingStyleRule, layerBlockRule, layerStatementRule, nestedSelectorRule, namespaceRule;
+
+	// Track defined namespace prefixes for validation
+	var definedNamespacePrefixes = {};
 
 	var atKeyframesRegExp = /@(-(?:\w+-)+)?keyframes/g; // Match @keyframes and vendor-prefixed @keyframes
 	// Regex above is not ES5 compliant
@@ -1648,7 +1747,7 @@ CSSOM.parse = function parse(token, errorHandler) {
 	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
+	var layerRuleNameRegExp = /^(-?[_a-zA-Z]+(\.[_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 `}`) 
@@ -1819,6 +1918,7 @@ CSSOM.parse = function parse(token, errorHandler) {
 	 * This function matches:
 	 * - Type selectors (e.g., `div`, `span`)
 	 * - Universal selector (`*`)
+	 * - Namespace selectors (e.g., `*|div`, `custom|div`, `|div`)
 	 * - ID selectors (e.g., `#header`, `#a\ b`, `#åèiöú`)
 	 * - Class selectors (e.g., `.container`, `.a\ b`, `.åèiöú`)
 	 * - Attribute selectors (e.g., `[type="text"]`)
@@ -1886,7 +1986,8 @@ CSSOM.parse = function parse(token, errorHandler) {
 
 		// 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
-		var looseSelectorRegExp = /^([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+)+$/;
+		// Modified to support namespace selectors: *|element, prefix|element, |element
+		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);
 	}
 
@@ -2029,6 +2130,30 @@ CSSOM.parse = function parse(token, errorHandler) {
 		return basicSelectorValidation;
 	}
 
+	/**
+	 * Validates namespace selectors by checking if the namespace prefix is defined.
+	 * 
+	 * @param {string} selector - The CSS selector to validate
+	 * @returns {boolean} Returns true if the namespace is valid, false otherwise
+	 */
+	function validateNamespaceSelector(selector) {
+		// Check if selector contains a namespace prefix
+		var pipeIndex = selector.indexOf('|');
+		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);
+	}
+
 	/**
 	 * Checks if a given CSS selector text is valid by splitting it by commas
 	 * and validating each individual selector using the `validateSelector` function.
@@ -2050,7 +2175,7 @@ CSSOM.parse = function parse(token, errorHandler) {
 		var selectors = parseAndSplitNestedSelectors(selectorText);
 		for (var i = 0; i < selectors.length; i++) {
 			var processedSelectors = selectors[i].trim();
-			if (!validateSelector(processedSelectors)) {
+			if (!validateSelector(processedSelectors) || !validateNamespaceSelector(processedSelectors)) {
 				return false;
 			}
 		}
@@ -2063,6 +2188,7 @@ CSSOM.parse = function parse(token, errorHandler) {
 		if (i === endingIndex) {
 			switch (state) {
 				case "importRule":
+				case "namespaceRule":
 				case "layerBlock":
 					token += ";"
 			}
@@ -2104,6 +2230,12 @@ CSSOM.parse = function parse(token, errorHandler) {
 						token += ';'
 					}
 					break;
+				case 'namespaceRule-begin':
+					state = 'namespaceRule';
+					if (i === endingIndex) {
+						token += ';'
+					}
+					break;
 			}
 			break;
 
@@ -2127,6 +2259,9 @@ CSSOM.parse = function parse(token, errorHandler) {
 				case 'importRule-begin':
 					state = 'importRule';
 					break;
+				case 'namespaceRule-begin':
+					state = 'namespaceRule';
+					break;
 			}
 			break;
 
@@ -2147,6 +2282,10 @@ CSSOM.parse = function parse(token, errorHandler) {
 				buffer += " ";
 				state = "importRule";
 			}
+			if (state === "namespaceRule-begin") {
+				buffer += " ";
+				state = "namespaceRule";
+			}
 			break;
 
 		// At-rule
@@ -2231,6 +2370,14 @@ CSSOM.parse = function parse(token, errorHandler) {
 					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(){
@@ -2534,6 +2681,31 @@ CSSOM.parse = function parse(token, errorHandler) {
 					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 = namespaceRule.styleSheet.parentStyleSheet = styleSheet;
+							styleSheet.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();
@@ -2755,6 +2927,9 @@ CSSOM.parse = function parse(token, errorHandler) {
 				case "importRule-begin":
 					state = "importRule";
 					break;
+				case "namespaceRule-begin":
+					state = "namespaceRule";
+					break;
 			}
 			buffer += character;
 			break;

package/lib/CSSNamespaceRule.js

@@ -0,0 +1,77 @@
+//.CommonJS
+var CSSOM = {
+	CSSRule: require("./CSSRule").CSSRule,
+	CSSStyleSheet: require("./CSSStyleSheet").CSSStyleSheet
+};
+///CommonJS
+
+
+/**
+ * @constructor
+ * @see https://drafts.csswg.org/cssom/#the-cssnamespacerule-interface
+ */
+CSSOM.CSSNamespaceRule = function CSSNamespaceRule() {
+	CSSOM.CSSRule.call(this);
+	this.prefix = "";
+	this.namespaceURI = "";
+	this.styleSheet = new CSSOM.CSSStyleSheet();
+};
+
+CSSOM.CSSNamespaceRule.prototype = new CSSOM.CSSRule();
+CSSOM.CSSNamespaceRule.prototype.constructor = CSSOM.CSSNamespaceRule;
+CSSOM.CSSNamespaceRule.prototype.type = 10;
+
+Object.defineProperty(CSSOM.CSSNamespaceRule.prototype, "cssText", {
+  get: function() {
+    return "@namespace" + (this.prefix && " " + this.prefix) + " url(" + this.namespaceURI + ");";
+  },
+  set: function(cssText) {
+    // Reset prefix and namespaceURI
+    this.prefix = "";
+    this.namespaceURI = "";
+
+    // Remove @namespace and trim
+    var text = cssText.trim();
+    if (text.indexOf('@namespace') === 0) {
+      text = text.slice('@namespace'.length).trim();
+    }
+
+    // Remove trailing semicolon if present
+    if (text.charAt(text.length - 1) === ';') {
+      text = text.slice(0, -1).trim();
+    }
+
+    // Regex to match valid namespace syntax:
+    // 1. [optional prefix] url("...") or [optional prefix] url('...') or [optional prefix] url() or [optional prefix] url(unquoted)
+    // 2. [optional prefix] "..." or [optional prefix] '...'
+    // The prefix must be a valid CSS identifier (letters, digits, hyphens, underscores, starting with letter or underscore)
+    var re = /^(?:([a-zA-Z_][a-zA-Z0-9_-]*)\s+)?(?:url\(\s*(?:(['"])(.*?)\2\s*|([^)]*?))\s*\)|(['"])(.*?)\5)$/;
+    var match = text.match(re);
+
+    if (match) {
+      // If prefix is present
+      if (match[1]) {
+        this.prefix = match[1];
+      }
+      // If url(...) form with quotes
+      if (typeof match[3] !== "undefined") {
+        this.namespaceURI = match[3];
+      }
+      // If url(...) form without quotes
+      else if (typeof match[4] !== "undefined") {
+        this.namespaceURI = match[4].trim();
+      }
+      // If quoted string form
+      else if (typeof match[6] !== "undefined") {
+        this.namespaceURI = match[6];
+      }
+    } else {
+      throw new DOMException("Invalid @namespace rule", "InvalidStateError");
+    }
+  }
+});
+
+
+//.CommonJS
+exports.CSSNamespaceRule = CSSOM.CSSNamespaceRule;
+///CommonJS

package/lib/CSSStyleSheet.js

@@ -37,13 +37,25 @@ CSSOM.CSSStyleSheet.prototype.constructor = CSSOM.CSSStyleSheet;
  * @return {number} The index within the style sheet's rule collection of the newly inserted rule.
  */
 CSSOM.CSSStyleSheet.prototype.insertRule = function(rule, index) {
+	if (rule === undefined && index === undefined) {
+		throw new TypeError("Failed to execute 'insertRule' on 'CSSStyleSheet': 1 argument required, but only 0 present.")
+	}
 	if (index === void 0) {
 		index = 0;
 	}
 	if (index < 0 || index > this.cssRules.length) {
 		throw new RangeError("INDEX_SIZE_ERR");
 	}
-	var cssRule = CSSOM.parse(rule).cssRules[0];
+	var ruleToParse = String(rule);
+	var parsedSheet = CSSOM.parse(ruleToParse);
+	if (parsedSheet.cssRules.length !== 1) {
+		var domExceptionName = "SyntaxError";
+		if (ruleToParse.trimStart().startsWith('@namespace')) {
+			domExceptionName = "InvalidStateError";
+		}
+		throw new DOMException("Failed to execute 'insertRule' on 'CSSStyleSheet': Failed to parse the rule '" + ruleToParse + "'.", domExceptionName);
+	}
+	var cssRule = parsedSheet.cssRules[0];
 	cssRule.parentStyleSheet = this;
 	this.cssRules.splice(index, 0, cssRule);
 	return index;
@@ -64,8 +76,23 @@ CSSOM.CSSStyleSheet.prototype.insertRule = function(rule, index) {
  * @see http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleSheet-deleteRule
  */
 CSSOM.CSSStyleSheet.prototype.deleteRule = function(index) {
-	if (index < 0 || index >= this.cssRules.length) {
-		throw new RangeError("INDEX_SIZE_ERR");
+	if (index === undefined) {
+		throw new TypeError("Failed to execute 'deleteRule' on 'CSSStyleSheet': 1 argument required, but only 0 present.")
+	}
+	index = Number(index);
+	if (index < 0) {
+		index = 4294967296 + index;
+	}
+	if (index >= this.cssRules.length) {
+		throw new DOMException("Failed to execute 'deleteRule' on 'CSSStyleSheet': The index provided (" + index + ") is larger than the maximum index (" + this.cssRules.length + ").", "IndexSizeError");
+	}
+	if (this.cssRules[index] && this.cssRules[index].constructor.name == "CSSNamespaceRule") {
+		var shouldContinue = this.cssRules.every(function (rule) {
+			return ['CSSImportRule','CSSLayerStatementRule','CSSNamespaceRule'].indexOf(rule.constructor.name) !== -1
+		});
+		if (!shouldContinue) {
+			throw new DOMException("Failed to execute 'deleteRule' on 'CSSStyleSheet': Deleting a CSSNamespaceRule is not allowed when there is rules other than @import, @layer statement, or @namespace.", "InvalidStateError");
+		}
 	}
 	this.cssRules.splice(index, 1);
 };

package/lib/index.js

@@ -12,6 +12,7 @@ exports.CSSMediaRule = require('./CSSMediaRule').CSSMediaRule;
 exports.CSSContainerRule = require('./CSSContainerRule').CSSContainerRule;
 exports.CSSSupportsRule = require('./CSSSupportsRule').CSSSupportsRule;
 exports.CSSImportRule = require('./CSSImportRule').CSSImportRule;
+exports.CSSNamespaceRule = require('./CSSNamespaceRule').CSSNamespaceRule;
 exports.CSSFontFaceRule = require('./CSSFontFaceRule').CSSFontFaceRule;
 exports.CSSHostRule = require('./CSSHostRule').CSSHostRule;
 exports.CSSStartingStyleRule = require('./CSSStartingStyleRule').CSSStartingStyleRule;

package/lib/parse.js

@@ -37,6 +37,8 @@ CSSOM.parse = function parse(token, errorHandler) {
 		"atRule": true,
 		"importRule-begin": true,
 		"importRule": true,
+		"namespaceRule-begin": true,
+		"namespaceRule": true,
 		"atBlock": true,
 		"containerBlock": true,
 		"conditionBlock": true,
@@ -56,7 +58,10 @@ CSSOM.parse = function parse(token, errorHandler) {
 	var ancestorRules = [];
 	var prevScope;
 
-	var name, priority="", styleRule, mediaRule, containerRule, counterStyleRule, supportsRule, importRule, fontFaceRule, keyframesRule, documentRule, hostRule, startingStyleRule, layerBlockRule, layerStatementRule, nestedSelectorRule;
+	var name, priority="", styleRule, mediaRule, containerRule, counterStyleRule, supportsRule, importRule, fontFaceRule, keyframesRule, documentRule, hostRule, startingStyleRule, layerBlockRule, layerStatementRule, nestedSelectorRule, namespaceRule;
+
+	// Track defined namespace prefixes for validation
+	var definedNamespacePrefixes = {};
 
 	var atKeyframesRegExp = /@(-(?:\w+-)+)?keyframes/g; // Match @keyframes and vendor-prefixed @keyframes
 	// Regex above is not ES5 compliant
@@ -67,7 +72,7 @@ CSSOM.parse = function parse(token, errorHandler) {
 	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
+	var layerRuleNameRegExp = /^(-?[_a-zA-Z]+(\.[_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 `}`) 
@@ -238,6 +243,7 @@ CSSOM.parse = function parse(token, errorHandler) {
 	 * This function matches:
 	 * - Type selectors (e.g., `div`, `span`)
 	 * - Universal selector (`*`)
+	 * - Namespace selectors (e.g., `*|div`, `custom|div`, `|div`)
 	 * - ID selectors (e.g., `#header`, `#a\ b`, `#åèiöú`)
 	 * - Class selectors (e.g., `.container`, `.a\ b`, `.åèiöú`)
 	 * - Attribute selectors (e.g., `[type="text"]`)
@@ -305,7 +311,8 @@ CSSOM.parse = function parse(token, errorHandler) {
 
 		// 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
-		var looseSelectorRegExp = /^([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+)+$/;
+		// Modified to support namespace selectors: *|element, prefix|element, |element
+		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);
 	}
 
@@ -448,6 +455,30 @@ CSSOM.parse = function parse(token, errorHandler) {
 		return basicSelectorValidation;
 	}
 
+	/**
+	 * Validates namespace selectors by checking if the namespace prefix is defined.
+	 * 
+	 * @param {string} selector - The CSS selector to validate
+	 * @returns {boolean} Returns true if the namespace is valid, false otherwise
+	 */
+	function validateNamespaceSelector(selector) {
+		// Check if selector contains a namespace prefix
+		var pipeIndex = selector.indexOf('|');
+		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);
+	}
+
 	/**
 	 * Checks if a given CSS selector text is valid by splitting it by commas
 	 * and validating each individual selector using the `validateSelector` function.
@@ -469,7 +500,7 @@ CSSOM.parse = function parse(token, errorHandler) {
 		var selectors = parseAndSplitNestedSelectors(selectorText);
 		for (var i = 0; i < selectors.length; i++) {
 			var processedSelectors = selectors[i].trim();
-			if (!validateSelector(processedSelectors)) {
+			if (!validateSelector(processedSelectors) || !validateNamespaceSelector(processedSelectors)) {
 				return false;
 			}
 		}
@@ -482,6 +513,7 @@ CSSOM.parse = function parse(token, errorHandler) {
 		if (i === endingIndex) {
 			switch (state) {
 				case "importRule":
+				case "namespaceRule":
 				case "layerBlock":
 					token += ";"
 			}
@@ -523,6 +555,12 @@ CSSOM.parse = function parse(token, errorHandler) {
 						token += ';'
 					}
 					break;
+				case 'namespaceRule-begin':
+					state = 'namespaceRule';
+					if (i === endingIndex) {
+						token += ';'
+					}
+					break;
 			}
 			break;
 
@@ -546,6 +584,9 @@ CSSOM.parse = function parse(token, errorHandler) {
 				case 'importRule-begin':
 					state = 'importRule';
 					break;
+				case 'namespaceRule-begin':
+					state = 'namespaceRule';
+					break;
 			}
 			break;
 
@@ -566,6 +607,10 @@ CSSOM.parse = function parse(token, errorHandler) {
 				buffer += " ";
 				state = "importRule";
 			}
+			if (state === "namespaceRule-begin") {
+				buffer += " ";
+				state = "namespaceRule";
+			}
 			break;
 
 		// At-rule
@@ -650,6 +695,14 @@ CSSOM.parse = function parse(token, errorHandler) {
 					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(){
@@ -953,6 +1006,31 @@ CSSOM.parse = function parse(token, errorHandler) {
 					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 = namespaceRule.styleSheet.parentStyleSheet = styleSheet;
+							styleSheet.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();
@@ -1174,6 +1252,9 @@ CSSOM.parse = function parse(token, errorHandler) {
 				case "importRule-begin":
 					state = "importRule";
 					break;
+				case "namespaceRule-begin":
+					state = "namespaceRule";
+					break;
 			}
 			buffer += character;
 			break;
@@ -1191,6 +1272,7 @@ CSSOM.CSSStyleSheet = require("./CSSStyleSheet").CSSStyleSheet;
 CSSOM.CSSStyleRule = require("./CSSStyleRule").CSSStyleRule;
 CSSOM.CSSNestedDeclarations = require("./CSSNestedDeclarations").CSSNestedDeclarations;
 CSSOM.CSSImportRule = require("./CSSImportRule").CSSImportRule;
+CSSOM.CSSNamespaceRule = require("./CSSNamespaceRule").CSSNamespaceRule;
 CSSOM.CSSGroupingRule = require("./CSSGroupingRule").CSSGroupingRule;
 CSSOM.CSSMediaRule = require("./CSSMediaRule").CSSMediaRule;
 CSSOM.CSSCounterStyleRule = require("./CSSCounterStyleRule").CSSCounterStyleRule;

package/package.json

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