CSS Variables (Custom Properties)

Author: frenzzy

src/index.js

@@ -145,7 +145,12 @@ export function app(state, actions, view, container) {
     if (name === "key") {
     } else if (name === "style") {
       for (var i in clone(oldValue, value)) {
-        element[name][i] = value == null || value[i] == null ? "" : value[i]
+        var style = value == null || value[i] == null ? "" : value[i]
+        if (name[0] === "-") {
+          element[name].setProperty(i, style)
+        } else {
+          element[name][i] = style
+        }
       }
     } else {
       if (name[0] === "o" && name[1] === "n") {

test/dom.test.js

@@ -481,11 +481,11 @@ testVdomToHtml("styles", [
     html: `<div></div>`
   },
   {
-    vdom: <div style={{ color: "red", fontSize: "1em" }} />,
+    vdom: <div style={{ color: "red", fontSize: "1em", "--foo": "red" }} />,
     html: `<div style="color: red; font-size: 1em;"></div>`
   },
   {
-    vdom: <div style={{ color: "blue", float: "left" }} />,
+    vdom: <div style={{ color: "blue", float: "left", "--foo": "blue" }} />,
     html: `<div style="color: blue; float: left;"></div>`
   },
   {