postcss-conditionals with mixins (vite + postcss.config.js)

I'm having an issue converting my postcss conditionals to css. I'm using vite to process the files and output a css file. Everything seems to be working up until the point that I try to convert the conditionals (see below).

Here is my vite file:

import { defineConfig } from 'vite';
import postcss from './postcss.config.js';
import dns from 'dns';

dns.setDefaultResultOrder('verbatim');

export default defineConfig({
    root: 'src',
    build: {
        manifest: 'vite-manifest.json',
        rollupOptions: {
            input: {
                main: './src/scripts/main.js',
            },
        },
        outDir: '../dist',
        emptyOutDir: true,
    },
    css: {
        postcss,
        devSourcemap: true,
    },
    server: {
        hmr: {
            protocol: 'ws',
        },
    },
});

Here is a simplified version of my postcss file:

import atImport from 'postcss-import';
import atMixins from 'postcss-mixins';
import atIf from 'postcss-conditionals';
import nested from 'postcss-nested';

export default {
    plugins: [
        atImport,
        atMixins,
        atIf,
        nested,
    ],
};

The mixin I'm trying to parse:

@define-mixin center-x $position, $distance {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);

    @if $position == top {
        top: $distance;
        bottom: auto;
    } @else {
        top: auto;
        bottom: $distance;
    }
}

This gives me this error: [vite:css] postcss-conditionals: src\styles\base\mixins.css:6:5: Failed to parse expression file: src/styles/main.css error during build: CssSyntaxError: postcss-conditionals: src\styles\base\mixins.css:10:5: Failed to parse expression

Furthermore replacing the if else inside the mixin with:

@if 3 < 5 {
    background: green;
}

doesn't give me that error.

Maybe the mixin variables aren't resolved yet before the conditionals can use them but I don't know how to get those resolved first. Really hope someone knows how to fix this.