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?