From 6e07bc5d087b4cf62a4aad886f421b93e7241d1c Mon Sep 17 00:00:00 2001
From: Nate Moore <nate@astro.build>
Date: Thu, 4 Aug 2022 14:31:58 -0500
Subject: [PATCH 1/3] fix(hmr): remove SSR styles once HMR styles are injected

---
 packages/astro/src/runtime/client/hmr.ts | 47 +++++++++++++++++-------
 1 file changed, 33 insertions(+), 14 deletions(-)

diff --git a/packages/astro/src/runtime/client/hmr.ts b/packages/astro/src/runtime/client/hmr.ts
index ba17fc526b6c..f3a3074f3a46 100644
--- a/packages/astro/src/runtime/client/hmr.ts
+++ b/packages/astro/src/runtime/client/hmr.ts
@@ -1,21 +1,24 @@
 /// <reference types="vite/client" />
+
 if (import.meta.hot) {
-	import.meta.hot.on('vite:beforeUpdate', async (payload) => {
-		for (const file of payload.updates) {
-			if (
-				file.acceptedPath.includes('svelte&type=style') ||
-				file.acceptedPath.includes('astro&type=style')
-			) {
-				// This will only be called after the svelte component has hydrated in the browser.
-				// At this point Vite is tracking component style updates, we need to remove
-				// styles injected by Astro for the component in favor of Vite's internal HMR.
-				const injectedStyle = document.querySelector(
-					`style[data-astro-injected="${file.acceptedPath}"]`
-				);
-				if (injectedStyle) {
-					injectedStyle.parentElement?.removeChild(injectedStyle);
+	// Vite injects `<style type="text/css">` for ESM imports of styles
+	// but Astro also SSRs with `<style>` blocks. This MutationObserver
+	// removes any duplicates as soon as they are hydrated client-side.
+	const injectedStyles = getInjectedStyles();
+	const mo = new MutationObserver((records) => {
+		for (const record of records) {
+			for (const node of record.addedNodes) {
+				if (isViteInjectedStyle(node)) {
+					injectedStyles.get(node.innerHTML.trim())?.remove();
 				}
 			}
+		}
+	});
+	mo.observe(document.documentElement, { subtree: true, childList: true });
+
+	// Vue `link` styles need to be manually refreshed in Firefox
+	import.meta.hot.on('vite:beforeUpdate', async (payload) => {
+		for (const file of payload.updates) {
 			if (file.acceptedPath.includes('vue&type=style')) {
 				const link = document.querySelector(`link[href="${file.acceptedPath}"]`);
 				if (link) {
@@ -25,3 +28,19 @@ if (import.meta.hot) {
 		}
 	});
 }
+
+function getInjectedStyles() {
+	const injectedStyles = new Map<string, Element>();
+	document.querySelectorAll<HTMLStyleElement>('style').forEach((el) => {
+		injectedStyles.set(el.innerHTML.trim(), el);
+	});
+	return injectedStyles;
+}
+
+function isStyle(node: Node): node is HTMLStyleElement {
+	return node.nodeType === node.ELEMENT_NODE && (node as Element).tagName.toLowerCase() === 'style';
+}
+
+function isViteInjectedStyle(node: Node): node is HTMLStyleElement {
+	return isStyle(node) && node.getAttribute('type') === 'text/css';
+}

From 7175b735019a8c5691da205cda64818127136d7a Mon Sep 17 00:00:00 2001
From: Nate Moore <nate@astro.build>
Date: Thu, 4 Aug 2022 14:32:06 -0500
Subject: [PATCH 2/3] refactor: remove data-astro-injected tag

---
 packages/astro/src/core/render/dev/index.ts    |  8 ++------
 packages/astro/test/0-css.test.js              | 10 +++++-----
 packages/astro/test/astro-markdown-css.test.js |  2 +-
 packages/astro/test/astro-partial-html.test.js |  4 ++--
 packages/astro/test/component-library.test.js  |  2 +-
 5 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/packages/astro/src/core/render/dev/index.ts b/packages/astro/src/core/render/dev/index.ts
index c9e64dfb4598..982fb6df6348 100644
--- a/packages/astro/src/core/render/dev/index.ts
+++ b/packages/astro/src/core/render/dev/index.ts
@@ -148,8 +148,7 @@ export async function render(
 		links.add({
 			props: {
 				rel: 'stylesheet',
-				href,
-				'data-astro-injected': true,
+				href
 			},
 			children: '',
 		});
@@ -162,15 +161,12 @@ export async function render(
 			props: {
 				type: 'module',
 				src: url,
-				'data-astro-injected': true,
 			},
 			children: '',
 		});
 		// But we still want to inject the styles to avoid FOUC
 		styles.add({
-			props: {
-				'data-astro-injected': url,
-			},
+			props: {},
 			children: content,
 		});
 	});
diff --git a/packages/astro/test/0-css.test.js b/packages/astro/test/0-css.test.js
index 7d70005848f0..9f8d901ce4eb 100644
--- a/packages/astro/test/0-css.test.js
+++ b/packages/astro/test/0-css.test.js
@@ -298,7 +298,7 @@ describe('CSS', function () {
 		});
 
 		it('resolves ESM style imports', async () => {
-			const allInjectedStyles = $('style[data-astro-injected]').text().replace(/\s*/g, '');
+			const allInjectedStyles = $('style').text().replace(/\s*/g, '');
 
 			expect(allInjectedStyles, 'styles/imported-url.css').to.contain('.imported{');
 			expect(allInjectedStyles, 'styles/imported-url.sass').to.contain('.imported-sass{');
@@ -306,7 +306,7 @@ describe('CSS', function () {
 		});
 
 		it('resolves Astro styles', async () => {
-			const allInjectedStyles = $('style[data-astro-injected]').text();
+			const allInjectedStyles = $('style').text();
 
 			expect(allInjectedStyles).to.contain('.linked-css:where(.astro-');
 			expect(allInjectedStyles).to.contain('.linked-sass:where(.astro-');
@@ -325,7 +325,7 @@ describe('CSS', function () {
 				expect((await fixture.fetch(href)).status, style).to.equal(200);
 			}
 
-			const allInjectedStyles = $('style[data-astro-injected]').text().replace(/\s*/g, '');
+			const allInjectedStyles = $('style').text().replace(/\s*/g, '');
 
 			expect(allInjectedStyles).to.contain('.react-title{');
 			expect(allInjectedStyles).to.contain('.react-sass-title{');
@@ -333,7 +333,7 @@ describe('CSS', function () {
 		});
 
 		it('resolves CSS from Svelte', async () => {
-			const allInjectedStyles = $('style[data-astro-injected]').text();
+			const allInjectedStyles = $('style').text();
 
 			expect(allInjectedStyles).to.contain('.svelte-css');
 			expect(allInjectedStyles).to.contain('.svelte-sass');
@@ -347,7 +347,7 @@ describe('CSS', function () {
 				expect((await fixture.fetch(href)).status, style).to.equal(200);
 			}
 
-			const allInjectedStyles = $('style[data-astro-injected]').text().replace(/\s*/g, '');
+			const allInjectedStyles = $('style').text().replace(/\s*/g, '');
 
 			expect(allInjectedStyles).to.contain('.vue-css{');
 			expect(allInjectedStyles).to.contain('.vue-sass{');
diff --git a/packages/astro/test/astro-markdown-css.test.js b/packages/astro/test/astro-markdown-css.test.js
index d6f98e068c9a..c6d8bc71ae87 100644
--- a/packages/astro/test/astro-markdown-css.test.js
+++ b/packages/astro/test/astro-markdown-css.test.js
@@ -52,7 +52,7 @@ describe('Imported markdown CSS', function () {
 			expect(importedAstroComponent?.name).to.equal('h2');
 			const cssClass = $(importedAstroComponent).attr('class')?.split(/\s+/)?.[0];
 
-			const allInjectedStyles = $('style[data-astro-injected]').text().replace(/\s*/g, '');
+			const allInjectedStyles = $('style').text().replace(/\s*/g, '');
 			expect(allInjectedStyles).to.include(`h2:where(.${cssClass}){color:#00f}`);
 		});
 	});
diff --git a/packages/astro/test/astro-partial-html.test.js b/packages/astro/test/astro-partial-html.test.js
index 83d357693362..6073f1bd15eb 100644
--- a/packages/astro/test/astro-partial-html.test.js
+++ b/packages/astro/test/astro-partial-html.test.js
@@ -25,7 +25,7 @@ describe('Partial HTML', async () => {
 		expect(html).to.match(/^<!DOCTYPE html/);
 
 		// test 2: correct CSS present
-		const allInjectedStyles = $('style[data-astro-injected]').text();
+		const allInjectedStyles = $('style').text();
 		expect(allInjectedStyles).to.match(/\:where\(\.astro-[^{]+{color:red}/);
 	});
 
@@ -37,7 +37,7 @@ describe('Partial HTML', async () => {
 		expect(html).to.match(/^<!DOCTYPE html/);
 
 		// test 2: link tag present
-		const allInjectedStyles = $('style[data-astro-injected]').text().replace(/\s*/g, '');
+		const allInjectedStyles = $('style').text().replace(/\s*/g, '');
 		expect(allInjectedStyles).to.match(/h1{color:red;}/);
 	});
 
diff --git a/packages/astro/test/component-library.test.js b/packages/astro/test/component-library.test.js
index 9158c5b2ea78..bab16230b723 100644
--- a/packages/astro/test/component-library.test.js
+++ b/packages/astro/test/component-library.test.js
@@ -108,7 +108,7 @@ describe('Component Libraries', () => {
 				const $ = cheerioLoad(html);
 
 				// Most styles are inlined in a <style> block in the dev server
-				const allInjectedStyles = $('style[data-astro-injected]').text().replace(/\s*/g, '');
+				const allInjectedStyles = $('style').text().replace(/\s*/g, '');
 				if (expected.test(allInjectedStyles)) {
 					return true;
 				}

From 96789897098d14344483016cfe48fb17da512eb8 Mon Sep 17 00:00:00 2001
From: Nate Moore <nate@astro.build>
Date: Thu, 4 Aug 2022 14:33:04 -0500
Subject: [PATCH 3/3] chore: add changeset

---
 .changeset/large-beds-cheer.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/large-beds-cheer.md

diff --git a/.changeset/large-beds-cheer.md b/.changeset/large-beds-cheer.md
new file mode 100644
index 000000000000..10a3aecffc78
--- /dev/null
+++ b/.changeset/large-beds-cheer.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fix duplicated CSS when using HMR