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

Issue:
Throws error when styles are corrupted
<!--
Is this a bug report?

* Yes: Continue filling out the template.
-->

## Expected Behavior

<!-- What should happen. -->

- Parse a string with a corrupted style attribute, e.g. ‘&lt;p style="font - size: 1em"&gt;X&lt;/p&gt;’
- Return a version that skips the corrupted style ‘&lt;p&gt;X&lt;/p&gt;’? 

## Actual Behavior

<!-- What happens instead. -->

## Steps to Reproduce

<!-- Describe a sequence of steps that anybody can repeat to see the issue. -->
Throws an exception: undefined:1:6: property missing ':'
## Reproducible Demo
https://jsfiddle.net/bjwmd5s6/
<!--
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: 1.2.6
- Platform: Mac
- Browser: Tested on Firefox

Pull request:
fix(utilities): skip invalid style attributes
Fixes #256

<!--
Filling out the information below can facilitate the review/merge of the pull request (PR).
-->

## What is the motivation for this pull request?

<!-- Is this a feature, bug fix, documentation, etc.? -->

## What is the current behavior?

<!-- Please link to the issue (if applicable). -->

## What is the new behavior?

<!-- If this is a feature change or bug fix. -->

## Checklist:

<!--
Feel free to remove any item that is irrelevant to your changes.
To check an item, place an "x" in the box like so: `- [x] Tests`
-->

- [x] Tests
- [ ] Documentation
- [ ] Types

<!--
Any other comments? Thank you for contributing!
-->


Patch:
diff --git a/lib/utilities.js b/lib/utilities.js
index 941d2bf..16eaa6f 100644
--- a/lib/utilities.js
+++ b/lib/utilities.js
@@ -83,7 +83,11 @@ function setStyleProp(style, props) {
   if (style === null || style === undefined) {
     return;
   }
-  props.style = styleToJS(style, styleToJSOptions);
+  try {
+    props.style = styleToJS(style, styleToJSOptions);
+  } catch (err) {
+    props.style = {};
+  }
 }
 
 /**


Test patch:
diff --git a/test/index.test.js b/test/index.test.js
index 4ceb844..eed100f 100644
--- a/test/index.test.js
+++ b/test/index.test.js
@@ -153,3 +153,12 @@ describe('trim option', () => {
     );
   });
 });
+
+describe('invalid styles', () => {
+  it('copes with invalid styles', () => {
+    const html = '<p style="font - size: 1em">X</p>';
+    const options = {};
+    const reactElement = parse(html, options);
+    expect(render(reactElement)).toBe('<p>X</p>');
+  });
+});
diff --git a/test/utilities.test.js b/test/utilities.test.js
index f90ac99..b5d5741 100644
--- a/test/utilities.test.js
+++ b/test/utilities.test.js
@@ -117,4 +117,11 @@ describe('setStyleProp', () => {
     expect(setStyleProp(style, props)).toBe(undefined);
     expect(props).toMatchSnapshot();
   });
+
+  it('does not set props.style when style attribute corrupt', () => {
+    const style = `font - size: 1em`;
+    const props = {};
+    expect(setStyleProp(style, props)).toBe(undefined);
+    expect(props).toEqual({ style: {} });
+  });
 });