@storybook-astro/framework 1.3.0 → 1.4.0-canary.2

package/src/vitePluginAstroBuildShared.test.ts

@@ -1,4 +1,4 @@
-import { mkdtemp, rm, writeFile } from 'node:fs/promises';
+import { mkdir, mkdtemp, rm, writeFile } from 'node:fs/promises';
 import { tmpdir } from 'node:os';
 import { join } from 'node:path';
 import { afterEach, beforeEach, describe, expect, test } from 'vitest';
@@ -22,7 +22,7 @@ describe('collectHydratedComponentPaths', () => {
     await writeFile(astroFile, `---\nimport Helper from './Helper.tsx';\n---`);
     await writeFile(namedOnlyTsx, `export const Helper = () => <div />;`);
 
-    const result = await collectHydratedComponentPaths(astroFile);
+    const result = await collectHydratedComponentPaths(astroFile, tmpDir);
 
     expect(result).not.toContain(namedOnlyTsx.replace(/\\/g, '/'));
   });
@@ -34,7 +34,7 @@ describe('collectHydratedComponentPaths', () => {
     await writeFile(astroFile, `---\nimport Button from './Button.tsx';\n---`);
     await writeFile(defaultTsx, `export default function Button() { return <div />; }`);
 
-    const result = await collectHydratedComponentPaths(astroFile);
+    const result = await collectHydratedComponentPaths(astroFile, tmpDir);
 
     expect(result).toContain(defaultTsx.replace(/\\/g, '/'));
   });
@@ -48,7 +48,7 @@ describe('collectHydratedComponentPaths', () => {
     await writeFile(astroFile, `---\nimport Counter from './Counter.svelte';\n---`);
     await writeFile(svelteFile, `<script>\n  let count = 0;\n</script>\n<button>{count}</button>`);
 
-    const result = await collectHydratedComponentPaths(astroFile);
+    const result = await collectHydratedComponentPaths(astroFile, tmpDir);
 
     expect(result).toContain(svelteFile.replace(/\\/g, '/'));
   });
@@ -64,7 +64,7 @@ describe('collectHydratedComponentPaths', () => {
       `<script setup>\nconst count = ref(0);\n</script>\n<template><button>{{ count }}</button></template>`
     );
 
-    const result = await collectHydratedComponentPaths(astroFile);
+    const result = await collectHydratedComponentPaths(astroFile, tmpDir);
 
     expect(result).toContain(vueFile.replace(/\\/g, '/'));
   });
@@ -80,8 +80,27 @@ describe('collectHydratedComponentPaths', () => {
 
     // Don't write missingTsx — resolveLocalImportPath will not find it,
     // so it never reaches hasDefaultExport. Confirm the result is just empty.
-    const result = await collectHydratedComponentPaths(astroFile);
+    const result = await collectHydratedComponentPaths(astroFile, tmpDir);
 
     expect(result).not.toContain(missingTsx.replace(/\\/g, '/'));
   });
+
+  test('includes a tsconfig-aliased island (the static build fix)', async () => {
+    // Islands imported via path aliases never matched the staticModuleMap because
+    // readLocalImportSpecifiers filtered them out before they could become Rollup
+    // inputs. This test confirms the alias is resolved and included.
+    await mkdir(join(tmpDir, 'src', 'components'), { recursive: true });
+    const counterFile = join(tmpDir, 'src', 'components', 'Counter.tsx');
+
+    await writeFile(counterFile, `export default function Counter() { return null; }`);
+    await writeFile(join(tmpDir, 'Island.astro'), `---\nimport Counter from '@/components/Counter';\n---\n<Counter client:visible />`);
+    await writeFile(
+      join(tmpDir, 'tsconfig.json'),
+      JSON.stringify({ compilerOptions: { paths: { '@/*': ['src/*'] } } }, null, 2)
+    );
+
+    const result = await collectHydratedComponentPaths(join(tmpDir, 'Island.astro'), tmpDir);
+
+    expect(result).toContain(counterFile.replace(/\\/g, '/'));
+  });
 });

package/src/vitePluginAstroBuildShared.ts

@@ -3,6 +3,7 @@ import { access, copyFile, mkdir, readFile, readdir, stat } from 'node:fs/promis
 import { dirname, resolve } from 'node:path';
 import type { Rollup } from 'vite';
 import type { Integration } from './integrations/index.ts';
