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 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 component

<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.

  • How to make autoprefixer work with regular css files ?
  • Can it work with svelte’s components internal CSS ?