diff --git a/src/compiler/compile/render_ssr/handlers/Element.ts b/src/compiler/compile/render_ssr/handlers/Element.ts
index 35a15aff63..6ca78cf960 100644
--- a/src/compiler/compile/render_ssr/handlers/Element.ts
+++ b/src/compiler/compile/render_ssr/handlers/Element.ts
@@ -36,6 +36,15 @@ export default function(node: Element, renderer: Renderer, options: RenderOption
 		class_expression_list.length > 0 &&
 		class_expression_list.reduce((lhs, rhs) => x`${lhs} + ' ' + ${rhs}`);
 
+	const style_expression_list = node.styles.map(style_directive => {
+		const { name, expression: { node: expression } } = style_directive;
+		return x`"${name}: " + ${expression} + ";"`;
+	});
+	
+	const style_expression = 
+		style_expression_list.length > 0 && 
+		style_expression_list.reduce((lhs, rhs) => x`${lhs} + ' ' + ${rhs}`);
+
 	if (node.attributes.some(attr => attr.is_spread)) {
 		// TODO dry this out
 		const args = [];
@@ -68,7 +77,9 @@ export default function(node: Element, renderer: Renderer, options: RenderOption
 		renderer.add_expression(x`@spread([${args}], ${class_expression})`);
 	} else {
 		let add_class_attribute = !!class_expression;
+		let add_style_attribute = !!style_expression;
 		node.attributes.forEach(attribute => {
+			// console.log("SSR NODE ATTRIBUTE", attribute)
 			const name = attribute.name.toLowerCase();
 			const attr_name = node.namespace === namespaces.foreign ? attribute.name : fix_attribute_casing(attribute.name);
 			if (name === 'value' && node.name.toLowerCase() === 'textarea') {
@@ -88,6 +99,9 @@ export default function(node: Element, renderer: Renderer, options: RenderOption
 				renderer.add_string(` ${attr_name}="`);
 				renderer.add_expression(x`[${get_class_attribute_value(attribute)}, ${class_expression}].join(' ').trim()`);
 				renderer.add_string('"');
+			} else if (name === 'style' && style_expression) {
+				add_style_attribute = false;
+				// TODO
 			} else if (attribute.chunks.length === 1 && attribute.chunks[0].type !== 'Text') {
 				const snippet = (attribute.chunks[0] as Expression).node;
 				renderer.add_expression(x`@add_attribute("${attr_name}", ${snippet}, ${boolean_attributes.has(name) ? 1 : 0})`);
@@ -100,6 +114,9 @@ export default function(node: Element, renderer: Renderer, options: RenderOption
 		if (add_class_attribute) {
 			renderer.add_expression(x`@add_classes([${class_expression}].join(' ').trim())`);
 		}
+		if (add_style_attribute) {
+			renderer.add_expression(x`@add_styles(${style_expression})`);
+		}
 	}
 
 	node.bindings.forEach(binding => {