diff --git a/gulpfile.js b/gulpfile.js index ee8ca0a..1fdfc9c 100644 --- a/gulpfile.js +++ b/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' })) diff --git a/package.json b/package.json index bf81386..24ccbda 100644 --- a/package.json +++ b/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", diff --git a/src/htmltojsx.js b/src/htmltojsx.js index 3e3ec5d..9ac3bba 100644 --- a/src/htmltojsx.js +++ b/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;