CSS Variables (Custom Properties)

jorgebucaran · Feb 21, 2018 · d36edf4 · d36edf4
1 parent 8b501ce
commit d36edf4
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 4 deletions.
diff --git a/src/index.js b/src/index.js
@@ -133,8 +133,14 @@ export function app(state, actions, view, container) {
   function updateAttribute(element, name, value, isSVG, oldValue) {
     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 (typeof value === "function" || (name in element && !isSVG)) {

diff --git a/test/dom.test.js b/test/dom.test.js
@@ -605,11 +605,15 @@ testTreeSegue("styles", [
     html: `<div></div>`
   },
   {
-    tree: h("div", { style: { color: "red", fontSize: "1em" } }),
+    tree: h("div", {
+      style: { color: "red", fontSize: "1em", "--foo": "red" }
+    }),
     html: `<div style="color: red; font-size: 1em;"></div>`
   },
   {
-    tree: h("div", { style: { color: "blue", float: "left" } }),
+    tree: h("div", {
+      style: { color: "blue", float: "left", "--foo": "blue" }
+    }),
     html: `<div style="color: blue; float: left;"></div>`
   },
   {