Prevent eager rendering of head content in multi-level MDX layout

.changeset/lucky-hounds-rhyme.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fixes head contents being placed in body in MDX components

packages/astro/src/@types/astro.ts

@@ -1449,6 +1449,7 @@ export interface SSRResult {
 	): AstroGlobal;
 	resolve: (s: string) => Promise<string>;
 	response: ResponseInit;
+	scope: 0 | 1 | 2 | 3;
 	_metadata: SSRMetadata;
 }
 

packages/astro/src/core/render/result.ts

@@ -156,6 +156,7 @@ export function createResult(args: CreateResultArgs): SSRResult {
 		propagation: args.propagation ?? new Map(),
 		propagators: new Map(),
 		extraHead: [],
+		scope: 0,
 		cookies,
 		/** This function returns the `Astro` faux-global */
 		createAstro(

packages/astro/src/runtime/server/jsx.ts

@@ -11,6 +11,7 @@ import {
 	voidElementNames,
 } from './index.js';
 import { HTMLParts } from './render/common.js';
+import { ScopeFlags } from './render/util.js';
 import type { ComponentIterable } from './render/component';
 
 const ClientOnlyPlaceholder = 'astro-client-only';
@@ -94,6 +95,7 @@ Did you forget to import the component or is it possible there is a typo?`);
 						props[key] = value;
 					}
 				}
+				result.scope |= ScopeFlags.JSX;
 				return markHTMLString(await renderToString(result, vnode.type as any, props, slots));
 			}
 			case !vnode.type && (vnode.type as any) !== 0:

packages/astro/src/runtime/server/render/astro/factory.ts

@@ -5,6 +5,7 @@ import type { RenderTemplateResult } from './render-template';
 import { HTMLParts } from '../common.js';
 import { isHeadAndContent } from './head-and-content.js';
 import { renderAstroTemplateResult } from './render-template.js';
+import { ScopeFlags } from '../util.js';
 
 export type AstroFactoryReturnValue = RenderTemplateResult | Response | HeadAndContent;
 
@@ -27,6 +28,7 @@ export async function renderToString(
 	props: any,
 	children: any
 ): Promise<string> {
+	result.scope |= ScopeFlags.Astro;
 	const factoryResult = await componentFactory(result, props, children);
 
 	if (factoryResult instanceof Response) {

packages/astro/src/runtime/server/render/head.ts

@@ -1,7 +1,9 @@
 import type { SSRResult } from '../../../@types/astro';
 
 import { markHTMLString } from '../escape.js';
-import { renderElement } from './util.js';
+import { renderElement, ScopeFlags } from './util.js';
+
+const AstroAndJSXScope = ScopeFlags.Astro | ScopeFlags.JSX;
 
 // Filter out duplicate elements in our set
 const uniqueElements = (item: any, index: number, all: any[]) => {
@@ -52,6 +54,12 @@ export function* maybeRenderHead(result: SSRResult) {
 		return;
 	}
 
+	// Don't render the head inside of a JSX component that's inside of an Astro component
+	// as the Astro component will be the one to render the head.
+	if(result.scope & AstroAndJSXScope) {
+		return;
+	}
+
 	// This is an instruction informing the page rendering that head might need rendering.
 	// This allows the page to deduplicate head injections.
 	yield { type: 'head', result } as const;

packages/astro/src/runtime/server/render/util.ts

@@ -128,3 +128,8 @@ export function renderElement(
 	}
 	return `<${name}${internalSpreadAttributes(props, shouldEscape)}>${children}</${name}>`;
 }
+
+export const ScopeFlags = {
+	Astro: 1,
+	JSX: 2
+};

packages/integrations/mdx/test/css-head-mdx.test.js

@@ -23,10 +23,10 @@ describe('Head injection w/ MDX', () => {
 			const html = await fixture.readFile('/indexThree/index.html');
 			const { document } = parseHTML(html);
 
-			const links = document.querySelectorAll('link[rel=stylesheet]');
+			const links = document.querySelectorAll('head link[rel=stylesheet]');
 			expect(links).to.have.a.lengthOf(1);
 
-			const scripts = document.querySelectorAll('script[type=module]');
+			const scripts = document.querySelectorAll('head script[type=module]');
 			expect(scripts).to.have.a.lengthOf(1);
 		});
 	});