feat: handle static assets in case-sensitive manner

Author: benmccann

packages/vite/src/node/preview.ts

@@ -15,7 +15,7 @@ import {
 import { openBrowser } from './server/openBrowser'
 import compression from './server/middlewares/compression'
 import { proxyMiddleware } from './server/middlewares/proxy'
-import { resolveHostname, resolveServerUrls } from './utils'
+import { resolveHostname, resolveServerUrls, shouldServe } from './utils'
 import { printServerUrls } from './logger'
 import { resolveConfig } from '.'
 import type { InlineConfig, ResolvedConfig } from '.'
@@ -112,21 +112,30 @@ export async function preview(
   // static assets
   const distDir = path.resolve(config.root, config.build.outDir)
   const headers = config.preview.headers
-  app.use(
-    previewBase,
-    sirv(distDir, {
-      etag: true,
-      dev: true,
-      single: config.appType === 'spa',
-      setHeaders(res) {
-        if (headers) {
-          for (const name in headers) {
-            res.setHeader(name, headers[name]!)
-          }
+  const asset_server = sirv(distDir, {
+    etag: true,
+    dev: true,
+    single: config.appType === 'spa',
+    setHeaders(res) {
+      if (headers) {
+        for (const name in headers) {
+          res.setHeader(name, headers[name]!)
         }
       }
-    })
-  )
+    }
+  })
+  app.use(previewBase, async (req, res, next) => {
+    // TODO: why is this necessary? what's screwing up the request URL?
+    // tons of tests fail without this since we're receiving URLs like //assets/dep-42fa3c.js
+    const fixedUrl = req.url!.startsWith('//')
+      ? req.url!.substring(1)
+      : req.url!
+    const url = new URL(fixedUrl, 'http://example.com')
+    if (shouldServe(url, distDir)) {
+      return asset_server(req, res, next)
+    }
+    next()
+  })
 
   // apply post server hooks from plugins
   postHooks.forEach((fn) => fn && fn())

packages/vite/src/node/server/middlewares/static.ts

@@ -14,6 +14,7 @@ import {
   isInternalRequest,
   isParentDirectory,
   isWindows,
+  shouldServe,
   slash
 } from '../../utils'
 
@@ -52,7 +53,11 @@ export function servePublicMiddleware(
     if (isImportRequest(req.url!) || isInternalRequest(req.url!)) {
       return next()
     }
-    serve(req, res, next)
+    const url = new URL(req.url!, 'http://example.com')
+    if (shouldServe(url, dir)) {
+      return serve(req, res, next)
+    }
+    next()
   }
 }
 

packages/vite/src/node/utils.ts

@@ -1190,3 +1190,35 @@ export const isNonDriveRelativeAbsolutePath = (p: string): boolean => {
   if (!isWindows) return p.startsWith('/')
   return windowsDrivePathPrefixRE.test(p)
 }
+
+/**
+ * Determine if a file is being requested with the correct case, to ensure
+ * consistent behaviour between dev and prod and across operating systems.
+ */
+export function shouldServe(url: URL, assetsDir: string): boolean {
+  const pathname = decodeURIComponent(url.pathname)
+  const file = assetsDir + pathname
+  if (
+    !fs.existsSync(file) ||
+    (!fs.statSync(file).isDirectory() && !hasCorrectCase(file, assetsDir))
+  ) {
+    return false
+  }
+  return true
+}
+
+/**
+ * Note that we can't use realpath here, because we don't want to follow
+ * symlinks.
+ */
+function hasCorrectCase(file: string, assets: string): boolean {
+  if (file === assets) return true
+
+  const parent = path.dirname(file)
+
+  if (fs.readdirSync(parent).includes(path.basename(file))) {
+    return hasCorrectCase(parent, assets)
+  }
+
+  return false
+}

playground/assets/__tests__/assets.spec.ts

@@ -1,3 +1,4 @@
+import fetch from 'node-fetch'
 import { describe, expect, test } from 'vitest'
 import {
   browserLogs,
@@ -12,6 +13,7 @@ import {
   readFile,
   readManifest,
   untilUpdated,
+  viteTestUrl,
   watcher
 } from '~utils'
 
@@ -27,6 +29,11 @@ test('should have no 404s', () => {
   })
 })
 
+test('should get a 404 when using incorrect case', async () => {
+  expect((await fetch(viteTestUrl + 'icon.png')).status).toBe(200)
+  expect((await fetch(viteTestUrl + 'ICON.png')).status).toBe(404)
+})
+
 describe('injected scripts', () => {
   test('@vite/client', async () => {
     const hasClient = await page.$(