Skip to content

chunkImportMap css import uses contenthash #22946

Description

@plusgut

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

.foo {
  color: blue;
}

-> 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

Metadata

Metadata

Assignees

No one assigned

    Type

    Fields

    No fields configured for Bug.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions