From c8dda941255bbb84da1b37240f6882c95c48e818 Mon Sep 17 00:00:00 2001
From: Matthew Phillips <matthew@skypack.dev>
Date: Mon, 27 Jun 2022 09:08:40 -0400
Subject: [PATCH] Revert "Inline define:var styles rendered after the head"

This reverts commit 65e2b71b802ec0c8203cbe03bc86f087cab2a977.
---
 packages/astro/src/runtime/server/index.ts    | 26 ++-----------------
 packages/astro/test/astro-directives.test.js  | 13 ++--------
 .../src/components/Title.astro                | 10 -------
 .../src/pages/define-vars.astro               |  3 ---
 4 files changed, 4 insertions(+), 48 deletions(-)
 delete mode 100644 packages/astro/test/fixtures/astro-directives/src/components/Title.astro

diff --git a/packages/astro/src/runtime/server/index.ts b/packages/astro/src/runtime/server/index.ts
index bfe095f52..e1ffd69e5 100644
--- a/packages/astro/src/runtime/server/index.ts
+++ b/packages/astro/src/runtime/server/index.ts
@@ -183,26 +183,7 @@ export async function renderComponent(
 	}
 
 	if (Component && (Component as any).isAstroComponentFactory) {
-		async function * renderAstroComponentInline(): AsyncGenerator<string, void, undefined> {
-			let iterable = await renderToIterable(result, Component as any, _props, slots);
-			// If this component added any define:vars styles and the head has already been
-			// sent out, we need to include those inline.
-			if(result.styles.size && alreadyHeadRenderedResults.has(result)) {
-				let styles = Array.from(result.styles);
-				result.styles.clear();
-				for(const style of styles) {
-					if('define:vars' in style.props) {
-						// We only want to render the property value and not the full stylesheet
-						// which is bundled in the head.
-						style.children = '';
-						yield markHTMLString(renderElement('style', style));
-					}
-				}
-			}
-			yield * iterable;
-		}
-
-		return renderAstroComponentInline();
+		return renderToIterable(result, Component as any, _props, slots);
 	}
 
 	if (!Component && !_props['client:only']) {
@@ -427,7 +408,6 @@ If you're still stuck, please open an issue on GitHub or join us at https://astr
 
 	island.children = `${html ?? ''}${template}`;
 
-	// Scripts to prepend
 	let prescriptType: PrescriptType = needsHydrationScript
 		? 'both'
 		: needsDirectiveScript
@@ -435,7 +415,7 @@ If you're still stuck, please open an issue on GitHub or join us at https://astr
 		: null;
 	let prescripts = getPrescripts(prescriptType, hydration.directive);
 
-	return markHTMLString(prestyles + prescripts + renderElement('astro-island', island, false));
+	return markHTMLString(prescripts + renderElement('astro-island', island, false));
 }
 
 /** Create the Astro.fetchContent() runtime function. */
@@ -739,8 +719,6 @@ export async function renderHead(result: SSRResult): Promise<string> {
 	const styles = Array.from(result.styles)
 		.filter(uniqueElements)
 		.map((style) => renderElement('style', style));
-	// Clear result.styles so that any new styles added will be inlined.
-	result.styles.clear();
 	const scripts = Array.from(result.scripts)
 		.filter(uniqueElements)
 		.map((script, i) => {
diff --git a/packages/astro/test/astro-directives.test.js b/packages/astro/test/astro-directives.test.js
index 0a4bab43b..161063e97 100644
--- a/packages/astro/test/astro-directives.test.js
+++ b/packages/astro/test/astro-directives.test.js
@@ -22,7 +22,7 @@ describe('Directives', async () => {
 		const html = await fixture.readFile('/define-vars/index.html');
 		const $ = cheerio.load(html);
 
-		expect($('style')).to.have.lengthOf(2);
+		expect($('style')).to.have.lengthOf(1);
 		expect($('style').toString()).to.include('--bg: white;');
 		expect($('style').toString()).to.include('--fg: black;');
 
@@ -31,18 +31,9 @@ describe('Directives', async () => {
 			.split(' ')
 			.find((name) => /^astro-[A-Za-z0-9-]+/.test(name));
 
-		expect($($('style').get(0)).toString().replace(/\s+/g, '')).to.equal(
+		expect($('style').toString().replace(/\s+/g, '')).to.equal(
 			`<style>.${scopedClass}{--bg:white;--fg:black;}body{background:var(--bg);color:var(--fg)}</style>`
 		);
-
-		const scopedTitleClass = $('.title')
-		.attr('class')
-		.split(' ')
-		.find((name) => /^astro-[A-Za-z0-9-]+/.test(name));
-
-		expect($($('style').get(1)).toString().replace(/\s+/g, '')).to.equal(
-			`<style>.${scopedTitleClass}{--textColor:red;}</style>`
-		);
 	});
 
 	it('set:html', async () => {
diff --git a/packages/astro/test/fixtures/astro-directives/src/components/Title.astro b/packages/astro/test/fixtures/astro-directives/src/components/Title.astro
deleted file mode 100644
index b59303ed6..000000000
--- a/packages/astro/test/fixtures/astro-directives/src/components/Title.astro
+++ /dev/null
@@ -1,10 +0,0 @@
----
-  const textColor = 'red'
----
-<h1 class="title">hello there</h1>
-
-<style define:vars={{textColor: textColor}}>
-  .title {
-    color: var(--textColor);
-  }
-</style>
diff --git a/packages/astro/test/fixtures/astro-directives/src/pages/define-vars.astro b/packages/astro/test/fixtures/astro-directives/src/pages/define-vars.astro
index 3df42aea1..db03705ad 100644
--- a/packages/astro/test/fixtures/astro-directives/src/pages/define-vars.astro
+++ b/packages/astro/test/fixtures/astro-directives/src/pages/define-vars.astro
@@ -1,5 +1,4 @@
 ---
-import Title from "../components/Title.astro"
 let foo = 'bar'
 let bg = 'white'
 let fg = 'black'
@@ -18,7 +17,5 @@ let fg = 'black'
     <script id="inline" define:vars={{ foo }}>
 			console.log(foo);
 		</script>
-
-		<Title />
   </body>
 </html>