@acemir/cssom 0.9.20 → 0.9.21

package/lib/CSSStyleSheet.js

@@ -1,5 +1,6 @@
 //.CommonJS
 var CSSOM = {
+	MediaList: require("./MediaList").MediaList,
 	StyleSheet: require("./StyleSheet").StyleSheet,
 	CSSRuleList: require("./CSSRuleList").CSSRuleList,
 	CSSStyleRule: require("./CSSStyleRule").CSSStyleRule,
@@ -59,7 +60,10 @@ CSSOM.CSSStyleSheet.prototype.insertRule = function(rule, index) {
 	}
 	
 	var ruleToParse = String(rule);
-	var parsedSheet = CSSOM.parse(ruleToParse);
+	var parseErrors = [];
+	var parsedSheet = CSSOM.parse(ruleToParse, undefined, function(err) {
+		parseErrors.push(err);
+	} );
 	if (parsedSheet.cssRules.length !== 1) {
 		errorUtils.throwParseError(this, 'insertRule', this.constructor.name, ruleToParse, 'SyntaxError');
 	}
@@ -127,12 +131,21 @@ CSSOM.CSSStyleSheet.prototype.insertRule = function(rule, index) {
 				'HierarchyRequestError');
 		}
 		
+		// Cannot insert if there are already non-special rules
+		if (firstNonImportNamespaceIndex < this.cssRules.length) {
+			errorUtils.throwError(this, 'DOMException',
+				"Failed to execute 'insertRule' on '" + this.constructor.name + "': Failed to insert the rule.",
+				'InvalidStateError');
+		}
+		
 		// Cannot insert after other types of rules
 		if (index > firstNonImportNamespaceIndex) {
 			errorUtils.throwError(this, 'DOMException',
 				"Failed to execute 'insertRule' on '" + this.constructor.name + "': Failed to insert the rule.",
 				'HierarchyRequestError');
 		}
+
+		
 	} else if (cssRule.constructor.name === 'CSSLayerStatementRule') {
 		// @layer statement rules can be inserted anywhere before @import and @namespace
 		// No additional restrictions beyond what's already handled
@@ -149,6 +162,10 @@ CSSOM.CSSStyleSheet.prototype.insertRule = function(rule, index) {
 				"Failed to execute 'insertRule' on '" + this.constructor.name + "': Failed to insert the rule.",
 				'HierarchyRequestError');
 		}
+
+		if (parseErrors.length !== 0) {
+			errorUtils.throwParseError(this, 'insertRule', this.constructor.name, ruleToParse, 'SyntaxError');
+		}
 	}
 	
 	cssRule.__parentStyleSheet = this;
@@ -188,13 +205,20 @@ CSSOM.CSSStyleSheet.prototype.deleteRule = function(index) {
 	if (index >= this.cssRules.length) {
 		errorUtils.throwIndexError(this, 'deleteRule', this.constructor.name, index, this.cssRules.length);
 	}
-	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) {
-			errorUtils.throwError(this, 'DOMException', "Failed to execute 'deleteRule' on '" + this.constructor.name + "': Failed to delete rule.", "InvalidStateError");
+	if (this.cssRules[index]) {		
+		if (this.cssRules[index].constructor.name == "CSSNamespaceRule") {
+			var shouldContinue = this.cssRules.every(function (rule) {
+				return ['CSSImportRule','CSSLayerStatementRule','CSSNamespaceRule'].indexOf(rule.constructor.name) !== -1
+			});
+			if (!shouldContinue) {
+				errorUtils.throwError(this, 'DOMException', "Failed to execute 'deleteRule' on '" + this.constructor.name + "': Failed to delete rule.", "InvalidStateError");
+			}
 		}
+		if (this.cssRules[index].constructor.name == "CSSImportRule") {
+			this.cssRules[index].styleSheet.__parentStyleSheet = null;
+		}
+
+		this.cssRules[index].__parentStyleSheet = null;
 	}
 	this.cssRules.splice(index, 1);
 };

package/lib/StyleSheet.js

@@ -1,5 +1,7 @@
 //.CommonJS
-var CSSOM = {};
+var CSSOM = {
+	MediaList: require("./MediaList").MediaList
+};
 ///CommonJS
 
 
