Add add_css_class method to DynamicElement

Author: Alfred Ringstad

src/compiler/compile/nodes/DynamicElement.ts

@@ -14,6 +14,7 @@ import Animation from './Animation';
 import Action from './Action';
 import { string_literal } from '../utils/stringify';
 import { Literal } from 'estree';
+import Text from './Text';
 
 export default class DynamicElement extends Node {
 	type: 'DynamicElement';
@@ -30,6 +31,7 @@ export default class DynamicElement extends Node {
 	animation?: Animation = null;
 	children: INode[];
 	scope: TemplateScope;
+	needs_manual_style_scoping: boolean;
 
 	constructor(component: Component, parent, scope, info) {
 		super(component, parent, scope, info);
@@ -96,4 +98,37 @@ export default class DynamicElement extends Node {
 
 		this.children = map_children(component, this, this.scope, info.children);
 	}
+
+	add_css_class() {
+		if (this.attributes.some(attr => attr.is_spread)) {
+			this.needs_manual_style_scoping = true;
+			return;
+		}
+
+		const { id } = this.component.stylesheet;
+
+		const class_attribute = this.attributes.find(a => a.name === 'class');
+
+		if (class_attribute && !class_attribute.is_true) {
+			if (class_attribute.chunks.length === 1 && class_attribute.chunks[0].type === 'Text') {
+				(class_attribute.chunks[0] as Text).data += ` ${id}`;
+			} else {
+				(class_attribute.chunks as Node[]).push(
+					new Text(this.component, this, this.scope, {
+						type: 'Text',
+						data: ` ${id}`,
+						synthetic: true
+					} as any)
+				);
+			}
+		} else {
+			this.attributes.push(
+				new Attribute(this.component, this, this.scope, {
+					type: 'Attribute',
+					name: 'class',
+					value: [{ type: 'Text', data: id, synthetic: true }]
+				} as any)
+			);
+		}
+	}
 }

src/compiler/compile/render_ssr/handlers/DynamicElement.ts

@@ -50,9 +50,9 @@ export default function (
 			const snippet = expression ? expression.node : x`#ctx.${name}`; // TODO is this right?
 			return x`${snippet} ? "${name}" : ""`;
 		});
-		// if (node.needs_manual_style_scoping) {
-		// 	class_expression_list.push(x`"${node.component.stylesheet.id}"`);
-		// }
+		if (node.needs_manual_style_scoping) {
+			class_expression_list.push(x`"${node.component.stylesheet.id}"`);
+		}
 		const class_expression =
 			class_expression_list.length > 0 &&
 			class_expression_list.reduce((lhs, rhs) => x`${lhs} + ' ' + ${rhs}`);