From 32eb838e82660c658766f4fcd1ace5098780d78c Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 9 Jul 2024 16:27:08 -0400
Subject: [PATCH] get HMR working

---
 .../3-transform/client/transform-client.js    | 33 +++++++++++++++----
 .../svelte/src/internal/client/dom/css.js     |  8 +++--
 2 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js b/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js
index 61772317a7..ac0bbc3c2d 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js
@@ -422,10 +422,26 @@ export function client_component(source, analysis, options) {
 	);
 
 	if (options.hmr) {
-		const accept_fn = b.arrow(
-			[b.id('module')],
-			b.block([b.stmt(b.call('$.set', b.id('s'), b.member(b.id('module'), b.id('default'))))])
-		);
+		const accept_fn_body = [
+			b.stmt(b.call('$.set', b.id('s'), b.member(b.id('module'), b.id('default'))))
+		];
+
+		if (analysis.css.hash) {
+			// remove existing `<style>` element, in case CSS changed
+			accept_fn_body.unshift(
+				b.stmt(
+					b.call(
+						b.member(
+							b.call('document.querySelector', b.literal('#' + analysis.css.hash)),
+							b.id('remove'),
+							false,
+							true
+						)
+					)
+				)
+			);
+		}
+
 		body.push(
 			component,
 			b.if(
@@ -433,6 +449,7 @@ export function client_component(source, analysis, options) {
 				b.block([
 					b.const(b.id('s'), b.call('$.source', b.id(analysis.name))),
 					b.const(b.id('filename'), b.member(b.id(analysis.name), b.id('filename'))),
+					b.const(b.id('accept'), b.arrow([b.id('module')], b.block(accept_fn_body))),
 					b.stmt(b.assignment('=', b.id(analysis.name), b.call('$.hmr', b.id('s')))),
 					b.stmt(
 						b.assignment('=', b.member(b.id(analysis.name), b.id('filename')), b.id('filename'))
@@ -441,10 +458,14 @@ export function client_component(source, analysis, options) {
 						b.id('import.meta.hot.acceptExports'),
 						b.block([
 							b.stmt(
-								b.call('import.meta.hot.acceptExports', b.array([b.literal('default')]), accept_fn)
+								b.call(
+									'import.meta.hot.acceptExports',
+									b.array([b.literal('default')]),
+									b.id('accept')
+								)
 							)
 						]),
-						b.block([b.stmt(b.call('import.meta.hot.accept', accept_fn))])
+						b.block([b.stmt(b.call('import.meta.hot.accept', b.id('accept')))])
 					)
 				])
 			),
diff --git a/packages/svelte/src/internal/client/dom/css.js b/packages/svelte/src/internal/client/dom/css.js
index f5d4537434..7f6cfb41a0 100644
--- a/packages/svelte/src/internal/client/dom/css.js
+++ b/packages/svelte/src/internal/client/dom/css.js
@@ -1,3 +1,4 @@
+import { DEV } from 'esm-env';
 import { queue_micro_task } from './task.js';
 
 var seen = new Set();
@@ -7,8 +8,11 @@ var seen = new Set();
  * @param {{ hash: string, code: string }} css
  */
 export function append_styles(anchor, css) {
-	if (seen.has(css.hash)) return;
-	seen.add(css.hash);
+	// in dev, always check the DOM, so that styles can be replaced with HMR
+	if (!DEV) {
+		if (seen.has(css.hash)) return;
+		seen.add(css.hash);
+	}
 
 	// Use `queue_micro_task` to ensure `anchor` is in the DOM, otherwise getRootNode() will yield wrong results
 	queue_micro_task(() => {