astro-purgecss is modifying files keeping the hash

[druettiger]

Describe the bug
The assets built by Astro in the dist/client/_astro/ folder are all named with a hash and therefore are usually be given long cache headers.

astro-purgecss is modifying these files without changing the hash. With long cache headers, browsers will not request updated versions.

To Reproduce
Steps to reproduce the behavior:

1. Run astro build
2. Save contents of a file like dist/client/_astro/generated.HASH.css
3. Modify CSS styles of website
4. Run astro build
5. Save contents of dist/client/_astro/generated.HASH.css
6. Compare file contents
7. Files contents are different but the file name is the same

Expected behavior
astro-purgecss should change the hash after modifying files.

[the-dijkstra]

Actually, I'm not sure if it's the right call to change these filenames. because I assume the same file will produce the same results when passed to purgecss unless the purgecss settings have been changed between builds?

Lets say a file has a hash "ABC" When it is passed to purgecss it will keep the same hash which is wrong because the hash doesn't represent the trimmed file but when cached and the same file was passed to purgecss again it won't change. so the cached content is still valid.

I believe this issue is only valid if the purgecss settings have been changed between 2 builds, correct me if I'm wrong.

[druettiger]

I am afraid the problem already arises when only HTML is changed:

1. Create new empty Astro project with npm create astro@latest
2. Add astro-purgecss with npx astro add astro-purgecss
3. In astro.config.mjs add

   build: {
     inlineStylesheets: 'never'
   }

4. Add styles/global.css file with

   .red {
     color: red;
   }
   .green {
     color: green;
   }

5. In pages/index.astro add import '../styles/global.css'; and

   <p class="red">red</p>

6. Run npm run build
7. The contents of dist/_astro/index.CiM3W3fa.css are

   .red{color:red}

8. In pages/index.astro add

   <p class="green">green</p>

9. Run npm run build
10. The contents of dist/_astro/index.CiM3W3fa.css are

    .red{color:red}.green{color:green}

A user that goes to the webpage after step 6, will cache the CSS file with only one rule forever. If he returns after step 9, he will not get the updated CSS file.

The CSS file contains the right content, but the browser will not download it again because the name did not change.

[the-dijkstra]

Yes indeed, I completely forget about HTML changes. Thanks @druettiger I'll try to look into this soon. Feel free to open a PR if you already know the solution and want it to be released quickly.