From 1b8d3020990130dabfaaf753db73a32c6e0c896a Mon Sep 17 00:00:00 2001
From: Nate Moore <natemoo-re@users.noreply.github.com>
Date: Thu, 10 Aug 2023 10:52:21 -0500
Subject: [PATCH] Ensure dev server restart respects `base` removal (#8027)

* fix(#6067): dev server restart respects base removal

* chore: remove baseCss
---
 .changeset/funny-eels-jog.md                  |  5 ++
 packages/astro/src/template/4xx.ts            | 38 ++++++++++++--
 packages/astro/src/template/css.ts            | 50 -------------------
 .../src/vite-plugin-astro-server/plugin.ts    | 11 ++--
 4 files changed, 44 insertions(+), 60 deletions(-)
 create mode 100644 .changeset/funny-eels-jog.md
 delete mode 100644 packages/astro/src/template/css.ts

diff --git a/.changeset/funny-eels-jog.md b/.changeset/funny-eels-jog.md
new file mode 100644
index 000000000000..2481c24dff91
--- /dev/null
+++ b/.changeset/funny-eels-jog.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Ensure dev server restarts respect when `base` is removed
diff --git a/packages/astro/src/template/4xx.ts b/packages/astro/src/template/4xx.ts
index c5d87929e4cd..45f4ac10ae90 100644
--- a/packages/astro/src/template/4xx.ts
+++ b/packages/astro/src/template/4xx.ts
@@ -1,5 +1,4 @@
 import { escape } from 'html-escaper';
-import { baseCSS } from './css.js';
 
 interface ErrorTemplateOptions {
 	/** a short description of the error */
@@ -28,14 +27,40 @@ export default function template({
 		<meta charset="UTF-8">
 		<title>${tabTitle}</title>
 		<style>
-			${baseCSS}
 			:root {
+				--gray-10: hsl(258, 7%, 10%);
+				--gray-20: hsl(258, 7%, 20%);
+				--gray-30: hsl(258, 7%, 30%);
+				--gray-40: hsl(258, 7%, 40%);
+				--gray-50: hsl(258, 7%, 50%);
+				--gray-60: hsl(258, 7%, 60%);
+				--gray-70: hsl(258, 7%, 70%);
+				--gray-80: hsl(258, 7%, 80%);
+				--gray-90: hsl(258, 7%, 90%);
 				--black: #13151A;
 				--accent-light: #E0CCFA;
 			}
 
-			body {
+			* {
+				box-sizing: border-box;
+			}
+
+			html {
 				background: var(--black);
+				color-scheme: dark;
+				accent-color: var(--accent-light);
+			}
+
+			body {
+				background-color: var(--gray-10);
+				color: var(--gray-80);
+				font-family: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace;
+				line-height: 1.5;
+				margin: 0;
+			}
+
+			a {
+				color: var(--accent-light);
 			}
 
 			.center {
@@ -52,6 +77,8 @@ export default function template({
 				color: white;
 				font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 				font-weight: 700;
+				margin-top: 1rem;
+				margin-bottom: 0;
 			}
 
 			.statusCode {
@@ -63,11 +90,14 @@ export default function template({
 				width: 124px;
 			}
 
-			pre {
+			pre, code {
 				padding: 2px 8px;
 				background: rgba(0,0,0, 0.25);
 				border: 1px solid rgba(255,255,255, 0.25);
 				border-radius: 4px;
+				font-size: 1.2em;
+				margin-top: 0;
+				max-width: 60em;
 			}
 		</style>
 	</head>
diff --git a/packages/astro/src/template/css.ts b/packages/astro/src/template/css.ts
deleted file mode 100644
index 87fbfd1b8f6c..000000000000
--- a/packages/astro/src/template/css.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- *  CSS is exported as a string so the error pages:
- * 1. don’t need to resolve a deep internal CSS import
- * 2. don’t need external dependencies to render (they may be shown because of a dep!)
- */
-
-// Base CSS: shared CSS among pages
-export const baseCSS = `
-:root {
-  --gray-10: hsl(258, 7%, 10%);
-  --gray-20: hsl(258, 7%, 20%);
-  --gray-30: hsl(258, 7%, 30%);
-  --gray-40: hsl(258, 7%, 40%);
-  --gray-50: hsl(258, 7%, 50%);
-  --gray-60: hsl(258, 7%, 60%);
-  --gray-70: hsl(258, 7%, 70%);
-  --gray-80: hsl(258, 7%, 80%);
-  --gray-90: hsl(258, 7%, 90%);
-  --orange: #ff5d01;
-}
-
-* {
-  box-sizing: border-box;
-}
-
-body {
-  background-color: var(--gray-10);
-  color: var(--gray-80);
-  font-family: monospace;
-  line-height: 1.5;
-  margin: 0;
-}
-
-a {
-  color: var(--orange);
-}
-
-h1 {
-  font-weight: 800;
-  margin-top: 1rem;
-  margin-bottom: 0;
-}
-
-pre {
-  color:;
-  font-size: 1.2em;
-  margin-top: 0;
-  max-width: 60em;
-}
-`;
diff --git a/packages/astro/src/vite-plugin-astro-server/plugin.ts b/packages/astro/src/vite-plugin-astro-server/plugin.ts
index 681aac3411ab..8f74bd47afe3 100644
--- a/packages/astro/src/vite-plugin-astro-server/plugin.ts
+++ b/packages/astro/src/vite-plugin-astro-server/plugin.ts
@@ -44,12 +44,11 @@ export default function createVitePluginAstroServer({
 
 			return () => {
 				// Push this middleware to the front of the stack so that it can intercept responses.
-				if (settings.config.base !== '/') {
-					viteServer.middlewares.stack.unshift({
-						route: '',
-						handle: baseMiddleware(settings, logging),
-					});
-				}
+				// fix(#6067): always inject this to ensure zombie base handling is killed after restarts
+				viteServer.middlewares.stack.unshift({
+					route: '',
+					handle: baseMiddleware(settings, logging),
+				});
 				// Note that this function has a name so other middleware can find it.
 				viteServer.middlewares.use(async function astroDevHandler(request, response) {
 					if (request.url === undefined || !request.method) {