chore(site): LightningCSS (#8929)

* use lighteningcss

* Update sites/svelte.dev/package.json

Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com>

* Update vite

* use browserlist

---------

Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com>

sites/svelte.dev/package.json

@@ -36,9 +36,11 @@
     "@types/marked": "^5.0.0",
     "@types/node": "^20.3.3",
     "@types/prettier": "^2.7.3",
+    "browserslist": "^4.21.9",
     "degit": "^2.8.4",
     "dotenv": "^16.3.1",
     "jimp": "^0.22.8",
+    "lightningcss": "^1.21.5",
     "magic-string": "^0.30.1",
     "marked": "^5.1.0",
     "prettier": "^2.8.8",
@@ -54,7 +56,7 @@
     "svelte-preprocess": "^5.0.4",
     "tiny-glob": "^0.2.9",
     "typescript": "^5.1.6",
-    "vite": "^4.4.2",
+    "vite": "^4.4.3",
     "vite-imagetools": "^5.0.5"
   }
 }

sites/svelte.dev/vite.config.js

@@ -1,5 +1,7 @@
 import { sveltekit } from '@sveltejs/kit/vite';
+import { browserslistToTargets } from 'lightningcss';
 import { readFile } from 'node:fs/promises';
+import browserslist from 'browserslist';
 
 const plugins = [raw(['.ttf']), sveltekit()];
 
@@ -37,6 +39,15 @@ function raw(ext) {
 /** @type {import('vite').UserConfig} */
 const config = {
 	logLevel: 'info',
+	css: {
+		transformer: 'lightningcss',
+		lightningcss: {
+			targets: browserslistToTargets(browserslist(['>0.2%', 'not dead']))
+		}
+	},
+	build: {
+		cssMinify: 'lightningcss'
+	},
 	plugins,
 	optimizeDeps: {
 		exclude: ['@sveltejs/site-kit', '@sveltejs/repl']