fix lifecycle order, add CSS if necessary

src/compile/render-dom/index.ts

@@ -119,10 +119,22 @@ export default function dom(
 			);
 		}
 
+		// TODO injecting CSS this way is kinda dirty. Maybe it should be an
+		// explicit opt-in, or something?
+		const should_add_css = (
+			!component.options.customElement &&
+			component.stylesheet.hasStyles &&
+			options.css !== false
+		);
+
 		const body = [
 			deindent`
 				$$init($$make_dirty) {
 					${component.init_uses_self && `const $$self = this;`}
+
+					${should_add_css &&
+					`if (!document.getElementById("${component.stylesheet.id}-style")) @add_css();`}
+
 					${component.javascript || component.exports.map(x => `let ${x.name};`)}
 
 					${component.event_handlers.map(handler => handler.body)}

src/internal/Component.js

@@ -96,9 +96,14 @@ export class $$Component {
 		this.$$fragment[this.$$fragment.i ? 'i' : 'm'](target, anchor);
 		this.$$.inject_refs(this.$$refs);
 
+		// onMount happens after the initial afterRender. Because
+		// afterRender callbacks happen in reverse order (inner first)
+		// we schedule onMount callbacks before afterRender callbacks
+		after_render(() => {
 			const onDestroy = this.$$onMount.map(run).filter(is_function);
 			this.$$onDestroy.push(...onDestroy);
 			this.$$onMount = [];
+		});
 
 		this.$$afterRender.forEach(after_render);
 	}

test/runtime/samples/lifecycle-events/_config.js

@@ -1,7 +1,7 @@
 export default {
 	test(assert, component) {
-		assert.deepEqual(component.events, ['create']);
+		assert.deepEqual(component.events, ['mount']);
 		component.$destroy();
-		assert.deepEqual(component.events, ['create', 'destroy']);
+		assert.deepEqual(component.events, ['mount', 'destroy']);
 	}
 };

test/runtime/samples/lifecycle-events/main.html

@@ -4,7 +4,7 @@
 	export let events;
 
 	onMount(() => {
-		events = ['create'];
+		events = ['mount'];
 	});
 
 	onDestroy(() => {