Ensure dev server restart respects base removal (#8027)

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

* chore: remove baseCss

.changeset/funny-eels-jog.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Ensure dev server restarts respect when `base` is removed

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>

packages/astro/src/template/css.ts

@@ -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;
-}
-`;

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 !== '/') {
+				// fix(#6067): always inject this to ensure zombie base handling is killed after restarts
-					viteServer.middlewares.stack.unshift({
+				viteServer.middlewares.stack.unshift({
-						route: '',
+					route: '',
-						handle: baseMiddleware(settings, logging),
+					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) {