What tool is being used to minify CSS and can it be configured?

[cbergen]

I can't see how to configure the CSS minification. To either turn it off, or to turn off specific features.

With the following CSS:

::-moz-placeholder {
	color: currentColor;
	opacity: 0.8;
}
:-ms-input-placeholder {
	color: currentColor;
	opacity: 0.8;
}
::placeholder {
	color: currentColor;
	opacity: 0.8;
}

The resulting minified CSS is:

::-moz-placeholder,:-ms-input-placeholder,::placeholder{color:currentColor;opacity:.8}

This merging of rules does not work in some browsers because if the browser encounters a pseudo-element it doesn't understand, it ignores the whole block.

[benaltair]

It's my understanding that vender auto-prefixing was already included in the build script - if you just include the last one, it should be handled automatically with the default pre-processor configuration:

::placeholder {
	color: currentColor;
	opacity: 0.8;
}

[benaltair]

On testing, I think this still combines selectors, but that's perhaps an issue to report to the appropriate repo if you've run into browser bugs with this configuration. For example:

input.svelte-1fb4szi::-moz-placeholder,
input.svelte-1fb4szi:-ms-input-placeholder,
input.svelte-1fb4szi::placeholder {
  color: currentColor;
  opacity:.8
}

[cbergen]

If I stop explicitly using autoprefixer, the prefixing stops. It doesn't appear like autoprefixing is enabled by default in the sveltekit build process. But if I add those prefixed rules into the css manually, the rules are still merged.

It's just not clear to me which tool is minifying the CSS. I assume it's postcss-related - maybe cssnano - but in trying to figure this out, I'd like to know for sure.

If it is cssnano, I still don't know why it's not working. According to this 2017 issue, the problem with ::placeholder rule merging was eventually solved.

[cbergen]

Here's an interesting result. After adding minify: false to the vite.build settings, the CSS is still minified but correctly. It looks like instead of using vite to minify the CSS, this config will use postcss/cssnano instead.

The remaining issue with this is that now JS is not being minified.

// svelte.config.js
export default {
	preprocess: preprocess({
		postcss: true
	}),

	kit: {
		adapter: node({
			out: 'build',
			env: {
				port: 'PORT'
			},
		}),

		target: 'body',

		files: {
			lib: 'src'
		},

		vite: {
			build: {
				minify: false
			}
		}
	}
};

// postcss.config.cjs
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');

module.exports = {
	plugins: [autoprefixer, cssnano]
};

::-moz-placeholder{color:currentColor;opacity:.8}:-ms-input-placeholder{color:currentColor;opacity:.8}::placeholder{color:currentColor;opacity:.8}

[Theo-Steiner]

Vite uses esbuild to minify css and javascript, so if you set minify: false this will also disable JS minification, as you noticed.
Vite does however expose a property called build.cssTarget, which allows you to set the (lowest) target platform your app cares about. → esbuild documentation
By default, this is set to esnext, which is probably why your css rules are unified (because the latest browsers all can handle this). Now I can't test this out for you, since I don't know which browser and which version doesn't support the merging of rules, but you can just give it a shot by setting the vite option of build.cssTarget. Let's hope esbuild knows that it shouldn't merge rules for the browser you specify!

[cbergen]

The issue with the prefixed ::placeholder selectors is still an issue though since a standards-compliant browser is supposed to ignore the whole block if even one of the pseudo-selectors is unrecognized.

I guess the issue is with esbuild css minification. This issue related to this exact problem was just posted a few hours ago: evanw/esbuild#1776