Migrate from sass to stylus for improved formatting and use functions

package.json

@@ -24,9 +24,10 @@
 		"prettier": "^2.8.8",
 		"prettier-plugin-svelte": "^2.10.1",
 		"prettier-plugin-tailwindcss": "^0.3.0",
-		"sass": "^1.63.6",
+		"stylus": "^0.59.0",
 		"svelte": "^4.0.5",
 		"svelte-check": "^3.4.5",
+		"svelte-preprocess": "^5.0.4",
 		"sveltekit-autoimport": "^1.7.0",
 		"tslib": "^2.6.0",
 		"typescript": "^5.1.6",

pnpm-lock.yaml

@@ -43,15 +43,18 @@ devDependencies:
   prettier-plugin-tailwindcss:
     specifier: ^0.3.0
     version: 0.3.0(prettier-plugin-svelte@2.10.1)(prettier@2.8.8)
-  sass:
+  stylus:
-    specifier: ^1.63.6
+    specifier: ^0.59.0
-    version: 1.63.6
+    version: 0.59.0
   svelte:
     specifier: ^4.0.5
     version: 4.0.5
   svelte-check:
     specifier: ^3.4.5
-    version: 3.4.5(postcss@8.4.25)(sass@1.63.6)(svelte@4.0.5)
+    version: 3.4.5(postcss@8.4.25)(stylus@0.59.0)(svelte@4.0.5)
+  svelte-preprocess:
+    specifier: ^5.0.4
+    version: 5.0.4(postcss@8.4.25)(stylus@0.59.0)(svelte@4.0.5)(typescript@5.1.6)
   sveltekit-autoimport:
     specifier: ^1.7.0
     version: 1.7.0
@@ -66,10 +69,14 @@ devDependencies:
     version: 0.53.5(postcss@8.4.25)(vite@4.4.2)
   vite:
     specifier: ^4.4.2
-    version: 4.4.2(sass@1.63.6)
+    version: 4.4.2(stylus@0.59.0)
 
 packages:
 
+  /@adobe/css-tools@4.2.0:
+    resolution: {integrity: sha512-E09FiIft46CmH5Qnjb0wsW54/YQd69LsxeKUOWawmws1XWvyFGURnAChH0mlr7YPFR1ofwvUQfcL0J3lMxXqPA==}
+    dev: true
+
   /@ampproject/remapping@2.2.1:
     resolution: {integrity: sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==}
     engines: {node: '>=6.0.0'}
@@ -415,7 +422,7 @@ packages:
       sirv: 2.0.3
       svelte: 4.0.5
       undici: 5.22.1
-      vite: 4.4.2(sass@1.63.6)
+      vite: 4.4.2(stylus@0.59.0)
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -431,7 +438,7 @@ packages:
       '@sveltejs/vite-plugin-svelte': 2.4.2(svelte@4.0.5)(vite@4.4.2)
       debug: 4.3.4
       svelte: 4.0.5
-      vite: 4.4.2(sass@1.63.6)
+      vite: 4.4.2(stylus@0.59.0)
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -450,7 +457,7 @@ packages:
       magic-string: 0.30.1
       svelte: 4.0.5
       svelte-hmr: 0.15.2(svelte@4.0.5)
-      vite: 4.4.2(sass@1.63.6)
+      vite: 4.4.2(stylus@0.59.0)
       vitefu: 0.2.4(vite@4.4.2)
     transitivePeerDependencies:
       - supports-color
@@ -668,7 +675,7 @@ packages:
       chokidar: 3.5.3
       fast-glob: 3.3.0
       magic-string: 0.30.1
-      vite: 4.4.2(sass@1.63.6)
+      vite: 4.4.2(stylus@0.59.0)
     transitivePeerDependencies:
       - rollup
     dev: true
@@ -992,10 +999,6 @@ packages:
     engines: {node: '>=10.17.0'}
     dev: true
 
-  /immutable@4.3.0:
-    resolution: {integrity: sha512-0AOCmOip+xgJwEVTQj1EfiDDOkPmuyllDuTuEX+DDXUgapLAsBIfkg3sxCYyCEA8mQqZrrxPUGjcOQ2JS3WLkg==}
-    dev: true
-
   /import-fresh@3.3.0:
     resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
     engines: {node: '>=6'}
