refactor(storybook): handle CSS dependencies properly

CleverCloud · Nov 26, 2024 · effd0a7 · effd0a7
1 parent 839344f
commit effd0a7
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 17 deletions.
diff --git 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
@@ -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
@@ -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);