From c25814768a4074eacfe202cf9d5c9e10a8b1c18d Mon Sep 17 00:00:00 2001
From: patak <matias.capeletto@gmail.com>
Date: Thu, 15 Feb 2024 13:28:54 +0100
Subject: [PATCH 1/2] fix: cachedTransformMiddleware for direct css requests

---
 .../src/node/server/middlewares/transform.ts  | 33 ++++++++++++-------
 1 file changed, 21 insertions(+), 12 deletions(-)

diff --git a/packages/vite/src/node/server/middlewares/transform.ts b/packages/vite/src/node/server/middlewares/transform.ts
index d335e598a6f358..27446095afba3e 100644
--- a/packages/vite/src/node/server/middlewares/transform.ts
+++ b/packages/vite/src/node/server/middlewares/transform.ts
@@ -60,10 +60,8 @@ export function cachedTransformMiddleware(
         // For direct 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 = req.headers.accept?.includes('text/css')
+        if (!maybeMixedEtag) {
           debugCache?.(`[304] ${prettifyUrl(req.url!, server.config.root)}`)
           res.statusCode = 304
           return res.end()
@@ -176,14 +174,25 @@ 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) && req.headers.accept?.includes('text/css')) {
+          if (!isDirectRequest(url)) {
+            url = injectQuery(url, 'direct')
+          }
+
+          // check if we can return 304 early for direct 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

From b776f1f71ce37731bb93cc61f143e0350752e887 Mon Sep 17 00:00:00 2001
From: patak <matias.capeletto@gmail.com>
Date: Thu, 15 Feb 2024 13:35:38 +0100
Subject: [PATCH 2/2] fix: avoid the optimized path for all CSS requests

---
 .../src/node/server/middlewares/transform.ts    | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/packages/vite/src/node/server/middlewares/transform.ts b/packages/vite/src/node/server/middlewares/transform.ts
index 27446095afba3e..9cdbaf6ce1b44b 100644
--- a/packages/vite/src/node/server/middlewares/transform.ts
+++ b/packages/vite/src/node/server/middlewares/transform.ts
@@ -57,10 +57,10 @@ 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 maybeMixedEtag = req.headers.accept?.includes('text/css')
+        const maybeMixedEtag = isCSSRequest(req.url!)
         if (!maybeMixedEtag) {
           debugCache?.(`[304] ${prettifyUrl(req.url!, server.config.root)}`)
           res.statusCode = 304
@@ -175,14 +175,17 @@ export function transformMiddleware(
         url = unwrapId(url)
 
         // for CSS, we differentiate between normal CSS requests and imports
-        if (isCSSRequest(url) && req.headers.accept?.includes('text/css')) {
-          if (!isDirectRequest(url)) {
+        if (isCSSRequest(url)) {
+          if (
+            req.headers.accept?.includes('text/css') &&
+            !isDirectRequest(url)
+          ) {
             url = injectQuery(url, 'direct')
           }
 
-          // check if we can return 304 early for direct CSS requests
-          // these aren't handled by the cachedTransformMiddleware due to
-          // the browser possibly mixing the etags of direct and imported CSS
+          // 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 &&