css-has-pseudo PostCSS plugin?

[mgruhn]

Has anyone managed to set up the css-has-pseudo plugin for PostCSS with sveltekit (either directly or via postcss-preset-env)? I'm not exceptionally familiar with this plugin but wanted to use it because I have a few situations in which :has would be quite useful, and I'm tired of working around Firefox's lack of an implementation.

I've tried setting it up using svelte-preprocess with the below config. I get no errors it just...doesn't work. I can see it writing the extra CSS selectors, but in the browser, nothing is getting set on the relevant element.

Curious if anyone else has tried using this plugin?

import adapter from '@sveltejs/adapter-auto'
import autoprefixer from 'autoprefixer'
import cssnano from 'cssnano'
import preprocess from 'svelte-preprocess'
import postcssPresetEnv from 'postcss-preset-env'

const presetEnv = postcssPresetEnv({
    stage: 2,
    features: {
        'has-pseudo-class': true,
    },
})

/** @type {import('@sveltejs/kit').Config} */
const config = {
    preprocess: preprocess({
        sourceMap: true,
        postcss: {
            plugins:
                process.env.NODE_ENV === 'production'
                    ? [cssnano, autoprefixer, presetEnv]
                    : [presetEnv],
        },
        scss: {
            renderSync: true,
            sourceMap: true,
            includePaths: ['./src/styles'],
        },
        globalStyle: true,
    }),
    kit: {
        adapter: adapter(),
    },
}

export default config