From 70aa69949652183622e0b96637caf4d80e704b26 Mon Sep 17 00:00:00 2001
From: Umang Galaiya <umanghome@gmail.com>
Date: Sun, 14 Jul 2019 20:49:18 +0530
Subject: [PATCH 1/4] [Test] Add test for class with spread attributes

---
 .../samples/class-with-spread/_config.js      | 21 +++++++++++++++++++
 .../samples/class-with-spread/main.svelte     |  6 ++++++
 2 files changed, 27 insertions(+)
 create mode 100644 test/runtime/samples/class-with-spread/_config.js
 create mode 100644 test/runtime/samples/class-with-spread/main.svelte

diff --git a/test/runtime/samples/class-with-spread/_config.js b/test/runtime/samples/class-with-spread/_config.js
new file mode 100644
index 000000000000..d5233a584969
--- /dev/null
+++ b/test/runtime/samples/class-with-spread/_config.js
@@ -0,0 +1,21 @@
+export default {
+	props: {
+		myClass: 'one two',
+		attributes: {
+			role: 'button'
+		}
+	},
+
+	html: `<div class="one two" role="button"></div>`,
+
+	test({ assert, component, target, window }) {
+		component.myClass = 'one';
+		component.attributes = {
+			'aria-label': 'Test'
+		};
+
+		assert.htmlEqual(target.innerHTML, `
+			<div class="one" aria-label="Test"></div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/class-with-spread/main.svelte b/test/runtime/samples/class-with-spread/main.svelte
new file mode 100644
index 000000000000..54d8088581c5
--- /dev/null
+++ b/test/runtime/samples/class-with-spread/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	export let myClass;
+	export let attributes = {};
+</script>
+
+<div class={myClass} {...attributes}></div>

From 17247d8bb4e9680ac90347099c4a5a01c67d489b Mon Sep 17 00:00:00 2001
From: Umang Galaiya <umanghome@gmail.com>
Date: Sun, 14 Jul 2019 20:49:27 +0530
Subject: [PATCH 2/4] [Test] Add test for class directive with spread
 attributes

---
 .../_config.js                                | 21 +++++++++++++++++++
 .../main.svelte                               |  6 ++++++
 2 files changed, 27 insertions(+)
 create mode 100644 test/runtime/samples/class-with-dynamic-attribute-and-spread/_config.js
 create mode 100644 test/runtime/samples/class-with-dynamic-attribute-and-spread/main.svelte

diff --git a/test/runtime/samples/class-with-dynamic-attribute-and-spread/_config.js b/test/runtime/samples/class-with-dynamic-attribute-and-spread/_config.js
new file mode 100644
index 000000000000..58ccc764975b
--- /dev/null
+++ b/test/runtime/samples/class-with-dynamic-attribute-and-spread/_config.js
@@ -0,0 +1,21 @@
+export default {
+	props: {
+		myClass: 'one two',
+		attributes: {
+			role: 'button'
+		}
+	},
+
+	html: `<div class="one two three" role="button"></div>`,
+
+	test({ assert, component, target, window }) {
+		component.myClass = 'one';
+		component.attributes = {
+			'aria-label': 'Test'
+		};
+
+		assert.htmlEqual(target.innerHTML, `
+			<div class="one three" aria-label="Test"></div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/class-with-dynamic-attribute-and-spread/main.svelte b/test/runtime/samples/class-with-dynamic-attribute-and-spread/main.svelte
new file mode 100644
index 000000000000..95825c777bed
--- /dev/null
+++ b/test/runtime/samples/class-with-dynamic-attribute-and-spread/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	export let myClass;
+	export let attributes = {};
+</script>
+
+<div class={myClass} class:three={true} {...attributes}></div>

From 59ea5654a7df7cbca47459730347050f78759558 Mon Sep 17 00:00:00 2001
From: Umang Galaiya <umanghome@gmail.com>
Date: Sun, 14 Jul 2019 20:49:50 +0530
Subject: [PATCH 3/4] [Element][DOM] Set class dependencies before returning

---
 .../compile/render_dom/wrappers/Element/index.ts       | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/compiler/compile/render_dom/wrappers/Element/index.ts b/src/compiler/compile/render_dom/wrappers/Element/index.ts
index 9b14d1cd6c9b..9d3f60ac7e7c 100644
--- a/src/compiler/compile/render_dom/wrappers/Element/index.ts
+++ b/src/compiler/compile/render_dom/wrappers/Element/index.ts
@@ -548,6 +548,13 @@ export default class ElementWrapper extends Wrapper {
 	}
 
 	add_attributes(block: Block) {
+		// Get all the class dependencies first
+		this.attributes.forEach((attribute) => {
+			if (attribute.node.name === 'class' && attribute.node.is_dynamic) {
+				this.class_dependencies.push(...attribute.node.dependencies);
+			}
+		});
+
 		// @ts-ignore todo:
 		if (this.node.attributes.find(attr => attr.type === 'Spread')) {
 			this.add_spread_attributes(block);
@@ -555,9 +562,6 @@ export default class ElementWrapper extends Wrapper {
 		}
 
 		this.attributes.forEach((attribute) => {
-			if (attribute.node.name === 'class' && attribute.node.is_dynamic) {
-				this.class_dependencies.push(...attribute.node.dependencies);
-			}
 			attribute.render(block);
 		});
 	}

From f369d8f0a7a5cd0cc0b8f990057d5e149e113c68 Mon Sep 17 00:00:00 2001
From: Umang Galaiya <umanghome@gmail.com>
Date: Sun, 14 Jul 2019 20:50:05 +0530
Subject: [PATCH 4/4] [Element][SSR] Set class expression if spread is used

---
 src/compiler/compile/render_ssr/handlers/Element.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/compiler/compile/render_ssr/handlers/Element.ts b/src/compiler/compile/render_ssr/handlers/Element.ts
index 27cf858f1ff9..0cd101df7218 100644
--- a/src/compiler/compile/render_ssr/handlers/Element.ts
+++ b/src/compiler/compile/render_ssr/handlers/Element.ts
@@ -109,6 +109,9 @@ export default function(node: Element, renderer: Renderer, options: RenderOption
 				) {
 					// a boolean attribute with one non-Text chunk
 					args.push(`{ ${quote_name_if_necessary(attribute.name)}: ${snip(attribute.chunks[0])} }`);
+				} else if (attribute.name === 'class' && class_expression) {
+					// Add class expression
+					args.push(`{ ${quote_name_if_necessary(attribute.name)}: [\`${stringify_attribute(attribute, true)}\`, \`\${${class_expression}}\`].join(' ').trim() }`);
 				} else {
 					args.push(`{ ${quote_name_if_necessary(attribute.name)}: \`${stringify_attribute(attribute, true)}\` }`);
 				}