fix(css): include .css?url in assets field of manifest (#17623)

vitejs · Jul 15, 2024 · 1465b20 · 1465b20
1 parent c4a2227
commit 1465b20
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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
@@ -0,0 +1,3 @@
+.url {
+  color: red;
+}