Skip to content

Commit

Permalink
fix: cachedTransformMiddleware for direct css requests (#15919)
Browse files Browse the repository at this point in the history
  • Loading branch information
patak-dev authored Feb 15, 2024
1 parent 4172f02 commit 5099028
Showing 1 changed file with 25 additions and 13 deletions.
38 changes: 25 additions & 13 deletions packages/vite/src/node/server/middlewares/transform.ts
Original file line number Diff line number Diff line change
Expand Up @@ -57,13 +57,11 @@ export function cachedTransformMiddleware(
if (ifNoneMatch) {
const moduleByEtag = server.moduleGraph.getModuleByEtag(ifNoneMatch)
if (moduleByEtag?.transformResult?.etag === ifNoneMatch) {
// For direct CSS requests, if the same CSS file is imported in a module,
// For CSS requests, if the same CSS file is imported in a module,
// the browser sends the request for the direct CSS request with the etag
// from the imported CSS module. We ignore the etag in this case.
const mixedEtag =
!req.headers.accept?.includes('text/css') &&
isDirectRequest(moduleByEtag.url)
if (!mixedEtag) {
const maybeMixedEtag = isCSSRequest(req.url!)
if (!maybeMixedEtag) {
debugCache?.(`[304] ${prettifyUrl(req.url!, server.config.root)}`)
res.statusCode = 304
return res.end()
Expand Down Expand Up @@ -176,14 +174,28 @@ export function transformMiddleware(
// not valid browser import specifiers by the importAnalysis plugin.
url = unwrapId(url)

// for CSS, we need to differentiate between normal CSS requests and
// imports
if (
isCSSRequest(url) &&
!isDirectRequest(url) &&
req.headers.accept?.includes('text/css')
) {
url = injectQuery(url, 'direct')
// for CSS, we differentiate between normal CSS requests and imports
if (isCSSRequest(url)) {
if (
req.headers.accept?.includes('text/css') &&
!isDirectRequest(url)
) {
url = injectQuery(url, 'direct')
}

// check if we can return 304 early for CSS requests. These aren't handled
// by the cachedTransformMiddleware due to the browser possibly mixing the
// etags of direct and imported CSS
const ifNoneMatch = req.headers['if-none-match']
if (
ifNoneMatch &&
(await server.moduleGraph.getModuleByUrl(url, false))
?.transformResult?.etag === ifNoneMatch
) {
debugCache?.(`[304] ${prettifyUrl(url, server.config.root)}`)
res.statusCode = 304
return res.end()
}
}

// resolve, load and transform using the plugin container
Expand Down

0 comments on commit 5099028

Please sign in to comment.