From c6ffa188f2bf729fb761d857ea690ce4e3ac73af Mon Sep 17 00:00:00 2001
From: kfule <kta@live.jp>
Date: Wed, 6 Nov 2024 19:54:16 +0900
Subject: [PATCH] updateStyle(): use setProperty() only when css vars
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This will improve the performance of “mutate styles/properties” and reduce the amount of code a little.

Also, it turns out that the CSSStyleDeclaration interface also supports stuff like elem.style["font-size"] as well as the equivalent elem.style.fontSize.
https://drafts.csswg.org/cssom/#dom-cssstyleproperties-dashed-attribute
---
 render/render.js                   | 18 ++++++++----------
 render/tests/test-createElement.js |  7 -------
 2 files changed, 8 insertions(+), 17 deletions(-)

diff --git a/render/render.js b/render/render.js
index a31d19346..6888d06f5 100644
--- a/render/render.js
+++ b/render/render.js
@@ -778,13 +778,6 @@ module.exports = function() {
 	}
 
 	//style
-	var uppercaseRegex = /[A-Z]/g
-	function toLowerCase(capital) { return "-" + capital.toLowerCase() }
-	function normalizeKey(key) {
-		return key[0] === "-" && key[1] === "-" ? key :
-			key === "cssFloat" ? "float" :
-				key.replace(uppercaseRegex, toLowerCase)
-	}
 	function updateStyle(element, old, style) {
 		if (old === style) {
 			// Styles are equivalent, do nothing.
@@ -800,7 +793,10 @@ module.exports = function() {
 			// Add new style properties
 			for (var key in style) {
 				var value = style[key]
-				if (value != null) element.style.setProperty(normalizeKey(key), String(value))
+				if (value != null) {
+					if (key[0] === "-" && key[1] === "-") element.style.setProperty(key, String(value))
+					else element.style[key] = String(value)
+				}
 			}
 		} else {
 			// Both old & new are (different) objects.
@@ -808,13 +804,15 @@ module.exports = function() {
 			for (var key in style) {
 				var value = style[key]
 				if (value != null && (value = String(value)) !== String(old[key])) {
-					element.style.setProperty(normalizeKey(key), value)
+					if (key[0] === "-" && key[1] === "-") element.style.setProperty(key, value)
+					else element.style[key] = value
 				}
 			}
 			// Remove style properties that no longer exist
 			for (var key in old) {
 				if (old[key] != null && style[key] == null) {
-					element.style.removeProperty(normalizeKey(key))
+					if (key[0] === "-" && key[1] === "-") element.style.removeProperty(key)
+					else element.style[key] = ""
 				}
 			}
 		}
diff --git a/render/tests/test-createElement.js b/render/tests/test-createElement.js
index 2eecc90fb..67dc82dda 100644
--- a/render/tests/test-createElement.js
+++ b/render/tests/test-createElement.js
@@ -46,13 +46,6 @@ o.spec("createElement", function() {
 
 		o(vnode.dom.style["--cssVar"]).equals("red")
 	})
-	o("censors cssFloat to float", function() {
-		var vnode = m("a", {style: {cssFloat: "left"}})
-
-		render(root, vnode)
-
-		o(vnode.dom.style.float).equals("left")
-	})
 	o("creates children", function() {
 		var vnode = m("div", m("a"), m("b"))
 		render(root, vnode)