Is there a better way to handle CSS caching with SvelteKit and Cloudflare? Despite changing CSS file names on build the outdated CSS is still cached and loaded becoming an issue with obfuscation. My current workaround involves modifying the _headers file to adjust caching policies, which feels like a hacky solution. Here's how I'm doing it:
import fs from 'fs';import path from 'path';const __dirname = path.resolve();const buildDir = path.join(__dirname, '.svelte-kit', 'cloudflare');function main() {const headers = `/*.css ! Cache-Control Cache-Control: public, immutable, max-age=1200`; const headersFile = path.join(buildDir, '_headers'); fs.appendFileSync(headersFile, headers);}main();I've explored using SvelteKit's hooks to manage cache control headers, hoping to find a more elegant solution. However, I found that hooks in SvelteKit don't work on static immutable files as they don't get prosses by svelte.
Considering the alternative is some sort of version control in our obfuscation Vite plugin, I dread to think about that. There shouldn't be a problem with deploying updates as I can just set the CSS caching to none, wait till everyone cache expires then deploy the update setting the cache back to some amount of time.