CSS Variables (Custom Properties)

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

Hide file tree

Showing 2 changed files with 10 additions and 4 deletions.
diff --git a/src/index.js b/src/index.js
@@ -144,8 +144,14 @@ export function app(state, actions, view, container) {
   function updateAttribute(element, name, value, oldValue, isSvg) {
     if (name === "key") {
     } else if (name === "style") {
-      for (var i in clone(oldValue, value)) {
-        element[name][i] = value == null || value[i] == null ? "" : value[i]
+      for (var styleName in clone(oldValue, value)) {
+        var styleValue =
+          value == null || value[styleName] == null ? "" : value[styleName]
+        if (styleName.indexOf("--") === 0) {
+          element[name].setProperty(styleName, styleValue)
+        } else {
+          element[name][styleName] = styleValue
+        }
       }
     } 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>`
   },
   {