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 ?