fix Literally undefined class #3283

src/compiler/compile/render_dom/wrappers/Element/Attribute.ts

@@ -91,9 +91,16 @@ export default class AttributeWrapper {
 							if (chunk.type === 'Text') {
 								return stringify(chunk.data);
 							} else {
-								return chunk.get_precedence() <= 13
-									? `(${chunk.render()})`
-									: chunk.render();
+								const renderedChunk = chunk.render();
+								if (this.node.name === 'class') {
+									return chunk.get_precedence() <= 13
+										? `(${renderedChunk})`
+									  : `(${renderedChunk} || '')`;
+								} else {
+									return chunk.get_precedence() <= 13
+									  ? `(${renderedChunk})`
+									  : renderedChunk;
+								}
 							}
 						})
 						.join(' + ');

test/runtime/samples/attribute-null-classname/_config.js

@@ -0,0 +1,32 @@
+export default {
+	skip_if_ssr: true,
+
+	props: {
+		testName: "testClassName"
+	},
+
+	html: `<div class="testClassName svelte-x1o6ra"></div>`,
+
+	test({ assert, component, target }) {
+		const div = target.querySelector('div');
+		assert.equal(div.className, 'testClassName svelte-x1o6ra');
+
+		component.testName = null;
+		assert.equal(div.className, ' svelte-x1o6ra');
+
+		component.testName = undefined;
+		assert.equal(div.className, ' svelte-x1o6ra');
+
+		component.testName = undefined + '';
+		assert.equal(div.className, 'undefined svelte-x1o6ra');
+
+		component.testName = null + '';
+		assert.equal(div.className, 'null svelte-x1o6ra');
+
+		component.testName = 1;
+		assert.equal(div.className, '1 svelte-x1o6ra');
+
+		component.testName = '';
+		assert.equal(div.className, ' svelte-x1o6ra');
+	}
+};

test/runtime/samples/attribute-null-classname/main.svelte

@@ -0,0 +1,11 @@
+<script>
+	export let testName;
+</script>
+
+<style>
+  div {
+    color: purple;
+  }
+</style>
+
+<div class={testName}></div>

test/runtime/samples/attribute-null-classnames/_config.js

@@ -0,0 +1,39 @@
+export default {
+	skip_if_ssr: true,
+
+	props: {
+		testName1: "test1",
+		testName2: "test2",
+	},
+
+	html: `<div class="test1test2 svelte-x1o6ra"></div>`,
+
+	test({ assert, component, target }) {
+		const div = target.querySelector('div');
+		assert.equal(div.className, 'test1test2 svelte-x1o6ra');
+
+		component.testName1 = null;
+		component.testName2 = null;
+		assert.equal(div.className, '0 svelte-x1o6ra');
+
+		component.testName1 = null;
+		component.testName2 = "test";
+		assert.equal(div.className, 'nulltest svelte-x1o6ra');
+
+		component.testName1 = undefined;
+		component.testName2 = "test";
+		assert.equal(div.className, 'undefinedtest svelte-x1o6ra');
+
+		component.testName1 = undefined;
+		component.testName2 = undefined;
+		assert.equal(div.className, 'NaN svelte-x1o6ra');
+
+		component.testName1 = null;
+		component.testName2 = 1;
+		assert.equal(div.className, '1 svelte-x1o6ra');
+
+		component.testName1 = undefined;
+		component.testName2 = 1;
+		assert.equal(div.className, 'NaN svelte-x1o6ra');
+	}
+};

test/runtime/samples/attribute-null-classnames/main.svelte

@@ -0,0 +1,12 @@
+<script>
+	export let testName1;
+	export let testName2;
+</script>
+
+<style>
+  div {
+    color: purple;
+  }
+</style>
+
+<div class={testName1 + testName2}></div>