From 0fd36bdb383297b32cc523b57d2442132da41595 Mon Sep 17 00:00:00 2001 From: Matthew Phillips Date: Thu, 28 Mar 2024 10:31:41 -0400 Subject: [PATCH] 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 --------- Co-authored-by: Florian Lefebvre --- .changeset/tricky-cobras-mate.md | 5 ++++ packages/astro/src/content/index.ts | 2 +- packages/astro/src/content/utils.ts | 10 ++++++- .../src/core/build/plugins/plugin-css.ts | 26 ++++++------------- ...collections-css-inline-stylesheets.test.js | 4 +-- 5 files changed, 25 insertions(+), 22 deletions(-) create mode 100644 .changeset/tricky-cobras-mate.md diff --git a/.changeset/tricky-cobras-mate.md b/.changeset/tricky-cobras-mate.md new file mode 100644 index 0000000000..6cd26872f6 --- /dev/null +++ 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 index 92c8cbdec6..582035ece9 100644 --- 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 index c84c0984d7..ac0f35ceec 100644 --- 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 index 6a4ca393dd..4a83b8c171 100644 --- 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 index 6722fc46bc..7f7392e201 100644 --- 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