From 0d6358d86ec56aa975a060807a47ec8325d83372 Mon Sep 17 00:00:00 2001
From: cmseeling <30421079+cmseeling@users.noreply.github.com>
Date: Sun, 19 Jan 2025 15:28:16 -0600
Subject: [PATCH] docs(svelte+storybook): add configuration when using
 storybook with sveltekit (#3096)

Co-authored-by: Abraham <anubra266@gmail.com>
---
 website/pages/docs/installation/storybook.mdx |  2 +-
 website/pages/docs/installation/svelte.mdx    | 27 ++++++++++++++++++-
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/website/pages/docs/installation/storybook.mdx b/website/pages/docs/installation/storybook.mdx
index 3b851eb38a..dfb9b39cd5 100644
--- a/website/pages/docs/installation/storybook.mdx
+++ b/website/pages/docs/installation/storybook.mdx
@@ -341,4 +341,4 @@ export default defineConfig({
   staticCss: {
     recipes: '*'
   },
-})
+})
\ No newline at end of file
diff --git a/website/pages/docs/installation/svelte.mdx b/website/pages/docs/installation/svelte.mdx
index cea3c12f1b..aef648fa7d 100644
--- a/website/pages/docs/installation/svelte.mdx
+++ b/website/pages/docs/installation/svelte.mdx
@@ -210,6 +210,31 @@ export default defineConfig({
 })
 ```
 
+If you’re using Storybook for a SvelteKit project, you need to replicate the same Vite server config changes. In your .storybook folder, you likely have a `main.js` (or `vite.config.js` in older Storybook versions). Update it as follows:
+
+```js filename="main.js"
+import { defineConfig, mergeConfig } from 'vite';
+
+/** @type { import('@storybook/sveltekit').StorybookConfig } */
+
+const config = {
+  // other Storybook config...
+  viteFinal: async (config) => {
+    return mergeConfig(
+      config,
+      defineConfig({
+        server: {
+          fs: {
+            allow: ['styled-system']
+          }
+        }
+      })
+    );
+  }
+};
+export default config;
+```
+
 ### Configure the entry CSS with layers
 
 Create the `app.css` file in the `src` directory and add the following content:
@@ -300,4 +325,4 @@ const config = {
 };
 
 export default config;
-```
+```
\ No newline at end of file