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

11 files changed, 41 insertions, 18 deletions

diff --git a/.changeset/beige-points-search.md b/.changeset/beige-points-search.md
new file mode 100644
index 000000000..ed7909972
--- /dev/null
+++ b/.changeset/beige-points-search.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fixes an issue where component styles were not correctly included in rendered MDX
diff --git a/packages/astro/src/content/runtime.ts b/packages/astro/src/content/runtime.ts
index 439d7e11e..e446b3c93 100644
--- a/packages/astro/src/content/runtime.ts
+++ b/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);
diff --git a/packages/astro/src/content/vite-plugin-content-virtual-mod.ts b/packages/astro/src/content/vite-plugin-content-virtual-mod.ts
index 6ffa37a4e..d1a24004e 100644
--- a/packages/astro/src/content/vite-plugin-content-virtual-mod.ts
+++ b/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}`);					
 				}
 			}
 
diff --git a/packages/integrations/mdx/test/css-head-mdx.test.js b/packages/integrations/mdx/test/css-head-mdx.test.js
index 083348015..6e31d972d 100644
--- a/packages/integrations/mdx/test/css-head-mdx.test.js
+++ b/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 }
 		});
 	});
 
diff --git a/packages/integrations/mdx/test/fixtures/css-head-mdx/src/components/UsingMdx.astro b/packages/integrations/mdx/test/fixtures/css-head-mdx/src/components/UsingMdx.astro
index 1804388b0..3ef9d7639 100644
--- a/packages/integrations/mdx/test/fixtures/css-head-mdx/src/components/UsingMdx.astro
+++ b/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 />
diff --git a/packages/integrations/mdx/test/fixtures/css-head-mdx/src/content/config.ts b/packages/integrations/mdx/test/fixtures/css-head-mdx/src/content/config.ts
new file mode 100644
index 000000000..2c8944d51
--- /dev/null
+++ b/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 };
diff --git a/packages/integrations/mdx/test/fixtures/css-head-mdx/src/content/blog/_styles.css b/packages/integrations/mdx/test/fixtures/css-head-mdx/src/data/blog/_styles.css
index 1379b29c0..1379b29c0 100644
--- a/packages/integrations/mdx/test/fixtures/css-head-mdx/src/content/blog/_styles.css
+++ b/packages/integrations/mdx/test/fixtures/css-head-mdx/src/data/blog/_styles.css
diff --git a/packages/integrations/mdx/test/fixtures/css-head-mdx/src/content/blog/using-mdx.mdx b/packages/integrations/mdx/test/fixtures/css-head-mdx/src/data/blog/using-mdx.mdx
index 917fc3331..917fc3331 100644
--- a/packages/integrations/mdx/test/fixtures/css-head-mdx/src/content/blog/using-mdx.mdx
+++ b/packages/integrations/mdx/test/fixtures/css-head-mdx/src/data/blog/using-mdx.mdx
diff --git a/packages/integrations/mdx/test/fixtures/css-head-mdx/src/content/posts/test.mdx b/packages/integrations/mdx/test/fixtures/css-head-mdx/src/data/posts/test.mdx
index 0bb1153ca..0bb1153ca 100644
--- a/packages/integrations/mdx/test/fixtures/css-head-mdx/src/content/posts/test.mdx
+++ b/packages/integrations/mdx/test/fixtures/css-head-mdx/src/data/posts/test.mdx
diff --git a/packages/integrations/mdx/test/fixtures/css-head-mdx/src/content/posts/using-component.mdx b/packages/integrations/mdx/test/fixtures/css-head-mdx/src/data/posts/using-component.mdx
index fa550fb04..fa550fb04 100644
--- a/packages/integrations/mdx/test/fixtures/css-head-mdx/src/content/posts/using-component.mdx
+++ b/packages/integrations/mdx/test/fixtures/css-head-mdx/src/data/posts/using-component.mdx
diff --git a/packages/integrations/mdx/test/fixtures/css-head-mdx/src/pages/posts/[post].astro b/packages/integrations/mdx/test/fixtures/css-head-mdx/src/pages/posts/[post].astro
index 5afb5be92..13a9e56db 100644
--- a/packages/integrations/mdx/test/fixtures/css-head-mdx/src/pages/posts/[post].astro
+++ b/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 }} />