updated skeleton to v2

package.json

@@ -15,11 +15,13 @@
 	"devDependencies": {
 		"@inlang/core": "^0.9.2",
 		"@inlang/sdk-js": "^0.11.8",
-		"@skeletonlabs/skeleton": "^1.12.0",
+		"@skeletonlabs/skeleton": "2.0.0-rc.2",
+		"@skeletonlabs/tw-plugin": "0.1.0-rc.7",
 		"@sveltejs/adapter-auto": "^2.1.0",
 		"@sveltejs/kit": "^1.23.0",
 		"@tailwindcss/forms": "^0.5.5",
 		"@tailwindcss/typography": "^0.5.9",
+		"@types/node": "^20.5.3",
 		"@types/nodemailer": "^6.4.9",
 		"@types/pg": "^8.10.2",
 		"@typescript-eslint/eslint-plugin": "^6.4.1",
@@ -40,6 +42,7 @@
 		"tslib": "^2.6.2",
 		"typescript": "^5.1.6",
 		"vite": "^4.4.9",
+		"vite-plugin-tailwind-purgecss": "^0.1.3",
 		"zod": "^3.22.2"
 	},
 	"type": "module",

src/app.postcss

@@ -1,3 +1,8 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@tailwind variants;
+
 /*place global styles here */
 html,
 body {

src/lib/components/SignoutForm.svelte

@@ -2,8 +2,9 @@
 	import { enhance } from "$app/forms";
 	import { i } from '@inlang/sdk-js';
 	import { LogOut } from "lucide-svelte";
-    import { modalStore, type ModalSettings } from "@skeletonlabs/skeleton"
+    import { getModalStore, type ModalSettings } from "@skeletonlabs/skeleton"
 
+    let modalStore = getModalStore();
     let formEl: HTMLFormElement;
 
     const signoutConfirmModal = (button: HTMLButtonElement, form: HTMLFormElement): ModalSettings => {

src/lib/components/navigation.svelte

@@ -1,16 +1,16 @@
 <script lang="ts">
 	import { LightSwitch } from '@skeletonlabs/skeleton';
-	import { enhance } from '$app/forms';
-	import { drawerStore } from '@skeletonlabs/skeleton';
-	import { i, languages, language, switchLanguage } from '@inlang/sdk-js';
-
-	function drawerClose(): void { drawerStore.close() };
-	
+	import { getDrawerStore } from '@skeletonlabs/skeleton';
+	import { i, languages, language, switchLanguage } from '@inlang/sdk-js';	
 	import { page } from '$app/stores';
 	import type { NavItems } from '$lib/config/constants';
 	import SignoutForm from './SignoutForm.svelte';
+
     export let navItems: NavItems;
+
 	let selectedLanguage: string = language || 'en';
+	let drawerStore = getDrawerStore();
+	function drawerClose(): void { drawerStore.close() };
 </script>
 
 <nav class="list-nav p-4">

src/routes/+layout.svelte

@@ -1,10 +1,4 @@
 <script lang="ts">
-	// The ordering of these imports is critical to your app working properly
-	import '@skeletonlabs/skeleton/themes/theme-skeleton.css';
-	//import '../theme.postcss';
-	// If you have source.organizeImports set to true in VSCode, then it will auto change this ordering
-	import '@skeletonlabs/skeleton/styles/all.css';
-	// Most of your app wide CSS should be put in this file
 	import '../app.postcss';
 	import {
 		AppBar,
@@ -13,7 +7,7 @@
 		Drawer,
 		Modal,
 		Toast,
-		drawerStore,
+		getDrawerStore,
 		ProgressRadial
 	} from '@skeletonlabs/skeleton';
 	import Navigation from '$lib/components/navigation.svelte';
@@ -24,9 +18,11 @@
 	import BottomBar from '$lib/components/BottomBar.svelte';
 	import { navigating } from '$app/stores';
 	import { loading } from '$lib/stores';
+	import { initializeStores } from '@skeletonlabs/skeleton';
 
+	initializeStores();
 	export let data;
-
+	let drawerStore = getDrawerStore();
 	function drawerOpen(): void {
 		drawerStore.open();
 	}

tailwind.config.ts

@@ -0,0 +1,28 @@
+import { join } from 'path';
+import type { Config } from 'tailwindcss';
+import { skeleton } from '@skeletonlabs/tw-plugin';
+
+const config = {
+	// 2. Opt for dark mode to be handled via the class method
+	darkMode: 'class',
+	content: [
+		'./src/**/*.{html,js,svelte,ts}',
+		// 3. Append the path to the Skeleton package
+		join(require.resolve('@skeletonlabs/skeleton'), '../**/*.{html,js,svelte,ts}')
+	],
+	theme: {
+		extend: {}
+	},
+	plugins: [
+		// 4. Append the Skeleton plugin (after other plugins)
+		skeleton({
+			themes: {
+				// Register each theme within this array:
+				preset: [ "skeleton" ],
+			}
+		}),
+		require('@tailwindcss/forms')
+	]
+} satisfies Config;
+
+export default config;

vite.config.ts

@@ -1,7 +1,8 @@
 import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';
 import inlangPlugin from '@inlang/sdk-js/adapter-sveltekit';
+import { purgeCss } from 'vite-plugin-tailwind-purgecss';
 
 export default defineConfig({
-	plugins: [inlangPlugin(), sveltekit()]
+	plugins: [inlangPlugin(), sveltekit(), purgeCss()]
 });