@@ -8,10 +10,23 @@ var CSSOM = {};
  * @see http://dev.w3.org/csswg/cssom/#the-stylesheet-interface
  */
 CSSOM.StyleSheet = function StyleSheet() {
+	this.__media = new CSSOM.MediaList();
 	this.__parentStyleSheet = null;
 };
 
 Object.defineProperties(CSSOM.StyleSheet.prototype, {
+	media: {
+		get: function() {
+			return this.__media;
+		},
+		set: function(value) {
+			if (typeof value === "string") {
+				this.__media.mediaText = value;
+			} else {
+				this.__media = value;
+			}
+		}
+	},
 	parentStyleSheet: {
 		get: function() {
 			return this.__parentStyleSheet;

package/lib/index.js

@@ -33,5 +33,6 @@ exports.CSSValueExpression = require('./CSSValueExpression').CSSValueExpression;
 exports.CSSScopeRule = require('./CSSScopeRule').CSSScopeRule;
 exports.CSSLayerBlockRule = require('./CSSLayerBlockRule').CSSLayerBlockRule;
 exports.CSSLayerStatementRule = require('./CSSLayerStatementRule').CSSLayerStatementRule;
+exports.CSSPageRule = require('./CSSPageRule').CSSPageRule;
 exports.parse = require('./parse').parse;
 exports.clone = require('./clone').clone;

package/lib/parse.js

@@ -51,7 +51,8 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 		"counterStyleBlock": true,
 		'documentRule-begin': true,
 		"scopeBlock": true,
-		"layerBlock": true
+		"layerBlock": true,
+		"pageBlock": true
 	};
 
 	var styleSheet = new CSSOM.CSSStyleSheet();
@@ -69,7 +70,7 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 	var ancestorRules = [];
 	var prevScope;
 
-	var name, priority="", styleRule, mediaRule, containerRule, counterStyleRule, supportsRule, importRule, fontFaceRule, keyframesRule, documentRule, hostRule, startingStyleRule, scopeRule, layerBlockRule, layerStatementRule, nestedSelectorRule, namespaceRule;
+	var name, priority="", styleRule, mediaRule, containerRule, counterStyleRule, supportsRule, importRule, fontFaceRule, keyframesRule, documentRule, hostRule, startingStyleRule, scopeRule, pageRule, layerBlockRule, layerStatementRule, nestedSelectorRule, namespaceRule;
 
 	// Track defined namespace prefixes for validation
 	var definedNamespacePrefixes = {};
@@ -83,8 +84,9 @@ CSSOM.parse = function parse(token, opts, 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-Z]+)*[_a-zA-Z0-9-]*)$/; // Validates a single @layer name
+	var cssCustomIdentifierRegExp = /^(-?[_a-zA-Z]+(\.[_a-zA-Z]+)*[_a-zA-Z0-9-]*)$/; // Validates a css custom identifier
 	var startsWithCombinatorRegExp = /^\s*[>+~]/; // Checks if a selector starts with a CSS combinator (>, +, ~)
+	var atPageRuleSelectorRegExp = /^([^\s:]+)?((?::\w+)*)$/;
 
 	/**
 	 * Searches for the first occurrence of a CSS at-rule statement terminator (`;` or `}`) 
@@ -409,12 +411,12 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 		if (isValid && atRuleKey === "@scope") {
 			var openBraceIndex = ruleSlice.indexOf('{');
 			if (openBraceIndex !== -1) {
-				// Extract the scope prelude (everything between @scope and {)
-				var scopePrelude = ruleSlice.slice(0, openBraceIndex).trim();
-				
-				// Skip past '@scope' keyword and whitespace
-				var preludeContent = scopePrelude.slice(6).trim();
-				
+				// Extract the rule prelude (everything between the at-rule and {)
+				var rulePrelude = ruleSlice.slice(0, openBraceIndex).trim();
+
+				// Skip past at-rule keyword and whitespace
+				var preludeContent = rulePrelude.slice("@scope".length).trim();
+
 				if (preludeContent.length > 0) {
 					// Parse the scope prelude
 					var parsedScopePrelude = parseScopePrelude(preludeContent);
@@ -453,6 +455,64 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 				// Empty prelude (@scope {}) is valid
 			}
 		}
+
+		if (isValid && atRuleKey === "@page") {
+			var openBraceIndex = ruleSlice.indexOf('{');
+			if (openBraceIndex !== -1) {
+				// Extract the rule prelude (everything between the at-rule and {)
+				var rulePrelude = ruleSlice.slice(0, openBraceIndex).trim();
+				
+				// Skip past at-rule keyword and whitespace
+				var preludeContent = rulePrelude.slice("@page".length).trim();
+
+				if (preludeContent.length > 0) {
+					var trimmedValue = preludeContent.trim();
+            
+					// Empty selector is valid for @page
+					if (trimmedValue !== '') {
+						// Parse @page selectorText for page name and pseudo-pages
+						// Valid formats:
+						// - (empty - no name, no pseudo-page)
+						// - :left, :right, :first, :blank (pseudo-page only)
+						// - named (named page only)
+						// - named:first (named page with single pseudo-page)
+						// - named:first:left (named page with multiple pseudo-pages)
+						var match = trimmedValue.match(atPageRuleSelectorRegExp);
+						if (match) {
+							var pageName = match[1] || '';
+							var pseudoPages = match[2] || '';
+
+							// Validate page name if present
+							if (pageName) {
+								if (!cssCustomIdentifierRegExp.test(pageName)) {
+									isValid = false;
+								}
+							}
+
+							// Validate pseudo-pages if present
+							if (pseudoPages) {
+								var pseudos = pseudoPages.split(':').filter(function(p) { return p; });
+								var validPseudos = ['left', 'right', 'first', 'blank'];
+								var allValid = true;
+								for (var j = 0; j < pseudos.length; j++) {
+									if (validPseudos.indexOf(pseudos[j].toLowerCase()) === -1) {
+										allValid = false;
+										break;
+									}
+								}
+								
+								if (!allValid) {
+									isValid = false;
+								}
+							}
+						} else {
+							isValid = false;
+						}
+					}
+					
+				}
+			}
+		}
 		
 		if (!isValid) {
 			// If it's invalid the browser will simply ignore the entire invalid block
@@ -532,6 +592,27 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 			return false;
 		}
 
+		// 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;
+				}
+			}
+		}
+
 		// 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
@@ -636,7 +717,7 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 	 * @returns {boolean} Returns `true` if the selector is valid, otherwise `false`.
 	 */
 
-	// Cache to store validated selectors (ES5-compliant object)
+	// Cache to store validated selectors (previously a ES6 Map, now an ES5-compliant object)
 	var validatedSelectorsCache = {};
 
 	// Only pseudo-classes that accept selector lists should recurse
@@ -746,6 +827,28 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 		return definedNamespacePrefixes.hasOwnProperty(namespacePrefix);
 	}
 
