Fix unplugin icons issues with Storybook

.storybook/main.js

@@ -1,7 +1,27 @@
-const path = require('path');
-const { mergeConfig, searchForWorkspaceRoot } = require('vite');
+import path from 'path';
+import { mergeConfig, searchForWorkspaceRoot } from 'vite';
+import Icons from 'unplugin-icons/vite';
+import Unocss from 'unocss/vite';
 
-module.exports = {
+function workaroundSvelteDocgenPluginConflictWithUnpluginIcons(config) {
+  const [_internalPlugins, ...userPlugins] = config.plugins;
+  const docgenPlugin = userPlugins.find(
+    (plugin) => plugin.name === 'storybook:svelte-docgen-plugin',
+  );
+  if (docgenPlugin) {
+    const origTransform = docgenPlugin.transform;
+    const newTransform = (code, id, options) => {
+      if (id.startsWith('~icons/')) {
+        return;
+      }
+      return origTransform?.call(docgenPlugin, code, id, options);
+    };
+    docgenPlugin.transform = newTransform;
+    docgenPlugin.enforce = 'post';
+  }
+}
+
+export default {
   stories: ['../stories/*.stories.js'],
   staticDirs: ['../static'],
   addons: [{ name: '@storybook/addon-essentials' }],
@@ -18,8 +38,17 @@ module.exports = {
       $data: path.resolve(__dirname, '../data'),
     };
 
+    // https://github.com/storybookjs/storybook/issues/20562
+    workaroundSvelteDocgenPluginConflictWithUnpluginIcons(config);
+
     return mergeConfig(config, {
       define: { 'process.env': {} },
+      plugins: [
+        Unocss(),
+        Icons({
+          compiler: 'none',
+        }),
+      ],
       server: {
         fs: {
           allow: [searchForWorkspaceRoot(process.cwd())],

.storybook/preview.js

@@ -1 +1,3 @@
+import '@unocss/reset/tailwind.css';
+import 'uno.css';
 import '$src/global.css';

package.json

@@ -29,7 +29,7 @@
   },
   "devDependencies": {
     "@iconify/json": "^2.2.121",
-    "@storybook/addon-essentials": "^7.4.5",
+    "@storybook/addon-essentials": "^7.4.6",
     "@storybook/svelte": "^7.4.5",
     "@storybook/sveltekit": "^7.4.5",
     "@sveltejs/adapter-static": "^2.0.3",

src/components/ExperienceItem.svelte

@@ -25,7 +25,7 @@
 
 <div
   class="experience-item space-y-4 break-inside-avoid-page"
-  class:u-print-hidden={shouldHideFromPrint()}
+  class:print:hidden={shouldHideFromPrint()}
 >
   <header class="space-y-1">
     <div class="text-[0.95em] font-medium">

src/components/Summary.svelte

@@ -1,8 +1,8 @@
 <script>
-  import GitHub from 'virtual:icons/fa6-brands/Github.svelte';
-  import LinkedIn from 'virtual:icons/fa6-brands/Linkedin.svelte';
-  import PDF from 'virtual:icons/fa6-regular/FilePdf.svelte';
-  import InfoSymbol from 'virtual:icons/material-symbols/info-outline-rounded.svelte';
+  import GitHub from '~icons/fa6-brands/github';
+  import LinkedIn from '~icons/fa6-brands/linkedin';
+  import PDF from '~icons/fa6-regular/file-pdf';
+  import InfoSymbol from '~icons/material-symbols/info-outline-rounded';
   import List from './List';
 
   const truncateUrl = (url) => url.replace(/https:\/\//, '');
@@ -23,7 +23,7 @@
 </script>
 
 <div
-  class="summary relative p-8 md:p-12 print:p-0 flex flex-1 flex-col gap-4 text-[0.9em]"
+  class="summary relative p-8 md:p-12 print:!p-0 flex flex-1 flex-col gap-4 text-[0.9em]"
 >
   <h1 class="font-bold tracking-wide leading-none text-[2.9em]">{name}</h1>
   <h2 class="leading-none opacity-60 text-[1.4em]">{title}</h2>
@@ -61,17 +61,17 @@
                   <svelte:component
                     this={icons[item.icon]}
                     aria-label={item.label}
-                    class="h-8 w-8 print:(w-6 h-6)"
+                    class="h-6 w-6"
                   />
-                  <span class="u-print-only">
+                  <span class="hidden print:block">
                     {truncateUrl(item.url)}
                   </span>
                 </a>
               {/each}
             </div>
           {/if}
           {#if pdfLink}
-            <div class="download u-print-hidden">
+            <div class="download print:hidden">
               <a
                 href={pdfLink}
                 class="p-2 flex gap-3 group"
@@ -81,7 +81,7 @@
               >
                 <span class="text-base">Download</span>
                 <span class="transition-transform-100 group-hover:scale-125">
-                  <PDF class="h-8 w-8" />
+                  <PDF class="h-6 w-6" />
                 </span>
               </a>
             </div>
@@ -103,7 +103,7 @@
     {/if}
   </section>
 
-  <div class="u-print-only break-before-page space-y-1 mt-4">
+  <div class="hidden print:block break-before-page space-y-1 mt-4">
     <p class="flex items-center gap-2 leading-none">
       <InfoSymbol class="w-8 h-8" />
       <span class="max-w-[20ch]"

src/global.css

@@ -1,18 +1,37 @@
 :root {
+  --popper-text-color: #333;
+  --popper-bg-color: #ddde;
+
   /*color-scheme: light dark;*/
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   -webkit-text-size-adjust: 100%;
+}
 
-  --popper-text-color: #333;
-  --popper-bg-color: #ddde;
+p + p {
+  margin-top: 1rem;
+}
+
+.divided > *::before {
+  display: block;
+  width: 50px;
+  opacity: 0.3;
+  content: '';
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+  border-top: 0.25rem solid !important;
+}
+
+.divided > :first-child::before {
+  content: none;
 }
 
 @media screen {
-  .u-print-only {
-    display: none !important;
+  :root {
+    color: #111;
+    font-size: clamp(0.98rem, 2vw, 1.5rem);
   }
 
   a {
@@ -29,8 +48,8 @@
     border-radius: 0.5rem;
     background-color: var(--popper-bg-color);
     color: var(--popper-text-color);
-    padding: 1rem;
-    font-size: 1rem;
+    padding: 0.6rem 1rem;
+    font-size: 0.8rem;
     max-width: 25rem;
     transition: opacity 0.2s;
     backdrop-filter: blur(8px);
@@ -96,11 +115,11 @@
   }
 }
 
-@media print {
-  .u-print-hidden {
-    display: none !important;
-  }
+@page {
+  margin: 1cm;
+}
 
+@media print {
   .popper {
     display: none;
   }

src/routes/+layout.svelte

@@ -5,32 +5,3 @@
 
 <Analytics />
 <slot />
-
-<style>
-  @page {
-    margin: 1cm;
-  }
-
-  @media screen {
-    :global(body) {
-      --at-apply: text-gray-900;
-      font-size: clamp(0.98rem, 2vw, 1.5rem);
-    }
-  }
-
-  :global(p + p) {
-    --at-apply: mt-4;
-  }
-
-  :global(.divided > *::before) {
-    --at-apply: block w-12 opacity-30;
-    content: '';
-    margin-top: 2rem;
-    margin-bottom: 2rem;
-    border-top: 0.25rem solid !important;
-  }
-
-  :global(.divided > :first-child::before) {
-    content: none;
-  }
-</style>

unocss.config.ts

@@ -2,6 +2,11 @@ import { defineConfig, presetUno } from 'unocss';
 
 export default defineConfig({
   presets: [presetUno()],
+  content: {
+    pipeline: {
+      include: [/\.(svelte|[jt]sx|mdx?|html)($|\?)/, 'stories/**/*'],
+    },
+  },
   theme: {
     colors: {
       primary: '#2b417a',