How to make AutoPrefixer work in Sveltekit?

I am trying to implement autoprefixer in my Sveltekit project,

I only use CSS files. They are almost all situated in the src/css folder, except for app.css situated in the src folder.

I have added this in my svelte.config.js (and installed the dependencies) :

// From https://www.reddit.com/r/sveltejs/comments/vggw7r/how_to_use_autoprefixer_and_scss_together_in/
import svelte_preprocess from 'svelte-preprocess'
import autoprefixer from 'autoprefixer'

/** @type {import('@sveltejs/kit').Config} */
const config = {
  preprocess: [
    svelte_preprocess({
      postcss: {
        plugins: [autoprefixer()],
      },
    }),
    vitePreprocess(),
  ],
/***

This is the content of my postcss.config.cjs

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
    // Optimizing tailwind for production https://tailwindcss.com/docs/optimizing-for-production
    ...(process.env.NODE_ENV !== 'development' ? { cssnano: {} } : {})
  }
}

This is the CSS file I expect prefixed :

/* shake.css */

.shake {
  animation-name: shake;
  animation-timing-function: linear;
  animation-duration: 1750ms;
  animation-delay: 500ms;
  animation-iteration-count: 1;
}

@keyframes shake {
  0% {
    transform: translate(5px, 0);
  }
  50% {
    transform: translate(-5px, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}

An example of some prefixed CSS that I would expect in the result :

.shake {
  -moz-animation-name: shake;
}

@-moz-keyframes shake {
  0% {
    -moz-transform: translate(5px, 0);
  }
  50% {
    -moz-transform: translate(-5px, 0);
  }
  100% {
    -moz-transform: translate(0, 0);
  }
}

The full Sveltekit +page.svelte loaded

<style>
.exemple {
  background: #000;
  color: white;
  width: 100px;
  height: 50px;
  padding : 10px;
  margin : 10px;
} 
</style>

<script>
import '$src/css/shake.css'
</script>

<div class="exemple shake"> Test </div>

I restarted the server, Vite starts without problem, but autoprefixer does not seem to work: I see no vendor prefixes on the CSS file imported by this simple page.

I also ran autoprefixer from the commandline: it indeed includes -webkit- prefixes

• How to make autoprefixer work with regular css files ?

• Can it work with svelte's components internal CSS ?

I've got this set up with my SvelteKit project as follows and can confirm that both .css files <style> blocks in .svelte files are autoprefixed correctly.

Dependencies

...
"@sveltejs/kit": "^1.5.0",
"autoprefixer": "^10.4.14",
"postcss": "^8.4.23",
"postcss-load-config": "^4.0.1",
"svelte": "^3.54.0",
"vite": "^4.0.0",
...

svelte.config.js

import adapter from '@sveltejs/adapter-node';
import preprocess from 'svelte-preprocess';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    preprocess: [
        preprocess({
            postcss: true
        })
    ],
    kit: {
        adapter: adapter({ precompress: true })
    }
};

export default config;

postcss.config.js

import autoprefixer from 'autoprefixer';

/** @type {import('postcss-load-config').Config} */
const config = {
    plugins: [autoprefixer]
};

export default config;