An MDX test too

withastro · Feb 10, 2023 · fb6d334 · fb6d334
1 parent b45cff2
commit fb6d334
Show file tree

Hide file tree

Showing 7 changed files with 56 additions and 8 deletions.
diff --git a/packages/astro/src/runtime/server/render/common.ts b/packages/astro/src/runtime/server/render/common.ts
@@ -80,6 +80,14 @@ export function stringifyChunk(result: SSRResult, chunk: string | SlotString | R
 						break;
 					}
 
+					// Nested element inside of JSX during head buffering phase
+					case ScopeFlags.HeadBuffer: {
+            if(hasScopeFlag(result, ScopeFlags.JSX | ScopeFlags.HeadBuffer)) {
+              return "";
+            }
+						break;
+          }
+
 					// Astro.slots.render() should never render head content.
 					case ScopeFlags.RenderSlot | ScopeFlags.Astro:
 					case ScopeFlags.RenderSlot | ScopeFlags.Astro | ScopeFlags.JSX:

diff --git a/packages/integrations/mdx/test/css-head-mdx.test.js b/packages/integrations/mdx/test/css-head-mdx.test.js
@@ -69,5 +69,17 @@ describe('Head injection w/ MDX', () => {
 			const bodyLinks = $('body link[rel=stylesheet]');
 			expect(bodyLinks).to.have.a.lengthOf(0);
 		});
+
+		it('JSX component rendering Astro children within head buffering phase', async () => {
+			const html = await fixture.readFile('/posts/using-component/index.html');
+			// Using cheerio here because linkedom doesn't support head tag injection
+			const $ = cheerio.load(html);
+
+			const headLinks = $('head link[rel=stylesheet]');
+			expect(headLinks).to.have.a.lengthOf(1);
+
+			const bodyLinks = $('body link[rel=stylesheet]');
+			expect(bodyLinks).to.have.a.lengthOf(0);
+		});
 	});
 });
diff --git a/packages/integrations/mdx/test/fixtures/css-head-mdx/src/components/BaseHead.astro b/packages/integrations/mdx/test/fixtures/css-head-mdx/src/components/BaseHead.astro
@@ -0,0 +1,11 @@
+---
+const { title } = Astro.props;
+---
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width" />
+<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+<meta name="generator" content={Astro.generator} />
+<title>{title}</title>
+<style is:global>
+	@import "../styles/global.css";
+</style>
diff --git a/packages/integrations/mdx/test/fixtures/css-head-mdx/src/components/GenericComponent.astro b/packages/integrations/mdx/test/fixtures/css-head-mdx/src/components/GenericComponent.astro
@@ -0,0 +1 @@
+<span>just a generic component</span>
diff --git a/packages/integrations/mdx/test/fixtures/css-head-mdx/src/components/MDXWrapper.astro b/packages/integrations/mdx/test/fixtures/css-head-mdx/src/components/MDXWrapper.astro
@@ -0,0 +1,9 @@
+---
+import Component from "./GenericComponent.astro";
+---
+
+<div>
+	<slot name="title" />
+	<slot name="intro" class="inline" />
+  <Component />
+</div>
diff --git a/...tegrations/mdx/test/fixtures/css-head-mdx/src/content/posts/using-component.mdx b/...tegrations/mdx/test/fixtures/css-head-mdx/src/content/posts/using-component.mdx
@@ -0,0 +1,13 @@
+---
+title: testing
+---
+import MDXWrapper from "../../components/MDXWrapper.astro";
+
+<MDXWrapper>
+  <h1 slot="title">
+    testing
+  </h1>
+  <div slot="intro">
+    Intro
+  </div>
+</MDXWrapper>
diff --git a/packages/integrations/mdx/test/fixtures/css-head-mdx/src/layouts/ContentLayout.astro b/packages/integrations/mdx/test/fixtures/css-head-mdx/src/layouts/ContentLayout.astro
@@ -1,4 +1,5 @@
 ---
+import BaseHead from "../components/BaseHead.astro";
 export interface Props {
 	title: string;
 }
@@ -9,14 +10,7 @@ const { title } = Astro.props;
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<meta charset="UTF-8" />
-		<meta name="viewport" content="width=device-width" />
-		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-		<meta name="generator" content={Astro.generator} />
-		<title>{title}</title>
-		<style is:global>
-			@import "../styles/global.css";
-		</style>
+		<BaseHead title={title} />
 	</head>
 	<body>
 		<slot />