add support for injected page-ssr scripts (#4050)

.changeset/great-insects-beam.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/mdx': patch
+---
+
+Add support for injected "page-ssr" scripts

packages/astro/test/fixtures/tailwindcss/astro.config.mjs

@@ -1,12 +1,13 @@
 import { defineConfig } from 'astro/config';
 import tailwind from '@astrojs/tailwind';
+import mdx from '@astrojs/mdx';
 
 // https://astro.build/config
 export default defineConfig({
 	legacy: {
 		astroFlavoredMarkdown: true,
 	},
-	integrations: [tailwind()],
+	integrations: [tailwind(), mdx()],
 	vite: {
 		build: {
 			assetsInlineLimit: 0,

packages/astro/test/fixtures/tailwindcss/package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@astrojs/tailwind": "workspace:*",
+    "@astrojs/mdx": "workspace:*",
     "astro": "workspace:*",
     "autoprefixer": "^10.4.7",
     "postcss": "^8.4.14",

packages/astro/test/fixtures/tailwindcss/src/pages/mdx-page.mdx

@@ -0,0 +1,7 @@
+import Button from '../components/Button.astro';
+import Complex from '../components/Complex.astro';
+
+<div class="grid place-items-center h-screen content-center">
+    <Button>Tailwind Button in Markdown!</Button>
+    <Complex />
+</div>

packages/astro/test/tailwindcss.test.js

@@ -65,5 +65,13 @@ describe('Tailwind', () => {
 			const mdBundledCSS = await fixture.readFile(bundledCSSHREF.replace(/^\/?/, '/'));
 			expect(mdBundledCSS, 'includes used component classes').to.match(/\.bg-purple-600{/);
 		});
+
+		it('handles MDX pages (with integration)', async () => {
+			const html = await fixture.readFile('/mdx-page/index.html');
+			const $md = cheerio.load(html);
+			const bundledCSSHREF = $md('link[rel=stylesheet][href^=/assets/]').attr('href');
+			const mdBundledCSS = await fixture.readFile(bundledCSSHREF.replace(/^\/?/, '/'));
+			expect(mdBundledCSS, 'includes used component classes').to.match(/\.bg-purple-600{/);
+		});
 	});
 });

packages/integrations/mdx/src/index.ts

@@ -89,6 +89,13 @@ export default function mdx(mdxOptions: MdxOptions = {}): AstroIntegration {
 									if (!id.endsWith('.mdx')) return;
 									const [, moduleExports] = parseESM(code);
 
+									// This adds support for injected "page-ssr" scripts in MDX files.
+									// TODO: This should only be happening on page entrypoints, not all imported MDX.
+									// TODO: This code is copy-pasted across all Astro/Vite plugins that deal with page
+									// entrypoints (.astro, .md, .mdx). This should be handled in some centralized place,
+									// or otherwise refactored to not require copy-paste handling logic.
+									code += `\nimport "${'astro:scripts/page-ssr.js'}";`;
+
 									if (!moduleExports.includes('url')) {
 										const { fileUrl } = getFileInfo(id, config);
 										code += `\nexport const url = ${JSON.stringify(fileUrl)};`;

pnpm-lock.yaml

@@ -1929,12 +1929,14 @@ importers:
 
   packages/astro/test/fixtures/tailwindcss:
     specifiers:
+      '@astrojs/mdx': workspace:*
       '@astrojs/tailwind': workspace:*
       astro: workspace:*
       autoprefixer: ^10.4.7
       postcss: ^8.4.14
       tailwindcss: ^3.0.24
     dependencies:
+      '@astrojs/mdx': link:../../../../integrations/mdx
       '@astrojs/tailwind': link:../../../../integrations/tailwind
       astro: link:../../..
       autoprefixer: 10.4.7_postcss@8.4.14