Build reproducibility inconsistent CSS file names in vite manifest

[peterpeterparker]

Describe the bug

Validating the reproducibility of build results is innacurate because the CSS resources listed in vite-manifest.json are not consistent.

i.e. if routes are using components, their common CSS are collected to avoid duplication. The generated entries inherit a name that changes on each npm run build. Entries which are added to vite-manifest.json and have for results to produces a different vite-manifest.json on each build. Per extension, validating the build results - e.g. comparing hashes of results - is not possible.

Reproduction

git clone https://github.com/peterpeterparker/my-app-reproducibility
cd my-app-reproducibility
npm ci
npm run build
-- copy build/vite-manifest.json somewhere
npm run build
-- compare build/vite-manifest.json with previous output
-- repeat

Logs

No response

System Info

System:
    OS: macOS 13.1
    CPU: (8) arm64 Apple M2
    Memory: 81.19 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.12.1 - /usr/local/bin/node
    npm: 8.19.2 - /opt/homebrew/bin/npm
  Browsers:
    Brave Browser: 108.1.46.144
    Chrome: 108.0.5359.124
    Firefox: 108.0.1
    Safari: 16.2
  npmPackages:
    @sveltejs/adapter-static: ^1.0.0 => 1.0.0 
    @sveltejs/kit: ^1.0.1 => 1.0.1 
    svelte: ^3.55.0 => 3.55.0 
    vite: ^4.0.3 => 4.0.3

Severity

annoyance

Additional Information

Follow-up of my other issue regarding reproducibility #8290

• likewise, don't know if the issue is a SvelteKit, static adapter, ViteJs or even Sass related issue
• to make the build reproducible a consistent version should be set what is done in the sample repo
• the entries of the vite-manifest.json should be sorted what is solved in the sample repo with a post script

Workaround

Find and remove the duplicated Css scoped in components and extract these to global CSS styles.

[bluwy]

i.e. if routes are using components, their common CSS are collected to avoid duplication. The generated entries inherit a name that changes on each npm run build. Entries which are added to vite-manifest.json and have for results to produces a different vite-manifest.json on each build. Per extension, validating the build results - e.g. comparing hashes of results - is not possible

I don't understand this to tell whether it's a Vite issue or not. I don't see any manifest difference when running the repro build multiple times. The CSS file names are the same to me.

[peterpeterparker]

In our CI or when I build the sample repo I provided locally (OSX), I get different vite-manifest.json. The differences are related to the CSS tree resolution - i.e. the CSS files src list varies among builds.

Here a screenshot, hopes it help. Let me know if still unclear.

[Rich-Harris]

I can reproduce this, though I had to update the repro as we now delete the vite-manifest.json file:

// scripts/make-reproducible.js
import glob from 'tiny-glob/sync.js';
console.log(glob('**', { cwd: '.svelte-kit/output/client/_app/immutable' }).join('\n'));

First run:

assets
assets/ComponentA-24a268d9.css
chunks
chunks/0-6f33aa2b.js
chunks/1-0517ce83.js
chunks/2-20f1e404.js
chunks/3-3f7236d3.js
chunks/4-2ac1ebaf.js
chunks/5-fd48400c.js
chunks/ComponentA-c2bc9bb4.js
chunks/_layout-7e4796dc.js
chunks/index-1664d19c.js
chunks/singletons-90043bb3.js
components
components/error.svelte-52f74891.js
components/layout.svelte-e0888d8b.js
components/pages
components/pages/_page.svelte-443891f6.js
components/pages/a
components/pages/a/_page.svelte-85de7681.js
components/pages/b
components/pages/b/_page.svelte-85de7681.js
components/pages/c
components/pages/c/_page.svelte-9857a16a.js
modules
modules/pages
modules/pages/_layout.ts-bf954bd4.js
start-22da26f5.js

Second run:

assets
assets/_page-24a268d9.css
chunks
chunks/0-6f33aa2b.js
chunks/1-0517ce83.js
chunks/2-20f1e404.js
chunks/3-cec61401.js
chunks/4-0411d579.js
chunks/5-ea0c3f7e.js
chunks/ComponentA-d36a269d.js
chunks/_layout-7e4796dc.js
chunks/index-1664d19c.js
chunks/singletons-90043bb3.js
components
components/error.svelte-52f74891.js
components/layout.svelte-e0888d8b.js
components/pages
components/pages/_page.svelte-443891f6.js
components/pages/a
components/pages/a/_page.svelte-27f46159.js
components/pages/b
components/pages/b/_page.svelte-27f46159.js
components/pages/c
components/pages/c/_page.svelte-86b10778.js
modules
modules/pages
modules/pages/_layout.ts-bf954bd4.js
start-efaf7fc0.js

This seems like a fairly serious bug — as well as making builds non-reproducible, it affects cache stability meaning it directly affects users. Will see if I can create a repro without SvelteKit.

[Rich-Harris]

Struggling a bit to create a repro, so I'll leave this for others...

[Rich-Harris]

Closing in favour of vitejs/vite#11911

[peterpeterparker]

Thanks for digging into this!