Svelte kit + PostCSS how to check if code is taking effect.

[PhantomRex123]

this is my svelte config file

import adapter from '@sveltejs/adapter-auto';
import preprocess from 'svelte-preprocess';
import autoprefixer from 'autoprefixer';
import cssnanoPlugin from 'cssnano';
import postcssPurgecss from '@fullhuman/postcss-purgecss';
import postcssPresetEnv from 'postcss-preset-env';

const preprocessOptions = {
	sourceMap: true, // "you would always want sourcemaps for the IDE" – dummdidumm
	defaults: {
		script: 'typescript',
		style: 'postcss'
	},
	postcss: {
		plugins: [
			// import('autoprefixer')(),
			// import('cssnano')(),
			// import('@fullhuman/postcss-purgecss')(),
			// import('postcss-preset-env'),
			// import('postcss-import'),
			// import('postcss-cssnext'),
			// import('postcss-load-config')
			autoprefixer,
			cssnanoPlugin
			// postcssPurgecss(),
			// postcssPresetEnv
		]
	}
};

/** @type {import('@sveltejs/kit').Config} */
const config = {
	// Consult https://github.com/sveltejs/svelte-preprocess
	// for more information about preprocessors

	preprocess: preprocess(preprocessOptions),

	kit: {
		adapter: adapter()
	}
};

export default config;

And this is my svelte code

<h1>Welcome to SvelteKit <span>red</span></h1>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
<div class="image">tests</div>

<style>
	h1 {
		color: black;
	}

	p {
		color: red;
	}

	::placeholder {
		color: gray;
	}

	.image {
		background-image: url(image@1x.png);
	}
	@media (min-resolution: 2dppx) {
		.image {
			background-image: url(image@2x.png);
		}
	}
</style>

When i'm looking in the browser it doesn't seem this is taking effect, any ideas?