@@ -1447,14 +1450,8 @@ packages:
       rimraf: 2.7.1
     dev: true
 
-  /sass@1.63.6:
+  /sax@1.2.4:
-    resolution: {integrity: sha512-MJuxGMHzaOW7ipp+1KdELtqKbfAWbH7OLIdoSMnVe3EXPMTmxTmlaZDCTsgIpPCs3w99lLo9/zDKkOrJuT5byw==}
+    resolution: {integrity: sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==}
-    engines: {node: '>=14.0.0'}
-    hasBin: true
-    dependencies:
-      chokidar: 3.5.3
-      immutable: 4.3.0
-      source-map-js: 1.0.2
     dev: true
 
   /set-cookie-parser@2.6.0:
@@ -1501,6 +1498,11 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /source-map@0.7.4:
+    resolution: {integrity: sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==}
+    engines: {node: '>= 8'}
+    dev: true
+
   /sourcemap-codec@1.4.8:
     resolution: {integrity: sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==}
     deprecated: Please use @jridgewell/sourcemap-codec instead
@@ -1523,7 +1525,20 @@ packages:
       min-indent: 1.0.1
     dev: true
 
-  /svelte-check@3.4.5(postcss@8.4.25)(sass@1.63.6)(svelte@4.0.5):
+  /stylus@0.59.0:
+    resolution: {integrity: sha512-lQ9w/XIOH5ZHVNuNbWW8D822r+/wBSO/d6XvtyHLF7LW4KaCIDeVbvn5DF8fGCJAUCwVhVi/h6J0NUcnylUEjg==}
+    hasBin: true
+    dependencies:
+      '@adobe/css-tools': 4.2.0
+      debug: 4.3.4
+      glob: 7.2.3
+      sax: 1.2.4
+      source-map: 0.7.4
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /svelte-check@3.4.5(postcss@8.4.25)(stylus@0.59.0)(svelte@4.0.5):
     resolution: {integrity: sha512-FsD/CUVdEI0F9sfylh1Fe15kDjvvbyBxzDpACPsdq0EASgaZukBXaMXofpxlgmWsgVET3OynMQlbtUQoWCz9Rw==}
     hasBin: true
     peerDependencies:
@@ -1536,7 +1551,7 @@ packages:
       picocolors: 1.0.0
       sade: 1.8.1
       svelte: 4.0.5
-      svelte-preprocess: 5.0.4(postcss@8.4.25)(sass@1.63.6)(svelte@4.0.5)(typescript@5.1.6)
+      svelte-preprocess: 5.0.4(postcss@8.4.25)(stylus@0.59.0)(svelte@4.0.5)(typescript@5.1.6)
       typescript: 5.1.6
     transitivePeerDependencies:
       - '@babel/core'
@@ -1559,7 +1574,7 @@ packages:
       svelte: 4.0.5
     dev: true
 
-  /svelte-preprocess@5.0.4(postcss@8.4.25)(sass@1.63.6)(svelte@4.0.5)(typescript@5.1.6):
+  /svelte-preprocess@5.0.4(postcss@8.4.25)(stylus@0.59.0)(svelte@4.0.5)(typescript@5.1.6):
     resolution: {integrity: sha512-ABia2QegosxOGsVlsSBJvoWeXy1wUKSfF7SWJdTjLAbx/Y3SrVevvvbFNQqrSJw89+lNSsM58SipmZJ5SRi5iw==}
     engines: {node: '>= 14.10.0'}
     requiresBuild: true
@@ -1601,9 +1616,9 @@ packages:
       detect-indent: 6.1.0
       magic-string: 0.27.0
       postcss: 8.4.25
-      sass: 1.63.6
       sorcery: 0.11.0
       strip-indent: 3.0.0
+      stylus: 0.59.0
       svelte: 4.0.5
       typescript: 5.1.6
     dev: true
@@ -1731,7 +1746,7 @@ packages:
       unist-util-stringify-position: 2.0.3
     dev: true
 
