feature: support string value in style attribute; close #756

Author: jorgebucaran

src/index.js

@@ -159,12 +159,17 @@ 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)) {
-        var style = value == null || value[i] == null ? "" : value[i]
-        if (i[0] === "-") {
-          element[name].setProperty(i, style)
-        } else {
-          element[name][i] = style
+      if (typeof value === "string") {
+        element.style.cssText = value
+      } else {
+        if (typeof oldValue === "string") oldValue = element.style.cssText = ""
+        for (var i in clone(oldValue, value)) {
+          var style = value == null || value[i] == null ? "" : value[i]
+          if (i[0] === "-") {
+            element.style.setProperty(i, style)
+          } else {
+            element.style[i] = style
+          }
         }
       }
     } else {

test/dom.test.js

@@ -477,16 +477,25 @@ testVdomToHtml("mixed keyed/non-keyed", [
 
 testVdomToHtml("styles", [
   {
-    vdom: <div />,
-    html: `<div></div>`
+    vdom: <div style="color: red;" />,
+    html: `<div style="color: red;"></div>`
   },
   {
     vdom: <div style={{ color: "red", fontSize: "1em", "--foo": "red" }} />,
     html: `<div style="color: red; font-size: 1em;"></div>`
   },
+
+  {
+    vdom: <div style={{ color: "blue", display: "flex", "--foo": "blue" }} />,
+    html: `<div style="color: blue; display: flex;"></div>`
+  },
+  {
+    vdom: <div style="background-color: blue;" />,
+    html: `<div style="background-color: blue;"></div>`
+  },
   {
-    vdom: <div style={{ color: "blue", float: "left", "--foo": "blue" }} />,
-    html: `<div style="color: blue; float: left;"></div>`
+    vdom: <div style={null} />,
+    html: `<div style=""></div>`
   },
   {
     vdom: <div style="" />,