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,10 @@ export interface SSRResult {
  ): AstroGlobal;
  resolve: (s: string) => Promise<string>;
  response: ResponseInit;
+ // Bits 1 = astro, 2 = jsx, 4 = slot
+ // As rendering occurs these bits are manipulated to determine where content
+ // is within a slot. This is used for head injection.
+ scope: number;
  _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,7 @@
 import type { SSRResult } from '../../../@types/astro';
 
 import { markHTMLString } from '../escape.js';
-import { renderElement } from './util.js';
+import { renderElement, ScopeFlags } from './util.js';
 
 // Filter out duplicate elements in our set
 const uniqueElements = (item: any, index: number, all: any[]) => {
@@ -52,6 +52,14 @@ 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.
+ switch(result.scope) {
+ case ScopeFlags.JSX | ScopeFlags.Slot | ScopeFlags.Astro: {
+ 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/slot.ts

@@ -3,6 +3,7 @@ import type { RenderInstruction } from './types.js';
 
 import { HTMLString, markHTMLString } from '../escape.js';
 import { renderChild } from './any.js';
+import { ScopeFlags } from './util.js';
 
 const slotString = Symbol.for('astro:slot-string');
 
@@ -20,8 +21,9 @@ export function isSlotString(str: string): str is any {
  return !!(str as any)[slotString];
 }
 
-export async function renderSlot(_result: any, slotted: string, fallback?: any): Promise<string> {
+export async function renderSlot(result: SSRResult, slotted: string, fallback?: any): Promise<string> {
  if (slotted) {
+ result.scope |= ScopeFlags.Slot;
  let iterator = renderChild(slotted);
  let content = '';
  let instructions: null | RenderInstruction[] = null;
@@ -35,6 +37,8 @@ export async function renderSlot(_result: any, slotted: string, fallback?: any):
  content += chunk;
  }
  }
+ // Remove the flag since we are now outside of the scope.
+ result.scope &= ~ScopeFlags.Slot;
  return markHTMLString(new SlotString(content, instructions));
  }
  return fallback;

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

@@ -128,3 +128,9 @@ export function renderElement(
  }
  return `<${name}${internalSpreadAttributes(props, shouldEscape)}>${children}</${name}>`;
 }
+
+export const ScopeFlags = {
+ Astro: 1 << 0,
+ JSX: 1 << 1,
+ Slot: 1 << 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);
  });
  });