Hash styles by filename rather than contents
#16636
Development PRs
this closes #16636
Before submitting the PR, please make sure you do the following
- It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
- Prefix your PR title with
feat:,fix:,chore:, ordocs:. - This message body should clearly illustrate what problems it solves.
- Ideally, include a test that fails without this PR but passes with it.
- If this PR changes code within
packages/svelte/src, add a changeset (npx changeset).
Tests and linting
- Run the tests with
pnpm testand lint the project withpnpm lint
Closes #16636, alternative to #16697.
Before submitting the PR, please make sure you do the following
- It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
- Prefix your PR title with
feat:,fix:,chore:, ordocs:. - This message body should clearly illustrate what problems it solves.
- Ideally, include a test that fails without this PR but passes with it.
- If this PR changes code within
packages/svelte/src, add a changeset (npx changeset).
Tests and linting
- Run the tests with
pnpm testand lint the project withpnpm lint
Issue
Describe the problem
Svelte adds svelte-xyz123 hashes to CSS rules and the corresponding elements, so that styles don't affect other components. This hash is based on the contents of the <style> block.
This works but it means that the hashes . It might be better to default to hashing based on the filename instead. I think the reason we didn't originally do this was that not all project setups made the filename available to the compiler, but now that most people are using vite-plugin-svelte that's probably not an issue any more.
Describe the proposed solution
Update this...
...to this:
cssHash: fun(({ css, filename, hash }) => {
return `svelte-${hash(filename ?? css)}`;
}),
Importance
nice to have
Info
vite-plugin-svelte does this by default during development to avoid css changes also changing js leading to more hmr updates
a few things to keep in mind:
-
changing the default affects every js module in the app that contains a csshash, leading to a lot of changed chunks just from updating. not breaking but still noteworthy
-
using the filename should ensure that it is not an absolute path, otherwise builds are not reproducible unless executed in the exact same root dir
-
the hash algorithm should be evenly distributed to avoid collisions even when the input isn't ( file paths are very similar )