fix: correctly handle head propagation in content layer deferred rendering (#12014)

* chore: run MDX tests against content layer

* Handle head propagation in deferred rendering

* Add changeset

* Update test

.changeset/beige-points-search.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fixes an issue where component styles were not correctly included in rendered MDX

packages/astro/src/content/runtime.ts

@@ -445,13 +445,12 @@ export async function renderEntry(
 		try {
 			// @ts-expect-error	virtual module
 			const { default: contentModules } = await import('astro:content-module-imports');
-			const module = contentModules.get(entry.filePath);
-			const deferredMod = await module();
-			return {
-				Content: deferredMod.Content,
-				headings: deferredMod.getHeadings?.() ?? [],
-				remarkPluginFrontmatter: deferredMod.frontmatter ?? {},
-			};
+			const renderEntryImport = contentModules.get(entry.filePath);
+			return render({
+				collection: '',
+				id: entry.id,
+				renderEntryImport,
+			});
 		} catch (e) {
 			// eslint-disable-next-line
 			console.error(e);

packages/astro/src/content/vite-plugin-content-virtual-mod.ts

@@ -82,12 +82,12 @@ export function astroContentVirtualModPlugin({
 				const [, query] = id.split('?');
 				const params = new URLSearchParams(query);
 				const fileName = params.get('fileName');
-				let importerPath = undefined;
+				let importPath = undefined;
 				if (fileName && URL.canParse(fileName, settings.config.root.toString())) {
-					importerPath = fileURLToPath(new URL(fileName, settings.config.root));
+					importPath = fileURLToPath(new URL(fileName, settings.config.root))
 				}
-				if (importerPath) {
-					return await this.resolve(importerPath);
+				if (importPath) {
+					return await this.resolve(`${importPath}?${CONTENT_RENDER_FLAG}`);					
 				}
 			}
 

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

@@ -15,6 +15,7 @@ describe('Head injection w/ MDX', () => {
 			integrations: [mdx()],
 			// test suite was authored when inlineStylesheets defaulted to never
 			build: { inlineStylesheets: 'never' },
+			experimental: { contentLayer: true }
 		});
 	});
 

packages/integrations/mdx/test/fixtures/css-head-mdx/src/components/UsingMdx.astro

@@ -1,8 +1,8 @@
 ---
-import { getEntryBySlug } from 'astro:content';
+import { getEntry, render } from 'astro:content';
 
-const launchWeek = await getEntryBySlug('blog', 'using-mdx');
-const { Content } = await launchWeek.render();
+const launchWeek = await getEntry('blog', 'using-mdx');
+const { Content } = await render(launchWeek);
 ---
 
 <Content />

packages/integrations/mdx/test/fixtures/css-head-mdx/src/content/config.ts

@@ -0,0 +1,18 @@
+import { defineCollection } from "astro:content";
+import { glob } from "astro/loaders"
+
+const posts = defineCollection({
+	loader: glob({
+		pattern: "*.mdx",
+		base: "src/data/posts",
+	})
+});
+
+const blog = defineCollection({
+	loader: glob({
+		pattern: "*.mdx",
+		base: "src/data/blog",
+	})
+});
+
+export const collections = { posts, blog };

packages/integrations/mdx/test/fixtures/css-head-mdx/src/pages/posts/[post].astro

@@ -1,17 +1,17 @@
 ---
-import { getCollection } from 'astro:content';
+import { getCollection, render } from 'astro:content';
 import SmallCaps from '../../components/SmallCaps.astro';
 import Layout from '../../layouts/ContentLayout.astro';
 
 export async function getStaticPaths() {
   const entries = await getCollection('posts');
   return entries.map(entry => {
-    return {params: { post: entry.slug }, props: { entry },
-  }});
+    return { params: { post: entry.id }, props: { entry }};
+	});
 }
 
 const { entry } = Astro.props;
-const { Content } = await entry.render();
+const { Content } = await render(entry);
 ---
 <Layout title="">
   <Content components={{ SmallCaps }} />