CSS hashes change based on absolute filename in pnpm monorepo

Why this is a good first issue

CSS hash generation inconsistency in pnpm monorepos needs path handling adjustment.

AI Summary

The issue involves inconsistent CSS hash generation when using pnpm monorepos due to absolute path differences between environments. The fix likely requires modifying how filenames are processed in the hash function, but may involve understanding workspace protocol resolution. The maintainer has identified rootDir as a factor but the exact solution path isn't fully clear.

Issue Description

Describe the bug

I've recently had problems with some component snapshot tests that fail on CI because Svelte generates different CSS hashes on the CI runner than on my local machine.

This seems to be caused by the introduction of filename based CSS hashing in #16740. It appears that in some cases the cssHash function is given an absolute filename which then leads to different hashes on CI vs. dev because the parent directories are different. It should be noted that i was only able to reproduce when using internal workspace dependencies (using the workspace: protocol) in a pnpm monorepo.

It would be great if the cssHash would not change based on environment details like parent directories and reading #16636 it appears that this was the intention.

Reproduction

open the reproduction example on Stackblitz
wait until the pnpm --dir webapp test command finishes in the terminal
the output should contain a cssHash filename: line followed by an absolute path. the line is produced by an overridden compilerOptions.cssHash function in webapp/svelte.config.js

Logs

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 20.19.1 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.8.2 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm

Severity

annoyance

GitHub Labels

css