First property of inline style missing trailing comma

[jesstelford]

On commit 775e9b12064e0dcae0f1eef9d5fa21c0ff461700

This minimal test case:

console.log(require('html-to-react-components')(
  '<div data-component="Component" style="padding:0; display:inline"></div>'
).Component);

Produces this output:

import React from 'react';

const Component = React.createClass({
  render() {
    return <div style={{
        padding: 0
        display: 'inline'
      }} />;
  }
});

Notice the padding: 0 line is missing a trailing comma.

When more than two inline style elements exist, commas are correctly inserted for properties other than the first. For example:

console.log(require('html-to-react-components')(
  '<div data-component="Component" style="padding:0; display:inline; margin: 10; border: none"></div>'
).Component);

Produces

import React from 'react';

const Component = React.createClass({
  render() {
    return <div style={{
        padding: 0
        display: 'inline',
        margin: 10,
        border: 'none'
      }} />;
  }
});

[jesstelford]

Note that I tried the same case in htmltojsx, and it gives the correct output:

var HTMLtoJSX = require('htmltojsx');
var converter = new HTMLtoJSX({
  createClass: false
});
console.log(converter.convert('<div data-component="Component" style="padding:0; display:inline; margin: 10; border: none"></div>'));

Produces

<div data-component="Component" style={{padding: 0, display: 'inline', margin: 10, border: 'none'}} />

Does this imply an issue with the output formatter?

[roman01la]

Interesting. I'm going to check this. Thanks!

[roman01la]

fixed in 1ecc6998

[jesstelford]

:+1: Thanks!