Fix inline stylesheets in content collection cache (#10543)

* Fix inline stylesheets in content collection cache * Refactor for better reusability * Update .changeset/tricky-cobras-mate.md Co-authored-by: Florian Lefebvre <contact@florian-lefebvre.dev> --------- Co-authored-by: Florian Lefebvre <contact@florian-lefebvre.dev>
withastro · Mar 28, 2024 · 0fd36bd · 0fd36bd
1 parent fbdc10f
commit 0fd36bd
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 22 deletions.
diff --git a/.changeset/tricky-cobras-mate.md b/.changeset/tricky-cobras-mate.md
@@ -0,0 +1,5 @@
+---
+"astro": patch
+---
+
+Fixes inline stylesheets with content collections cache
diff --git a/packages/astro/src/content/index.ts b/packages/astro/src/content/index.ts
@@ -2,7 +2,7 @@ export { CONTENT_FLAG, PROPAGATED_ASSET_FLAG } from './consts.js';
 export { errorMap } from './error-map.js';
 export { attachContentServerListeners } from './server-listeners.js';
 export { createContentTypesGenerator } from './types-generator.js';
-export { contentObservable, getContentPaths, getDotAstroTypeReference } from './utils.js';
+export { contentObservable, getContentPaths, getDotAstroTypeReference, hasAssetPropagationFlag } from './utils.js';
 export { astroContentAssetPropagationPlugin } from './vite-plugin-content-assets.js';
 export { astroContentImportPlugin } from './vite-plugin-content-imports.js';
 export { astroContentVirtualModPlugin } from './vite-plugin-content-virtual-mod.js';
diff --git a/packages/astro/src/content/utils.ts b/packages/astro/src/content/utils.ts
@@ -16,7 +16,7 @@ import { AstroError, AstroErrorData } from '../core/errors/index.js';
 
 import { MarkdownError } from '../core/errors/index.js';
 import { isYAMLException } from '../core/errors/utils.js';
-import { CONTENT_FLAGS, CONTENT_TYPES_FILE } from './consts.js';
+import { CONTENT_FLAGS, CONTENT_TYPES_FILE, PROPAGATED_ASSET_FLAG } from './consts.js';
 import { errorMap } from './error-map.js';
 import { createImage } from './runtime-assets.js';
 
@@ -505,3 +505,11 @@ export function getExtGlob(exts: string[]) {
 			exts[0]
 		: `{${exts.join(',')}}`;
 }
+
+export function hasAssetPropagationFlag(id: string): boolean {
+	try {
+		return new URL(id, 'file://').searchParams.has(PROPAGATED_ASSET_FLAG)
+	} catch {
+		return false;
+	}
+}
diff --git a/packages/astro/src/core/build/plugins/plugin-css.ts b/packages/astro/src/core/build/plugins/plugin-css.ts
@@ -5,7 +5,7 @@ import type { BuildInternals } from '../internal.js';
 import type { AstroBuildPlugin, BuildTarget } from '../plugin.js';
 import type { PageBuildData, StaticBuildOptions, StylesheetAsset } from '../types.js';
 
-import { PROPAGATED_ASSET_FLAG } from '../../../content/consts.js';
+import { RESOLVED_VIRTUAL_MODULE_ID as ASTRO_CONTENT_VIRTUAL_MODULE_ID } from '../../../content/consts.js';
 import type { AstroPluginCssMetadata } from '../../../vite-plugin-astro/index.js';
 import * as assetName from '../css-asset-name.js';
 import {
@@ -21,6 +21,7 @@ import {
 	isHoistedScript,
 } from '../internal.js';
 import { extendManualChunks, shouldInlineAsset } from './util.js';
+import { hasAssetPropagationFlag } from '../../../content/index.js';
 
 interface PluginOptions {
 	internals: BuildInternals;
@@ -96,18 +97,11 @@ function rollupPluginAstroBuildCSS(options: PluginOptions): VitePlugin[] {
 
 						const ctx = { getModuleInfo: meta.getModuleInfo };
 						for (const pageInfo of getParentModuleInfos(id, ctx)) {
-							if (new URL(pageInfo.id, 'file://').searchParams.has(PROPAGATED_ASSET_FLAG)) {
+							if (hasAssetPropagationFlag(pageInfo.id)) {
 								// Split delayed assets to separate modules
 								// so they can be injected where needed
 								const chunkId = assetName.createNameHash(id, [id]);
 								internals.cssModuleToChunkIdMap.set(id, chunkId);
-								if (isContentCollectionCache) {
-									// TODO: Handle inlining?
-									const propagatedStyles =
-										internals.propagatedStylesMap.get(pageInfo.id) ?? new Set();
-									propagatedStyles.add({ type: 'external', src: chunkId });
-									internals.propagatedStylesMap.set(pageInfo.id, propagatedStyles);
-								}
 								return chunkId;
 							}
 						}
@@ -144,15 +138,11 @@ function rollupPluginAstroBuildCSS(options: PluginOptions): VitePlugin[] {
 
 				// For this CSS chunk, walk parents until you find a page. Add the CSS to that page.
 				for (const id of Object.keys(chunk.modules)) {
-					for (const { info: pageInfo, depth, order } of getParentExtendedModuleInfos(
-						id,
-						this,
-						function until(importer) {
-							return new URL(importer, 'file://').searchParams.has(PROPAGATED_ASSET_FLAG);
-						}
-					)) {
-						if (new URL(pageInfo.id, 'file://').searchParams.has(PROPAGATED_ASSET_FLAG)) {
-							for (const parentInfo of getParentModuleInfos(id, this)) {
+					const parentModuleInfos = getParentExtendedModuleInfos(id, this, hasAssetPropagationFlag);
+					for (const { info: pageInfo, depth, order } of parentModuleInfos) {
+						if (hasAssetPropagationFlag(pageInfo.id)) {
+							const walkId = isContentCollectionCache ? ASTRO_CONTENT_VIRTUAL_MODULE_ID : id;
+							for (const parentInfo of getParentModuleInfos(walkId, this)) {
 								if (moduleIsTopLevelPage(parentInfo) === false) continue;
 
 								const pageViteID = parentInfo.id;

diff --git a/packages/astro/test/experimental-content-collections-css-inline-stylesheets.test.js b/packages/astro/test/experimental-content-collections-css-inline-stylesheets.test.js
@@ -92,7 +92,7 @@ describe('Experimental Content Collections cache - inlineStylesheets to never in
 	});
 });
 
-describe.skip('Experimental Content Collections cache - inlineStylesheets to auto in static output', () => {
+describe('Experimental Content Collections cache - inlineStylesheets to auto in static output', () => {
 	let fixture;
 
 	before(async () => {
@@ -120,7 +120,7 @@ describe.skip('Experimental Content Collections cache - inlineStylesheets to aut
 
 	after(async () => await fixture.clean());
 
-	it.skip(
+	it(
 		'Renders some <style> and some <link> tags',
 		{ todo: 'Styles have the wrong length' },
 		async () => {