+	/**
+	 * Processes a CSS selector text 
+	 * 
+	 * @param {string} selectorText - The CSS selector text to process
+	 * @returns {string} The processed selector text with normalized whitespace
+	 */
+	function processSelectorText(selectorText) {
+		// TODO: Remove invalid selectors that appears inside pseudo classes
+		// TODO: The same processing here needs to be reused in CSSStyleRule.selectorText setter
+		// TODO: Move these validation logic to a shared function to be reused in CSSStyleRule.selectorText setter
+
+		/**
+		 * Normalizes whitespace and preserving quoted strings.
+		 * Replaces all newline characters (CRLF, CR, or LF) with spaces while keeping quoted
+		 * strings (single or double quotes) intact, including any escaped characters within them.
+		 */
+		return selectorText.replace(/(['"])(?:\\.|[^\\])*?\1|(\r\n|\r|\n)/g, function(match, _, newline) {
+			if (newline) return " ";
+			return match;
+		});
+	}
+
 	/**
 	 * Checks if a given CSS selector text is valid by splitting it by commas
 	 * and validating each individual selector using the `validateSelector` function.
@@ -754,6 +857,9 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 	 * @returns {boolean} Returns true if all selectors are valid, otherwise false.
 	 */
 	function isValidSelectorText(selectorText) {
+		// TODO: The same validations here needs to be reused in CSSStyleRule.selectorText setter
+		// TODO: Move these validation logic to a shared function to be reused in CSSStyleRule.selectorText setter
+
 		// Check for newlines inside single or double quotes using regex
 		// This matches any quoted string (single or double) containing a newline
 		var quotedNewlineRegExp = /(['"])(?:\\.|[^\\])*?\1/g;
@@ -880,7 +986,8 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 				i += 2;
 				index = token.indexOf("*/", i);
 				if (index === -1) {
-					parseError("Missing */");
+					i = token.length - 1;
+					buffer = "";
 				} else {
 					i = index + 1;
 				}
@@ -953,6 +1060,15 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 				});
 				buffer = "";
 				break;
+			} else if (token.indexOf("@page", i) === i) {
+				validateAtRule("@page", function(){
+					state = "pageBlock"
+					pageRule = new CSSOM.CSSPageRule();
+					pageRule.__starts = i;
+					i += "page".length;
+				});
+				buffer = "";
+				break;
 			} else if (token.indexOf("@supports", i) === i) {
 				validateAtRule("@supports", function(){
 					state = "conditionBlock";
@@ -1050,10 +1166,7 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 				}
 
 				currentScope = parentRule = styleRule;
-				styleRule.selectorText = buffer.trim().replace(/(['"])(?:\\.|[^\\])*?\1|(\r\n|\r|\n)/g, function(match, _, newline) {
-					if (newline) return " ";
-					return match;
-				});
+				styleRule.selectorText = processSelectorText(buffer.trim());
 				styleRule.style.__starts = i;
 				styleRule.__parentStyleSheet = styleSheet;
 				buffer = "";
@@ -1071,7 +1184,7 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 				buffer = "";
 				state = "before-selector";
 			} else if (state === "containerBlock") {
-				containerRule.containerText = buffer.trim();
+				containerRule.__conditionText = buffer.trim();
 
 				if (parentRule) {
 					containerRule.__parentRule = parentRule;
@@ -1088,7 +1201,7 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 				counterStyleRule.__parentStyleSheet = styleSheet;
 				buffer = "";
 			} else if (state === "conditionBlock") {
-				supportsRule.conditionText = buffer.trim();
+				supportsRule.__conditionText = buffer.trim();
 
 				if (parentRule) {
 					supportsRule.__parentRule = parentRule;
@@ -1123,7 +1236,7 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 			} else if (state === "layerBlock") {
 				layerBlockRule.name = buffer.trim();
 
-				var isValidName = layerBlockRule.name.length === 0 || layerBlockRule.name.match(layerRuleNameRegExp) !== null;
+				var isValidName = layerBlockRule.name.length === 0 || layerBlockRule.name.match(cssCustomIdentifierRegExp) !== null;
 
 				if (isValidName) {
 					if (parentRule) {
@@ -1136,6 +1249,19 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 				}
 				buffer = "";
 				state = "before-selector";
+			} else if (state === "pageBlock") {
+				pageRule.selectorText = buffer.trim();
+
+				if (parentRule) {
+					pageRule.__parentRule = parentRule;
+					ancestorRules.push(parentRule);
+				}
+
+				currentScope = parentRule = pageRule;
+				pageRule.__parentStyleSheet = styleSheet;
+				styleRule = pageRule;
+				buffer = "";
+				state = "before-name";
 			} else if (state === "hostRule-begin") {
 				if (parentRule) {
 					ancestorRules.push(parentRule);
@@ -1209,10 +1335,7 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 				}
 				
 				styleRule = new CSSOM.CSSStyleRule();
-				var processedSelectorText = buffer.trim().replace(/(['"])(?:\\.|[^\\])*?\1|(\r\n|\r|\n)/g, function(match, _, newline) {
-					if (newline) return " ";
-					return match;
-				});
+				var processedSelectorText = processSelectorText(buffer.trim());
 				// In a nested selector, ensure each selector contains '&' at the beginning, except for selectors that already have '&' somewhere
 				if (parentRule.constructor.name !== "CSSStyleRule" && parentRule.parentRule === null) {
 					styleRule.selectorText = processedSelectorText;
@@ -1336,7 +1459,7 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 							testNamespaceRule.cssText = buffer + character;
 							
 							namespaceRule = testNamespaceRule;
-							namespaceRule.__parentStyleSheet = namespaceRule.styleSheet.__parentStyleSheet = styleSheet;
+							namespaceRule.__parentStyleSheet = styleSheet;
 							styleSheet.cssRules.push(namespaceRule);
 							
 							// Track the namespace prefix for validation
@@ -1355,7 +1478,7 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 						return name.trim();
 					});
 					var isInvalid = parentRule !== undefined || nameListStr.some(function (name) {
-						return name.trim().match(layerRuleNameRegExp) === null;
+						return name.trim().match(cssCustomIdentifierRegExp) === null;
 					});
 
 					if (!isInvalid) {
@@ -1582,6 +1705,10 @@ CSSOM.parse = function parse(token, opts, errorHandler) {
 		}
 	}
 
+	if (buffer.trim() !== "") {
+		parseError("Unexpected end of input");
+	}
+
 	return styleSheet;
 };
 
@@ -1611,6 +1738,7 @@ CSSOM.CSSDocumentRule = require('./CSSDocumentRule').CSSDocumentRule;
 CSSOM.CSSScopeRule = require('./CSSScopeRule').CSSScopeRule;
 CSSOM.CSSLayerBlockRule = require("./CSSLayerBlockRule").CSSLayerBlockRule;
 CSSOM.CSSLayerStatementRule = require("./CSSLayerStatementRule").CSSLayerStatementRule;
+CSSOM.CSSPageRule = require("./CSSPageRule").CSSPageRule;
 // Use cssstyle if available
 try {
 	CSSOM.CSSStyleDeclaration = require("cssstyle").CSSStyleDeclaration;

package/package.json

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