diff options
| author |  Ben Holmes <hey@bholmes.dev>
| 2022-08-23 13:25:35 -0400 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2022-08-23 13:25:35 -0400 |
| commit | adb20797962c280d4d38f335f577fd52a1b48d4b (patch) | |
| tree | 44d155e16d5d9d7c810bc3d9574890c760a7d6b9 /packages/integrations/mdx | |
| parent | ca0c7e8b836b1be2db6a77698c9535a34ada8fe6 (diff) | |
| download | astro-adb20797962c280d4d38f335f577fd52a1b48d4b.tar.gz astro-adb20797962c280d4d38f335f577fd52a1b48d4b.tar.zst astro-adb20797962c280d4d38f335f577fd52a1b48d4b.zip | |
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
Diffstat (limited to 'packages/integrations/mdx')
4 files changed, 19 insertions, 0 deletions
diff --git a/packages/integrations/mdx/src/index.ts b/packages/integrations/mdx/src/index.ts index 72fbbeb6c..6516e4b12 100644 --- 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 index 195881e02..2c9af4d03 100644 --- 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 new file mode 100644 index 000000000..7d5c79e1e --- /dev/null +++ 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 index d0b0a8078..4c3605651 100644 --- 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', () => { |