Repository: remarkablemark/html-react-parser (ts)

Issue:
Doesn't work with web components with style attributes
<!--
Is this a bug report?

* Yes: Continue filling out the template.
* No: Delete the template and write in free form. (Apply a label to the issue if applicable.)
-->

## Expected Behavior
render web component correctly

<!-- What should happen. -->

## Actual Behavior
throw error on build

<!-- What happens instead. -->

<!-- Describe a sequence of steps that anybody can repeat to see the issue. -->

## Reproducible Demo
https://codesandbox.io/s/html-react-parser-forked-vll1t

<!--
Creating a bug demo will help speed up the process of resolving the issue:

* CodeSandbox: https://codesandbox.io/s/940pov1l4w
* JSFiddle: https://jsfiddle.net/remarkablemark/7v86d800/
* Repl.it: https://repl.it/@remarkablemark/html-react-parser
-->

## Environment

- Version: [v0.14.2](https://github.com/remarkablemark/html-react-parser/tree/v0.14.2)

Pull request:
fix(dom-to-react): transform style to object for Web Components
## What is the motivation for this pull request?

fix(dom-to-react): transform style to object for Web Components

Fixes #188

## What is the current behavior?

[Web Components](https://reactjs.org/docs/web-components.html) skip the `attributesToProps` process. However, React still expects the custom element `style` prop to be an object and not a string:

```
Error: The `style` prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.
```

## What is the new behavior?

Web Components will only get the `style` attribute transformed into an object.

## Checklist:

- [x] Tests


Patch:
diff --git a/lib/dom-to-react.js b/lib/dom-to-react.js
index a83717b..986dbee 100644
--- a/lib/dom-to-react.js
+++ b/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 patch:
diff --git a/test/__snapshots__/dom-to-react.test.js.snap b/test/__snapshots__/dom-to-react.test.js.snap
index 4e139fa..b956049 100644
--- a/test/__snapshots__/dom-to-react.test.js.snap
+++ b/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",
+    }
+  }
 />
 `;