fix(assets): Missing styles in Cloudflare + MDX

.changeset/early-times-drop.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/cloudflare': patch
+---
+
+Fixes duplicate logging showing up in some cases when prerendering pages

.changeset/long-bushes-rest.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fixes images not working in MDX when using the Cloudflare adapter in certain cases

packages/astro/src/assets/utils/proxy.ts

@@ -13,7 +13,7 @@ export function getProxyCode(options: ImageMetadata, isSSR: boolean): string {
 							}
 							${
 								!isSSR
-									? `if (target[name] !== undefined && globalThis.astroAsset) globalThis.astroAsset?.referencedImages.add(${stringifiedFSPath});`
+									? `if (target[name] !== undefined && globalThis.astroAsset) globalThis.astroAsset?.referencedImages?.add(${stringifiedFSPath});`
 									: ''
 							}
 							return target[name];

packages/astro/src/content/vite-plugin-content-assets.ts

@@ -78,10 +78,15 @@ export function astroContentAssetPropagationPlugin({
 			},
 		},
 		configureServer(server) {
-			if (!isRunnableDevEnvironment(server.environments[ASTRO_VITE_ENVIRONMENT_NAMES.ssr])) {
-				return;
+			const ssrEnv = server.environments[ASTRO_VITE_ENVIRONMENT_NAMES.ssr];
+			if (isRunnableDevEnvironment(ssrEnv)) {
+				environment = ssrEnv;
+			} else if (isRunnableDevEnvironment(server.environments[ASTRO_VITE_ENVIRONMENT_NAMES.astro])) {
+				// When the ssr environment is not a RunnableDevEnvironment (e.g. when using the
+				// Cloudflare adapter which runs ssr in workerd), fall back to the 'astro' environment
+				// which is always a RunnableDevEnvironment available in dev.
+				environment = server.environments[ASTRO_VITE_ENVIRONMENT_NAMES.astro] as RunnableDevEnvironment;
 			}
-			environment = server.environments[ASTRO_VITE_ENVIRONMENT_NAMES.ssr] as RunnableDevEnvironment;
 		},
 		transform: {
 			filter: {
@@ -96,7 +101,11 @@ export function astroContentAssetPropagationPlugin({
 					// so resolve collected styles and scripts here.
 					if (isAstroServerEnvironment(this.environment) && environment) {
 						if (!environment.moduleGraph.getModuleById(basePath)?.ssrModule) {
-							await environment.runner.import(basePath);
+							// Ignore errors here — when using a fallback environment (e.g. the 'astro'
+							// env when Cloudflare's ssr env is non-runnable), the module may already be
+							// loaded in the fallback env's graph even if this import throws due to
+							// concurrent bundle editing.
+							await environment.runner.import(basePath).catch(() => {});
 						}
 						const {
 							styles,

packages/integrations/cloudflare/src/prerenderer.ts

@@ -61,6 +61,7 @@ export function createCloudflarePrerenderer({
 					outDir: fileURLToPath(serverDir),
 				},
 				root: fileURLToPath(root),
+				logLevel: 'error',
 				preview: {
 					host: 'localhost',
 					port: 0, // Let the OS pick a free port

packages/integrations/cloudflare/test/fixtures/prerender-styles/astro.config.mjs

@@ -1,7 +1,9 @@
+import mdx from '@astrojs/mdx';
 import { defineConfig } from 'astro/config';
 import tailwindcss from '@tailwindcss/vite';
 
 export default defineConfig({
+  integrations: [mdx()],
   vite: {
     plugins: [tailwindcss()],
   },

packages/integrations/cloudflare/test/fixtures/prerender-styles/package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@astrojs/cloudflare": "workspace:*",
+    "@astrojs/mdx": "workspace:*",
     "@tailwindcss/vite": "^4.2.0",
     "astro": "workspace:*",
     "tailwindcss": "^4.2.0"

packages/integrations/cloudflare/test/fixtures/prerender-styles/src/components/StyledCard.astro

@@ -0,0 +1,13 @@
+---
+---
+
+<div class="mdx-styled-card">
+  <slot />
+</div>
+
+<style>
+  .mdx-styled-card {
+    border: 2px solid rebeccapurple;
+    padding: 1rem;
+  }
+</style>

packages/integrations/cloudflare/test/fixtures/prerender-styles/src/content.config.ts

@@ -0,0 +1,11 @@
+import { defineCollection, z } from 'astro:content';
+import { glob } from 'astro/loaders';
+
+const posts = defineCollection({
+	loader: glob({ pattern: '**/*.mdx', base: './src/content/posts' }),
+	schema: z.object({
+		title: z.string(),
+	}),
+});
+
+export const collections = { posts };

packages/integrations/cloudflare/test/fixtures/prerender-styles/src/content/posts/styled.mdx

@@ -0,0 +1,7 @@
+---
+title: Styled Post
+---
+
+import StyledCard from '../../components/StyledCard.astro';
+
+<StyledCard>Hello from MDX</StyledCard>

packages/integrations/cloudflare/test/fixtures/prerender-styles/src/pages/posts/[slug].astro

@@ -0,0 +1,27 @@
+---
+import { getEntry, render } from 'astro:content';
+
+export const prerender = true;
+
+export async function getStaticPaths() {
+	const { getCollection } = await import('astro:content');
+	const posts = await getCollection('posts');
+	return posts.map((post) => ({
+		params: { slug: post.id },
+		props: { post },
+	}));
+}
+
+const { post } = Astro.props;
+const { Content } = await render(post);
+---
+
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<title>{post.data.title}</title>
+	</head>
+	<body>
+		<Content />
+	</body>
+</html>

packages/integrations/cloudflare/test/prerender-styles.test.js

@@ -43,8 +43,69 @@ describe('Prerendered page styles', () => {
 		it('includes Tailwind styles in prerendered page', async () => {
 			// With cloudflare adapter, prerendered pages are in dist/client/
 			const html = await fixture.readFile('/client/index.html');
-			// Check that the bg-amber-500 class has its styles included
-			assert.ok(html.includes('.bg-amber-500'), 'Expected .bg-amber-500 class to be in the HTML');
+			// Tailwind CSS is emitted as an external stylesheet linked from the HTML.
+			// Verify the HTML references a stylesheet and that the stylesheet contains the expected class.
+			assert.ok(html.includes('rel="stylesheet"'), 'Expected the HTML to reference a stylesheet');
+			const cssFiles = await fixture.glob('client/_astro/*.css');
+			assert.ok(cssFiles.length > 0, 'Expected at least one CSS file in _astro/');
+			let foundClass = false;
+			for (const cssFile of cssFiles) {
+				const css = await fixture.readFile('/' + cssFile);
+				if (css.includes('.bg-amber-500')) {
+					foundClass = true;
+					break;
+				}
+			}
+			assert.ok(foundClass, 'Expected .bg-amber-500 class to be in a generated CSS file');
+		});
+	});
+});
+
+describe('Styles from Astro components imported in MDX content collections', () => {
+	/** @type {import('../../../astro/test/test-utils').Fixture} */
+	let fixture;
+	let devServer;
+
+	before(async () => {
+		fixture = await loadFixture({
+			root: new URL('./fixtures/prerender-styles/', import.meta.url).toString(),
+			adapter: cloudflare(),
+		});
+	});
+
+	after(async () => {
+		await devServer?.stop();
+		await fixture.clean();
+	});
+
+	describe('dev', () => {
+		before(async () => {
+			devServer = await fixture.startDevServer();
+		});
+
+		it('includes styles from an Astro component imported in an MDX content collection entry', async () => {
+			const res = await fixture.fetch('/posts/styled');
+			const html = await res.text();
+			assert.ok(
+				html.includes('.mdx-styled-card'),
+				'Expected .mdx-styled-card styles from StyledCard.astro to be injected in the MDX page',
+			);
+		});
+	});
+
+	describe('build', () => {
+		before(async () => {
+			await devServer?.stop();
+			devServer = undefined;
+			await fixture.build();
+		});
+
+		it('includes styles from an Astro component imported in an MDX content collection entry', async () => {
+			const html = await fixture.readFile('/client/posts/styled/index.html');
+			assert.ok(
+				html.includes('.mdx-styled-card'),
+				'Expected .mdx-styled-card styles from StyledCard.astro to be in the built MDX page',
+			);
 		});
 	});
 });