[fix] Hyphen Case of CSS

Property updating

Author: TechQuery

package.json

@@ -1,6 +1,6 @@
 {
     "name": "dom-renderer",
-    "version": "2.4.1",
+    "version": "2.4.2",
     "license": "LGPL-3.0-or-later",
     "author": "[email protected]",
     "description": "A light-weight DOM Renderer supports Web components standard & TypeScript language",

source/dist/DOMRenderer.ts

@@ -170,8 +170,8 @@ export class DOMRenderer {
             (oldVNode.node as HTMLElement).style,
             oldVNode.style,
             newVNode.style,
-            (node, key) => node.removeProperty(key),
-            (node, key, value) => node.setProperty(key, value)
+            (node, key) => node.removeProperty(toHyphenCase(key)),
+            (node, key, value) => node.setProperty(toHyphenCase(key), value)
         );
         this.updateChildren(
             oldVNode.node as ParentNode,

test/jsx-runtime.spec.tsx

@@ -17,12 +17,12 @@ describe('JSX runtime', () => {
 
     it('should render JSX to DOM', () => {
         renderer.render(
-            <a href="https://idea2.app/" style={{ color: 'red' }}>
+            <a href="https://idea2.app/" style={{ fontSize: '2rem', '--color': 'red' }}>
                 idea2app
             </a>
         );
         expect(document.body.innerHTML).toBe(
-            '<a href="https://idea2.app/" style="color: red;">idea2app</a>'
+            '<a href="https://idea2.app/" style="font-size: 2rem; --color: red;">idea2app</a>'
         );
     });