fix #28; support CSS custom properties

Author: mbostock

src/index.js

@@ -555,7 +555,7 @@ function hypertext(render, postprocess) {
                 } else if (typeof subvalue === "function") {
                   node[key] = subvalue;
                 } else if (key === "style" && isObjectLiteral(subvalue)) {
-                  Object.assign(node[key], subvalue);
+                  setStyles(node[key], subvalue);
                 } else {
                   setAttribute(node, key, subvalue === true ? "" : subvalue);
                 }
@@ -566,7 +566,7 @@ function hypertext(render, postprocess) {
               if (typeof value === "function") {
                 node[name] = value;
               } else { // style
-                Object.assign(node[name], value);
+                setStyles(node[name], value);
               }
             }
           }
@@ -663,3 +663,12 @@ function removeAttribute(node, name) {
   }
   node.removeAttribute(name);
 }
+
+// We can’t use Object.assign because custom properties…
+function setStyles(style, values) {
+  for (const name in values) {
+    const value = values[name];
+    if (name.startsWith("--")) style.setProperty(name, value);
+    else style[name] = value;
+  }
+}

test/snapshots.js

@@ -68,6 +68,10 @@ export function interpolatedStyleObject() {
   return html`<span style=${{background: "yellow"}}>It’s all yellow!</span>`;
 }
 
+export function interpolatedStyleObjectWithCustomProperty() {
+  return html`<span style=${{"--custom-property": "yellow"}}>It’s all yellow!</span>`;
+}
+
 export function interpolatedStyleString() {
   return html`<span style="background: ${"yellow; font-style: italic"};">It’s yellow (and italic).</span>`;
 }

test/snapshots/interpolatedStyleObjectWithCustomProperty.html

@@ -0,0 +1 @@
+<span style="--custom-property: yellow;">It’s all yellow!</span>