From effd0a76eef0317e285915f804e1614efd778cb5 Mon Sep 17 00:00:00 2001
From: Florian Sanders <florian.sanders@clever-cloud.com>
Date: Wed, 20 Nov 2024 18:34:58 +0100
Subject: [PATCH] refactor(storybook): handle CSS dependencies properly

---
 .storybook/main.js           | 14 --------------
 .storybook/preview-head.html |  3 ---
 .storybook/preview.js        |  4 ++++
 3 files changed, 4 insertions(+), 17 deletions(-)

diff --git a/.storybook/main.js b/.storybook/main.js
index 8d41af5b5..905be6061 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -16,20 +16,6 @@ const config = {
     // The smart component Markdown docs
     '../src/**/*smart*.md',
   ],
-  staticDirs: [
-    {
-      from: '../src/styles/default-theme.css',
-      to: 'styles/default-theme.css',
-    },
-    {
-      from: '../node_modules/highlight.js/styles/vs.css',
-      to: 'styles/vs.css',
-    },
-    {
-      from: '../node_modules/github-markdown-css/github-markdown.css',
-      to: 'styles/github-markdown.css',
-    },
-  ],
   addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
   framework: {
     name: '@storybook/web-components-vite',
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
index 4fbbe2a1a..7fb456eb8 100644
--- a/.storybook/preview-head.html
+++ b/.storybook/preview-head.html
@@ -1,6 +1,3 @@
-<link rel="stylesheet" href="styles/github-markdown.css" />
-<link rel="stylesheet" href="styles/vs.css" />
-<link rel="stylesheet" href="styles/default-theme.css" />
 <style>
   html {
     background-color: #f2f2f2;
diff --git a/.storybook/preview.js b/.storybook/preview.js
index f3eac48b6..0dc56ffbd 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -1,7 +1,11 @@
 import { setCustomElementsManifest } from '@storybook/web-components';
+// Any CSS file import automagically generates a `<link rel="stylesheet" href="bundledCssFile">` in the story iframe
+import 'github-markdown-css/github-markdown.css';
+import 'highlight.js/styles/vs.css';
 import customElementsManifest from '../dist/custom-elements.json';
 import { AutodocsTemplate } from '../src/stories/lib/autodocs-template.jsx';
 import '../src/stories/lib/i18n-control.js';
+import '../src/styles/default-theme.css';
 
 setCustomElementsManifest(customElementsManifest);