diff --git a/.changeset/great-insects-beam.md b/.changeset/great-insects-beam.md new file mode 100644 index 000000000000..4e0e889f06c6 --- /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 34c98eaf8d12..31f537fd004b 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 dcf52d91b878..00646e0fdd1a 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 000000000000..a59f7f745a7b --- /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'; + +
+ + +
\ No newline at end of file diff --git a/packages/astro/test/tailwindcss.test.js b/packages/astro/test/tailwindcss.test.js index 7a59aebe5762..83061248f84c 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 b33b098862ad..da10281a7c2e 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 9ced36a11c90..6d31b7da2dc7 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