Infrastructure/astro
0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2024-12-30 22:03:56 -05:00
Code Issues Activity

Fix MDX layout style ordering (#11818)

Browse source
This commit is contained in:
Bjorn Lu 2024-08-28 10:52:13 +08:00 committed by GitHub
parent 9eccca53e3
commit 88ef1d0e77
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 23 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/tiny-suns-sit.md Normal file
View file

@ -0,0 +1,5 @@
---
'@astrojs/mdx': patch
---
Fixes CSS in the layout component to be ordered first before any other components in the MDX file

16
packages/integrations/mdx/src/rehype-apply-frontmatter-export.ts
View file

@ -17,21 +17,19 @@ export function rehypeApplyFrontmatterExport() {
jsToTreeNode(`export const frontmatter = ${JSON.stringify(frontmatter)};`),
];
if (frontmatter.layout) {
// NOTE(bholmesdev) 08-22-2022
// Using an async layout import (i.e. `const Layout = (await import...)`)
// Preserves the dev server import cache when globbing a large set of MDX files
// Full explanation: 'https://github.com/withastro/astro/pull/4428'
exportNodes.unshift(
jsToTreeNode(
// NOTE: Use `__astro_*` import names to prevent conflicts with user code
/** @see 'vite-plugin-markdown' for layout props reference */
`import { jsx as layoutJsx } from 'astro/jsx-runtime';
`\
import { jsx as __astro_layout_jsx__ } from 'astro/jsx-runtime';
import __astro_layout_component__ from ${JSON.stringify(frontmatter.layout)};
export default async function ({ children }) {
const Layout = (await import(${JSON.stringify(frontmatter.layout)})).default;
export default function ({ children }) {
const { layout, ...content } = frontmatter;
content.file = file;
content.url = url;
return layoutJsx(Layout, {
return __astro_layout_jsx__(__astro_layout_component__, {
file,
url,
content,
@ -40,7 +38,7 @@ export function rehypeApplyFrontmatterExport() {
'server:root': true,
children,
});
};`,
};`,
),
);
}