diff options
| -rw-r--r-- | .changeset/tiny-suns-sit.md | 5 | ||||
| -rw-r--r-- | packages/integrations/mdx/src/rehype-apply-frontmatter-export.ts | 38 |
2 files changed, 23 insertions, 20 deletions
diff --git a/.changeset/tiny-suns-sit.md b/.changeset/tiny-suns-sit.md new file mode 100644 index 000000000..d5dbd58ae --- /dev/null +++ b/.changeset/tiny-suns-sit.md @@ -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 diff --git a/packages/integrations/mdx/src/rehype-apply-frontmatter-export.ts b/packages/integrations/mdx/src/rehype-apply-frontmatter-export.ts index 7fa7f69ef..1b981a68e 100644 --- a/packages/integrations/mdx/src/rehype-apply-frontmatter-export.ts +++ b/packages/integrations/mdx/src/rehype-apply-frontmatter-export.ts @@ -17,30 +17,28 @@ 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; - const { layout, ...content } = frontmatter; - content.file = file; - content.url = url; - return layoutJsx(Layout, { - file, - url, - content, - frontmatter: content, - headings: getHeadings(), - 'server:root': true, - children, - }); - };`, +export default function ({ children }) { + const { layout, ...content } = frontmatter; + content.file = file; + content.url = url; + return __astro_layout_jsx__(__astro_layout_component__, { + file, + url, + content, + frontmatter: content, + headings: getHeadings(), + 'server:root': true, + children, + }); +};`, ), ); } |