style-directives: work in progress

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

@@ -340,6 +340,7 @@ export default class ElementWrapper extends Wrapper {
 		this.add_transitions(block);
 		this.add_animation(block);
 		this.add_classes(block);
+		this.add_styles(block);
 		this.add_manual_style_scoping(block);
 
 		if (nodes && this.renderer.options.hydratable && !this.void) {
@@ -906,6 +907,31 @@ export default class ElementWrapper extends Wrapper {
 		});
 	}
 
+	add_styles(block: Block) {
+		this.node.styles.forEach(style_directive => {
+			
+			// @FIXME:
+			// Hmm, I thought this would work:
+			
+			// const { name, expression: { node: expression } } = style_directive;
+			// const updater = b`@set_style(${this.var}, "${name}", ${expression}, false)`;
+			
+			// But that results in this, and `myColor` is undefined:
+			
+			/*
+			c() {
+				p$ = element$("p");
+				set_style$(p$, "color", myColor, false);
+			},
+			*/
+			
+			const { name } = style_directive;
+			const updater = b`@set_style(${this.var}, "${name}", "red", false)`;
+
+			block.chunks.hydrate.push(updater);
+		});
+	}
+
 	add_manual_style_scoping(block) {
 		if (this.node.needs_manual_style_scoping) {
 			const updater = b`@toggle_class(${this.var}, "${this.node.component.stylesheet.id}", true);`;

src/compiler/parse/state/tag.ts

@@ -365,7 +365,10 @@ function read_attribute(parser: Parser, unique_names: Set<string>) {
 
 		if (value[0]) {
 			if ((value as any[]).length > 1 || value[0].type === 'Text') {
-				parser.error(parser_errors.invalid_directive_value, value[0].start);
+				// @FIXME: Is this okay? -@paul
+				if (type !== 'Style') {
+					parser.error(parser_errors.invalid_directive_value, value[0].start);
+				}
 			}
 		}
 
@@ -384,7 +387,7 @@ function read_attribute(parser: Parser, unique_names: Set<string>) {
 			directive.outro = direction === 'out' || direction === 'transition';
 		}
 
-		if (!directive.expression && (type === 'Binding' || type === 'Class')) {
+		if (!directive.expression && (type === 'Binding' || type === 'Class' || type === 'Style')) {
 			directive.expression = {
 				start: directive.start + colon_index + 1,
 				end: directive.end,
@@ -412,6 +415,7 @@ function get_directive_type(name: string): DirectiveType {
 	if (name === 'animate') return 'Animation';
 	if (name === 'bind') return 'Binding';
 	if (name === 'class') return 'Class';
+	if (name === 'style') return 'Style';
 	if (name === 'on') return 'EventHandler';
 	if (name === 'let') return 'Let';
 	if (name === 'ref') return 'Ref';