various

src/compiler/compile/Component.ts

@@ -294,7 +294,7 @@ export default class Component {
 				enter: (node, parent, key) => {
 					if (node.type === 'Identifier' && !('name' in node)) {
 						console.log(node);
-						throw new Error('wtf');
+						throw new Error('this should never happen'); // TODO remove once satisfied
 					}
 
 					if (node.type === 'Identifier') {
@@ -328,6 +328,7 @@ export default class Component {
 
 							else {
 								console.log(node);
+								throw new Error('this should never happen'); // TODO remove once satisfied
 							}
 						}
 					}
@@ -1246,15 +1247,20 @@ export default class Component {
 	qualify(name) {
 		if (name === `$$props`) return x`#ctx.$$props`;
 
-		const variable = this.var_lookup.get(name);
+		let [head, ...tail] = name.split('.');
 
-		if (!variable) return name;
+		const variable = this.var_lookup.get(head);
 
-		this.add_reference(name); // TODO we can probably remove most other occurrences of this
+		if (variable) {
+			this.add_reference(name); // TODO we can probably remove most other occurrences of this
 
-		if (variable.hoistable) return name;
+			if (!variable.hoistable) {
+				tail.unshift(head);
+				head = '#ctx';
+			}
+		}
 
-		return x`#ctx.${name}`;
+		return [head, ...tail].reduce((lhs, rhs) => x`${lhs}.${rhs}`);
 	}
 
 	warn_if_undefined(name: string, node, template_scope: TemplateScope) {

src/compiler/compile/render_dom/index.ts

@@ -442,7 +442,7 @@ export default function dom(
 				constructor(options) {
 					super();
 
-					${css.code && `this.shadowRoot.innerHTML = \`<style>${escape(css.code, { only_escape_at_symbol: true }).replace(/\\/g, '\\\\')}${options.dev ? `\n/*# sourceMappingURL=${css.map.toUrl()} */` : ''}</style>\`;`}
+					${css.code && b`this.shadowRoot.innerHTML = \`<style>${css.code.replace(/\\/g, '\\\\')}${options.dev ? `\n/*# sourceMappingURL=${css.map.toUrl()} */` : ''}</style>\`;`}
 
 					@init(this, { target: this.shadowRoot }, ${definition}, create_fragment, ${not_equal}, ${prop_names});
 

src/compiler/compile/render_dom/wrappers/IfBlock.ts

@@ -374,7 +374,7 @@ export default class IfBlockWrapper extends Wrapper {
 				: b`
 					function ${select_block_type}(#changed, #ctx) {
 						${this.branches.map(({ condition, snippet }, i) => condition
-						? b`if (${snippet || condition}) return ${String(i)};`
+						? b`if (${snippet || condition}) return ${i};`
 						: b`return ${i};`)}
 						${!has_else && b`return -1;`}
 					}

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

@@ -63,7 +63,7 @@ export default function(node: InlineComponent, renderer: Renderer, options: Rend
 			? renderer.name
 			: node.name === 'svelte:component'
 				? x`(${node.expression.node}) || @missing_component`
-				: node.name
+				: node.name.split('.').reduce(((lhs, rhs) => x`${lhs}.${rhs}`) as any)
 	);
 
 	const slot_fns = [];

test/css/index.js

@@ -82,10 +82,24 @@ describe('css', () => {
 
 			assert.equal(dom.css.code.replace(/svelte(-ref)?-[a-z0-9]+/g, (m, $1) => $1 ? m : 'svelte-xyz'), expected.css);
 
+			let ClientComponent;
+			let ServerComponent;
+
 			// we do this here, rather than in the expected.html !== null
 			// block, to verify that valid code was generated
-			const ClientComponent = create(dom.js.code);
-			const ServerComponent = create(ssr.js.code);
+			try {
+				ClientComponent = create(dom.js.code);
+			} catch (err) {
+				console.log(dom.js.code);
+				throw err;
+			}
+
+			try {
+				ServerComponent = create(ssr.js.code);
+			} catch (err) {
+				console.log(dom.js.code);
+				throw err;
+			}
 
 			// verify that the right elements have scoping selectors
 			if (expected.html !== null) {