[fix] Hyphen Case of CSS

Property updating
EasyWebApp · Nov 8, 2024 · a41040d · a41040d
1 parent 1877c2e
commit a41040d
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 5 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "dom-renderer",
-    "version": "2.4.1",
+    "version": "2.4.2",
     "license": "LGPL-3.0-or-later",
     "author": "shiy2008@gmail.com",
     "description": "A light-weight DOM Renderer supports Web components standard & TypeScript language",

diff --git a/source/dist/DOMRenderer.ts b/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,

diff --git a/test/jsx-runtime.spec.tsx b/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>'
         );
     });