From d0d639407f79c2cb3c4c46843a91776276d3ad05 Mon Sep 17 00:00:00 2001
From: btea <2356281422@qq.com>
Date: Tue, 3 Dec 2024 17:13:46 +0800
Subject: [PATCH 1/2] fix: rewrite url when image-set and url exist at the same
 time

---
 packages/vite/src/node/plugins/css.ts      | 26 +++++++++++++++++-----
 playground/assets/__tests__/assets.spec.ts |  5 +++++
 playground/assets/index.html               | 12 ++++++++++
 3 files changed, 38 insertions(+), 5 deletions(-)

diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index 8615ba0cf89d22..938d581308856a 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/packages/vite/src/node/plugins/css.ts
@@ -1748,15 +1748,31 @@ const UrlRewritePostcssPlugin: PostCSS.PluginCreator<{
           const replacerForDeclaration = (rawUrl: string) => {
             return opts.replacer(rawUrl, importer)
           }
-          const rewriterToUse = isCssImageSet
+          let rewriterToUse = isCssImageSet
             ? rewriteCssImageSet
             : rewriteCssUrls
           promises.push(
-            rewriterToUse(declaration.value, replacerForDeclaration).then(
-              (url) => {
+            rewriterToUse(declaration.value, replacerForDeclaration)
+              .then((url) => {
                 declaration.value = url
-              },
-            ),
+              })
+              .then(() => {
+                const hasRewriteImageSet = rewriterToUse === rewriteCssImageSet
+                if (
+                  (hasRewriteImageSet && isCssUrl) ||
+                  (!hasRewriteImageSet && isCssImageSet)
+                ) {
+                  rewriterToUse = hasRewriteImageSet
+                    ? rewriteCssUrls
+                    : rewriteCssImageSet
+                  return rewriterToUse(
+                    declaration.value,
+                    replacerForDeclaration,
+                  ).then((url) => {
+                    declaration.value = url
+                  })
+                }
+              }),
           )
         }
       })
diff --git a/playground/assets/__tests__/assets.spec.ts b/playground/assets/__tests__/assets.spec.ts
index 3d9b1310370f86..0f33ca7d4b55fb 100644
--- a/playground/assets/__tests__/assets.spec.ts
+++ b/playground/assets/__tests__/assets.spec.ts
@@ -228,6 +228,11 @@ describe('css url() references', () => {
     })
   })
 
+  test('image-set and url exist at the same time.', async () => {
+    const imageSet = await getBg('.image-set-and-url-exsiting-at-same-time')
+    expect(imageSet).toMatch(assetMatch)
+  })
+
   test('relative in @import', async () => {
     expect(await getBg('.css-url-relative-at-imported')).toMatch(assetMatch)
   })
diff --git a/playground/assets/index.html b/playground/assets/index.html
index b4e71bc85d0897..e41ae78cff0227 100644
--- a/playground/assets/index.html
+++ b/playground/assets/index.html
@@ -102,6 +102,18 @@ <h2>CSS url references</h2>
     CSS background image-set() inline style (with multiple descriptor)
   </span>
 </div>
+<div
+  class="image-set-and-url-exsiting-at-same-time"
+  style="
+    background-image: image-set(url('./nested/asset.png')),
+      url('./nested/asset.png');
+    background-size: 10px 10px;
+  "
+>
+  <span style="background: #fff"
+    >CSS background image-set() and url existing at the same time</span
+  >
+</div>
 <div class="css-url-relative-at-imported">
   <span style="background: #fff"
     >CSS background (relative from @imported file in different dir)</span

From fd40db8cd7117040893a61de94a37e79d68a9cc9 Mon Sep 17 00:00:00 2001
From: btea <2356281422@qq.com>
Date: Wed, 4 Dec 2024 08:26:30 +0800
Subject: [PATCH 2/2] fix: refactor

---
 packages/vite/src/node/plugins/css.ts | 46 ++++++++++++---------------
 1 file changed, 20 insertions(+), 26 deletions(-)

diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index 938d581308856a..4e7ba788729520 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/packages/vite/src/node/plugins/css.ts
@@ -1748,32 +1748,26 @@ const UrlRewritePostcssPlugin: PostCSS.PluginCreator<{
           const replacerForDeclaration = (rawUrl: string) => {
             return opts.replacer(rawUrl, importer)
           }
-          let rewriterToUse = isCssImageSet
-            ? rewriteCssImageSet
-            : rewriteCssUrls
-          promises.push(
-            rewriterToUse(declaration.value, replacerForDeclaration)
-              .then((url) => {
-                declaration.value = url
-              })
-              .then(() => {
-                const hasRewriteImageSet = rewriterToUse === rewriteCssImageSet
-                if (
-                  (hasRewriteImageSet && isCssUrl) ||
-                  (!hasRewriteImageSet && isCssImageSet)
-                ) {
-                  rewriterToUse = hasRewriteImageSet
-                    ? rewriteCssUrls
-                    : rewriteCssImageSet
-                  return rewriterToUse(
-                    declaration.value,
-                    replacerForDeclaration,
-                  ).then((url) => {
-                    declaration.value = url
-                  })
-                }
-              }),
-          )
+          if (isCssUrl && isCssImageSet) {
+            promises.push(
+              rewriteCssUrls(declaration.value, replacerForDeclaration)
+                .then((url) => rewriteCssImageSet(url, replacerForDeclaration))
+                .then((url) => {
+                  declaration.value = url
+                }),
+            )
+          } else {
+            const rewriterToUse = isCssImageSet
+              ? rewriteCssImageSet
+              : rewriteCssUrls
+            promises.push(
+              rewriterToUse(declaration.value, replacerForDeclaration).then(
+                (url) => {
+                  declaration.value = url
+                },
+              ),
+            )
+          }
         }
       })
       if (promises.length) {