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);
 
-		const onDestroy = this.$$onMount.map(run).filter(is_function);
+		// onMount happens after the initial afterRender. Because
-		this.$$onDestroy.push(...onDestroy);
+		// afterRender callbacks happen in reverse order (inner first)
-		this.$$onMount = [];
+		// 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/css/_config.js

@@ -1,8 +1,8 @@
 export default {
-	test ( assert, component, target, window ) {
+	test(assert, component, target, window) {
-		const [ control, test ] = target.querySelectorAll( 'p' );
+		const [control, test] = target.querySelectorAll('p');
 
-		assert.equal( window.getComputedStyle( control ).color, '' );
+		assert.equal(window.getComputedStyle(control).color, '');
-		assert.equal( window.getComputedStyle( test ).color, 'rgb(255, 0, 0)' );
+		assert.equal(window.getComputedStyle(test).color, 'rgb(255, 0, 0)');
 	}
 };

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(() => {