use css-to-object for parsing styles

gulpfile.js

@@ -43,7 +43,11 @@ gulp.task('build-htmltojsx', function() {
           'process.env.NODE_ENV': '"production"'
         }),
       ],
+      node: {
+        fs: "empty"
+      }
     }))
+    .pipe(babel())
     .pipe(gulp.dest(SITE_OUTPUT_DIR))
     .pipe(uglify({ preserveComments: 'some' }))
     .pipe(rename({ extname: '.min.js' }))
@@ -65,7 +69,11 @@ gulp.task('build-magic', function() {
           'process.env.NODE_ENV': '"production"'
         }),
       ],
+      node: {
+        fs: "empty"
+      }
     }))
+    .pipe(babel())
     .pipe(gulp.dest(SITE_OUTPUT_DIR))
     .pipe(uglify({ preserveComments: 'some' }))
     .pipe(rename({ extname: '.min.js' }))

package.json

@@ -5,10 +5,11 @@
   "main": "src/htmltojsx.js",
   "bin": "src/cli.js",
   "dependencies": {
+    "css-to-object": "^1.1.0",
+    "jsdom-no-contextify": "~3.1.0",
     "react": "~15.4.1",
     "react-dom": "~15.4.1",
-    "yargs": "~4.6.0",
-    "jsdom-no-contextify": "~3.1.0"
+    "yargs": "~4.6.0"
   },
   "devDependencies": {
     "babel-preset-es2015": "^6.6.0",

src/htmltojsx.js

@@ -135,6 +135,7 @@ var ELEMENT_TAG_NAME_MAPPING = {
 
 var HTMLDOMPropertyConfig = require('react-dom/lib/HTMLDOMPropertyConfig');
 var SVGDOMPropertyConfig = require('react-dom/lib/SVGDOMPropertyConfig');
+var cssToObject = require('css-to-object');
 
 /**
  * Iterates over elements of object invokes iteratee for each element
@@ -639,8 +640,8 @@ HTMLtoJSX.prototype = {
    * @return {string}
    */
   _getStyleAttribute: function(styles) {
-    var jsxStyles = new StyleParser(styles).toJSXString();
-    return 'style={{' + jsxStyles + '}}';
+    var jsxStyles = cssToObject(styles);
+    return `style={${JSON.stringify(jsxStyles)}}`;
   },
 
   /**
@@ -657,81 +658,4 @@ HTMLtoJSX.prototype = {
   }
 };
 
-/**
- * Handles parsing of inline styles
- *
- * @param {string} rawStyle Raw style attribute
- * @constructor
- */
-var StyleParser = function(rawStyle) {
-  this.parse(rawStyle);
-};
-StyleParser.prototype = {
-  /**
-   * Parse the specified inline style attribute value
-   * @param {string} rawStyle Raw style attribute
-   */
-  parse: function(rawStyle) {
-    this.styles = {};
-    rawStyle.split(';').forEach(function(style) {
-      style = style.trim();
-      var firstColon = style.indexOf(':');
-      var key = style.substr(0, firstColon);
-      var value = style.substr(firstColon + 1).trim();
-      if (key !== '') {
-        // Style key should be case insensitive
-        key = key.toLowerCase();
-        this.styles[key] = value;
-      }
-    }, this);
-  },
-
-  /**
-   * Convert the style information represented by this parser into a JSX
-   * string
-   *
-   * @return {string}
-   */
-  toJSXString: function() {
-    var output = [];
-    eachObj(this.styles, function(key, value) {
-      output.push(this.toJSXKey(key) + ': ' + this.toJSXValue(value));
-    }, this);
-    return output.join(', ');
-  },
-
-  /**
-   * Convert the CSS style key to a JSX style key
-   *
-   * @param {string} key CSS style key
-   * @return {string} JSX style key
-   */
-  toJSXKey: function(key) {
-    // Don't capitalize -ms- prefix
-    if(/^-ms-/.test(key)) {
-      key = key.substr(1);
-    }
-    return hyphenToCamelCase(key);
-  },
-
-  /**
-   * Convert the CSS style value to a JSX style value
-   *
-   * @param {string} value CSS style value
-   * @return {string} JSX style value
-   */
-  toJSXValue: function(value) {
-    if (isNumeric(value)) {
-      // If numeric, no quotes
-      return value;
-    } else if (isConvertiblePixelValue(value)) {
-      // "500px" -> 500
-      return trimEnd(value, 'px');
-    } else {
-      // Probably a string, wrap it in quotes
-      return '\'' + value.replace(/'/g, '"') + '\'';
-    }
-  }
-};
-
 module.exports = HTMLtoJSX;