Migrate to builtin vitePreprocess

sheeeng · Dec 30, 2024 · ba4e3be · ba4e3be
1 parent 958d23e
commit ba4e3be
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 23 deletions.
diff --git a/src/lib/styles/_variables.scss b/src/lib/styles/_variables.scss
@@ -1,3 +1,6 @@
+@use 'include-media' as *;
+@forward 'include-media';
+
 $breakpoints: (
 	'phone': 400px,
 	'tablet': 768px,
@@ -39,8 +42,6 @@ $media-expressions: (
   * @include media(">desktop", "<=1150px") {}
   * @include media(">tablet", "motionOK", "stylus", "screen") {}
   */
-@import 'include-media';
-
 @mixin phone {
 	@include media('<tablet') {
 		@content;
@@ -98,8 +99,8 @@ $media-expressions: (
 }
 
 @mixin scrollbar($width: 0.5rem, $color: var(--fg), $hover-color: var(--text-low)) {
-	scrollbar-color: $color transparent;
-	scrollbar-width: thin;
+	// scrollbar-color: $color transparent;
+	// scrollbar-width: thin;
 	&::-webkit-scrollbar {
 		width: $width;
 		height: 100%;

diff --git a/src/lib/styles/global.scss b/src/lib/styles/global.scss
@@ -1,4 +1,4 @@
-@import './variables';
+@use './variables' as *;
 
 html {
 	--contrast-rgb-low: 255 255 255; // The min contrast color. Used to add transparent colors using rgb(var(--contrast-rgb-low) / 0.5))
@@ -433,6 +433,6 @@ select {
 input[type='color'] {
 	width: 100%;
 	height: 2.5rem;
-	padding: 0.25rem .5rem;
+	padding: 0.25rem 0.5rem;
 	cursor: pointer;
 }
diff --git a/svelte.config.js b/svelte.config.js
@@ -1,19 +1,9 @@
 import adapter from '@sveltejs/adapter-auto';
-import preprocess from 'svelte-preprocess';
-import { fileURLToPath } from 'url';
-const stylesPath = fileURLToPath(
-	new URL('./src/lib/styles/_variables.scss', import.meta.url),
-);
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
-	preprocess: preprocess({
-		scss: {
-			outputStyle: 'compressed',
-			renderSync: true,
-			prependData: `@import '${stylesPath.replace(/\\/g, '/')}';`,
-		},
-	}),
+	preprocess: vitePreprocess({ script: true }),
 	vitePlugin: {
 		inspector: {
 			showToggleButton: 'active',

diff --git a/vite.config.ts b/vite.config.ts
@@ -1,17 +1,15 @@
 import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';
 import Icons from 'unplugin-icons/vite';
-import { fileURLToPath } from 'url';
-const stylesPath = fileURLToPath(
-	new URL('./src/lib/styles/_variables.scss', import.meta.url),
-);
 
 export default defineConfig({
 	plugins: [sveltekit(), Icons({ compiler: 'svelte' })],
 	css: {
 		preprocessorOptions: {
 			scss: {
-				additionalData: `@import '${stylesPath.replace(/\\/g, '/')}';`,
+				api: 'modern-compiler',
+				additionalData: `@use 'variables' as *;`,
+				loadPaths: ['./src/lib/styles'],
 			},
 		},
 	},