From 9ab66c4ba9bf2250990114c76b792f26d0694365 Mon Sep 17 00:00:00 2001
From: "Fred K. Schott" <fkschott@gmail.com>
Date: Tue, 26 Jul 2022 00:26:47 -0400
Subject: [PATCH] add support for injected page-ssr scripts (#4050)

---
 .changeset/great-insects-beam.md                          | 5 +++++
 packages/astro/test/fixtures/tailwindcss/astro.config.mjs | 3 ++-
 packages/astro/test/fixtures/tailwindcss/package.json     | 1 +
 .../test/fixtures/tailwindcss/src/pages/mdx-page.mdx      | 7 +++++++
 packages/astro/test/tailwindcss.test.js                   | 8 ++++++++
 packages/integrations/mdx/src/index.ts                    | 7 +++++++
 pnpm-lock.yaml                                            | 2 ++
 7 files changed, 32 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/great-insects-beam.md
 create mode 100644 packages/astro/test/fixtures/tailwindcss/src/pages/mdx-page.mdx

diff --git a/.changeset/great-insects-beam.md b/.changeset/great-insects-beam.md
new file mode 100644
index 000000000..4e0e889f0
--- /dev/null
+++ b/.changeset/great-insects-beam.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/mdx': patch
+---
+
+Add support for injected "page-ssr" scripts
diff --git a/packages/astro/test/fixtures/tailwindcss/astro.config.mjs b/packages/astro/test/fixtures/tailwindcss/astro.config.mjs
index 34c98eaf8..31f537fd0 100644
--- a/packages/astro/test/fixtures/tailwindcss/astro.config.mjs
+++ b/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,
diff --git a/packages/astro/test/fixtures/tailwindcss/package.json b/packages/astro/test/fixtures/tailwindcss/package.json
index dcf52d91b..00646e0fd 100644
--- a/packages/astro/test/fixtures/tailwindcss/package.json
+++ b/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",
diff --git a/packages/astro/test/fixtures/tailwindcss/src/pages/mdx-page.mdx b/packages/astro/test/fixtures/tailwindcss/src/pages/mdx-page.mdx
new file mode 100644
index 000000000..a59f7f745
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/packages/astro/test/tailwindcss.test.js b/packages/astro/test/tailwindcss.test.js
index 7a59aebe5..83061248f 100644
--- a/packages/astro/test/tailwindcss.test.js
+++ b/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{/);
+		});
 	});
 });
diff --git a/packages/integrations/mdx/src/index.ts b/packages/integrations/mdx/src/index.ts
index b33b09886..da10281a7 100644
--- a/packages/integrations/mdx/src/index.ts
+++ b/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)};`;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9ced36a11..6d31b7da2 100644
--- a/pnpm-lock.yaml
+++ b/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