Serialize object style attributes to style strings. Fixes #7. Thanks @rmales!

Author: developit

src/index.js

@@ -27,6 +27,13 @@ const VOID_ELEMENTS = [
 	'wbr'
 ];
 
+// DOM properties that should NOT have "px" added when numeric
+export const NON_DIMENSION_PROPS = {
+	boxFlex:1, boxFlexGroup:1, columnCount:1, fillOpacity:1, flex:1, flexGrow:1,
+	flexPositive:1, flexShrink:1, flexNegative:1, fontWeight:1, lineClamp:1, lineHeight:1,
+	opacity:1, order:1, orphans:1, strokeOpacity:1, widows:1, zIndex:1, zoom:1
+};
+
 // components without names, kept as a hash for later comparison to return consistent UnnamedComponentXX names.
 const UNNAMED = [];
 
@@ -42,10 +49,33 @@ let escapeChar = a => ESC[a] || a;
 
 let falsey = v => v==null || v===false;
 
+let memoize = (fn, mem={}) => v => mem[v] || (mem[v] = fn(v));
+
 let indent = (s, char) => String(s).replace(/(\n+)/g, '$1' + (char || '\t'));
 
 let isLargeString = s => (String(s).length>40 || String(s).indexOf('\n')!==-1 || String(s).indexOf('<')!==-1);
 
+function styleObjToCss(s) {
+	let str = '';
+	for (let prop in s) {
+		let val = s[prop];
+		if (val!=null) {
+			if (str) str += ' ';
+			str += jsToCss(prop);
+			str += ': ';
+			str += val;
+			if (typeof val==='number' && !NON_DIMENSION_PROPS[prop]) {
+				str += 'px';
+			}
+			str += ';';
+		}
+	}
+	return str;
+}
+
+// Convert a JavaScript camel-case CSS property name to a CSS property name
+let jsToCss = memoize( s => s.replace(/([A-Z])/g,'-$1').toLowerCase() );
+
 function assign(obj, props) {
 	for (let i in props) obj[i] = props[i];
 	return obj;
@@ -152,6 +182,9 @@ export default function renderToString(vnode, context, opts, inner) {
 				if (attributes['class']) continue;
 				name = 'class';
 			}
+			if (name==='style' && v && typeof v==='object') {
+				v = styleObjToCss(v);
+			}
 			if (name==='dangerouslySetInnerHTML') {
 				html = v && v.__html;
 			}

test/render.js

@@ -64,6 +64,13 @@ describe('render', () => {
 
 			expect(rendered).to.equal(expected);
 		});
+
+		it('should serialize object styles', () => {
+			let rendered = render(<div style={{ color:'red', border:'none' }} />),
+				expected = `<div style="color: red; border: none;"></div>`;
+
+			expect(rendered).to.equal(expected);
+		});
 	});
 
 	describe('Functional Components', () => {