Merge pull request #209 from preactjs/fix/compat-empty-classname

fix: On empty className w/ compat, class attr will no longer be duplicated

Author: marvinhagemeister

.changeset/fifty-rings-jog.md

@@ -0,0 +1,5 @@
+---
+'preact-render-to-string': patch
+---
+
+On empty className w/ compat, class attribute will no longer be duplicated

package.json

@@ -30,7 +30,8 @@
 		"transpile:jsx": "microbundle src/jsx.js -o dist/jsx.js --target web --external preact && microbundle dist/jsx.js -o dist/jsx.js -f cjs --external preact",
 		"copy-typescript-definition": "copyfiles -f src/*.d.ts dist",
 		"test": "eslint src test && tsc && npm run test:mocha && npm run bench",
-		"test:mocha": "BABEL_ENV=test mocha -r @babel/register -r test/setup.js test/**/*.test.js",
+		"test:mocha": "BABEL_ENV=test mocha -r @babel/register -r test/setup.js test/**/[!compat]*.test.js && npm run test:mocha:compat",
+		"test:mocha:compat": "BABEL_ENV=test mocha -r @babel/register -r test/setup.js test/compat.test.js",
 		"format": "prettier src/**/*.{d.ts,js} test/**/*.js --write",
 		"prepublishOnly": "npm run build",
 		"release": "npm run build && git commit -am $npm_package_version && git tag $npm_package_version && git push && git push --tags && npm publish"

src/index.js

@@ -15,7 +15,8 @@ const SHALLOW = { shallow: true };
 // components without names, kept as a hash for later comparison to return consistent UnnamedComponentXX names.
 const UNNAMED = [];
 
-const VOID_ELEMENTS = /^(area|base|br|col|embed|hr|img|input|link|meta|param|source|track|wbr)$/;
+const VOID_ELEMENTS =
+	/^(area|base|br|col|embed|hr|img|input|link|meta|param|source|track|wbr)$/;
 
 const UNSAFE_NAME = /[\s\n\\/='"\0<>]/;
 
@@ -247,7 +248,7 @@ function _renderToString(vnode, context, opts, inner, isSvgMode, selectValue) {
 			if (name === 'defaultValue') {
 				name = 'value';
 			} else if (name === 'className') {
-				if (props.class) continue;
+				if (typeof props.class !== 'undefined') continue;
 				name = 'class';
 			} else if (isSvgMode && name.match(/^xlink:?./)) {
 				name = name.toLowerCase().replace(/^xlink:?/, 'xlink:');

test/compat.test.js

@@ -0,0 +1,12 @@
+import { render } from '../src';
+import { createElement } from 'preact/compat';
+import { expect } from 'chai';
+
+describe('compat', () => {
+	it('should not duplicate class attribute when className is empty', async () => {
+		let rendered = render(createElement('div', { className: '' }));
+		let expected = `<div class></div>`;
+
+		expect(rendered).to.equal(expected);
+	});
+});