From 85de8261d58350fadbedf5cddb25418f2b47b188 Mon Sep 17 00:00:00 2001
From: Vladimir Kutepov <frenzzy.man@gmail.com>
Date: Wed, 21 Feb 2018 17:20:10 +0700
Subject: [PATCH] CSS Variables (Custom Properties)

---
 src/index.js     | 7 ++++++-
 test/dom.test.js | 4 ++--
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/index.js b/src/index.js
index ff9497376..a416d5b8a 100644
--- a/src/index.js
+++ b/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") {
diff --git a/test/dom.test.js b/test/dom.test.js
index fe5c7907e..0d75149c1 100644
--- 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>`
   },
   {