diff --git a/src/compiler/compile/render_ssr/handlers/Element.ts b/src/compiler/compile/render_ssr/handlers/Element.ts
index 146324f2a4..97c8006fc8 100644
--- a/src/compiler/compile/render_ssr/handlers/Element.ts
+++ b/src/compiler/compile/render_ssr/handlers/Element.ts
@@ -86,8 +86,8 @@ export default function(node: Element, renderer: Renderer, options: RenderOption
 	const class_expression = node.classes.map((class_directive: Class) => {
 		const { expression, name } = class_directive;
 		const snippet = expression ? snip(expression) : `ctx${quote_prop_if_necessary(name)}`;
-		return `${snippet} ? "${name}" : ""`;
-	}).join(', ');
+		return `(${snippet} ? "${name.replace(/,/g, ' ')} " : "")`;
+	}).join(' + ').trim();
 
 	let add_class_attribute = class_expression ? true : false;
 
diff --git a/src/runtime/internal/dom.ts b/src/runtime/internal/dom.ts
index 25c804ff34..51bbb74f3b 100644
--- a/src/runtime/internal/dom.ts
+++ b/src/runtime/internal/dom.ts
@@ -238,7 +238,9 @@ export function add_resize_listener(element, fn) {
 }
 
 export function toggle_class(element, name, toggle) {
-	element.classList[toggle ? 'add' : 'remove'](name);
+	name.split(',').forEach(className => {
+		element.classList[toggle ? 'add' : 'remove'](className);
+	})
 }
 
 export function custom_event<T=any>(type: string, detail?: T) {