How to have different postcss configs for multiple css files in Vite

I am upgrading a project from Laravel Mix to Laravel Vite and have trouble with setting up different postcss plugin config for a single css file.

In the current Mix config there is a css file that has a custom autoprefixer configuration to create extra css for old webkit support. I don't want the main css file filled/bloated with these extra prefixes, so I want to create the same configuration in Laravel Vite.

Laravel Mix css configuration:

mix.postCss("resources/css/app.css", "public/css", [
    require("tailwindcss"),
]).postCss("resources/css/app_pdf.css", "public/css/", [
    require("tailwindcss"),
]).postCss("resources/css/print-test-pdf.css", "public/css/", [
    require("tailwindcss"), autoprefixer({overrideBrowserslist: [
            "chrome 6", "safari 5.1"
        ]})
]).js('resources/js/app.js', 'public/js');

I have tried multiple ways to make it work, but couldn't seem to be able to find out how. Like using Vite config directly (instead of the Laravel plugin) or even the underlying RollupJs config.

Can anyone here tell me how to configure these postcss css files seperately?