Add special treatment for style and class DOM attributes to match DOM renderer

Author: developit

src/jsx.js

@@ -24,7 +24,9 @@ function attributeHook(name, value, context, opts, isComponent) {
 	let type = typeof value;
 
 	// always skip null & undefined values, skip false DOM attributes, skip functions if told to
-	if (value==null || (!isComponent && opts.skipFalseAttributes && value===false) || (type==='function' && !opts.functions)) return '';
+	if (value==null || (type==='function' && !opts.functions)) return '';
+
+	if (opts.skipFalseAttributes && !isComponent && (value===false || ((name==='class' || name==='style') && value===''))) return '';
 
 	let indentChar = typeof opts.pretty==='string' ? opts.pretty : '\t';
 	if (type!=='string') {

test/jsx.js

@@ -31,6 +31,15 @@ describe('jsx', () => {
 		`);
 	});
 
+	it('should not render empty class or style DOM attributes', () => {
+		expect(renderJsx(<a b={false} />)).to.equal('<a></a>');
+		expect(renderJsx(<a b="" />)).to.equal('<a b=""></a>');
+		expect(renderJsx(<a class={false} />)).to.equal('<a></a>');
+		expect(renderJsx(<a style={false} />)).to.equal('<a></a>');
+		expect(renderJsx(<a class="" />)).to.equal('<a></a>');
+		expect(renderJsx(<a style="" />)).to.equal('<a></a>');
+	});
+
 	it('should render JSX attributes inline if short enough', () => {
 		expect(renderJsx(
 			<a b="c">bar</a>