Describe the bug
When a chunk imports another chunk with css included, then it is not using the chunk-id, but the content hash instead.
The content of the referencing js file is changing, but the content-hash stays the same.
Reproduction
This commit is showcasing the diff when style.module.css changes:
plusgut/vite-importmap-csschunk@a7fb132
Steps to reproduce
style.module.css
-> lazy-Cvj1z_cO.css
._foo_y7qhu_1 {
color: blue;
}
lazy.js
import style from './style.module.css'
document.querySelector('#app').innerHTML = `<div class="${style.foo}">test</div>`
-> lazy-kzD5pkGc.js
var style_module_default = { foo: "_foo_y7qhu_1" };
document.querySelector("#app").innerHTML = `<div class="${style_module_default.foo}">test</div>`;
main.js
import("lazy.js")
-> index-CxpEbBJD.js
__vite__mapDeps,d=(m.f||(m.f=["assets/lazy-BxW4EhTm.js","assets/lazy-Cvj1z_cO.css"]))
Note that above the lazy.js import got the chunk-id instead of the content-hash, but the css import got the content-hash.
When now the css gets changed color: blue to red it gets a new content-hash "lazy-BzzqbZnv.css"
And lazy.js also gets a new content-hash since the css-module-selectors are not stable
lazy.js ->lazy-Coo9y-m2.js
var style_module_default = { foo: "_foo_n3gm1_1" };
document.querySelector("#app").innerHTML = `<div class="${style_module_default.foo}">test</div>`;
And now the flaw is that the content-hash of main.js stays the same but the content changed
index-CxpEbBJD.js
__vite__mapDeps,d=(m.f||(m.f=["assets/lazy-BxW4EhTm.js","assets/lazy-BzzqbZnv.css"]
When now a browser with cached files from the previous builds hits the site, it reads the old index-CxpEbBJD.js
and fetches the new lazy-Coo9y-m2.js from the importmap and stays on the old lazy-Cvj1z_cO.css
And no css gets applied, because the new css-class _foo_n3gm1_1 does not exist in the old css file.
System Info
System:
OS: Linux 7.0 cpe:/o:nixos:nixos:26.05 26.05 (Yarara)
CPU: (8) x64 Intel(R) Core(TM) i7-8565U CPU @ 1.80GHz
Memory: 12.07 GB / 15.29 GB
Container: Yes
Shell: 4.6.0 - /run/current-system/sw/bin/fish
Binaries:
Node: 24.14.0 - /nix/store/v2210ar51jddnrcx46m53ivv9palc26m-nodejs-24.14.0/bin/node
npm: 11.9.0 - /nix/store/v2210ar51jddnrcx46m53ivv9palc26m-nodejs-24.14.0/bin/npm
Browsers:
Chromium: 147.0.7727.55
Firefox: 149.0.2
Firefox Developer Edition: 149.0.2
npmPackages:
vite: ^8.1.1 => 8.1.4
Used Package Manager
npm
Logs
No response
Validations
Describe the bug
When a chunk imports another chunk with css included, then it is not using the chunk-id, but the content hash instead.
The content of the referencing js file is changing, but the content-hash stays the same.
Reproduction
This commit is showcasing the diff when style.module.css changes:
plusgut/vite-importmap-csschunk@a7fb132
Steps to reproduce
style.module.css
-> lazy-Cvj1z_cO.css
lazy.js
-> lazy-kzD5pkGc.js
main.js
import("lazy.js")-> index-CxpEbBJD.js
Note that above the lazy.js import got the chunk-id instead of the content-hash, but the css import got the content-hash.
When now the css gets changed color: blue to red it gets a new content-hash "lazy-BzzqbZnv.css"
And lazy.js also gets a new content-hash since the css-module-selectors are not stable
lazy.js ->lazy-Coo9y-m2.js
And now the flaw is that the content-hash of main.js stays the same but the content changed
index-CxpEbBJD.js
When now a browser with cached files from the previous builds hits the site, it reads the old index-CxpEbBJD.js
and fetches the new lazy-Coo9y-m2.js from the importmap and stays on the old lazy-Cvj1z_cO.css
And no css gets applied, because the new css-class _foo_n3gm1_1 does not exist in the old css file.
System Info
System: OS: Linux 7.0 cpe:/o:nixos:nixos:26.05 26.05 (Yarara) CPU: (8) x64 Intel(R) Core(TM) i7-8565U CPU @ 1.80GHz Memory: 12.07 GB / 15.29 GB Container: Yes Shell: 4.6.0 - /run/current-system/sw/bin/fish Binaries: Node: 24.14.0 - /nix/store/v2210ar51jddnrcx46m53ivv9palc26m-nodejs-24.14.0/bin/node npm: 11.9.0 - /nix/store/v2210ar51jddnrcx46m53ivv9palc26m-nodejs-24.14.0/bin/npm Browsers: Chromium: 147.0.7727.55 Firefox: 149.0.2 Firefox Developer Edition: 149.0.2 npmPackages: vite: ^8.1.1 => 8.1.4Used Package Manager
npm
Logs
No response
Validations