Extends element widget with support for CSS custom properties (#8699)

* Extend element widget with support for CSS custom properties.

* chore: added tests

* chore: code style

* docs: added documentation for support for CSS custom properties

* docs: added documentation for support for CSS custom properties

core/modules/utils/fakedom.js

@@ -56,23 +56,14 @@ Object.defineProperty(TW_TextNode.prototype, "formattedTextContent", {
 	}
 });
 
-var TW_Element = function(tag,namespace) {
+var TW_Style = function(el) {
-	bumpSequenceNumber(this);
+	// Define the internal style object
-	this.isTiddlyWikiFakeDom = true;
+	var styleObject = {
-	this.tag = tag;
+		// Method to get the entire style object
-	this.attributes = {};
-	this.isRaw = false;
-	this.children = [];
-	this._style = {};
-	this.namespaceURI = namespace || "http://www.w3.org/1999/xhtml";
-};
-
-Object.setPrototypeOf(TW_Element.prototype,TW_Node.prototype);
-
-Object.defineProperty(TW_Element.prototype, "style", {
 		get: function() {
-		return this._style;
+			return el._style;
 		},
+		// Method to set styles using a string (e.g. "color:red; background-color:blue;")
 		set: function(str) {
 			var self = this;
 			str = str || "";
@@ -81,11 +72,48 @@ Object.defineProperty(TW_Element.prototype, "style", {
 					name = $tw.utils.trim(parts[0]),
 					value = $tw.utils.trim(parts[1]);
 				if(name && value) {
-				self._style[$tw.utils.convertStyleNameToPropertyName(name)] = value;
+					el._style[$tw.utils.convertStyleNameToPropertyName(name)] = value;
 				}
 			});
+		},
+		// Method to set a specific property without transforming the property name, such as a custom property
+		setProperty: function(name, value) {
+			el._style[name] = value;
 		}
-});
+	};
+
+	// Return a Proxy to handle direct access to individual style properties
+	return new Proxy(styleObject, {
+		get: function(target, property) {
+			// If the property exists on styleObject, return it (get, set, setProperty methods)
+			if (property in target) {
+				return target[property];
+			}
+			// Otherwise, return the corresponding property from _style
+			return el._style[$tw.utils.convertStyleNameToPropertyName(property)] || "";
+		},
+		set: function(target, property, value) {
+			// Set the property in _style
+			el._style[$tw.utils.convertStyleNameToPropertyName(property)] = value;
+			return true;
+		}
+	});
+};
+
+var TW_Element = function(tag, namespace) {
+	bumpSequenceNumber(this);
+	this.isTiddlyWikiFakeDom = true;
+	this.tag = tag;
+	this.attributes = {};
+	this.isRaw = false;
+	this.children = [];
+	this._style = {}; // Internal style object
+	this.style = new TW_Style(this); // Proxy for style management
+	this.namespaceURI = namespace || "http://www.w3.org/1999/xhtml";
+};
+
+
+Object.setPrototypeOf(TW_Element.prototype,TW_Node.prototype);
 
 Object.defineProperty(TW_Element.prototype, "nodeType", {
 	get: function() {
@@ -105,7 +133,7 @@ TW_Element.prototype.setAttribute = function(name,value) {
 		throw "Cannot setAttribute on a raw TW_Element";
 	}
 	if(name === "style") {
-		this.style = value;
+		this.style.set(value);
 	} else {
 		this.attributes[name] = value + "";
 	}

core/modules/widgets/widget.js

@@ -428,6 +428,11 @@ Widget.prototype.assignAttributes = function(domNode,options) {
 		destPrefix = options.destPrefix || "",
 		EVENT_ATTRIBUTE_PREFIX = "on";
 	var assignAttribute = function(name,value) {
+		// Process any CSS custom properties
+		if(name.substr(0,2) === "--" && name.length > 2) {
+			domNode.style.setProperty(name,value);
+			return;
+		}
 		// Process any style attributes before considering sourcePrefix and destPrefix
 		if(name.substr(0,6) === "style." && name.length > 6) {
 			domNode.style[$tw.utils.unHyphenateCss(name.substr(6))] = value;

editions/test/tiddlers/tests/data/widgets/ElementWidgetStyleAttributes2.tid

@@ -0,0 +1,15 @@
+title: Widgets/ElementWidgetCSSCustomProps
+description: Element widget should support CSS custom properties
+type: text/vnd.tiddlywiki-multiple
+tags: [[$:/tags/wiki-test-spec]]
+
+title: Output
+
+\whitespace trim
+<div class="hello" onclick="clicked" style.color="blue" style.color="red" style.background="yellow" --bg-color="purple">
+TiddlyWiki
+</div>
++
+title: ExpectedResult
+
+<p><div class="hello" style="color:red;background:yellow;--bg-color:purple;">TiddlyWiki</div></p>

editions/tw5.com/tiddlers/wikitext/HTML in WikiText.tid

@@ -1,6 +1,6 @@
 caption: HTML
 created: 20131205160816081
-modified: 20230615060119987
+modified: 20241025073517909
 tags: WikiText
 title: HTML in WikiText
 type: text/vnd.tiddlywiki
@@ -68,13 +68,13 @@ In an extension of conventional HTML syntax, attributes of elements and widgets
 
 !! Style Attributes
 
-<<.from-version "5.2.2">> TiddlyWiki supports the usual HTML ''style'' attribute for assigning CSS styles to elements:
+TiddlyWiki supports the usual HTML ''style'' attribute for assigning CSS styles to elements:
 
 ```
 <div style="color:red;">Hello</div>
 ```
 
-In an extension to HTML, TiddlyWiki also supports accessing individual CSS styles as independent attributes. For example:
+<<.from-version "5.2.2">> In an extension to HTML, TiddlyWiki also supports accessing individual CSS styles as independent attributes. For example:
 
 ```
 <div style.color="red">Hello</div>
@@ -86,10 +86,8 @@ The advantage of this syntax is that it simplifies assigning computed values to
 <div style.color={{!!color}}>Hello</div>
 ```
 
+<<.from-version "5.3.6">> TiddlyWiki also supports setting [[CSS custom properties|https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties]] as independent attributes. For example:
 
-
+```
-
+<div --bg-color={{{ [[red]] }}}>Hello</div>
-
+```
-
-
-