Add autoprefixer

Vite already has esbuild which has a built-in prefixer (based on the
--target option). However, it seems to only apply on build (when CSS
minification is enabled) and I can’t seem to find a way to run the CSS
through esbuild on the dev server. If this can be figured out, it
should be preferred to avoid the extra dependency.

Author: r-thomson

package-lock.json

@@ -17,6 +17,7 @@
 	"dependencies": {
 		"@sveltejs/vite-plugin-svelte": "3.0.2",
 		"@tsconfig/svelte": "5.0.2",
+		"autoprefixer": "10.4.19",
 		"date-fns": "3.6.0",
 		"firebase": "10.9.0",
 		"svelte": "4.2.12",

package.json

@@ -2,7 +2,8 @@
 	"compilerOptions": {
 		"composite": true,
 		"module": "ESNext",
-		"moduleResolution": "Node"
+		"moduleResolution": "Node",
+		"allowSyntheticDefaultImports": true
 	},
 	"include": ["vite.config.ts"]
 }

tsconfig.node.json

@@ -1,4 +1,5 @@
 import { svelte, vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+import autoprefixer from 'autoprefixer';
 import type { PluginVisualizerOptions } from 'rollup-plugin-visualizer';
 import { defineConfig } from 'vite';
 
@@ -15,6 +16,11 @@ export default defineConfig(({ command, mode }) => {
 					template: 'sunburst',
 				}),
 		],
+		css: {
+			postcss: {
+				plugins: [autoprefixer()],
+			},
+		},
 		server: {
 			port: 3000,
 		},