diff options
| -rw-r--r-- | .changeset/cool-birds-prove.md | 5 | ||||
| -rw-r--r-- | packages/astro/src/core/render/dev/vite.ts | 77 | ||||
| -rw-r--r-- | packages/astro/src/core/util.ts | 9 |
3 files changed, 46 insertions, 45 deletions
diff --git a/.changeset/cool-birds-prove.md b/.changeset/cool-birds-prove.md new file mode 100644 index 000000000..70c190b89 --- /dev/null +++ b/.changeset/cool-birds-prove.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +Fix missing styles for Markdoc files in development diff --git a/packages/astro/src/core/render/dev/vite.ts b/packages/astro/src/core/render/dev/vite.ts index b3efb34bb..39df7d269 100644 --- a/packages/astro/src/core/render/dev/vite.ts +++ b/packages/astro/src/core/render/dev/vite.ts @@ -46,44 +46,45 @@ export async function* crawlGraph( const entryIsStyle = isCSSRequest(id); for (const importedModule of entry.importedModules) { - // A propagation stopping point is a module with the ?astroPropagatedAssets flag. - // When we encounter one of these modules we don't want to continue traversing. - let isPropagationStoppingPoint = false; + if (!importedModule.id) continue; + // some dynamically imported modules are *not* server rendered in time // to only SSR modules that we can safely transform, we check against // a list of file extensions based on our built-in vite plugins - if (importedModule.id) { - // Strip special query params like "?content". - // NOTE: Cannot use `new URL()` here because not all IDs will be valid paths. - // For example, `virtual:image-loader` if you don't have the plugin installed. - const importedModulePathname = importedModule.id.replace(STRIP_QUERY_PARAMS_REGEX, ''); - // If the entry is a style, skip any modules that are not also styles. - // Tools like Tailwind might add HMR dependencies as `importedModules` - // but we should skip them--they aren't really imported. Without this, - // every hoisted script in the project is added to every page! - if (entryIsStyle && !isCSSRequest(importedModulePathname)) { - continue; - } - const isFileTypeNeedingSSR = fileExtensionsToSSR.has( - npath.extname(importedModulePathname) - ); - isPropagationStoppingPoint = ASTRO_PROPAGATED_ASSET_REGEX.test(importedModule.id); - if ( - isFileTypeNeedingSSR && - // Should not SSR a module with ?astroPropagatedAssets - !isPropagationStoppingPoint - ) { - const mod = loader.getModuleById(importedModule.id); - if (!mod?.ssrModule) { - try { - await loader.import(importedModule.id); - } catch { - /** Likely an out-of-date module entry! Silently continue. */ - } + + // Strip special query params like "?content". + // NOTE: Cannot use `new URL()` here because not all IDs will be valid paths. + // For example, `virtual:image-loader` if you don't have the plugin installed. + const importedModulePathname = importedModule.id.replace(STRIP_QUERY_PARAMS_REGEX, ''); + // If the entry is a style, skip any modules that are not also styles. + // Tools like Tailwind might add HMR dependencies as `importedModules` + // but we should skip them--they aren't really imported. Without this, + // every hoisted script in the project is added to every page! + if (entryIsStyle && !isCSSRequest(importedModulePathname)) { + continue; + } + + const isFileTypeNeedingSSR = fileExtensionsToSSR.has(npath.extname(importedModulePathname)); + // A propagation stopping point is a module with the ?astroPropagatedAssets flag. + // When we encounter one of these modules we don't want to continue traversing. + const isPropagationStoppingPoint = ASTRO_PROPAGATED_ASSET_REGEX.test(importedModule.id); + if ( + isFileTypeNeedingSSR && + // Should not SSR a module with ?astroPropagatedAssets + !isPropagationStoppingPoint + ) { + const mod = loader.getModuleById(importedModule.id); + if (!mod?.ssrModule) { + try { + await loader.import(importedModule.id); + } catch { + /** Likely an out-of-date module entry! Silently continue. */ } } } - if (urlDeps.includes(urlId(importedModule.url)) && !isPropagationStoppingPoint) { + + // Make sure the `importedModule` traversed is explicitly imported by the user, and not by HMR + if (urlDeps.includes(importedModule.url) && !isPropagationStoppingPoint) { importedModules.add(importedModule); } } @@ -102,18 +103,10 @@ export async function* crawlGraph( } } -// Virtual modules URL should start with /@id/ but do not -function urlId(url: string) { - if (url.startsWith('astro:scripts')) { - return '/@id/' + url; - } - return url; -} - function getDepsFromEntry(entry: ModuleNode) { let deps = entry.ssrTransformResult?.deps ?? []; if (entry.ssrTransformResult?.dynamicDeps) { - return deps.concat(entry.ssrTransformResult.dynamicDeps); + deps = deps.concat(entry.ssrTransformResult.dynamicDeps); } - return deps; + return deps.map((dep) => unwrapId(dep)); } diff --git a/packages/astro/src/core/util.ts b/packages/astro/src/core/util.ts index 122bf7396..2529e89c2 100644 --- a/packages/astro/src/core/util.ts +++ b/packages/astro/src/core/util.ts @@ -93,11 +93,14 @@ export function viteID(filePath: URL): string { } export const VALID_ID_PREFIX = `/@id/`; +export const NULL_BYTE_PLACEHOLDER = `__x00__`; -// Strip valid id prefix. This is prepended to resolved Ids that are -// not valid browser import specifiers by the importAnalysis plugin. +// Strip valid id prefix and replace null byte placeholder. Both are prepended to resolved ids +// as they are not valid browser import specifiers (by the Vite's importAnalysis plugin) export function unwrapId(id: string): string { - return id.startsWith(VALID_ID_PREFIX) ? id.slice(VALID_ID_PREFIX.length) : id; + return id.startsWith(VALID_ID_PREFIX) + ? id.slice(VALID_ID_PREFIX.length).replace(NULL_BYTE_PLACEHOLDER, '\0') + : id; } export function resolvePages(config: AstroConfig) { |