-  /vite@4.4.2(sass@1.63.6):
+  /vite@4.4.2(stylus@0.59.0):
     resolution: {integrity: sha512-zUcsJN+UvdSyHhYa277UHhiJ3iq4hUBwHavOpsNUGsTgjBeoBlK8eDt+iT09pBq0h9/knhG/SPrZiM7cGmg7NA==}
     engines: {node: ^14.18.0 || >=16.0.0}
     hasBin: true
@@ -1762,7 +1777,7 @@ packages:
       esbuild: 0.18.11
       postcss: 8.4.25
       rollup: 3.26.2
-      sass: 1.63.6
+      stylus: 0.59.0
     optionalDependencies:
       fsevents: 2.3.2
     dev: true
@@ -1775,7 +1790,7 @@ packages:
       vite:
         optional: true
     dependencies:
-      vite: 4.4.2(sass@1.63.6)
+      vite: 4.4.2(stylus@0.59.0)
     dev: true
 
   /which@2.0.2:

src/global.sass

@@ -1,105 +0,0 @@
-@font-face
-	font-family: "Inter"
-	src: url("/Inter.woff2") format("woff2"), url("/Inter.ttf") format("ttf")
-	font-display: swap
-
-@font-face
-	font-family: "Inter"
-	src: url("/InterItalic.woff2") format("woff2"), url("/InterItalic.ttf") format("ttf")
-	font-style: italic
-	font-display: swap
-	
-:root, body
-	padding: 0
-	margin: 0
-	background: #100f0e
-	color: white
-	@media (prefers-color-scheme: light)
-		background: #e6e4e3
-		color: black
-
-	font-family: "Inter", sans-serif
-
-a
-	@apply transition-colors
-	text-decoration: none
-	&:not(.txt)
-		@apply text-orange-500
-		&:hover
-			@apply text-orange-300
-			@media (prefers-color-scheme: light)
-				@apply text-orange-700
-		&:active
-			@apply text-orange-600
-			@media (prefers-color-scheme: light)
-				@apply text-orange-400
-	.txt
-		@apply text-white
-		&:hover
-			@apply text-#aaa
-		&:active
-			@apply text-#888
-
-hr
-	border: none
-	border-top: 1px solid #464443
-	@media (prefers-color-scheme: light)
-		border-top: 1px solid #a6a4a3
-
-::-webkit-scrollbar
-	position: fixed
-	width: 1rem
-	height: 0.5rem
-	&-track, &-corner
-		background: #282625
-		@media (prefers-color-scheme: light)
-			background: white
-
-	&-thumb
-		background: #181615
-		border: 0.2rem solid #282625
-		border-radius: 1rem
-		width: 0.5rem
-		
-		&:hover
-			background: #464443
-		&:active
-			background: #3f3d3c
-
-		@media (prefers-color-scheme: light)
-			background: #d6d4d3
-			border: 0.2rem solid white
-			&:hover
-				background: #a6a4a3
-			&:active
-				background: #bfbdbc
-
-// Utility classes
-
-.bg-a
-	background: #1f1c1d
-	@media (prefers-color-scheme: light)
-		background: white
-
-.bg-bg
-	background: #100f0e
-
-.content
-	@apply bg-a p-4 rounded-lg shadow-lg
-
-	background: #1f1c1d
-	@media (prefers-color-scheme: light)
-		background: white
-
-.logo
-	filter: drop-shadow(0 0 5px #fffa) invert(0)
-	@media (prefers-color-scheme: light)
-		filter: drop-shadow(0 0 5px #000a)
-
-li ul
-	list-style-type: circle
-	margin: 0.3rem 0 0.3rem -1rem
-
-main
-	> h1, > h2, > h3, > h4, > h5, > h6
-		margin-left: 1rem

src/global.styl

@@ -0,0 +1,109 @@
+@import "./variables.styl"
+		
+@font-face
+	font-family "Inter"
+	src url("/Inter.woff2") format("woff2"),
+		url("/Inter.ttf") format("ttf")
+	font-display swap
+
+@font-face
+	font-family "Inter"
+	src url("/InterItalic.woff2") format("woff2"),
+		url("/InterItalic.ttf") format("ttf")
+	font-style italic
+	font-display swap
+	
+:root, body
+	padding 0
+	margin 0
+	background #100f0e
+	color white
+	+lightTheme()
+		background #e6e4e3
+		color black
+
+	font-family "Inter", sans-serif
+
+a
+	@apply transition-colors
+	text-decoration none
+	&:not(.txt)
+		@apply text-orange-500
+		&:hover
+			@apply text-orange-300
+			+lightTheme()
+				@apply text-orange-700
+		&:active
+			@apply text-orange-600
+			+lightTheme()
+				@apply text-orange-400
+	.txt
+		@apply text-white
+		&:hover
+			@apply text-#aaa
+		&:active
+			@apply text-#888
+
+hr
+	border none
+	border-top 1px solid #464443
+	+lightTheme()
+		border-top 1px solid #a6a4a3
+
+::-webkit-scrollbar
+	position fixed
+	width 1rem
+	height 0.5rem
+	&-track, &-corner
+		background #282625
+		+lightTheme()
+			background white
+
+	&-thumb
+		background #181615
+		border 0.2rem solid #282625
+		border-radius 1rem
+		width 0.5rem
+		
+		&:hover
+			background #464443
+		&:active
+			background #3f3d3c
+
+		+lightTheme()
+			background #d6d4d3
+			border 0.2rem solid white
+			&:hover
+				background #a6a4a3
+			&:active
+				background #bfbdbc
+
+// Utility classes
+
+.bg-a
+	background #1f1c1d
+	+lightTheme()
+		background white
+
+.bg-bg
+	background #100f0e
+
+.content
+	@apply bg-a p-4 rounded-lg shadow-lg
+
+	background #1f1c1d
+	+lightTheme()
+		background white
+
+.logo
+	filter drop-shadow(0 0 5px #fffa) invert(0)
+	+lightTheme()
+		filter drop-shadow(0 0 5px #000a)
+
+li ul
+	list-style-type circle
+	margin 0.3rem 0 0.3rem -1rem
+
+main
+	> h1, > h2, > h3, > h4, > h5, > h6
+		margin-left 1rem

src/lib/components/Footer.svelte

@@ -8,22 +8,20 @@
 	</nav>
 </footer>
 
-<style lang="sass">
+<style lang="stylus">
 	nav
-		color: #8c8b8a
+		color #8c8b8a
-		@media (prefers-color-scheme: light)
+		+lightTheme()
-			color: #4c4b4a
+			color #4c4b4a
 		a
-			text-decoration: none
+			text-decoration none
 
-			color: white
+			color white
 			&:hover
-				color: #aaa
+				color #aaa
 
-			@media (prefers-color-scheme: light)
+			+lightTheme()
-				color: black
+				color black
 				&:hover
-					color: #888
+					color #888
-				
-
 </style>

src/lib/components/Navbar.svelte

@@ -20,34 +20,34 @@
 	</nav>
 </div>
 
-<style lang="sass">
+<style lang="stylus">
 	nav a
 		@apply no-underline me-5 rounded-1 transition
 
-		margin: 5px 1rem auto 0
+		margin 5px 1rem auto 0
 
-		font-size: 1.3rem
+		font-size 1.3rem
-		@media screen and (max-width: 1023px)
+		+-lg()
-			font-size: 1rem
+			font-size 1rem
 
-		color: white
+		color white
-		@media (prefers-color-scheme: light)
+		+lightTheme()
-			color: black
+			color black
 
-		@media screen and (min-width: 1024px)
+		+lg()
 			&::before
-				color: #aaa
+				color #aaa
-				transition: 0.25s
+				transition 0.25s
-				content: "→ "
+				content "→ "
-				opacity: 0
+				opacity 0
 
 	a
 		&:hover
-			color: #aaa
+			color #aaa
 			&::before
-				margin-right: 0.5rem
+				margin-right 0.5rem
-				opacity: 1
+				opacity 1
 
 		&:active
-			color: #7f7f7f
+			color #7f7f7f
 </style>

src/lib/components/Stars.svelte

@@ -8,13 +8,15 @@
 		style="--rating: {Math.min(1, Math.min(5, rating - i)) * 100}%" />
 {/each}
 
-<style lang="sass">
+<style lang="stylus">
 	div
 		// Fill each star with a gradient based on the rating
-		background: linear-gradient(to right, #f1c40f var(--rating), #4f4d4c var(--rating))
+		background linear-gradient(to right,
-		@media (prefers-color-scheme: light)
+			#f1c40f var(--rating), #4f4d4c var(--rating))
-			background: linear-gradient(to right, #f1c40f var(--rating), #bfbdbc var(--rating))
+		+lightTheme()
+			background linear-gradient(to right,
+				#f1c40f var(--rating), #bfbdbc var(--rating))
 
-		// APply a mask to hide the gradient outside the star
+		// Apply a mask to hide the gradient outside the star
-		-webkit-mask: url(/star.svg) no-repeat
+		-webkit-mask url(/star.svg) no-repeat
 </style>

src/nprogress.sass

@@ -1,29 +0,0 @@
-// Modified nprogress.css file
-
-#nprogress
-	// Make clicks pass-through
-	pointer-events: none
-	.bar
-		background: rgb(249 115 22) // bg-orange-500
-
-		position: fixed
-		z-index: 1031
-		top: 0
-		left: 0
-
-		width: 100%
-		height: 2px
-
-	// Fancy blur effect
-	.peg
-		display: block
-		position: absolute
-		right: 0px
-		width: 100px
-		height: 100%
-		box-shadow: 0 0 10px rgb(249 115 22), 0 0 5px rgb(249 115 22)
-		opacity: 1.0
-
-		-webkit-transform: rotate(3deg) translate(0px, -4px)
-		-ms-transform: rotate(3deg) translate(0px, -4px)
-		transform: rotate(3deg) translate(0px, -4px)

src/nprogress.styl

@@ -0,0 +1,31 @@
+// Modified nprogress.css file
+
+#nprogress
+	// Make clicks pass-through
+	pointer-events none
+	position relative
+	z-index 99
+
+	.bar
+		background rgb(249 115 22) // bg-orange-500
+
+		position fixed
+		top 0
+		left 0
+
+		width 100%
+		height 2px
+
+	// Fancy blur effect
+	.peg
+		display block
+		position absolute
+		right 0px
+		width 100px
+		height 100%
+		box-shadow 0 0 10px rgb(249 115 22), 0 0 5px rgb(249 115 22)
+		opacity 1
+
+		-webkit-transform rotate(3deg) translate(0px, -4px)
+		-ms-transform rotate(3deg) translate(0px, -4px)
+		transform rotate(3deg) translate(0px, -4px)

src/routes/+layout.svelte

@@ -2,20 +2,20 @@
 	import { navigating } from "$app/stores"
 	import nprogress from "nprogress"
 
-	import "/src/nprogress.sass"
+	import "/src/nprogress.styl"
-	import "/src/global.sass"
+	import "/src/global.styl"
 	import "uno.css"
 
 	// Settings for nprogress, the loading bar shown
 	// at the top of the page when navigating
 	nprogress.configure({ showSpinner: false })
 
-	let timeout: any
+	let timeout: number | undefined
 	// 100ms is the minimum time the loading bar will be shown
 	$: if ($navigating && !timeout) timeout = setTimeout(nprogress.start, 100)
 	else {
 		clearTimeout(timeout)
-		timeout = null
+		timeout = undefined
 
 		nprogress.done()
 	}
@@ -35,14 +35,18 @@
 	</div>
 </div>
 
-<style lang="sass">
+<style lang="stylus">
 	div div
-		background-size: 2rem 2rem
+		background-size 2rem 2rem
-		background-position: 1rem 1rem
+		background-position 1rem 1rem
-		background-image: linear-gradient(90deg, #191716 1px, transparent 1px), linear-gradient(0deg, #191716 1px, transparent 1px)
-		@media (prefers-color-scheme: light)
-			background-image: linear-gradient(90deg, #f9f7f6 1px, transparent 1px), linear-gradient(0deg, #f9f7f6 1px, transparent 1px)
 
-		@media screen and (min-width: 1024px)
+		background-image linear-gradient(90deg, #191716 1px, transparent 1px), 
-			overflow-y: scroll
+			linear-gradient(0deg, #191716 1px, transparent 1px)
+
+		+lightTheme()
+			background-image linear-gradient(90deg, #f9f7f6 1px, transparent 1px),
+				linear-gradient(0deg, #f9f7f6 1px, transparent 1px)
+
+		+lg()
+			overflow-y scroll
 </style>

src/routes/+page.svx

@@ -28,9 +28,9 @@ You can easily find a revival perfect for you on the Revival Archive!
 You can go ahead and join our [Discord](https://discord.gg/zfC3VH2WBa) server - there you can request for your/somebody else's revival to be added to the archive!
 </div>
 
-<style lang="sass">
+<style lang="stylus">
 	h1
-		margin-bottom: 0
+		margin-bottom 0
 	h3 
-		margin-top: 0
+		margin-top 0
 </style>

src/routes/blog/+page.svelte

@@ -25,7 +25,7 @@
 	</a>
 {/each}
 
-<style lang="sass">
+<style lang="stylus">
 	a:hover
-		transform: translateY(-0.15rem)
+		transform translateY(-0.15rem)
 </style>

src/routes/post/[post]/+page.svelte

@@ -57,7 +57,7 @@
 	{/if}
 </div>
 
-<style lang="sass">
+<style lang="stylus">
 	section a:hover
-		transform: translateY(-0.15rem)
+		transform translateY(-0.15rem)
 </style>

src/routes/reviews/+page.svelte

@@ -37,7 +37,7 @@
 	</a>
 {/each}
 
-<style lang="sass">
+<style lang="stylus">
 	a:hover
-		transform: translateY(-0.15rem)
+		transform translateY(-0.15rem)
 </style>

src/routes/revival/[revival]/+page.svelte

@@ -95,7 +95,7 @@
 	{/if}
 </div>
 
-<style lang="sass">
+<style lang="stylus">
 	section a:hover
-		transform: translateY(-0.15rem)
+		transform translateY(-0.15rem)
 </style>

src/routes/revivals/+page.svelte

@@ -68,7 +68,7 @@
 	{/each}
 </div>
 
-<style lang="sass">
+<style lang="stylus">
 	.card:hover
-		transform: translateY(-0.3rem)
+		transform translateY(-0.3rem)
 </style>

src/variables.styl

@@ -0,0 +1,22 @@
+sm()
+	@media (min-width 640px) {block}
+md()
+	@media (min-width 768px) {block}
+lg()
+	@media (min-width 1024px) {block}
+xl()
+	@media (min-width 1280px) {block}
+xl2()
+	@media (min-width 1536px) {block}
+-sm()
+	@media (max-width 639px) {block}
+-md()
+	@media (max-width 767px) {block}
+-lg()
+	@media (max-width 1023px) {block}
+-xl()
+	@media (max-width 1279px) {block}
+-xl2()
+	@media (max-width 1535px) {block}
+lightTheme()
+	@media (prefers-color-scheme light) {block}

svelte.config.js

@@ -1,16 +1,19 @@
 import adapter from "@sveltejs/adapter-static"
-import { vitePreprocess } from "@sveltejs/kit/vite"
+import preprocess from "svelte-preprocess"
 import autoImport from "sveltekit-autoimport"
 import { mdsvex } from "mdsvex"
 
-/** @type {import('@sveltejs/kit').Config} */
 export default {
 	extensions: [".svelte", ".svelte.md", ".md", ".svx"],
 
 	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
 	// for more information about preprocessors
 	preprocess: [
-		vitePreprocess(),
+		preprocess({
+			stylus: {
+				prependData: '@import "src/variables.styl"',
+			},
+		}),
 		autoImport({
 			components: ["./src/lib/components"],
 			flat: true,
@@ -28,9 +31,12 @@ export default {
 	],
 
 	kit: {
-		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
-		// If your environment is not supported or you settled on a specific environment, switch out the adapter.
-		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
 		adapter: adapter(),
 	},
+
+	vitePlugin: {
+		inspector: {
+			toggleKeyCombo: "control-i",
+		},
+	},
 }