@remix-run/assets 0.5.0 → 0.7.0

package/src/lib/styles/compiler.ts

@@ -2,6 +2,7 @@ import * as os from 'node:os'
 import * as path from 'node:path'
 import { fileURLToPath } from 'node:url'
 import { IfNoneMatch } from '@remix-run/headers/if-none-match'
+import { createAssetServerCompilationError } from '../compilation-error.ts'
 import { createFileMatcher } from '../file-matcher.ts'
 import { formatFingerprintedPathname } from '../fingerprint.ts'
 import { createModuleStore } from '../module-store.ts'
@@ -18,6 +19,11 @@ import type { TransformArgs, TransformedStyle } from './transform.ts'
 
 type StyleRecord = ModuleRecord<TransformedStyle, ResolvedStyle, EmittedStyle>
 type StyleStore = ModuleStore<TransformedStyle, ResolvedStyle, EmittedStyle>
+type ResolvedStyleGraphEntry = {
+  invalidationVersion: number
+  resolvedStyle: ResolvedStyle
+}
+type ResolvedStyleGraph = ReadonlyMap<string, ResolvedStyleGraphEntry>
 
 type StyleCompileResult = {
   code: EmittedAsset
@@ -42,7 +48,6 @@ type StyleGetOptions = {
 }
 
 type StyleCompilerOptions = {
-  buildId?: string
   fingerprintAssets: boolean
   getServedFileUrl?(
     identityPath: string,
@@ -109,7 +114,6 @@ export function createStyleCompiler(options: StyleCompilerOptions): StyleCompile
     routes: resolvedOptions.routes,
   }
   let transformArgs: TransformArgs = {
-    buildId: resolvedOptions.buildId ?? null,
     isWatchIgnored,
     minify: resolvedOptions.minify,
     routes: resolvedOptions.routes,
@@ -121,7 +125,8 @@ export function createStyleCompiler(options: StyleCompilerOptions): StyleCompile
   return {
     async getHref(filePath) {
       let resolvedStyle = resolveServedStyleOrThrow(resolveInputFilePath(filePath), resolveArgs)
-      return getServedUrl(resolvedStyle.identityPath)
+      let graph = await resolveStyleGraph(resolvedStyle.identityPath)
+      return getServedUrlFromGraph(resolvedStyle.identityPath, graph)
     },
 
     async getPreloadLayers(filePath) {
@@ -139,17 +144,18 @@ export function createStyleCompiler(options: StyleCompilerOptions): StyleCompile
       let visited = new Set(resolvedEntries)
       let queue = [...resolvedEntries]
       let layers: string[][] = []
+      let graph = await resolveStyleGraph(resolvedEntries)
 
       while (queue.length > 0) {
         let frontier = queue
         queue = []
-        let resolvedStyles = await getOrCreateResolvedStyles(
-          frontier.map((identityPath) => styleStore.get(identityPath)),
-        )
         let layer: string[] = []
 
-        for (let resolvedStyle of resolvedStyles) {
-          layer.push(getServedUrlForResolvedStyle(resolvedStyle))
+        for (let identityPath of frontier) {
+          let graphEntry = graph.get(identityPath)
+          if (!graphEntry) throw new Error(`Missing resolved style ${identityPath}`)
+          let resolvedStyle = graphEntry.resolvedStyle
+          layer.push(await getServedUrlFromGraph(identityPath, graph))
 
           for (let dep of resolvedStyle.deps) {
             if (visited.has(dep)) continue
@@ -220,12 +226,6 @@ export function createStyleCompiler(options: StyleCompilerOptions): StyleCompile
     return resolveFilePath(resolvedOptions.rootDir, filePath)
   }
 
-  async function getOrCreateResolvedStyles(records: StyleRecord[]): Promise<ResolvedStyle[]> {
-    return mapWithConcurrency(records, preloadConcurrency, (record) =>
-      getOrCreateResolvedStyle(record),
-    )
-  }
-
   async function getOrCreateResolvedStyle(record: StyleRecord): Promise<ResolvedStyle> {
     if (record.resolved && styleStore.isResolvedFresh(record)) return record.resolved
 
@@ -296,16 +296,39 @@ export function createStyleCompiler(options: StyleCompilerOptions): StyleCompile
       return record.emitted
     }
 
-    let cacheKey = getRecordCacheKey(record)
+    let graph = await resolveStyleGraph(record.identityPath)
+    return getOrCreateEmittedStyleFromGraph(record, graph)
+  }
+
+  async function getOrCreateEmittedStyleFromGraph(
+    record: StyleRecord,
+    graph: ResolvedStyleGraph,
+  ): Promise<EmittedStyle> {
+    let graphEntry = graph.get(record.identityPath)
+    if (!graphEntry) {
+      throw new Error(`Missing resolved style ${record.identityPath}`)
+    }
+
+    if (
+      record.invalidationVersion === graphEntry.invalidationVersion &&
+      record.emitted &&
+      styleStore.isEmittedFresh(record) &&
+      !hasHmrTimestampedDependency(record.resolved)
+    ) {
+      return record.emitted
+    }
+
+    let cacheKey = getCacheKey(record.identityPath, graphEntry.invalidationVersion)
     let existing = emitInFlightByCacheKey.get(cacheKey)
     if (existing) return existing
 
     let promise = (async () => {
-      let startedVersion = record.invalidationVersion
-      let resolvedStyle = await getOrCreateResolvedStyle(record)
-      let emitResolvedStyleResult = await emitResolvedStyle(resolvedStyle, {
+      let emitResolvedStyleResult = await emitResolvedStyle(graphEntry.resolvedStyle, {
+        fingerprintAssets: resolvedOptions.fingerprintAssets,
         getServedFileUrl: resolvedOptions.getServedFileUrl,
-        getServedUrl,
+        getServedUrl(identityPath) {
+          return getServedUrlFromGraph(identityPath, graph)
+        },
         sourceMaps: resolvedOptions.sourceMaps,
       })
 
@@ -313,7 +336,7 @@ export function createStyleCompiler(options: StyleCompilerOptions): StyleCompile
         throw emitResolvedStyleResult.error
       }
 
-      if (isFresh(record, startedVersion)) {
+      if (isFresh(record, graphEntry.invalidationVersion)) {
         styleStore.setEmitted(record.identityPath, emitResolvedStyleResult.value, null)
       }
 
@@ -331,21 +354,95 @@ export function createStyleCompiler(options: StyleCompilerOptions): StyleCompile
     }
   }
 
-  async function getServedUrl(identityPath: string): Promise<string> {
-    return getServedUrlForResolvedStyle(
-      await getOrCreateResolvedStyle(styleStore.get(identityPath)),
-    )
-  }
+  async function getServedUrlFromGraph(
+    identityPath: string,
+    graph: ResolvedStyleGraph,
+  ): Promise<string> {
+    let graphEntry = graph.get(identityPath)
+    if (!graphEntry) throw new Error(`Missing resolved style ${identityPath}`)
+    let pathname = graphEntry.resolvedStyle.stableUrlPathname
+
+    if (resolvedOptions.fingerprintAssets) {
+      let emittedStyle = await getOrCreateEmittedStyleFromGraph(styleStore.get(identityPath), graph)
+      pathname = formatFingerprintedPathname(
+        graphEntry.resolvedStyle.stableUrlPathname,
+        emittedStyle.fingerprint,
+      )
+    }
 
-  function getServedUrlForResolvedStyle(resolvedStyle: ResolvedStyle): string {
-    let pathname = formatFingerprintedPathname(
-      resolvedStyle.stableUrlPathname,
-      resolvedOptions.fingerprintAssets ? resolvedStyle.fingerprint : null,
-    )
-    let timestamp = styleStore.getHmrUpdateTimestamp(resolvedStyle.identityPath)
+    let timestamp = styleStore.getHmrUpdateTimestamp(graphEntry.resolvedStyle.identityPath)
     return timestamp ? appendTimestamp(pathname, timestamp) : pathname
   }
 
+  async function resolveStyleGraph(
+    rootPath: string | readonly string[],
+  ): Promise<ResolvedStyleGraph> {
+    let resolvedByPath = new Map<string, ResolvedStyleGraphEntry>()
+    let rootPaths = Array.isArray(rootPath) ? rootPath : [rootPath]
+    let discovered = new Set(rootPaths)
+    let queue = [...rootPaths]
+
+    while (queue.length > 0) {
+      let frontier = queue
+      queue = []
+      let graphEntries = await mapWithConcurrency(
+        frontier,
+        preloadConcurrency,
+        async (identityPath): Promise<ResolvedStyleGraphEntry> => {
+          let record = styleStore.get(identityPath)
+          let invalidationVersion = record.invalidationVersion
+          let resolvedStyle = await getOrCreateResolvedStyle(record)
+          return {
+            invalidationVersion,
+            resolvedStyle,
+          }
+        },
+      )
+
+      for (let [index, identityPath] of frontier.entries()) {
+        let graphEntry = graphEntries[index]
+        resolvedByPath.set(identityPath, graphEntry)
+        for (let depPath of graphEntry.resolvedStyle.deps) {
+          if (discovered.has(depPath)) continue
+          discovered.add(depPath)
+          queue.push(depPath)
+        }
+      }
+    }
+
+    assertNoCircularImports(resolvedByPath, rootPaths)
+    return resolvedByPath
+  }
+
+  function assertNoCircularImports(graph: ResolvedStyleGraph, rootPaths: readonly string[]): void {
+    let visited = new Set<string>()
+    let path: string[] = []
+    let pathIndexByIdentity = new Map<string, number>()
+
+    function visit(identityPath: string): void {
+      let cycleStart = pathIndexByIdentity.get(identityPath)
+      if (cycleStart !== undefined) {
+        let cycle = [...path.slice(cycleStart), identityPath]
+        throw createAssetServerCompilationError(
+          `Circular CSS imports are not supported: ${cycle.join(' -> ')}`,
+          { code: 'EMIT_FAILED' },
+        )
+      }
+      if (visited.has(identityPath)) return
+
+      let graphEntry = graph.get(identityPath)
+      if (!graphEntry) throw new Error(`Missing resolved style ${identityPath}`)
+      pathIndexByIdentity.set(identityPath, path.length)
+      path.push(identityPath)
+      for (let depPath of graphEntry.resolvedStyle.deps) visit(depPath)
+      path.pop()
+      pathIndexByIdentity.delete(identityPath)
+      visited.add(identityPath)
+    }
+
+    for (let identityPath of rootPaths) visit(identityPath)
+  }
+
   function getHmrUpdatePathnames(identityPath: string, timestamp: number): string[] {
     let resolvedStyles = findHmrUpdateStyles(identityPath, new Set())
     // Mark update timestamps before invalidating so re-emitted importer stylesheets
@@ -389,7 +486,11 @@ export function createStyleCompiler(options: StyleCompilerOptions): StyleCompile
 }
 
 function getRecordCacheKey(record: StyleRecord): string {
-  return `${record.identityPath}\0${record.invalidationVersion}`
+  return getCacheKey(record.identityPath, record.invalidationVersion)
+}
+
+function getCacheKey(identityPath: string, version: number): string {
+  return `${identityPath}\0${version}`
 }
 
 function isFresh(record: StyleRecord, version: number): boolean {
@@ -407,16 +508,13 @@ function getNotModifiedStyle(
   let emittedStyle = record.emitted
   if (!emittedStyle || options.ifNoneMatch === null) return null
 
-  if (
-    options.requestedFingerprint !== null &&
-    emittedStyle.fingerprint !== options.requestedFingerprint
-  ) {
-    return null
-  }
-
   let asset = getEmittedAssetForRequest(emittedStyle, options.isSourceMapRequest)
   if (!asset) return null
 
+  if (options.requestedFingerprint !== null && asset.fingerprint !== options.requestedFingerprint) {
+    return null
+  }
+
   if (!IfNoneMatch.from(options.ifNoneMatch).matches(asset.etag)) return null
   return { etag: asset.etag, type: 'not-modified' }
 }

package/src/lib/styles/emit.ts

@@ -4,7 +4,7 @@ import {
   createAssetServerCompilationError,
   isAssetServerCompilationError,
 } from '../compilation-error.ts'
-import { hashContent } from '../fingerprint.ts'
+import { formatFingerprintedPathname, hashContent } from '../fingerprint.ts'
 import { composeSourceMaps } from '../source-maps.ts'
 import type { AssetServerCompilationError } from '../compilation-error.ts'
 import type { ResolvedStyle } from './resolve.ts'
@@ -12,12 +12,12 @@ import type { ResolvedStyle } from './resolve.ts'
 export type EmittedAsset = {
   content: string
   etag: string
+  fingerprint: string
 }
 
 export type EmittedStyle = {
   code: EmittedAsset
   fingerprint: string | null
-  importUrls: string[]
   sourceMap: EmittedAsset | null
 }
 
@@ -34,6 +34,7 @@ type EmitResult =
 export async function emitResolvedStyle(
   resolvedStyle: ResolvedStyle,
   options: {
+    fingerprintAssets: boolean
     getServedFileUrl?(
       identityPath: string,
       options: {
@@ -45,30 +46,32 @@ export async function emitResolvedStyle(
   },
 ): Promise<EmitResult> {
   try {
-    let importUrls = await Promise.all(
-      resolvedStyle.deps.map((depPath) => options.getServedUrl(depPath)),
-    )
     let rewriteResult = await rewriteDependencies(resolvedStyle, options)
     let finalCode = rewriteResult.code
+    let sourceMap = rewriteResult.sourceMap
+      ? await createEmittedAsset(rewriteResult.sourceMap)
+      : null
 
     if (rewriteResult.sourceMap) {
       if (options.sourceMaps === 'inline') {
         let encoded = Buffer.from(rewriteResult.sourceMap).toString('base64')
         finalCode += `\n/*# sourceMappingURL=data:application/json;base64,${encoded} */`
       } else if (options.sourceMaps === 'external') {
-        finalCode += `\n/*# sourceMappingURL=${await options.getServedUrl(resolvedStyle.identityPath)}.map */`
+        finalCode += `\n/*# sourceMappingURL=${formatFingerprintedPathname(
+          resolvedStyle.stableUrlPathname,
+          options.fingerprintAssets && sourceMap ? sourceMap.fingerprint : null,
+        )}.map */`
       }
     }
 
+    let code = await createEmittedAsset(finalCode)
+
     return {
       ok: true,
       value: {
-        code: await createEmittedAsset(finalCode),
-        fingerprint: resolvedStyle.fingerprint,
-        importUrls,
-        sourceMap: rewriteResult.sourceMap
-          ? await createEmittedAsset(rewriteResult.sourceMap)
-          : null,
+        code,
+        fingerprint: options.fingerprintAssets ? code.fingerprint : null,
+        sourceMap,
       },
     }
   } catch (error) {
@@ -192,9 +195,11 @@ async function getServedFileUrl(
 }
 
 async function createEmittedAsset(content: string): Promise<EmittedAsset> {
+  let fingerprint = await hashContent(content)
   return {
     content,
-    etag: `W/"${await hashContent(content)}"`,
+    etag: `W/"${fingerprint}"`,
+    fingerprint,
   }
 }
 

package/src/lib/styles/resolve.ts

@@ -38,7 +38,6 @@ type ResolvedDependency =
 export type ResolvedStyle = {
   dependencies: ResolvedDependency[]
   deps: string[]
-  fingerprint: string | null
   identityPath: string
   rawCode: string
   resolvedPath: string
@@ -131,7 +130,6 @@ export async function resolveStyle(
     value: {
       dependencies,
       deps: [...deps],
-      fingerprint: transformed.fingerprint,
       identityPath: record.identityPath,
       rawCode: transformed.rawCode,
       resolvedPath: transformed.resolvedPath,
@@ -175,9 +173,9 @@ export function resolveServedStyleOrThrow(
   let stableUrlPathname = args.routes.toUrlPathname(identityPath)
   if (!stableUrlPathname) {
     throw createAssetServerCompilationError(
-      `File ${identityPath} is outside all configured fileMap entries.`,
+      `File ${identityPath} is outside all configured mounts.`,
       {
-        code: 'FILE_OUTSIDE_FILE_MAP',
+        code: 'FILE_OUTSIDE_MOUNTS',
       },
     )
   }
@@ -232,10 +230,10 @@ function resolveImportDependency(
 
   if (!args.routes.toUrlPathname(identityPath)) {
     throw createAssetServerCompilationError(
-      `Import "${url}" in ${importerPath}, resolved to "${identityPath}", is outside all configured fileMap entries. ` +
-        `Add a matching fileMap entry for this file path, or mark this import as external.`,
+      `Import "${url}" in ${importerPath}, resolved to "${identityPath}", is outside all configured mounts. ` +
+        `Add a matching mount for this file path, or mark this import as external.`,
       {
-        code: 'IMPORT_OUTSIDE_FILE_MAP',
+        code: 'IMPORT_OUTSIDE_MOUNTS',
       },
     )
   }
@@ -302,10 +300,10 @@ function resolveUrlDependency(
 
   if (!args.routes.toUrlPathname(identityPath)) {
     throw createAssetServerCompilationError(
-      `URL "${url}" in ${importerPath}, resolved to "${identityPath}", is outside all configured fileMap entries. ` +
-        `Add a matching fileMap entry for this file path.`,
+      `URL "${url}" in ${importerPath}, resolved to "${identityPath}", is outside all configured mounts. ` +
+        `Add a matching mount for this file path.`,
       {
-        code: 'URL_OUTSIDE_FILE_MAP',
+        code: 'URL_OUTSIDE_MOUNTS',
       },
     )
   }

package/src/lib/styles/transform.ts

@@ -5,7 +5,6 @@ import {
   createAssetServerCompilationError,
   isAssetServerCompilationError,
 } from '../compilation-error.ts'
-import { generateFingerprint } from '../fingerprint.ts'
 import type { ModuleTracking } from '../module-store.ts'
 import { rewriteSourceMapSources, stringifySourceMap } from '../source-maps.ts'
 import type { AssetServerCompilationError } from '../compilation-error.ts'
@@ -25,7 +24,6 @@ type TransformedStyleDependency =
     }
 
 export type TransformedStyle = {
-  fingerprint: string | null
   identityPath: string
   rawCode: string
   resolvedPath: string
@@ -49,7 +47,6 @@ type TransformResult = {
 )
 
 export type TransformArgs = {
-  buildId: string | null
   isWatchIgnored(filePath: string): boolean
   minify: boolean
   routes: CompiledRoutes
@@ -99,9 +96,9 @@ export async function transformStyle(
     let stableUrlPathname = args.routes.toUrlPathname(record.identityPath)
     if (!stableUrlPathname) {
       throw createAssetServerCompilationError(
-        `File ${record.identityPath} is outside all configured fileMap entries.`,
+        `File ${record.identityPath} is outside all configured mounts.`,
         {
-          code: 'FILE_OUTSIDE_FILE_MAP',
+          code: 'FILE_OUTSIDE_MOUNTS',
         },
       )
     }
@@ -149,13 +146,6 @@ export async function transformStyle(
         trackedFiles,
       },
       value: {
-        fingerprint:
-          args.buildId === null
-            ? null
-            : await generateFingerprint({
-                buildId: args.buildId,
-                content: sourceText,
-              }),
         identityPath: record.identityPath,
         rawCode: Buffer.from(transformResult.code).toString('utf8'),
         resolvedPath,

package/src/lib/virtual-store.ts

@@ -0,0 +1,124 @@
+import * as fs from 'node:fs'
+import * as path from 'node:path'
+
+import {
+  getFilePathBaseName,
+  getFilePathDirectory,
+  normalizeFilePath,
+  resolveFilePath,
+} from './paths.ts'
+import { resolveMountFileRoot } from './routes.ts'
+
+const modulesStateFileName = '.modules.yaml'
+const virtualStoreBasePath = '/__@remix/virtual-store'
+const virtualStoreDirLineRE = /^virtualStoreDir:[ \t]*(.+)$/m
+
+// pnpm's global virtual store links packages from a machine-wide directory, so package realpaths
+// land outside `rootDir` and would otherwise have no public URL. The store location comes from
+// `node_modules/.modules.yaml`, which pnpm rewrites on every install.
+export function getVirtualStoreMountConfigs(options: {
+  mounts: Readonly<Record<string, string>>
+  rootDir: string
+}): {
+  mounts: Record<string, string>
+  rootDir: string
+}[] {
+  let virtualStoreDir = findVirtualStoreDir(options.rootDir)
+  if (virtualStoreDir === null) return []
+  // A store inside a mount, such as pnpm's default `node_modules/.pnpm`, already has URLs.
+  if (isWithinMounts(virtualStoreDir, options)) return []
+
+  return [
+    {
+      mounts: {
+        [virtualStoreBasePath]: getFilePathBaseName(virtualStoreDir),
+      },
+      rootDir: getFilePathDirectory(virtualStoreDir),
+    },
+  ]
+}
+
+function findVirtualStoreDir(rootDir: string): string | null {
+  let directory = normalizeFilePath(rootDir)
+
+  // Workspace members share the workspace root's file, so walk up to the nearest one.
+  while (true) {
+    let modulesDir = `${directory}/node_modules`
+    let modulesState = readModulesState(`${modulesDir}/${modulesStateFileName}`)
+    if (modulesState !== null) {
+      let virtualStoreDir = readVirtualStoreDir(modulesState)
+      if (virtualStoreDir === null) return null
+      return realpathDirectory(resolveFilePath(modulesDir, virtualStoreDir))
+    }
+
+    let parentDirectory = normalizeFilePath(path.dirname(directory))
+    if (parentDirectory === directory) return null
+    directory = parentDirectory
+  }
+}
+
+function readVirtualStoreDir(modulesState: string): string | null {
+  // pnpm 10.34 and later write JSON, earlier versions write YAML, and package managers that
+  // mirror the global virtual store write either one. Reading the one scalar this needs keeps
+  // both formats working without a YAML parser.
+  try {
+    let parsedState = JSON.parse(modulesState) as unknown
+    if (parsedState === null || typeof parsedState !== 'object') return null
+
+    let virtualStoreDir = (parsedState as Record<string, unknown>).virtualStoreDir
+    return typeof virtualStoreDir === 'string' ? virtualStoreDir : null
+  } catch {
+    let match = virtualStoreDirLineRE.exec(modulesState)
+    return match === null ? null : unquoteScalar(match[1].trim())
+  }
+}
+
+function unquoteScalar(value: string): string {
+  let quote = value[0]
+  if (value.length > 1 && (quote === "'" || quote === '"') && value.endsWith(quote)) {
+    return value.slice(1, -1)
+  }
+
+  return value
+}
+
+function isWithinMounts(
+  directory: string,
+  options: {
+    mounts: Readonly<Record<string, string>>
+    rootDir: string
+  },
+): boolean {
+  return Object.values(options.mounts).some((fileRoot) => {
+    let mountRoot = resolveMountFileRoot(options.rootDir, fileRoot)
+    return directory === mountRoot || directory.startsWith(`${mountRoot}/`)
+  })
+}
+
+function readModulesState(filePath: string): string | null {
+  try {
+    return fs.readFileSync(filePath, 'utf-8')
+  } catch (error) {
+    if (isPathNotFoundError(error)) return null
+    throw error
+  }
+}
+
+function realpathDirectory(filePath: string): string | null {
+  try {
+    let realPath = fs.realpathSync(filePath)
+    return fs.statSync(realPath).isDirectory() ? normalizeFilePath(realPath) : null
+  } catch (error) {
+    if (isPathNotFoundError(error)) return null
+    throw error
+  }
+}
+
+function isPathNotFoundError(error: unknown): boolean {
+  return (
+    error instanceof Error &&
+    'code' in error &&
+    ((error as NodeJS.ErrnoException).code === 'ENOENT' ||
+      (error as NodeJS.ErrnoException).code === 'ENOTDIR')
+  )
+}