Need help renaming the generated CSS files

[raduab]

How do I rename the generated CSS files to include the package version?

I was able to rename the JS files by creating a Vite plugin and using the outputOptions hook, but for some reason, it does not work for the CSS files.

outputOptions(options) {
  return {
    ...options,
    assetFileNames: options.assetFileNames.replace('[hash]', `[hash]-v${pkg.version}`),
    chunkFileNames: options.chunkFileNames.replace('[hash]', `[hash]-v${pkg.version}`),
    entryFileNames: options.entryFileNames.replace('[hash]', `[hash]-v${pkg.version}`),
  }
}

We're doing this because we've had some issues with Cloudflare returning 200 status code for non-existent files after deploying new code to production. Even after patching the Cloudflare adapter, some of our users are still having trouble loading the site because their browsers cached the erroneous assets for a year (being immutable). We must force their browsers to invalidate the cache without requiring a hard reload.

🙏

[raduab]

For future reference, I was able to successfully rename all assets by replacing the above hook with:

config(config) {
  config.build.rollupOptions.output.assetFileNames =
    config.build.rollupOptions.output.assetFileNames.replace('[hash]', `[hash]-v${pkg.version}`)

  config.build.rollupOptions.output.chunkFileNames =
    config.build.rollupOptions.output.chunkFileNames.replace('[hash]', `[hash]-v${pkg.version}`)

  config.build.rollupOptions.output.entryFileNames =
    config.build.rollupOptions.output.entryFileNames.replace('[hash]', `[hash]-v${pkg.version}`)

  return config
}

I've also included these to the plugin's configuration (post is needed so that it kicks in after SvelteKit has done its job):

apply: 'build',
enforce: 'post',