From c4b6a63b6e42e50e5fb799d122c03a7a14e0730a Mon Sep 17 00:00:00 2001
From: Hugo Nogueira <hnogueira@marabyte.com>
Date: Mon, 3 Jul 2023 15:06:23 +0100
Subject: [PATCH] fix: lightningCSS should load external URL in CSS file
 (#13692)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Arnaud Barré <arnaud.barre@carbometrix.com>
---
 packages/vite/src/node/plugins/css.ts         | 19 +++++++++++++------
 .../__tests__/lightningcss.spec.ts            |  6 ++++++
 playground/css-lightningcss/external-url.css  |  7 +++++++
 playground/css-lightningcss/index.html        |  3 +++
 playground/css-lightningcss/main.js           |  1 +
 5 files changed, 30 insertions(+), 6 deletions(-)
 create mode 100644 playground/css-lightningcss/external-url.css

diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index 9043b9910b6d40..c13683c43905e7 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/packages/vite/src/node/plugins/css.ts
@@ -1420,6 +1420,14 @@ async function rewriteCssImageSet(
     return url
   })
 }
+function skipUrlReplacer(rawUrl: string) {
+  return (
+    isExternalUrl(rawUrl) ||
+    isDataUrl(rawUrl) ||
+    rawUrl[0] === '#' ||
+    varRE.test(rawUrl)
+  )
+}
 async function doUrlReplace(
   rawUrl: string,
   matched: string,
@@ -1433,12 +1441,7 @@ async function doUrlReplace(
     rawUrl = rawUrl.slice(1, -1)
   }
 
-  if (
-    isExternalUrl(rawUrl) ||
-    isDataUrl(rawUrl) ||
-    rawUrl[0] === '#' ||
-    varRE.test(rawUrl)
-  ) {
+  if (skipUrlReplacer(rawUrl)) {
     return matched
   }
 
@@ -2184,6 +2187,10 @@ async function compileLightningCSS(
   for (const dep of res.dependencies!) {
     switch (dep.type) {
       case 'url':
+        if (skipUrlReplacer(dep.url)) {
+          css = css.replace(dep.placeholder, dep.url)
+          break
+        }
         deps.add(dep.url)
         if (urlReplacer) {
           css = css.replace(dep.placeholder, await urlReplacer(dep.url, id))
diff --git a/playground/css-lightningcss/__tests__/lightningcss.spec.ts b/playground/css-lightningcss/__tests__/lightningcss.spec.ts
index a94d09a296e6d6..bff6a01f0223e9 100644
--- a/playground/css-lightningcss/__tests__/lightningcss.spec.ts
+++ b/playground/css-lightningcss/__tests__/lightningcss.spec.ts
@@ -2,6 +2,7 @@ import { expect, test } from 'vitest'
 import {
   editFile,
   findAssetFile,
+  getBg,
   getColor,
   isBuild,
   page,
@@ -65,3 +66,8 @@ test.runIf(isBuild)('minify css', async () => {
   expect(cssFile).toMatch('rgba(')
   expect(cssFile).not.toMatch('#ffff00b3')
 })
+
+test('css with external url', async () => {
+  const css = await page.$('.external')
+  expect(await getBg(css)).toMatch('url("https://vitejs.dev/logo.svg")')
+})
diff --git a/playground/css-lightningcss/external-url.css b/playground/css-lightningcss/external-url.css
new file mode 100644
index 00000000000000..b68d3add7c6517
--- /dev/null
+++ b/playground/css-lightningcss/external-url.css
@@ -0,0 +1,7 @@
+.external {
+  background-image: url('https://vitejs.dev/logo.svg');
+  background-size: 100%;
+  width: 200px;
+  height: 200px;
+  background-color: #bed;
+}
diff --git a/playground/css-lightningcss/index.html b/playground/css-lightningcss/index.html
index 166e477c758396..b37699d332955f 100644
--- a/playground/css-lightningcss/index.html
+++ b/playground/css-lightningcss/index.html
@@ -23,6 +23,9 @@ <h1>Lightning CSS</h1>
 
   <p>Inline CSS module:</p>
   <pre class="modules-inline"></pre>
+
+  <p>External URL</p>
+  <div class="external"></div>
 </div>
 
 <script type="module" src="./main.js"></script>
diff --git a/playground/css-lightningcss/main.js b/playground/css-lightningcss/main.js
index 8391376675565e..7c3d24b5431ed3 100644
--- a/playground/css-lightningcss/main.js
+++ b/playground/css-lightningcss/main.js
@@ -1,6 +1,7 @@
 import './minify.css'
 import './imported.css'
 import mod from './mod.module.css'
+import './external-url.css'
 
 document.querySelector('.modules').classList.add(mod['apply-color'])
 text('.modules-code', JSON.stringify(mod, null, 2))