From 5ad396b6b20eb0798c7b26557b2b463cd7e9c9a0 Mon Sep 17 00:00:00 2001
From: Ivan Hofer <ivan.hofer@outlook.com>
Date: Wed, 11 Nov 2020 09:42:20 +0100
Subject: [PATCH] refactor add styles method call to reduce generated output

---
 src/compiler/compile/render_dom/index.ts |  5 ++++-
 src/runtime/internal/Component.ts        | 18 ++++++++++++------
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/compiler/compile/render_dom/index.ts b/src/compiler/compile/render_dom/index.ts
index 5917841073..61af64e92f 100644
--- a/src/compiler/compile/render_dom/index.ts
+++ b/src/compiler/compile/render_dom/index.ts
@@ -528,7 +528,10 @@ export default function dom(
 			class ${name} extends ${superclass} {
 				constructor(options) {
 					super(${options.dev && 'options'});
-					@init(this, options, ${definition}, ${has_create_fragment ? 'create_fragment' : 'null'}, ${not_equal}, ${prop_indexes}, ${should_add_css ? add_css : x`@noop`}, ${dirty});
+
+					${should_add_css && b`@addCssToComponent(this, add_css, options);`}
+
+					@init(this, options, ${definition}, ${has_create_fragment ? 'create_fragment' : 'null'}, ${not_equal}, ${prop_indexes}, ${dirty});
 					${options.dev && b`@dispatch_dev("SvelteRegisterComponent", { component: this, tagName: "${name.name}", options, id: create_fragment.name });`}
 
 					${dev_props_check}
diff --git a/src/runtime/internal/Component.ts b/src/runtime/internal/Component.ts
index 4524a5dba9..763974adfb 100644
--- a/src/runtime/internal/Component.ts
+++ b/src/runtime/internal/Component.ts
@@ -34,7 +34,7 @@ interface T$$ {
 	on_mount: any[];
 	on_destroy: any[];
 	skip_bound: boolean;
-	customStyleTag: HTMLElement;
+	customStyleTag?: HTMLElement;
 }
 
 export function bind(component, name, callback) {
@@ -97,18 +97,26 @@ function make_dirty(component, i) {
 	component.$$.dirty[(i / 31) | 0] |= (1 << (i % 31));
 }
 
-export function init(component, options, instance, create_fragment, not_equal, props, add_css, dirty = [-1]) {
+
+export function addCssToComponent(that, add_css, options) {
+	that.$$ = {
+		customStyleTag: options.customStyleTag || current_component && current_component.$$.customStyleTag
+	};
+	add_css(that.$$.customStyleTag);
+}
+
+export function init(component, options, instance, create_fragment, not_equal, props, dirty = [-1]) {
 	const parent_component = current_component;
 	set_current_component(component);
 
 	const prop_values = options.props || {};
 
 	const $$: T$$ = component.$$ = {
+		...component.$$,
+
 		fragment: null,
 		ctx: null,
 
-		customStyleTag: options.customStyleTag || parent_component && parent_component.$$.customStyleTag,
-
 		// state
 		props,
 		update: noop,
@@ -130,8 +138,6 @@ export function init(component, options, instance, create_fragment, not_equal, p
 
 	let ready = false;
 
-	add_css($$.customStyleTag);
-
 	$$.ctx = instance
 		? instance(component, prop_values, (i, ret, ...rest) => {
 			const value = rest.length ? rest[0] : ret;