@acemir/cssom 0.9.0 → 0.9.2

package/lib/CSSImportRule.js

@@ -16,6 +16,8 @@ CSSOM.CSSImportRule = function CSSImportRule() {
 	CSSOM.CSSRule.call(this);
 	this.href = "";
 	this.media = new CSSOM.MediaList();
+  this.layerName = null;
+  this.supportsText = null;
 	this.styleSheet = new CSSOM.CSSStyleSheet();
 };
 
@@ -26,7 +28,7 @@ CSSOM.CSSImportRule.prototype.type = 3;
 Object.defineProperty(CSSOM.CSSImportRule.prototype, "cssText", {
   get: function() {
     var mediaText = this.media.mediaText;
-    return "@import url(" + this.href + ")" + (mediaText ? " " + mediaText : "") + ";";
+    return "@import url(" + this.href + ")" + (this.layerName !== null ? " layer" + (this.layerName && "(" + this.layerName + ")") : "" ) + (this.supportsText ? " supports(" + this.supportsText + ")" : "" ) + (mediaText ? " " + mediaText : "") + ";";
   },
   set: function(cssText) {
     var i = 0;
@@ -42,6 +44,12 @@ Object.defineProperty(CSSOM.CSSImportRule.prototype, "cssText", {
 
     var buffer = '';
     var index;
+
+    var layerRegExp = /layer\(([^)]*)\)/;
+    var layerRuleNameRegExp = /^(-?[_a-zA-Z]+[_a-zA-Z0-9-]*)$/;
+    var supportsRegExp = /supports\(([^)]+)\)/;
+    var doubleOrMoreSpacesRegExp = /\s{2,}/g;
+
     for (var character; (character = cssText.charAt(i)); i++) {
 
       switch (character) {
@@ -66,6 +74,9 @@ Object.defineProperty(CSSOM.CSSImportRule.prototype, "cssText", {
           break;
 
         case 'u':
+          if (state === 'media') {
+            buffer += character;
+          }
           if (state === 'url' && cssText.indexOf('url(', i) === i) {
             index = cssText.indexOf(')', i + 1);
             if (index === -1) {
@@ -85,7 +96,7 @@ Object.defineProperty(CSSOM.CSSImportRule.prototype, "cssText", {
           break;
 
         case '"':
-          if (state === 'url') {
+          if (state === 'after-import' || state === 'url') {
             index = cssText.indexOf('"', i + 1);
             if (!index) {
               throw i + ": '\"' not found";
@@ -97,7 +108,7 @@ Object.defineProperty(CSSOM.CSSImportRule.prototype, "cssText", {
           break;
 
         case "'":
-          if (state === 'url') {
+          if (state === 'after-import' || state === 'url') {
             index = cssText.indexOf("'", i + 1);
             if (!index) {
               throw i + ': "\'" not found';
@@ -111,7 +122,47 @@ Object.defineProperty(CSSOM.CSSImportRule.prototype, "cssText", {
         case ';':
           if (state === 'media') {
             if (buffer) {
-              this.media.mediaText = buffer.trim();
+              var bufferTrimmed = buffer.trim();
+              
+              if (bufferTrimmed.indexOf('layer') === 0) {
+                var layerMatch =  bufferTrimmed.match(layerRegExp);
+
+                if (layerMatch) {
+                  var layerName = layerMatch[1].trim();
+                  bufferTrimmed = bufferTrimmed.replace(layerRegExp, '')
+                    .replace(doubleOrMoreSpacesRegExp, ' ') // Replace double or more spaces with single space
+                    .trim();
+
+                  if (layerName.match(layerRuleNameRegExp) !== null) {
+                    this.layerName = layerMatch[1].trim();
+                  } else {
+                    // REVIEW: In the browser, an empty layer() is not processed as a unamed layer
+                    // and treats the rest of the string as mediaText, ignoring the parse of supports()
+                    if (bufferTrimmed) {
+                      this.media.mediaText = bufferTrimmed;
+                      return;
+                    }
+                  }
+                } else {
+                  this.layerName = "";
+                  bufferTrimmed = bufferTrimmed.substring('layer'.length).trim()
+                }
+              }
+
+              var supportsMatch =  bufferTrimmed.match(supportsRegExp);
+
+              if (supportsMatch && supportsMatch.index === 0) {
+                // REVIEW: In the browser, an empty supports() invalidates and ignores the entire @import rule
+                this.supportsText = supportsMatch[1].trim();
+                bufferTrimmed = bufferTrimmed.replace(supportsRegExp, '')
+                .replace(doubleOrMoreSpacesRegExp, ' ') // Replace double or more spaces with single space
+                .trim();
+              }
+
+              // REVIEW: In the browser, any invalid media is replaced with 'not all'
+              if (bufferTrimmed) {
+                this.media.mediaText = bufferTrimmed;
+              }
             }
           }
           break;

package/lib/CSSLayerBlockRule.js

@@ -11,7 +11,7 @@ var CSSOM = {
  */
 CSSOM.CSSLayerBlockRule = function CSSLayerBlockRule() {
   CSSOM.CSSGroupingRule.call(this);
-  this.layerName = "";
+  this.name = "";
   this.cssRules = [];
 };
 
@@ -20,23 +20,13 @@ CSSOM.CSSLayerBlockRule.prototype.constructor = CSSOM.CSSLayerBlockRule;
 CSSOM.CSSLayerBlockRule.prototype.type = 18;
 
 Object.defineProperties(CSSOM.CSSLayerBlockRule.prototype, {
-  layerNameText: {
-    get: function () {
-      return this.layerName;
-    },
-    set: function (value) {
-      this.layerName = value;
-    },
-    configurable: true,
-    enumerable: true,
-  },
   cssText: {
     get: function () {
       var cssTexts = [];
       for (var i = 0, length = this.cssRules.length; i < length; i++) {
         cssTexts.push(this.cssRules[i].cssText);
       }
-      return "@layer " + this.layerNameText + " {" + cssTexts.join("") + "}";
+      return "@layer " + this.name + (this.name && " ") + "{" + cssTexts.join("") + "}";
     },
     configurable: true,
     enumerable: true,

package/lib/CSSLayerStatementRule.js

@@ -0,0 +1,32 @@
+//.CommonJS
+var CSSOM = {
+  CSSRule: require("./CSSRule").CSSRule,
+};
+///CommonJS
+
+/**
+ * @constructor
+ * @see https://drafts.csswg.org/css-cascade-5/#csslayerstatementrule
+ */
+CSSOM.CSSLayerStatementRule = function CSSLayerStatementRule() {
+  CSSOM.CSSRule.call(this);
+  this.nameList = [];
+};
+
+CSSOM.CSSLayerStatementRule.prototype = new CSSOM.CSSRule();
+CSSOM.CSSLayerStatementRule.prototype.constructor = CSSOM.CSSLayerStatementRule;
+CSSOM.CSSLayerStatementRule.prototype.type = 0;
+
+Object.defineProperties(CSSOM.CSSLayerStatementRule.prototype, {
+  cssText: {
+    get: function () {
+      return "@layer " + this.nameList.join(", ") + ";";
+    },
+    configurable: true,
+    enumerable: true,
+  },
+});
+
+//.CommonJS
+exports.CSSLayerStatementRule = CSSOM.CSSLayerStatementRule;
+///CommonJS

package/lib/CSSStyleDeclaration.js

@@ -2,6 +2,28 @@
 var CSSOM = {};
 ///CommonJS
 
+// NOTE: Check viability to add a validation for css values or use a dependency like csstree-validator
+/**
+ * Regular expression to detect invalid characters in the value portion of a CSS style declaration.
+ *
+ * This regex matches a colon (:) that is not inside parentheses and not inside single or double quotes.
+ * It is used to ensure that the value part of a CSS property does not contain unexpected colons,
+ * which would indicate a malformed declaration (e.g., "color: foo:bar;" is invalid).
+ *
+ * The negative lookahead `(?![^(]*\))` ensures that the colon is not followed by a closing
+ * parenthesis without encountering an opening parenthesis, effectively ignoring colons inside
+ * function-like values (e.g., `url(data:image/png;base64,...)`).
+ *
+ * The lookahead `(?=(?:[^'"]|'[^']*'|"[^"]*")*$)` ensures that the colon is not inside single or double quotes,
+ * allowing colons within quoted strings (e.g., `content: ":";` or `background: url("foo:bar.png");`).
+ *
+ * Example:
+ *   "color: red;"         // valid, does not match
+ *   "background: url(data:image/png;base64,...);" // valid, does not match
+ *   "content: ':';"       // valid, does not match
+ *   "color: foo:bar;"     // invalid, matches
+ */
+var basicStylePropertyValueValidationRegExp = /:(?![^(]*\))(?=(?:[^'"]|'[^']*'|"[^"]*")*$)/;
 
 /**
  * @constructor
@@ -38,21 +60,36 @@ CSSOM.CSSStyleDeclaration.prototype = {
 	 * @param {string} [priority=null] "important" or null
 	 * @see http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration-setProperty
 	 */
-	setProperty: function(name, value, priority) {
-		if (this[name]) {
+	setProperty: function(name, value, priority, parseErrorHandler) 
+	{
+		// NOTE: Check viability to add a validation for css values or use a dependency like csstree-validator
+		if (basicStylePropertyValueValidationRegExp.test(value)) {
+			parseErrorHandler && parseErrorHandler('Invalid CSSStyleDeclaration property value');
+		} else if (this[name]) {
 			// Property already exist. Overwrite it.
 			var index = Array.prototype.indexOf.call(this, name);
 			if (index < 0) {
 				this[this.length] = name;
 				this.length++;
 			}
+	
+			// If the priority value of the incoming property is "important",
+			// or the value of the existing property is not "important", 
+			// then remove the existing property and rewrite it.
+			if (priority || !this._importants[name]) {
+				this.removeProperty(name);
+				this[this.length] = name;
+				this.length++;
+				this[name] = value + '';
+				this._importants[name] = priority;
+			}
 		} else {
 			// New property.
 			this[this.length] = name;
 			this.length++;
+			this[name] = value + '';
+			this._importants[name] = priority;
 		}
-		this[name] = value + "";
-		this._importants[name] = priority;
 	},
 
 	/**

package/lib/CSSStyleSheet.js

@@ -32,11 +32,14 @@ CSSOM.CSSStyleSheet.prototype.constructor = CSSOM.CSSStyleSheet;
  *   -> "img{border:none;}body{margin:0;}"
  *
  * @param {string} rule
- * @param {number} index
+ * @param {number} [index=0]
  * @see http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleSheet-insertRule
  * @return {number} The index within the style sheet's rule collection of the newly inserted rule.
  */
 CSSOM.CSSStyleSheet.prototype.insertRule = function(rule, index) {
+	if (index === void 0) {
+		index = 0;
+	}
 	if (index < 0 || index > this.cssRules.length) {
 		throw new RangeError("INDEX_SIZE_ERR");
 	}

package/lib/clone.js

@@ -12,7 +12,8 @@ var CSSOM = {
 	CSSStyleDeclaration: require("./CSSStyleDeclaration").CSSStyleDeclaration,
 	CSSKeyframeRule: require('./CSSKeyframeRule').CSSKeyframeRule,
 	CSSKeyframesRule: require('./CSSKeyframesRule').CSSKeyframesRule,
-	CSSLayerBlockRule: require('./CSSLayerBlockRule').CSSLayerBlockRule
+	CSSLayerBlockRule: require('./CSSLayerBlockRule').CSSLayerBlockRule,
+	CSSLayerStatementRule: require('./CSSLayerStatementRule').CSSLayerStatementRule
 };
 ///CommonJS
 
@@ -59,6 +60,10 @@ CSSOM.clone = function clone(stylesheet) {
 			ruleClone.mediaText = rule.mediaText;
 		}
 
+		if (rule.hasOwnProperty('supportsText')) {
+			ruleClone.supports = rule.supports;
+		}
+
 		if (rule.hasOwnProperty('conditionText')) {
 			ruleClone.conditionText = rule.conditionText;
 		}
@@ -67,6 +72,18 @@ CSSOM.clone = function clone(stylesheet) {
 			ruleClone.layerName = rule.layerName;
 		}
 
+		if (rule.hasOwnProperty('href')) {
+			ruleClone.href = rule.href;
+		}
+
+		if (rule.hasOwnProperty('name')) {
+			ruleClone.name = rule.name;
+		}
+
+		if (rule.hasOwnProperty('nameList')) {
+			ruleClone.nameList = rule.nameList;
+		}
+
 		if (rule.hasOwnProperty('cssRules')) {
 			ruleClone.cssRules = clone(rule).cssRules;
 		}

package/lib/index.js

@@ -23,5 +23,6 @@ exports.CSSDocumentRule = require('./CSSDocumentRule').CSSDocumentRule;
 exports.CSSValue = require('./CSSValue').CSSValue;
 exports.CSSValueExpression = require('./CSSValueExpression').CSSValueExpression;
 exports.CSSLayerBlockRule = require('./CSSLayerBlockRule').CSSLayerBlockRule;
+exports.CSSLayerStatementRule = require('./CSSLayerStatementRule').CSSLayerStatementRule;
 exports.parse = require('./parse').parse;
 exports.clone = require('./clone').clone;