CSS Variables (Custom Properties)

jorgebucaran · Mar 8, 2018 · f3c71b3 · f3c71b3
1 parent c1be5bd
commit f3c71b3
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 3 deletions.
diff --git a/src/index.js b/src/index.js
@@ -145,7 +145,11 @@ 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]
+        if (i[0] === "-") {
+          element[name].setProperty(i, value)
+        } else {
+          element[name][i] = value == null || value[i] == null ? "" : value[i]
+        }
       }
     } else {
       if (name[0] === "o" && name[1] === "n") {

diff --git a/test/dom.test.js b/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>`
   },
   {