fix(dom-to-react): transform style to object for Web Components

Fixes #188

Author: remarkablemark

lib/dom-to-react.js

@@ -2,6 +2,8 @@ var React = require('react');
 var attributesToProps = require('./attributes-to-props');
 var utilities = require('./utilities');
 
+var setStyleProp = utilities.setStyleProp;
+
 /**
  * Converts DOM nodes to React elements.
  *
@@ -62,8 +64,10 @@ function domToReact(nodes, options) {
     }
 
     props = node.attribs;
-    if (!skipAttributesToProps(node)) {
-      props = attributesToProps(node.attribs);
+    if (skipAttributesToProps(node)) {
+      setStyleProp(props.style, props);
+    } else if (props) {
+      props = attributesToProps(props);
     }
 
     children = null;
@@ -110,7 +114,7 @@ function domToReact(nodes, options) {
 
 /**
  * Determines whether DOM element attributes should be transformed to props.
- * Web Components (custom elements) should not have their attributes transformed.
+ * Web Components should not have their attributes transformed except for `style`.
  *
  * @param  {DomElement} node
  * @return {boolean}

test/__snapshots__/dom-to-react.test.js.snap

@@ -19,7 +19,12 @@ exports[`domToReact converts custom element with attributes 1`] = `
 <custom-element
   class="myClass"
   custom-attribute="value"
-  style="-o-transition: all .5s; line-height: 1;"
+  style={
+    Object {
+      "OTransition": "all .5s",
+      "lineHeight": "1",
+    }
+  }
 />
 `;
 
@@ -87,6 +92,11 @@ exports[`domToReact when React >=16 preserves unknown attributes 1`] = `
 <custom-element
   class="myClass"
   custom-attribute="value"
-  style="-o-transition: all .5s; line-height: 1;"
+  style={
+    Object {
+      "OTransition": "all .5s",
+      "lineHeight": "1",
+    }
+  }
 />
 `;