Fix handling of style in react, vdom

Author: wooorm

index.js

@@ -1,6 +1,7 @@
 'use strict';
 
 /* Dependencies. */
+var trim = require('trim');
 var paramCase = require('kebab-case');
 var information = require('property-information');
 var spaces = require('space-separated-tokens');
@@ -68,6 +69,23 @@ function toH(h, node, ctx) {
     delete attributes.className;
   }
 
+  if (typeof attributes.style === 'string') {
+    /* VDOM expects a `string` style in `attributes`
+     * See https://github.com/Matt-Esch/virtual-dom/blob/947ecf9/
+     * docs/vnode.md#propertiesstyle-vs-propertiesattributesstyle */
+    if (ctx.vdom) {
+      if (!attributes.attributes) {
+        attributes.attributes = {};
+      }
+
+      attributes.attributes.style = attributes.style;
+      delete attributes.style;
+    /* React only accepts `style` as object. */
+    } else if (ctx.react) {
+      attributes.style = parseStyle(attributes.style);
+    }
+  }
+
   if (ctx.prefix) {
     ctx.key++;
     attributes.key = ctx.prefix + ctx.key;
@@ -168,3 +186,36 @@ function vdom(h) {
   /* istanbul ignore next */
   return false;
 }
+
+function parseStyle(value) {
+  var result = {};
+  var declarations = value.split(';');
+  var length = declarations.length;
+  var index = -1;
+  var declaration;
+  var prop;
+  var pos;
+
+  while (++index < length) {
+    declaration = declarations[index];
+    pos = declaration.indexOf(':');
+    if (pos !== -1) {
+      prop = camelCase(trim(declaration.slice(0, pos)));
+      result[prop] = trim(declaration.slice(pos + 1));
+    }
+  }
+
+  return result;
+}
+
+function camelCase(val) {
+  if (val.slice(0, 4) === '-ms-') {
+    val = 'ms-' + val.slice(4);
+  }
+
+  return val.replace(/-([a-z])/g, replace);
+}
+
+function replace($0, $1) {
+  return $1.toUpperCase();
+}

package.json

@@ -31,6 +31,7 @@
     "kebab-case": "^1.0.0",
     "property-information": "^3.0.0",
     "space-separated-tokens": "^1.0.0",
+    "trim": "0.0.1",
     "unist-util-is": "^2.0.0"
   },
   "devDependencies": {
@@ -70,6 +71,8 @@
     }
   },
   "remarkConfig": {
-    "plugins": ["preset-wooorm"]
+    "plugins": [
+      "preset-wooorm"
+    ]
   }
 }

test.js

@@ -86,9 +86,8 @@ test('hast-to-hyperscript', function (t) {
       'bravo ',
       v('strong', {
         key: 'h-2',
-        style: 'color: red',
         accept: '.jpg, .jpeg',
-        attributes: {'camel-case': 'on off'}
+        attributes: {style: 'color: red', 'camel-case': 'on off'}
       }, 'charlie'),
       ' delta'
     ])),
@@ -109,7 +108,7 @@ test('hast-to-hyperscript', function (t) {
       'bravo ',
       r('strong', {
         key: 'h-2',
-        style: 'color: red',
+        style: {color: 'red'},
         'camel-case': 'on off',
         accept: '.jpg, .jpeg'
       }, ['charlie']),
@@ -143,6 +142,37 @@ test('hast-to-hyperscript', function (t) {
       'should patch `keys` on react'
     );
 
+    st.deepEqual(
+      toH(v, u('element', {tagName: 'div', properties: {style: 'color: red'}})).properties.attributes.style,
+      'color: red',
+      'vdom: should patch a style declaration correctly'
+    );
+
+    st.deepEqual(
+      toH(r, u('element', {tagName: 'div', properties: {style: 'color: red'}})).props.style,
+      {color: 'red'},
+      'react: should parse a style declaration'
+    );
+
+    st.deepEqual(
+      toH(r, u('element', {tagName: 'div', properties: {
+        style: 'color: red; background-color: blue; -moz-transition: initial; -ms-transition: unset'
+      }})).props.style,
+      {
+        color: 'red',
+        backgroundColor: 'blue',
+        msTransition: 'unset',
+        MozTransition: 'initial'
+      },
+      'react: should parse vendor prefixed in style declarations'
+    );
+
+    st.deepEqual(
+      toH(r, u('element', {tagName: 'div', properties: {style: '; color; border: 1;'}})).props.style,
+      {border: '1'},
+      'react: should parse an invalid style declaration'
+    );
+
     st.end();
   });