Fix missing CSS when 404 server Response redirects to a custom 404 pa…

…ge (#7946)

* Fix missing css import on 404 redirect

* Chore: changeset

---------

Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>

.changeset/great-spoons-try.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fix: missing CSS import when 404 server Response redirects to a custom 404 page.

packages/astro/src/core/app/index.ts

@@ -145,7 +145,7 @@ export class App {
 			routeData = this.match(request);
 		}
 		if (!routeData) {
-			return this.#renderError(request, { routeData, status: 404 });
+			return this.#renderError(request, { status: 404 });
 		}
 
 		Reflect.set(request, clientLocalsSymbol, locals ?? {});
@@ -173,13 +173,12 @@ export class App {
 			);
 		} catch (err: any) {
 			error(this.#logging, 'ssr', err.stack || err.message || String(err));
-			return this.#renderError(request, { routeData, status: 500 });
+			return this.#renderError(request, { status: 500 });
 		}
 
 		if (isResponse(response, routeData.type)) {
 			if (STATUS_CODES.has(response.status)) {
 				return this.#renderError(request, {
-					routeData,
 					response,
 					status: response.status as 404 | 500,
 				});
@@ -190,7 +189,6 @@ export class App {
 			if (response.type === 'response') {
 				if (response.response.headers.get('X-Astro-Response') === 'Not-Found') {
 					return this.#renderError(request, {
-						routeData,
 						response: response.response,
 						status: 404,
 					});
@@ -286,7 +284,7 @@ export class App {
 	 */
 	async #renderError(
 		request: Request,
-		{ routeData, status, response: originalResponse }: RenderErrorOptions
+		{ status, response: originalResponse }: RenderErrorOptions
 	) {
 		const errorRouteData = matchRoute('/' + status, this.#manifestData);
 		const url = new URL(request.url);
@@ -296,13 +294,12 @@ export class App {
 				const response = await fetch(statusURL.toString());
 				return this.#mergeResponses(response, originalResponse);
 			}
-			const finalRouteData = routeData ?? errorRouteData;
 			const mod = await this.#getModuleForRoute(errorRouteData);
 			try {
 				const newRenderContext = await this.#createRenderContext(
 					url,
 					request,
-					finalRouteData,
+					errorRouteData,
 					mod,
 					status
 				);

packages/astro/test/fixtures/ssr-api-route-custom-404/src/content/pages/index.md

@@ -0,0 +1,7 @@
+---
+title: Astro
+---
+
+## Index
+
+Home page

packages/astro/test/fixtures/ssr-api-route-custom-404/src/pages/404.astro

@@ -1 +1,5 @@
+---
+import "../styles/main.css"
+---
+
 <h1>Something went horribly wrong!</h1>

packages/astro/test/fixtures/ssr-api-route-custom-404/src/pages/blog/[...ssrPath].astro

@@ -0,0 +1,9 @@
+---
+import { getEntry } from 'astro:content';
+const { ssrPath } = Astro.params;
+const page = await getEntry('pages', ssrPath === undefined ? 'index' : ssrPath);
+if (!page) return new Response(null, {
+  status: 404,
+  statusText: 'Not found'
+});
+---

packages/astro/test/fixtures/ssr-api-route-custom-404/src/styles/main.css

@@ -0,0 +1,3 @@
+h1 {
+    color: red;
+}

packages/astro/test/ssr-404-500-pages.test.js

@@ -62,6 +62,17 @@ describe('404 and 500 pages', () => {
 			expect($('h1').text()).to.equal('Something went horribly wrong!');
 		});
 
+		it('404 page returned when a route does not match and imports are included', async () => {
+			const app = await fixture.loadTestAdapterApp();
+			const request = new Request('http://example.com/blog/fake/route');
+			const routeData = app.match(request);
+			const response = await app.render(request, routeData);
+			expect(response.status).to.equal(404);
+			const html = await response.text();
+			const $ = cheerio.load(html);
+			expect($('head link')).to.have.a.lengthOf(1);
+		});
+
 		it('404 page returned when there is an 404 response returned from route', async () => {
 			const app = await fixture.loadTestAdapterApp();
 			const request = new Request('http://example.com/causes-404');