Fix MDX layout style ordering (#11818)

.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

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,
+	});
+};`,
 				),
 			);
 		}