+import { resolveAliasedIsland } from './lib/resolve-aliased-island.ts';
 
 /** Resolves the shared virtual module ids used by both build pipelines. */
 export function resolveVirtualBuildModuleId(id: string) {
@@ -77,7 +78,10 @@ export async function emitHydratedComponentEntriesFromAstroFile(options: {
   resolveFrom: string;
   componentEntrypointRefs: Map<string, string>;
 }) {
-  const hydratedComponentPaths = await collectHydratedComponentPaths(options.astroFilePath);
+  const hydratedComponentPaths = await collectHydratedComponentPaths(
+    options.astroFilePath,
+    options.resolveFrom
+  );
 
   for (const resolvedImportPath of hydratedComponentPaths) {
 
@@ -96,14 +100,18 @@ export async function emitHydratedComponentEntriesFromAstroFile(options: {
 }
 
 /** Collects the framework component files one Astro component hydrates in the browser. */
-export async function collectHydratedComponentPaths(astroFilePath: string) {
+export async function collectHydratedComponentPaths(astroFilePath: string, resolveFrom: string) {
   // Only Astro components create islands, so only their framework imports
   // need standalone client chunks in built Storybook output.
-  const localImportSpecifiers = await readLocalImportSpecifiers(astroFilePath);
+  const allImportSpecifiers = await readAllImportSpecifiers(astroFilePath);
   const hydratedComponentPaths: string[] = [];
 
-  for (const specifier of localImportSpecifiers) {
-    const resolvedImportPath = await resolveLocalImportPath(astroFilePath, specifier);
+  for (const specifier of allImportSpecifiers) {
+    // Resolve the specifier to an on-disk path — relative imports use the
+    // importer's directory; aliased imports go through the tsconfig paths map.
+    const resolvedImportPath = specifier.startsWith('.')
+      ? await resolveLocalImportPath(astroFilePath, specifier)
+      : await resolveAliasedIsland(specifier, resolveFrom);
 
     if (!resolvedImportPath) {
       continue;
@@ -385,22 +393,27 @@ async function copyLocalRuntimeDependencies(
   }
 }
 
-/** Reads local import specifiers from source files that can participate in the SSR runtime. */
-async function readLocalImportSpecifiers(filePath: string) {
+const IMPORT_RE =
+  /(?:import|export)\s+(?:[^'"`]*?\s+from\s+)?['"`]([^'"`]+)['"`]|import\(\s*['"`]([^'"`]+)['"`]\s*\)/g;
+
+/** Returns all import specifiers found in the file (relative, aliased, and package). */
+async function readAllImportSpecifiers(filePath: string): Promise<string[]> {
   if (!/\.(astro|[cm]?[jt]sx?|vue|svelte)$/.test(filePath)) {
     return [];
   }
 
   const source = await readFile(filePath, 'utf-8');
-  const matches = source.matchAll(
-    /(?:import|export)\s+(?:[^'"`]*?\s+from\s+)?['"`]([^'"`]+)['"`]|import\(\s*['"`]([^'"`]+)['"`]\s*\)/g
-  );
 
-  return Array.from(matches, (match) => match[1] ?? match[2]).filter(
-    (specifier): specifier is string => Boolean(specifier) && specifier.startsWith('.')
+  return Array.from(source.matchAll(IMPORT_RE), (match) => match[1] ?? match[2]).filter(
+    (specifier): specifier is string => Boolean(specifier)
   );
 }
 
+/** Reads local (relative) import specifiers from source files that can participate in the SSR runtime. */
+async function readLocalImportSpecifiers(filePath: string) {
+  return (await readAllImportSpecifiers(filePath)).filter((s) => s.startsWith('.'));
+}
+
 /** Resolves one relative import the same way the project source tree would on disk. */
 async function resolveLocalImportPath(importerPath: string, specifier: string) {
   const basePath = resolve(dirname(importerPath), specifier);

package/src/vitePluginAstroFonts.test.ts

@@ -0,0 +1,153 @@
+import { describe, expect, test } from 'vitest';
+import {
+  buildFamilyCss,
+  vitePluginAstroFonts,
+  type FontFaceData,
+  type StorybookFontFamily,
+  type StorybookFontProvider
+} from './vitePluginAstroFonts.ts';
+
+function makeProvider(faces: FontFaceData[]): StorybookFontProvider {
+  return {
+    name: 'test',
+    resolveFont: () => ({ fonts: faces })
+  };
+}
+
+describe('buildFamilyCss', () => {
+  test('emits @font-face block with src url and font-display: swap by default', () => {
+    const family: StorybookFontFamily = {
+      name: 'Inter',
+      cssVariable: '--font-inter',
+      provider: makeProvider([])
+    };
+    const css = buildFamilyCss(family, [
+      { src: [{ url: 'https://example.com/inter-400.woff2', format: 'woff2' }], weight: 400, style: 'normal' }
+    ]);
+
+    expect(css).toContain('@font-face');
+    expect(css).toContain('font-family: "Inter"');
+    expect(css).toContain('src: url("https://example.com/inter-400.woff2") format("woff2");');
+    expect(css).toContain('font-display: swap');
+    expect(css).toContain('font-weight: 400');
+    expect(css).toContain('font-style: normal');
+  });
+
+  test('emits CSS variable rule binding cssVariable to family name and fallbacks', () => {
+    const family: StorybookFontFamily = {
+      name: 'Inter',
+      cssVariable: '--font-inter',
+      provider: makeProvider([]),
+      fallbacks: ['system-ui', 'sans-serif']
+    };
+    const css = buildFamilyCss(family, []);
+
+    expect(css).toContain(':root { --font-inter: "Inter", system-ui, sans-serif; }');
+  });
+
+  test('handles local() source entries from local font providers', () => {
+    const family: StorybookFontFamily = {
+      name: 'CustomFont',
+      cssVariable: '--font-custom',
+      provider: makeProvider([])
+    };
+    const css = buildFamilyCss(family, [
+      { src: [{ name: 'CustomFont Regular' }, { url: '/fonts/custom.woff2', format: 'woff2' }] }
+    ]);
+
+    expect(css).toContain('local("CustomFont Regular")');
+    expect(css).toContain('url("/fonts/custom.woff2") format("woff2")');
+  });
+
+  test('emits variable-font weight range when provider returns a tuple', () => {
+    const family: StorybookFontFamily = {
+      name: 'Inter',
+      cssVariable: '--font-inter',
+      provider: makeProvider([])
+    };
+    const css = buildFamilyCss(family, [{ src: [{ url: '/x.woff2' }], weight: [100, 900] }]);
+
+    expect(css).toContain('font-weight: 100 900');
+  });
+});
+
+describe('vitePluginAstroFonts virtual modules', () => {
+  test('resolveId maps both virtual ids and the bare astro/assets/fonts/runtime import', async () => {
+    const plugin = vitePluginAstroFonts();
+    const resolveId = plugin.resolveId as (this: unknown, id: string) => string | undefined;
+
+    expect(resolveId.call({}, 'virtual:astro:assets/fonts/internal')).toBe(
+      '\0virtual:astro:assets/fonts/internal'
+    );
+    expect(resolveId.call({}, 'virtual:astro:assets/fonts/runtime')).toBe(
+      '\0virtual:astro:assets/fonts/runtime'
+    );
+    expect(resolveId.call({}, 'astro/assets/fonts/runtime')).toBe('\0storybook:astro-fonts-runtime');
+    expect(resolveId.call({}, 'astro/assets/fonts/runtime.js')).toBe('\0storybook:astro-fonts-runtime');
+    expect(resolveId.call({}, 'some-other-id')).toBeUndefined();
+  });
+
+  test('internal virtual module exports a Map populated from the resolved families', async () => {
+    const family: StorybookFontFamily = {
+      name: 'Inter',
+      cssVariable: '--font-inter',
+      provider: makeProvider([
+        { src: [{ url: 'https://example.com/inter.woff2', format: 'woff2' }], weight: 400 }
+      ])
+    };
+    const plugin = vitePluginAstroFonts({ fonts: [family] });
+
+    const buildStart = plugin.buildStart as (this: unknown) => Promise<void>;
+    const load = plugin.load as (this: unknown, id: string) => Promise<{ code: string } | undefined>;
+
+    await buildStart.call({});
+    const result = await load.call({ load: async () => null }, '\0virtual:astro:assets/fonts/internal');
+
+    expect(result?.code).toContain('componentDataByCssVariable = new Map(');
+    expect(result?.code).toContain('--font-inter');
+    expect(result?.code).toContain('@font-face');
+    expect(result?.code).toContain('fontDataByCssVariable = ');
+    expect(result?.code).toContain('https://example.com/inter.woff2');
+  });
+
+  test('emits empty maps when no families are configured (no-op behavior preserved)', async () => {
+    const plugin = vitePluginAstroFonts();
+
+    const buildStart = plugin.buildStart as (this: unknown) => Promise<void>;
+    const load = plugin.load as (this: unknown, id: string) => Promise<{ code: string } | undefined>;
+
+    await buildStart.call({});
+    const result = await load.call({ load: async () => null }, '\0virtual:astro:assets/fonts/internal');
+
+    expect(result?.code).toContain('componentDataByCssVariable = new Map([])');
+    expect(result?.code).toContain('fontDataByCssVariable = {}');
+  });
+
+  test('continues processing remaining families if one provider throws', async () => {
+    const failing: StorybookFontFamily = {
+      name: 'Broken',
+      cssVariable: '--font-broken',
+      provider: {
+        name: 'broken',
+        resolveFont: () => {
+          throw new Error('boom');
+        }
+      }
+    };
+    const working: StorybookFontFamily = {
+      name: 'Inter',
+      cssVariable: '--font-inter',
+      provider: makeProvider([{ src: [{ url: '/inter.woff2' }], weight: 400 }])
+    };
+    const plugin = vitePluginAstroFonts({ fonts: [failing, working] });
+
+    const buildStart = plugin.buildStart as (this: unknown) => Promise<void>;
+    const load = plugin.load as (this: unknown, id: string) => Promise<{ code: string } | undefined>;
+
+    await buildStart.call({});
+    const result = await load.call({ load: async () => null }, '\0virtual:astro:assets/fonts/internal');
+
+    expect(result?.code).toContain('--font-inter');
+    expect(result?.code).not.toContain('--font-broken');
+  });
+});

package/src/vitePluginAstroFonts.ts

@@ -0,0 +1,302 @@
+import { pathToFileURL } from 'node:url';
+import type { Plugin } from 'vite';
+
+// We avoid a hard import of `astro/assets/fonts/types` here because consumers
+// using older Astro versions without the new fonts API would fail to install.
+// The provider interface we rely on is small and stable enough to type locally.
+export interface StorybookFontProvider {
+  name: string;
+  init?: (context: { storage: FontStorage; root: URL }) => Promise<void> | void;
+  resolveFont: (options: {
+    familyName: string;
+    weights: string[];
+    styles: string[];
+    subsets: string[];
+    formats: string[];
+  }) => Promise<{ fonts: FontFaceData[] } | undefined> | { fonts: FontFaceData[] } | undefined;
+}
+
+export interface FontFaceData {
+  src: Array<{ url?: string; name?: string; format?: string; tech?: string }>;
+  weight?: string | number | [number, number];
+  style?: string;
+  display?: string;
+  unicodeRange?: string[];
+  featureSettings?: string;
+  variationSettings?: string;
+}
+
+export interface StorybookFontFamily {
+  name: string;
+  cssVariable: string;
+  provider: StorybookFontProvider;
+  weights?: Array<string | number>;
+  styles?: string[];
+  subsets?: string[];
+  formats?: string[];
+  fallbacks?: string[];
+  display?: string;
+}
+
+interface FontStorage {
+  getItem: <T = unknown>(key: string, init?: () => Promise<T> | T) => Promise<T | null>;
+  setItem: (key: string, value: unknown) => Promise<void> | void;
+}
+
+interface ResolvedFontData {
+  componentEntries: Array<[string, { css: string; preloads: never[] }]>;
+  fontDataByCssVariable: Record<
+    string,
+    Array<{
+      src: Array<{ url: string; format?: string; tech?: string }>;
+      weight?: string;
+      style?: string;
+    }>
+  >;
+}
+
+const DEFAULTS = {
+  weights: ['400'],
+  styles: ['normal', 'italic'],
+  subsets: ['latin'],
+  formats: ['woff2'],
+  fallbacks: ['sans-serif']
+} as const;
+
+const VIRTUAL_INTERNAL_ID = 'virtual:astro:assets/fonts/internal';
+const VIRTUAL_RUNTIME_ID = 'virtual:astro:assets/fonts/runtime';
+const VIRTUAL_RUNTIME_RESOLVER_ID = 'virtual:astro:assets/fonts/runtime/font-file-url-resolver';
+const PACKAGE_RUNTIME_IDS = ['astro/assets/fonts/runtime', 'astro/assets/fonts/runtime.js'];
+
+const RUNTIME_STUB = `
+export const fontData = {};
+export function createGetFontData(fontsMod) {
+  return fontsMod?.fontDataByCssVariable ?? {};
+}
+export const experimental_getFontFileURL = () => undefined;
+`;
+
+const RESOLVER_STUB = `
+export const runtimeFontFileUrlResolver = { resolve: () => undefined };
+`;
+
+/**
+ * Resolves Astro's font Provider API for Storybook by reading the user's
+ * configured font families, calling each provider to produce @font-face data,
+ * and emitting CSS through Astro's font virtual modules.
+ *
+ * Lightweight first cut: generates @font-face declarations and a CSS variable
+ * binding to the family name plus fallbacks. Does not handle preload links,
+ * Capsize-optimized fallback metrics, or build-time font file emission — those
+ * paths fall back to remote URLs returned by the provider directly.
+ *
+ * If no families are provided, the plugin emits no-op stubs so Astro's
+ * font virtual modules still resolve in projects that don't configure fonts.
+ */
+export function vitePluginAstroFonts(
+  options: {
+    fonts?: StorybookFontFamily[];
+    root?: string;
+  } = {}
+): Plugin {
+  const families = options.fonts ?? [];
+  const rootDir = options.root ?? process.cwd();
+  const root = pathToFileURL(rootDir.endsWith('/') ? rootDir : rootDir + '/');
+
+  let resolved: ResolvedFontData | null = null;
+  let resolvePromise: Promise<ResolvedFontData> | null = null;
+
+  const ensureResolved = async () => {
+    if (!resolvePromise) {
+      resolvePromise = resolveAllFamilies(families, root);
+    }
+
+    resolved = await resolvePromise;
+
+    return resolved;
+  };
+
+  return {
+    name: 'storybook-astro-fonts',
+    enforce: 'pre',
+
+    async buildStart() {
+      await ensureResolved();
+    },
+
+    resolveId(id) {
+      if (id === VIRTUAL_INTERNAL_ID) {
+        return '\0' + VIRTUAL_INTERNAL_ID;
+      }
+      if (id === VIRTUAL_RUNTIME_ID) {
+        return '\0' + VIRTUAL_RUNTIME_ID;
+      }
+      if (id === VIRTUAL_RUNTIME_RESOLVER_ID) {
+        return '\0' + VIRTUAL_RUNTIME_RESOLVER_ID;
+      }
+      if (PACKAGE_RUNTIME_IDS.includes(id)) {
+        return '\0storybook:astro-fonts-runtime';
+      }
+
+      return undefined;
+    },
+
+    async load(id) {
+      if (id === '\0' + VIRTUAL_INTERNAL_ID) {
+        const data = resolved ?? (await ensureResolved());
+
+        return {
+          code:
+            `export const componentDataByCssVariable = new Map(${JSON.stringify(data.componentEntries)});\n` +
+            `export const fontDataByCssVariable = ${JSON.stringify(data.fontDataByCssVariable)};\n`
+        };
+      }
+      if (id === '\0' + VIRTUAL_RUNTIME_ID || id === '\0storybook:astro-fonts-runtime') {
+        return { code: RUNTIME_STUB };
+      }
+      if (id === '\0' + VIRTUAL_RUNTIME_RESOLVER_ID) {
+        return { code: RESOLVER_STUB };
+      }
+
+      return undefined;
+    }
+  };
+}
+
+async function resolveAllFamilies(
+  families: StorybookFontFamily[],
+  root: URL
+): Promise<ResolvedFontData> {
+  const componentEntries: ResolvedFontData['componentEntries'] = [];
+  const fontDataByCssVariable: ResolvedFontData['fontDataByCssVariable'] = {};
+  const storage = createMemoryStorage();
+
+  for (const family of families) {
+    try {
+      if (family.provider.init) {
+        await family.provider.init({ storage, root });
+      }
+      const result = await family.provider.resolveFont({
+        familyName: family.name,
+        weights: (family.weights ?? DEFAULTS.weights).map(String),
+        styles: family.styles ?? [...DEFAULTS.styles],
+        subsets: family.subsets ?? [...DEFAULTS.subsets],
+        formats: family.formats ?? [...DEFAULTS.formats]
+      });
+      const faces = result?.fonts ?? [];
+
+      if (faces.length === 0) {
+        continue;
+      }
+
+      componentEntries.push([
+        family.cssVariable,
+        { css: buildFamilyCss(family, faces), preloads: [] }
+      ]);
+      fontDataByCssVariable[family.cssVariable] = faces.map(toFontData);
+    } catch (err) {
+      // Swallow per-family errors so one bad family doesn't break the rest.
+      // Errors surface as the family simply not rendering, matching Astro's
+      // behavior when a provider can't resolve a font.
+      console.warn(
+        `[storybook-astro-fonts] Failed to resolve font family "${family.name}":`,
+        err instanceof Error ? err.message : err
+      );
+    }
+  }
+
+  return { componentEntries, fontDataByCssVariable };
+}
+
+export function buildFamilyCss(family: StorybookFontFamily, faces: FontFaceData[]): string {
+  const fallbacks = family.fallbacks ?? [...DEFAULTS.fallbacks];
+  const familyList = [JSON.stringify(family.name), ...fallbacks].join(', ');
+  const faceBlocks = faces.map((face) => buildFontFaceBlock(family, face)).join('\n');
+  const rootRule = `:root { ${family.cssVariable}: ${familyList}; }`;
+
+  return `${faceBlocks}\n${rootRule}`;
+}
+
+function buildFontFaceBlock(family: StorybookFontFamily, face: FontFaceData): string {
+  const src = face.src
+    .map((source) => {
+      if (source.url) {
+        const format = source.format ? ` format(${JSON.stringify(source.format)})` : '';
+        const tech = source.tech ? ` tech(${source.tech})` : '';
+
+        return `url(${JSON.stringify(source.url)})${format}${tech}`;
+      }
+      if (source.name) {
+        return `local(${JSON.stringify(source.name)})`;
+      }
+
+      return '';
+    })
+    .filter(Boolean)
+    .join(', ');
+
+  const descriptors: string[] = [
+    `font-family: ${JSON.stringify(family.name)};`,
+    `src: ${src};`,
+    `font-display: ${family.display ?? 'swap'};`
+  ];
+
+  if (face.weight !== undefined) {
+    const weight = Array.isArray(face.weight) ? face.weight.join(' ') : String(face.weight);
+
+    descriptors.push(`font-weight: ${weight};`);
+  }
+  if (face.style) {
+    descriptors.push(`font-style: ${face.style};`);
+  }
+  if (face.unicodeRange?.length) {
+    descriptors.push(`unicode-range: ${face.unicodeRange.join(', ')};`);
+  }
+  if (face.featureSettings) {
+    descriptors.push(`font-feature-settings: ${face.featureSettings};`);
+  }
+  if (face.variationSettings) {
+    descriptors.push(`font-variation-settings: ${face.variationSettings};`);
+  }
+
+  return `@font-face { ${descriptors.join(' ')} }`;
+}
+
+function toFontData(face: FontFaceData) {
+  return {
+    src: face.src
+      .filter((source) => source.url)
+      .map((source) => ({ url: source.url!, format: source.format, tech: source.tech })),
+    weight:
+      face.weight !== undefined
+        ? Array.isArray(face.weight)
+          ? face.weight.join(' ')
+          : String(face.weight)
+        : undefined,
+    style: face.style
+  };
+}
+
+function createMemoryStorage(): FontStorage {
+  const store = new Map<string, unknown>();
+
+  return {
+    async getItem(key, init) {
+      if (store.has(key)) {
+        return store.get(key) as never;
+      }
+      if (init) {
+        const value = await init();
+
+        store.set(key, value);
+
+        return value as never;
+      }
+
+      return null;
+    },
+    async setItem(key, value) {
+      store.set(key, value);
+    }
+  };
+}

package/src/viteStorybookAstroMiddlewarePlugin.ts

@@ -7,13 +7,14 @@ import type { FrameworkOptions } from './types.ts';
 import type { Integration } from './integrations/index.ts';
 import { importAstroConfig } from './importAstroConfig.ts';
 import { viteAstroContainerRenderersPlugin } from './viteAstroContainerRenderersPlugin.ts';
-import { vitePluginAstroFontsFallback } from './vitePluginAstroFontsFallback.ts';
+import { vitePluginAstroFonts } from './vitePluginAstroFonts.ts';
 import { vitePluginAstroIntegrationOptsFallback } from './vitePluginAstroIntegrationOptsFallback.ts';
 import { vitePluginAstroVueFallback } from './vitePluginAstroVueFallback.ts';
 import { vitePluginAstroRoutesFallback } from './vitePluginAstroRoutesFallback.ts';
 import { vitePluginStoryModuleMocks } from './vitePluginStoryModuleMocks.ts';
 import { ssrLoadModuleWithFsFallback } from './lib/ssr-load-module-with-fs-fallback.ts';
 import { resolveRulesConfigFilePath } from './rules-options.ts';
+import { loadUserAstroIntegrations } from './loadUserAstroConfig.ts';
 
 export async function vitePluginStorybookAstroMiddleware(options: FrameworkOptions) {
   // The internal Vite server is created lazily inside configureServer (dev-only).
@@ -25,7 +26,7 @@ export async function vitePluginStorybookAstroMiddleware(options: FrameworkOptio
   const vitePlugin = {
     name: 'storybook-astro-middleware-plugin',
     async configureServer(server) {
-      viteServer = await createViteServer(options.integrations ?? [], resolveFrom);
+      viteServer = await createViteServer(options.integrations ?? [], resolveFrom, options.fonts);
       const storyRulesConfigFilePath = resolveRulesConfigFilePath(options.storyRules, resolveFrom);
 
       const filePath = fileURLToPath(new URL('./middleware', import.meta.url));
@@ -44,7 +45,8 @@ export async function vitePluginStorybookAstroMiddleware(options: FrameworkOptio
         loadModule: (id: string) =>
           ssrLoadModuleWithFsFallback(viteServer!, id, {
             fixStacktrace: true
-          })
+          }),
+        resolveFrom
       });
 
       let handlerPromise = createHandler();
@@ -155,18 +157,28 @@ function createSsrServerLogger() {
   return logger;
 }
 
-export async function createViteServer(integrations: Integration[], resolveFrom = process.cwd()) {
+export async function createViteServer(
+  integrations: Integration[],
+  resolveFrom = process.cwd(),
+  fonts?: FrameworkOptions['fonts']
+) {
   const { getViteConfig, passthroughImageService } = await importAstroConfig(resolveFrom);
   const safeIntegrations = integrations ?? [];
   const projectAstroResolutionPlugin = createProjectAstroResolutionPlugin(resolveFrom);
 
+  const frameworkIntegrations = await Promise.all(
+    safeIntegrations.map((integration) => integration.loadIntegration(resolveFrom))
+  );
+
+  const userIntegrations = await loadUserAstroIntegrations(resolveFrom);
+  const frameworkNames = new Set(frameworkIntegrations.map(i => i.name));
+  const extraIntegrations = userIntegrations.filter(i => !frameworkNames.has(i.name));
+
   const config = await getViteConfig(
     { root: resolveFrom },
     {
       configFile: false,
-      integrations: await Promise.all(
-        safeIntegrations.map((integration) => integration.loadIntegration(resolveFrom))
-      ),
+      integrations: [...frameworkIntegrations, ...extraIntegrations],
       // Use the passthrough image service so nested components that use <Image>
       // from astro:assets render as plain <img> tags without triggering image
       // optimization (which fails in the Storybook SSR context).
@@ -181,7 +193,7 @@ export async function createViteServer(integrations: Integration[], resolveFrom
     plugins: [
       projectAstroResolutionPlugin,
       // Fallbacks must come first to intercept before Astro's plugins
-      vitePluginAstroFontsFallback(),
+      vitePluginAstroFonts({ fonts, root: resolveFrom }),
       vitePluginAstroIntegrationOptsFallback(),
       vitePluginAstroVueFallback(),
       vitePluginAstroRoutesFallback(),