bug: Support remote url for css in content collection (withastro#15254)

lamalex · web-flow · commit 8d84b3040181 · 2026-01-20T01:58:15.000+01:00
fixes: withastro#15252
diff --git a/.changeset/fix-css-assetprefix-remote-url.md b/.changeset/fix-css-assetprefix-remote-url.md
@@ -0,0 +1,9 @@
+---
+'astro': patch
+---
+
+Fixes CSS `assetsPrefix` with remote URLs incorrectly prepending a forward slash
+
+When using `build.assetsPrefix` with a remote URL (e.g., `https://cdn.example.com`) for CSS assets, the generated `<link>` elements were incorrectly getting a `/` prepended to the full URL, resulting in invalid URLs like `/https://cdn.example.com/assets/style.css`.
+
+This fix checks if the stylesheet link is a remote URL before prepending the forward slash.
diff --git a/packages/astro/src/content/runtime.ts b/packages/astro/src/content/runtime.ts
@@ -6,7 +6,7 @@ import { ZodIssueCode, z } from 'zod';
 import type { GetImageResult, ImageMetadata } from '../assets/types.js';
 import { imageSrcToImportId } from '../assets/utils/resolveImports.js';
 import { AstroError, AstroErrorData } from '../core/errors/index.js';
-import { prependForwardSlash } from '../core/path.js';
+import { isRemotePath, prependForwardSlash } from '../core/path.js';
 import {
 	type AstroComponentFactory,
 	createComponent,
@@ -821,7 +821,7 @@ async function render({
 						.map((link: any) => {
 							return renderUniqueStylesheet(result, {
 								type: 'external',
-								src: prependForwardSlash(link),
+								src: isRemotePath(link) ? link : prependForwardSlash(link),
 							});
 						})
 						.join('');
diff --git a/packages/astro/test/astro-assets-prefix.test.js b/packages/astro/test/astro-assets-prefix.test.js
@@ -65,6 +65,16 @@ describe('Assets Prefix - Static', () => {
 		const imgAsset = $('img');
 		assert.match(imgAsset.attr('src'), assetsPrefixRegex);
 	});
+
+	it('MDX content collection CSS imports should start with assetsPrefix', async () => {
+		const html = await fixture.readFile('/mdx-blog/index.html');
+		const $ = cheerio.load(html);
+		const stylesheets = $('link[rel="stylesheet"]');
+		assert.ok(stylesheets.length > 0, 'Expected at least one stylesheet');
+		stylesheets.each((_i, el) => {
+			assert.match(el.attribs.href, assetsPrefixRegex);
+		});
+	});
 });
 
 describe('Assets Prefix - with path prefix', () => {
diff --git a/packages/astro/test/fixtures/astro-assets-prefix/astro.config.mjs b/packages/astro/test/fixtures/astro-assets-prefix/astro.config.mjs
@@ -1,3 +1,4 @@
+import mdx from '@astrojs/mdx';
 import react from '@astrojs/react';
 import { defineConfig } from 'astro/config';
 import { testImageService } from '../../test-image-service.js';
@@ -6,9 +7,10 @@ import { testImageService } from '../../test-image-service.js';
 export default defineConfig({
 	// test custom base to make sure things work
 	base: '/custom-base',
-	integrations: [react()],
+	integrations: [react(), mdx()],
 	build: {
 		assetsPrefix: 'http://localhost:4321',
+		inlineStylesheets: 'never',
 	},
 	image: {
 		service: testImageService(),
diff --git a/packages/astro/test/fixtures/astro-assets-prefix/package.json b/packages/astro/test/fixtures/astro-assets-prefix/package.json
@@ -3,6 +3,7 @@
   "version": "0.0.0",
   "private": true,
   "dependencies": {
+    "@astrojs/mdx": "workspace:*",
     "@astrojs/react": "workspace:*",
     "astro": "workspace:*",
     "react": "^18.3.1",
diff --git a/packages/astro/test/fixtures/astro-assets-prefix/src/content/blog/mdx-with-css.mdx b/packages/astro/test/fixtures/astro-assets-prefix/src/content/blog/mdx-with-css.mdx
@@ -0,0 +1,10 @@
+---
+title: MDX Post with CSS
+cover: ../../assets/penguin1.jpg
+---
+
+import './styles.css';
+
+# Hello from MDX
+
+This MDX file imports a CSS file to test assetsPrefix with content collections.
diff --git a/packages/astro/test/fixtures/astro-assets-prefix/src/content/blog/styles.css b/packages/astro/test/fixtures/astro-assets-prefix/src/content/blog/styles.css
@@ -0,0 +1,3 @@
+h1 {
+	color: red;
+}
diff --git a/packages/astro/test/fixtures/astro-assets-prefix/src/pages/mdx-blog.astro b/packages/astro/test/fixtures/astro-assets-prefix/src/pages/mdx-blog.astro
@@ -0,0 +1,15 @@
+---
+import { getCollection } from "astro:content";
+const posts = await getCollection("blog");
+const mdxPost = posts.find(p => p.id === 'mdx-with-css.mdx');
+const { Content } = await mdxPost.render();
+---
+
+<html>
+<head>
+	<title>MDX Blog</title>
+</head>
+<body>
+	<Content />
+</body>
+</html>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
