From 1465b2064ee23ac5df5414b13355a394ccd931af Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=BF=A0=20/=20green?= <green@sapphi.red>
Date: Tue, 16 Jul 2024 06:16:43 +0900
Subject: [PATCH] fix(css): include `.css?url` in assets field of manifest
 (#17623)

---
 packages/vite/src/node/plugins/css.ts                       | 4 +++-
 .../__tests__/backend-integration.spec.ts                   | 5 +++++
 playground/backend-integration/frontend/entrypoints/main.ts | 6 ++++++
 playground/backend-integration/frontend/styles/url.css      | 3 +++
 4 files changed, 17 insertions(+), 1 deletion(-)
 create mode 100644 playground/backend-integration/frontend/styles/url.css

diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index 7626b45a80af58..892955164a2e09 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/packages/vite/src/node/plugins/css.ts
@@ -711,8 +711,10 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
             .get(config)!
             .set(referenceId, { originalName: originalFilename })
 
+          const filename = this.getFileName(referenceId)
+          chunk.viteMetadata!.importedAssets.add(cleanUrl(filename))
           const replacement = toOutputFilePathInJS(
-            this.getFileName(referenceId),
+            filename,
             'asset',
             chunk.fileName,
             'js',
diff --git a/playground/backend-integration/__tests__/backend-integration.spec.ts b/playground/backend-integration/__tests__/backend-integration.spec.ts
index 669239af237846..5dbfd55177d2d8 100644
--- a/playground/backend-integration/__tests__/backend-integration.spec.ts
+++ b/playground/backend-integration/__tests__/backend-integration.spec.ts
@@ -36,6 +36,7 @@ describe.runIf(isBuild)('build', () => {
   test('manifest', async () => {
     const manifest = readManifest('dev')
     const htmlEntry = manifest['index.html']
+    const mainTsEntry = manifest['main.ts']
     const cssAssetEntry = manifest['global.css']
     const pcssAssetEntry = manifest['foo.pcss']
     const scssAssetEntry = manifest['nested/blue.scss']
@@ -44,6 +45,10 @@ describe.runIf(isBuild)('build', () => {
     const iconEntrypointEntry = manifest['icon.png']
     expect(htmlEntry.css.length).toEqual(1)
     expect(htmlEntry.assets.length).toEqual(1)
+    expect(mainTsEntry.assets?.length ?? 0).toBeGreaterThanOrEqual(1)
+    expect(mainTsEntry.assets).toContainEqual(
+      expect.stringMatching(/assets\/url-[-\w]{8}\.css/),
+    )
     expect(cssAssetEntry?.file).not.toBeUndefined()
     expect(cssAssetEntry?.isEntry).toEqual(true)
     expect(pcssAssetEntry?.file).not.toBeUndefined()
diff --git a/playground/backend-integration/frontend/entrypoints/main.ts b/playground/backend-integration/frontend/entrypoints/main.ts
index f5a332191dd9e4..e1ff0a32bb4177 100644
--- a/playground/backend-integration/frontend/entrypoints/main.ts
+++ b/playground/backend-integration/frontend/entrypoints/main.ts
@@ -1,4 +1,10 @@
 import 'vite/modulepreload-polyfill'
+import cssUrl from '../styles/url.css?url'
+
+const cssLink = document.createElement('link')
+cssLink.rel = 'stylesheet'
+cssLink.href = cssUrl
+document.querySelector('head').prepend(cssLink)
 
 export const colorClass = 'text-black'
 
diff --git a/playground/backend-integration/frontend/styles/url.css b/playground/backend-integration/frontend/styles/url.css
new file mode 100644
index 00000000000000..6c9daf3ed51d1f
--- /dev/null
+++ b/playground/backend-integration/frontend/styles/url.css
@@ -0,0 +1,3 @@
+.url {
+  color: red;
+}