From 4b021d771bc01329e2ff14af589d1ecbe0dfc64f Mon Sep 17 00:00:00 2001 From: Daniel Berndt Date: Wed, 10 Oct 2018 17:30:08 +0200 Subject: [PATCH 1/4] use css-to-object for parsing styles --- package.json | 5 +-- src/htmltojsx.js | 82 ++---------------------------------------------- 2 files changed, 6 insertions(+), 81 deletions(-) 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; From 92ce9cce779aa88ce4799118b49427df3933524b Mon Sep 17 00:00:00 2001 From: Daniel Berndt Date: Mon, 15 Oct 2018 01:52:37 +0200 Subject: [PATCH 2/4] use much smaller 'to-style' library, fix build --- gulpfile.js | 13 +++++++++++++ package.json | 6 +++--- src/htmltojsx.js | 4 ++-- 3 files changed, 18 insertions(+), 5 deletions(-) diff --git a/gulpfile.js b/gulpfile.js index ee8ca0a..8aec0dc 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -19,6 +19,7 @@ var rename = require('gulp-rename'); var spawn = require('child_process').spawn; var webpack = require('webpack'); var uglify = require('gulp-uglify'); +var babel = require('gulp-babel'); var SITE_OUTPUT_DIR = 'build/site/'; var PACKAGE_OUTPUT_DIR = 'build/package/'; @@ -43,6 +44,12 @@ gulp.task('build-htmltojsx', function() { 'process.env.NODE_ENV': '"production"' }), ], + node: { + fs: "empty" + } + })) + .pipe(babel({ + presets: ['es2015'] })) .pipe(gulp.dest(SITE_OUTPUT_DIR)) .pipe(uglify({ preserveComments: 'some' })) @@ -65,6 +72,12 @@ gulp.task('build-magic', function() { 'process.env.NODE_ENV': '"production"' }), ], + node: { + fs: "empty" + } + })) + .pipe(babel({ + presets: ['es2015'] })) .pipe(gulp.dest(SITE_OUTPUT_DIR)) .pipe(uglify({ preserveComments: 'some' })) diff --git a/package.json b/package.json index 24ccbda..c9a60bd 100644 --- a/package.json +++ b/package.json @@ -5,18 +5,18 @@ "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", + "to-style": "^1.3.3", "yargs": "~4.6.0" }, "devDependencies": { - "babel-preset-es2015": "^6.6.0", + "babel-preset-es2015": "^6.24.1", "babel-preset-react": "^6.5.0", "del": "~2.2.0", "gulp": "~3.9.0", - "gulp-babel": "^6.1.2", + "gulp-babel": "^6.1.3", "gulp-gh-pages": "~0.5.4", "gulp-livereload": "~3.8.1", "gulp-rename": "~1.2.0", diff --git a/src/htmltojsx.js b/src/htmltojsx.js index 9ac3bba..f34b906 100644 --- a/src/htmltojsx.js +++ b/src/htmltojsx.js @@ -135,7 +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'); +var cssToObject = require('to-style').object; /** * Iterates over elements of object invokes iteratee for each element @@ -640,7 +640,7 @@ HTMLtoJSX.prototype = { * @return {string} */ _getStyleAttribute: function(styles) { - var jsxStyles = cssToObject(styles); + var jsxStyles = cssToObject(styles, { camelize: true }); return `style={${JSON.stringify(jsxStyles)}}`; }, From fdf019498e5f03d5510f61617b31dbef3db2b4df Mon Sep 17 00:00:00 2001 From: Daniel Berndt Date: Mon, 15 Oct 2018 02:19:58 +0200 Subject: [PATCH 3/4] revert to css-to-object --- package.json | 2 +- src/htmltojsx.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index c9a60bd..3ef687e 100644 --- a/package.json +++ b/package.json @@ -5,10 +5,10 @@ "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", - "to-style": "^1.3.3", "yargs": "~4.6.0" }, "devDependencies": { diff --git a/src/htmltojsx.js b/src/htmltojsx.js index f34b906..9ac3bba 100644 --- a/src/htmltojsx.js +++ b/src/htmltojsx.js @@ -135,7 +135,7 @@ var ELEMENT_TAG_NAME_MAPPING = { var HTMLDOMPropertyConfig = require('react-dom/lib/HTMLDOMPropertyConfig'); var SVGDOMPropertyConfig = require('react-dom/lib/SVGDOMPropertyConfig'); -var cssToObject = require('to-style').object; +var cssToObject = require('css-to-object'); /** * Iterates over elements of object invokes iteratee for each element @@ -640,7 +640,7 @@ HTMLtoJSX.prototype = { * @return {string} */ _getStyleAttribute: function(styles) { - var jsxStyles = cssToObject(styles, { camelize: true }); + var jsxStyles = cssToObject(styles); return `style={${JSON.stringify(jsxStyles)}}`; }, From 85d4eaa59f68822ae420056c8e3145fb05f71fa7 Mon Sep 17 00:00:00 2001 From: Daniel Berndt Date: Mon, 15 Oct 2018 02:32:16 +0200 Subject: [PATCH 4/4] use existing babel --- gulpfile.js | 9 ++------- package.json | 4 ++-- 2 files changed, 4 insertions(+), 9 deletions(-) diff --git a/gulpfile.js b/gulpfile.js index 8aec0dc..1fdfc9c 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -19,7 +19,6 @@ var rename = require('gulp-rename'); var spawn = require('child_process').spawn; var webpack = require('webpack'); var uglify = require('gulp-uglify'); -var babel = require('gulp-babel'); var SITE_OUTPUT_DIR = 'build/site/'; var PACKAGE_OUTPUT_DIR = 'build/package/'; @@ -48,9 +47,7 @@ gulp.task('build-htmltojsx', function() { fs: "empty" } })) - .pipe(babel({ - presets: ['es2015'] - })) + .pipe(babel()) .pipe(gulp.dest(SITE_OUTPUT_DIR)) .pipe(uglify({ preserveComments: 'some' })) .pipe(rename({ extname: '.min.js' })) @@ -76,9 +73,7 @@ gulp.task('build-magic', function() { fs: "empty" } })) - .pipe(babel({ - presets: ['es2015'] - })) + .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 3ef687e..24ccbda 100644 --- a/package.json +++ b/package.json @@ -12,11 +12,11 @@ "yargs": "~4.6.0" }, "devDependencies": { - "babel-preset-es2015": "^6.24.1", + "babel-preset-es2015": "^6.6.0", "babel-preset-react": "^6.5.0", "del": "~2.2.0", "gulp": "~3.9.0", - "gulp-babel": "^6.1.3", + "gulp-babel": "^6.1.2", "gulp-gh-pages": "~0.5.4", "gulp-livereload": "~3.8.1", "gulp-rename": "~1.2.0",