michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

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

Browse source 
* fix: add "astro.needsHeadRendering" to MDX

* test: style imports in pages without layout

* chore: changeset
This commit is contained in:
Ben Holmes 2022-08-23 13:25:35 -04:00 committed by GitHub
parent ca0c7e8b83
commit adb2079796
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 24 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/hungry-pens-develop.md Normal file
View file

@ -0,0 +1,5 @@
---
'@astrojs/mdx': patch
---
Fix MDX style imports when layout is not applied

5
packages/integrations/mdx/src/index.ts
View file

@ -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);

2
packages/integrations/mdx/test/fixtures/mdx-page/src/pages/index.mdx vendored
View file

@ -1 +1,3 @@
import '../styles.css'
# Hello page!

3
packages/integrations/mdx/test/fixtures/mdx-page/src/styles.css vendored Normal file
View file

@ -0,0 +1,3 @@
p {
color: red;
}

9
packages/integrations/mdx/test/mdx-page.test.js
View file

@ -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', () => {