moved to less for styles

package.json

@@ -19,10 +19,12 @@
     "@sveltejs/adapter-auto": "^3.0.0",
     "@sveltejs/kit": "^2.0.0",
     "@sveltejs/vite-plugin-svelte": "^3.0.0",
+    "less": "^4.2.0",
     "prettier": "^3.1.1",
     "prettier-plugin-svelte": "^3.1.2",
     "svelte": "^4.2.7",
     "svelte-check": "^4.0.0",
+    "svelte-preprocess": "^6.0.3",
     "typescript": "^5.0.0",
     "vite": "^5.0.3",
     "vitest": "^2.0.0"

src/app.less

@@ -0,0 +1,13 @@
+@import 'vars.less';
+
+@import (css) url('https://fonts.googleapis.com/css2?family=Rubik:wght@600&display=swap');
+
+body {
+  font-family: @fonts-sans;
+  margin: 0;
+}
+
+h1 {
+  margin: 0;
+  padding: 0;
+}

src/lib/components/headline.svelte

@@ -2,14 +2,14 @@
   <h1><slot /></h1>
 </header>
 
-<style>
+<style lang="less">
   h1 {
     text-align: center;
   }
 
   header {
-    background-color: var(--color-dark);
+    background-color: @color-dark;
-    color: var(--color-light);
+    color: @color-light;
-    padding: var(--padding-md);
+    padding: @padding-md;
   }
 </style>

src/routes/+layout.svelte

@@ -1,25 +1,5 @@
+<script lang="ts">
+  import '../app.less';
+</script>
+
 <slot />
-
-<style>
-  @import url('https://fonts.googleapis.com/css2?family=Rubik:wght@600&display=swap');
-
-  :global(:root) {
-    --color-accent-dark: #a8c3b5;
-    --color-accent-light: #558b6e;
-    --color-danger: #d64933;
-    --color-dark: #2e282a;
-    --color-light: #fbfbfb;
-    --fonts-sans: Rubik, Arial, sans-serif;
-    --padding-md: 0.5em 1em;
-  }
-
-  :global(body) {
-    margin: 0;
-  }
-
-  :global(h1) {
-    font-family: var(--fonts-sans);
-    margin: 0;
-    padding: 0;
-  }
-</style>

src/vars.less

@@ -0,0 +1,12 @@
+// colors
+@color-accent-dark: #a8c3b5;
+@color-accent-light: #558b6e;
+@color-danger: #d64933;
+@color-dark: #2e282a;
+@color-light: #fbfbfb;
+
+// fonts
+@fonts-sans: Rubik, Arial, sans-serif;
+
+// layout
+@padding-md: 0.5em 1em;

svelte.config.js

@@ -1,11 +1,16 @@
 import adapter from '@sveltejs/adapter-auto';
-import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+
+import { sveltePreprocess } from 'svelte-preprocess';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
   // Consult https://kit.svelte.dev/docs/integrations#preprocessors
   // for more information about preprocessors
-  preprocess: vitePreprocess(),
+  preprocess: sveltePreprocess({
+    less: {
+      prependData: `@import 'src/vars.less';`,
+    },
+  }),
 
   kit: {
     // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.