Regression in CSS output location

[benmccann]

Describe the bug

CSS is output to a different location. That location doesn't match the location in the manifest and the change in location breaks SvelteKit users upgrading to Vite 5 because it breaks relative links to font files and potentially other assets: sveltejs/kit#11085

We could work around it on the SvelteKit side by changing the left hand side of the input object in the Vite config, but the workarounds have some issues. E.g. I could replace / with _, but then the file names get to be awkwardly long and show up differently in the Chrome network tab. If I try to just strip the portion before / then I run into the danger of overwriting the input entries for files with the same name living in different directories.

Reproduction

https://github.com/benmccann/vite5-css-reproduction

Steps to reproduce

pnpm install && pnpm build

Vite 5 produces CSS at dist/assets/lib/example-XpY97b8p.css

Vite 4 produces CSS at dist/assets/example-507eca81.css

System Info

Vite 5.0.2 compared to Vite 4.5.0

Used Package Manager

pnpm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[dominikg]

if you set build.manifest to true in the vite.config.js of the reproduction and run pnpm build, it writes the manifest to
/dist/.vite/manifest.json

this contains

  "src/lib/example.js": {
    "assets": [
      "assets/fira-mono-cyrillic-ext-400-normal-dOGCK5uJ.woff2",
      /* ... */
    ],
    "css": [
      "assets/lib/example-XpY97b8p.css"
    ],
    "file": "lib/example-jnbdGhTu.js",
    "isDynamicEntry": true,
    "isEntry": true,
    "src": "src/lib/example.js"
  },

so in a nested entry, the information does exist.
Switching to vite4 shows the same entry (without the lib part, but moving around assets in build output should be fine as long as the manifest contains the correct references)

However, diffing the manifests generated by vite4 and vite5 shows that the vite5 manifest conains less top level entries, notably

  "src/assets/svelte.svg": {
  "file": "assets/svelte-a39f39b7.svg",
  "src": "src/assets/svelte.svg"
},
"src/lib/example.css": {
  "file": "assets/example-507eca81.css",
  "src": "src/lib/example.css"
},

are only present in vite4 manifest. It also looks like vite5 inlines the svelte svg into main js, while vite4 puts it in assets instead.

[dominikg]

note to others looking at the names and wondering why they might be different, the vite.config.js in the reproduction has custom config https://github.com/benmccann/vite5-css-reproduction/blob/master/vite.config.js#L5

[dominikg]

this mentions changes in the css manifest and sveltekit #14945 cc @bluwy

[benmccann]

The issue is that the CSS file is output in the wrong location. E.g. it's at assets/lib/example-XpY97b8p.css instead of assets/example-XpY97b8p.css. And because it's in the wrong location the relative import of font files is broken.

[benmccann]

this mentions changes in the css manifest and sveltekit #14945 cc @bluwy

Ooh. Yes, I suspect one of the commits on that PR in particular:

c2a750d: generate the filename based on the chunk name

[dominikg]

this seems to be caused by the rollupOptions.input config for lib/example.js ... it's both an entry and a dynamic import (onMount of Counter.svelte). If you remove the entry from vite config, the css file is created in assets/ and the relative font links in example work as expected.

[sapphi-red]

#15154 should fix the incorrect asset paths in CSS files.
#15155 changes the CSS output location, but I'm not sure if this should be merged.

[helhum]

However, diffing the manifests generated by vite4 and vite5 shows that the vite5 manifest conains less top level entries, notably

Is this an intentional change?

To illustrate the changes in manifest.json generation I created a minimal project.

--- a/dist/manifest.json
+++ b/dist/manifest.json
@@ -1,13 +1,9 @@
 {
-  "main.css": {
-    "file": "assets/main-829fb0a8.css",
-    "src": "main.css"
-  },
   "main.js": {
     "css": [
-      "assets/main-829fb0a8.css"
+      "assets/foo-sok_4qEN.css"
     ],
-    "file": "assets/foo-b8911e79.js",
+    "file": "assets/foo-TcdXag5j.js",
     "isEntry": true,
     "src": "main.js"
   }

This change breaks my backend integration with vite, as I need to find the css file that is related to JS entry point separately

[helhum]

I added a new ticket #15161 since this was initially related to a wrong asset URL