Fix MDX style imports when layout is not applied (#4443)

* fix: add "astro.needsHeadRendering" to MDX * test: style imports in pages without layout * chore: changeset
withastro · Aug 23, 2022 · adb2079 · adb2079
1 parent ca0c7e8
commit adb2079
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 0 deletions.
diff --git a/.changeset/hungry-pens-develop.md b/.changeset/hungry-pens-develop.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/mdx': patch
+---
+
+Fix MDX style imports when layout is not applied
diff --git a/packages/integrations/mdx/src/index.ts b/packages/integrations/mdx/src/index.ts
@@ -119,6 +119,11 @@ export default function mdx(mdxOptions: MdxOptions = {}): AstroIntegration {
 								// These transforms must happen *after* JSX runtime transformations
 								transform(code, id) {
 									if (!id.endsWith('.mdx')) return;
+
+									// Ensures styles and scripts are injected into a `<head>`
+									// When a layout is not applied
+									code += `\nMDXContent[Symbol.for('astro.needsHeadRendering')] = !Boolean(frontmatter.layout);`;
+
 									const [, moduleExports] = parseESM(code);
 
 									const { fileUrl, fileId } = getFileInfo(id, config);

diff --git a/packages/integrations/mdx/test/fixtures/mdx-page/src/pages/index.mdx b/packages/integrations/mdx/test/fixtures/mdx-page/src/pages/index.mdx
@@ -1 +1,3 @@
+import '../styles.css'
+
 # Hello page!
diff --git a/packages/integrations/mdx/test/fixtures/mdx-page/src/styles.css b/packages/integrations/mdx/test/fixtures/mdx-page/src/styles.css
@@ -0,0 +1,3 @@
+p {
+	color: red;
+}
diff --git a/packages/integrations/mdx/test/mdx-page.test.js b/packages/integrations/mdx/test/mdx-page.test.js
@@ -26,6 +26,15 @@ describe('MDX Page', () => {
 
 			expect(h1.textContent).to.equal('Hello page!');
 		});
+
+		it('injects style imports when layout is not applied', async () => {
+			const html = await fixture.readFile('/index.html');
+			const { document } = parseHTML(html);
+
+			const stylesheet = document.querySelector('link[rel="stylesheet"]');
+
+			expect(stylesheet).to.not.be.null;
+		})
 	});
 
 	describe('dev', () => {