From f58a43d20bbb98dc7d94d798ff54b5908ba8f9cc Mon Sep 17 00:00:00 2001
From: Sean Lynch <techniq35@gmail.com>
Date: Sat, 20 Jan 2024 16:54:04 -0500
Subject: [PATCH] Replace `sveltePreprocess` with `vitePreprocess` in docs. 
 Closes #57

---
 packages/svelte-ux/package.json              | 1 -
 packages/svelte-ux/src/lib/plugins/vite.js   | 4 ++--
 packages/svelte-ux/src/routes/+layout.svelte | 6 ++----
 packages/svelte-ux/src/routes/app.css        | 3 +++
 packages/svelte-ux/svelte.config.js          | 4 ++--
 pnpm-lock.yaml                               | 3 ---
 6 files changed, 9 insertions(+), 12 deletions(-)
 create mode 100644 packages/svelte-ux/src/routes/app.css

diff --git a/packages/svelte-ux/package.json b/packages/svelte-ux/package.json
index 8c0004fca..04cdebecf 100644
--- a/packages/svelte-ux/package.json
+++ b/packages/svelte-ux/package.json
@@ -45,7 +45,6 @@
     "rehype-slug": "^6.0.0",
     "svelte": "^4.2.8",
     "svelte-check": "^3.6.3",
-    "svelte-preprocess": "^5.1.3",
     "svelte2tsx": "^0.7.0",
     "tailwindcss": "^3.4.1",
     "tslib": "^2.6.2",
diff --git a/packages/svelte-ux/src/lib/plugins/vite.js b/packages/svelte-ux/src/lib/plugins/vite.js
index 9012daec6..dab558936 100644
--- a/packages/svelte-ux/src/lib/plugins/vite.js
+++ b/packages/svelte-ux/src/lib/plugins/vite.js
@@ -1,5 +1,5 @@
 import s from 'sveld';
-import sveltePreprocess from 'svelte-preprocess';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 import { preprocess } from 'svelte/compiler';
 import qs from 'node:querystring';
 
@@ -12,7 +12,7 @@ export function sveld() {
       if ('raw' in query && 'sveld' in query) {
         const raw = JSON.parse(src.split('export default ')[1]);
 
-        let { code } = await preprocess(raw, sveltePreprocess(), {
+        let { code } = await preprocess(raw, vitePreprocess(), {
           filename: id,
         });
         const data = new s.ComponentParser({
diff --git a/packages/svelte-ux/src/routes/+layout.svelte b/packages/svelte-ux/src/routes/+layout.svelte
index b65dc9f3a..a9af3a288 100644
--- a/packages/svelte-ux/src/routes/+layout.svelte
+++ b/packages/svelte-ux/src/routes/+layout.svelte
@@ -25,6 +25,8 @@
   import { createLocaleSettings } from '$lib';
   import LanguageSelect from '$lib/components/LanguageSelect.svelte';
 
+  import './app.css';
+
   export let data: PageData;
 
   const baseGh = 'https://github.com/techniq/svelte-ux';
@@ -290,10 +292,6 @@
 </AppLayout>
 
 <style lang="postcss">
-  @tailwind base;
-  @tailwind components;
-  @tailwind utilities;
-
   :global(body) {
     @apply bg-surface-200 accent-primary;
     /* background-image:
diff --git a/packages/svelte-ux/src/routes/app.css b/packages/svelte-ux/src/routes/app.css
new file mode 100644
index 000000000..b5c61c956
--- /dev/null
+++ b/packages/svelte-ux/src/routes/app.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/packages/svelte-ux/svelte.config.js b/packages/svelte-ux/svelte.config.js
index 0800a7111..425ebafac 100644
--- a/packages/svelte-ux/svelte.config.js
+++ b/packages/svelte-ux/svelte.config.js
@@ -1,5 +1,5 @@
 import adapter from '@sveltejs/adapter-auto';
-import sveltePreprocess from 'svelte-preprocess';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 import { mdsvex } from 'mdsvex';
 
 import mdsvexConfig from './mdsvex.config.js';
@@ -8,7 +8,7 @@ import { codePreview } from './src/lib/plugins/svelte.js';
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
   extensions: ['.svelte', ...mdsvexConfig.extensions],
-  preprocess: [mdsvex(mdsvexConfig), sveltePreprocess(), codePreview()],
+  preprocess: [mdsvex(mdsvexConfig), vitePreprocess(), codePreview()],
 
   vitePlugin: {
     inspector: {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c5a86d347..f68a67a6b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -166,9 +166,6 @@ importers:
       svelte-check:
         specifier: ^3.6.3
         version: 3.6.3(postcss@8.4.33)(svelte@4.2.8)
-      svelte-preprocess:
-        specifier: ^5.1.3
-        version: 5.1.3(postcss@8.4.33)(svelte@4.2.8)(typescript@5.3.3)
       svelte2tsx:
         specifier: ^0.7.0
         version: 0.7.0(svelte@4.2.8)(typescript@5.3.3)