Disable CSS minification (independently of JS)

[cbergen]

I prefer to use cssnano and would like to be able to turn off just CSS minification.

More specifically, I am using Vite which is built-in to SvelteKit. The current version of esbuild and terser which is packaged with Vite both incorrectly merge rules which shouldn't be merged. Cssnano has it figured out and can manage this case.

Suggested solution

Ideally a new Vite option would expose this ability.

[Niputi]

https://vitejs.dev/config/#build-minify

[cbergen]

Thanks @Niputi but that also turns off javascript minification, alas.

If using Terser, there are terser minification options but I don't see anything that relates to my specific issue (disabling the merging of css rules). https://vitejs.dev/config/#build-terseroptions

[scsskid]

build.minify: false doesnt affect style assets at all for me

[FatehAK]

Is this feature available? I would like to use cssnano as well since it merges style rules better saving bytes.

[Rich-Harris]

Conversely, we'd like to be able to ensure that CSS emitted from the server build (when using ssrEmitAssets) is minified, or at least that the same minification is used in both cases. The reason is that if you're copying over server-emitted assets (which is necessary to allow server code to use the paths of assets that are not referenced by client code, e.g. to generate an <img> tag in server-rendered HTML), you'll end up with two copies of each .css file — one minified, one not, with different hashes in each case.

This is problematic because the list of assets is used in things like service workers, which will then cache files that will never be referenced by the application.

[bluwy]

In the recent meeting, we decided to expose a new build.cssMinify: boolean option to support this usecase. It should default to the (resolved) build.minify value, unless explicitly specified a different value.