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

package/src/vitePluginAstroComponentMarker.test.ts

@@ -0,0 +1,231 @@
+import { mkdtempSync, mkdirSync, rmSync, writeFileSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { join } from 'node:path';
+import { afterAll, describe, expect, test } from 'vitest';
+import {
+  extractAstroImportSpecifiers,
+  vitePluginAstroComponentMarker
+} from './vitePluginAstroComponentMarker.ts';
+
+const ASTRO6_CLIENT_STUB = `
+export default function() {
+  throw new Error('Astro components cannot be used in the browser');
+}
+`;
+
+const tempDir = mkdtempSync(join(tmpdir(), 'astro-marker-test-'));
+
+afterAll(() => {
+  rmSync(tempDir, { recursive: true, force: true });
+});
+
+function writeAstroFile(relativePath: string, source: string): string {
+  const filePath = join(tempDir, relativePath);
+
+  mkdirSync(join(filePath, '..'), { recursive: true });
+  writeFileSync(filePath, source);
+
+  return filePath;
+}
+
+type TransformablePlugin = {
+  configResolved: (config: { command: string }) => void;
+  transform: (code: string, id: string) => { code: string } | null;
+};
+
+function createPlugin(command: 'serve' | 'build' = 'serve') {
+  const plugin = vitePluginAstroComponentMarker() as unknown as TransformablePlugin;
+
+  plugin.configResolved({ command });
+
+  return plugin;
+}
+
+describe('vitePluginAstroComponentMarker transform', () => {
+  test('ignores non-astro modules and non-stub code', () => {
+    const plugin = createPlugin();
+
+    expect(plugin.transform(ASTRO6_CLIENT_STUB, '/some/module.ts')).toBeNull();
+    expect(plugin.transform('export default {};', '/some/Component.astro')).toBeNull();
+  });
+
+  test('replaces the stub with a marked component factory', () => {
+    const filePath = writeAstroFile('Plain.astro', '<div>Hello</div>');
+    const plugin = createPlugin();
+    const result = plugin.transform(ASTRO6_CLIENT_STUB, filePath);
+
+    expect(result?.code).toContain('isAstroComponentFactory = true');
+    expect(result?.code).toContain(JSON.stringify(filePath));
+  });
+
+  test('inlines CSS for own <style> blocks in dev mode (hybrid approach)', () => {
+    const filePath = writeAstroFile(
+      'Styled.astro',
+      '<div class="a">Hi</div>\n<style>.a { color: red; }</style>'
+    );
+    const plugin = createPlugin();
+    const result = plugin.transform(ASTRO6_CLIENT_STUB, filePath);
+
+    // Dev mode uses inline CSS instead of sub-module imports to avoid Astro cache issues
+    expect(result?.code).toContain('.a { color: red; }');
+    expect(result?.code).toContain('data-astro-dev');
+  });
+
+  test('unwraps :global() selectors so the CSS is valid in the browser', () => {
+    const filePath = writeAstroFile(
+      'Global.astro',
+      '<div class="wrap"><slot /></div>\n<style>.wrap > :global(img) { width: 100%; }</style>'
+    );
+    const plugin = createPlugin();
+    const result = plugin.transform(ASTRO6_CLIENT_STUB, filePath);
+
+    expect(result?.code).toContain('.wrap > img { width: 100%; }');
+    expect(result?.code).not.toContain(':global(');
+  });
+
+  test('skips preprocessed <style lang="..."> blocks with a console warning in dev mode', () => {
+    const filePath = writeAstroFile(
+      'Scss.astro',
+      '<div class="a">Hi</div>\n<style lang="scss">.a { .b { color: red; } }</style>'
+    );
+    const plugin = createPlugin();
+    const result = plugin.transform(ASTRO6_CLIENT_STUB, filePath);
+
+    // The raw SCSS source must not be injected as a stylesheet.
+    expect(result?.code).not.toContain('document.createElement');
+    expect(result?.code).toContain('console.warn');
+    expect(result?.code).toContain('scss');
+  });
+
+  test('dedupes injected styles so repeated module evaluation does not pile up', () => {
+    const filePath = writeAstroFile(
+      'Dedupe.astro',
+      '<div class="a">Hi</div>\n<style>.a { color: red; }</style>'
+    );
+    const plugin = createPlugin();
+    const result = plugin.transform(ASTRO6_CLIENT_STUB, filePath);
+
+    // The injection snippet bails out if a style with the same marker already exists.
+    expect(result?.code).toContain("getAttribute");
+    expect(result?.code).toContain('data-astro-dev');
+  });
+
+  test('re-imports child .astro components so their scoped styles load in dev mode', () => {
+    const filePath = writeAstroFile(
+      'Parent.astro',
+      [
+        '---',
+        "import Child from './Child.astro';",
+        "import Aliased from '@components/Other.astro';",
+        '---',
+        '<div class="parent"><Child /><Aliased /></div>',
+        '<style>.parent { padding: 16px; }</style>'
+      ].join('\n')
+    );
+    const plugin = createPlugin();
+    const result = plugin.transform(ASTRO6_CLIENT_STUB, filePath);
+
+    expect(result?.code).toContain(`import "./Child.astro";`);
+    expect(result?.code).toContain(`import "@components/Other.astro";`);
+  });
+
+  test('inlines CSS from the component and its children in build mode', () => {
+    writeAstroFile(
+      'build/Child.astro',
+      '<div class="child">Hello</div>\n<style>.child { color: red; }</style>'
+    );
+    const parentPath = writeAstroFile(
+      'build/Parent.astro',
+      [
+        '---',
+        "import Child from './Child.astro';",
+        '---',
+        '<div class="parent"><Child /></div>',
+        '<style>.parent { padding: 16px; }</style>'
+      ].join('\n')
+    );
+    const plugin = createPlugin('build');
+    const result = plugin.transform(ASTRO6_CLIENT_STUB, parentPath);
+
+    expect(result?.code).toContain('.parent { padding: 16px; }');
+    expect(result?.code).toContain('.child { color: red; }');
+  });
+
+  test('unwraps :global() selectors in build mode too', () => {
+    const filePath = writeAstroFile(
+      'build/Global.astro',
+      '<div class="wrap"><slot /></div>\n<style>.wrap :global(img) { width: 100%; }</style>'
+    );
+    const plugin = createPlugin('build');
+    const result = plugin.transform(ASTRO6_CLIENT_STUB, filePath);
+
+    expect(result?.code).toContain('.wrap img { width: 100%; }');
+    expect(result?.code).not.toContain(':global(');
+  });
+
+  test('handles circular child imports in build mode without recursing forever', () => {
+    const aPath = writeAstroFile(
+      'cycle/A.astro',
+      "---\nimport B from './B.astro';\n---\n<B />\n<style>.a { color: blue; }</style>"
+    );
+
+    writeAstroFile(
+      'cycle/B.astro',
+      "---\nimport A from './A.astro';\n---\n<A />\n<style>.b { color: green; }</style>"
+    );
+
+    const plugin = createPlugin('build');
+    const result = plugin.transform(ASTRO6_CLIENT_STUB, aPath);
+
+    expect(result?.code).toContain('.a { color: blue; }');
+    expect(result?.code).toContain('.b { color: green; }');
+  });
+});
+
+describe('extractAstroImportSpecifiers', () => {
+  test('finds default, side-effect, and dynamic .astro imports in the frontmatter', () => {
+    const source = [
+      '---',
+      "import Child from './Child.astro';",
+      "import './SideEffect.astro';",
+      "const Lazy = await import('./Lazy.astro');",
+      "import { helper } from './utils.ts';",
+      '---',
+      '<div />'
+    ].join('\n');
+
+    expect(extractAstroImportSpecifiers(source)).toEqual([
+      './Child.astro',
+      './SideEffect.astro',
+      './Lazy.astro'
+    ]);
+  });
+
+  test('ignores commented-out imports', () => {
+    const source = [
+      '---',
+      "// import Old from './Old.astro';",
+      "/* import Older from './Older.astro'; */",
+      "import Current from './Current.astro';",
+      '---',
+      '<div />'
+    ].join('\n');
+
+    expect(extractAstroImportSpecifiers(source)).toEqual(['./Current.astro']);
+  });
+
+  test('returns nothing for components without frontmatter', () => {
+    expect(extractAstroImportSpecifiers('<div>Hello</div>')).toEqual([]);
+  });
+
+  test('deduplicates repeated specifiers', () => {
+    const source = [
+      '---',
+      "import A from './Child.astro';",
+      "const B = await import('./Child.astro');",
+      '---'
+    ].join('\n');
+
+    expect(extractAstroImportSpecifiers(source)).toEqual(['./Child.astro']);
+  });
+});

package/src/vitePluginAstroComponentMarker.ts

@@ -1,4 +1,5 @@
 import { readFileSync } from 'node:fs';
+import { dirname, resolve } from 'node:path';
 import type { PluginOption } from 'vite';
 
 /**
@@ -37,13 +38,14 @@ export function vitePluginAstroComponentMarker(): PluginOption {
 
       const moduleId = id;
 
-      // In dev mode, import style sub-modules via Astro's Vite plugin (which has
-      // compile metadata cached from the SSR transform).
-      // In build mode, Astro's compile metadata cache is not populated for client-side
-      // transforms, so sub-module imports would fail. Extract raw CSS instead.
+      // In Storybook's Vite 6 setup with separate client/SSR environments, Astro's
+      // CSS cache isn't populated for client-side transforms. CSS sub-module imports
+      // fail with "No Astro CSS at index N", so we inline the CSS directly.
+      // However, we still import child .astro components to bring them into the module
+      // graph so the plugin processes them (fix for issue #114).
       const styleCode = isBuild
         ? generateInlineStyles(moduleId)
-        : generateStyleImports(moduleId);
+        : generateHybridStyles(moduleId);
 
       return {
         code: `
@@ -62,55 +64,178 @@ export default __astro_component;
 }
 
 /**
- * Reads the original .astro source file and generates import statements
- * for each <style> block, using the Astro Vite plugin's sub-module convention.
+ * Hybrid approach for dev mode: inline CSS for the current component (to avoid
+ * Astro's cache issues) but import child .astro components (to bring them into
+ * the module graph for processing). This preserves the fix for issue #114 while
+ * avoiding "No Astro CSS at index N" errors.
+ *
+ * Two caveats follow from inlining raw <style> source instead of routing it
+ * through Astro's compiler:
+ * - Styles are injected globally, not scoped to the component. Plain class
+ *   selectors still match the SSR-rendered HTML, but there is no scope isolation
+ *   between components in dev.
+ * - `:global(...)` wrappers are unwrapped (the browser can't parse them), and
+ *   preprocessed blocks (`<style lang="scss">` etc.) are skipped with a warning
+ *   since the preprocessor isn't reachable here.
  */
-function generateStyleImports(filePath: string): string {
+function generateHybridStyles(filePath: string): string {
   try {
     const source = readFileSync(filePath, 'utf-8');
-    const styleCount = countStyleBlocks(source);
 
-    return Array.from({ length: styleCount }, (_, i) =>
-      `import ${JSON.stringify(`${filePath}?astro&type=style&index=${i}&lang.css`)};`
-    ).join('\n');
+    // Inline this component's own CSS (no recursion into children).
+    const inlinedCss = extractStyleBlocksWithLang(source).map((block, i) => {
+      if (block.lang && block.lang !== 'css') {
+        return warnUnsupportedStyleLang(filePath, block.lang);
+      }
+
+      return styleInjectionSnippet(
+        'data-astro-dev',
+        `${filePath}:${i}`,
+        unwrapGlobalSelectors(block.css)
+      );
+    }).join('\n');
+
+    // Import child .astro components so they enter the module graph
+    const childImports = extractAstroImportSpecifiers(source).map(
+      (specifier) => `import ${JSON.stringify(specifier)};`
+    );
+
+    return [inlinedCss, ...childImports].filter(Boolean).join('\n');
   } catch {
     return '';
   }
 }
 
+/**
+ * Astro's `:global(...)` wrapper marks a selector as un-scoped. Dev-mode styles
+ * are already injected globally, so the wrapper carries no meaning here — and the
+ * browser treats `:global()` as an invalid pseudo-class and drops the whole rule.
+ * Unwrap it to its inner selector so the rule applies.
+ */
+function unwrapGlobalSelectors(css: string): string {
+  return css.replace(/:global\(\s*([^)]*?)\s*\)/g, '$1');
+}
+
+/**
+ * Builds a snippet that warns about a preprocessed <style> block we can't inline.
+ * Astro's compiler (which would turn scss/less/etc. into CSS) isn't reachable
+ * from this client-side transform, and shipping the raw source would break the
+ * browser's CSS parser, so we surface a clear console warning instead.
+ */
+function warnUnsupportedStyleLang(filePath: string, lang: string): string {
+  const message =
+    `[storybook-astro] Skipping <style lang="${lang}"> in ${filePath}: ` +
+    `preprocessed styles are not supported in Storybook dev mode.`;
+
+  return `
+(function() {
+  if (typeof console !== 'undefined') { console.warn(${JSON.stringify(message)}); }
+})();`;
+}
+
+/**
+ * Builds a self-executing snippet that injects a CSS string into <head> as a
+ * <style> tag, tagged with a marker attribute. The marker also dedupes
+ * re-injection (e.g. when a module re-evaluates after HMR) so styles don't
+ * accumulate in the document.
+ */
+function styleInjectionSnippet(markerAttr: string, markerValue: string, css: string): string {
+  const attr = JSON.stringify(markerAttr);
+  const value = JSON.stringify(markerValue);
+
+  return `
+(function() {
+  if (typeof document === 'undefined') { return; }
+  const tagged = document.head.querySelectorAll('style[' + ${attr} + ']');
+  for (const node of tagged) {
+    if (node.getAttribute(${attr}) === ${value}) { return; }
+  }
+  const style = document.createElement('style');
+  style.setAttribute(${attr}, ${value});
+  style.textContent = ${JSON.stringify(css)};
+  document.head.appendChild(style);
+})();`;
+}
+
+/**
+ * Extracts import specifiers ending in `.astro` from a component's frontmatter.
+ * Comments are stripped first so commented-out imports don't resurface as
+ * broken module requests in the browser.
+ */
+export function extractAstroImportSpecifiers(source: string): string[] {
+  const frontmatterMatch = source.match(/^---([\s\S]*?)---/m);
+
+  if (!frontmatterMatch) {return [];}
+
+  const frontmatter = frontmatterMatch[1]
+    .replace(/\/\*[\s\S]*?\*\//g, '')
+    .replace(/\/\/[^\n]*/g, '');
+
+  // Matches static imports (`import Child from './Child.astro'`), side-effect
+  // imports (`import './Child.astro'`), and dynamic imports (`import('./Child.astro')`).
+  const importPattern = /(?:from|import)\s*\(?\s*['"]([^'"]+\.astro)['"]/g;
+  const specifiers = new Set<string>();
+  let match;
+
+  while ((match = importPattern.exec(frontmatter)) !== null) {
+    specifiers.add(match[1]);
+  }
+
+  return [...specifiers];
+}
+
 /**
  * Reads the original .astro source file and generates a JS snippet that injects
- * the raw CSS from each <style> block into the document. Used during builds where
+ * the raw CSS from each <style> block into the document, recursing into child
+ * .astro components imported via relative paths. Used during builds where
  * Astro's compile metadata cache is unavailable.
  *
- * The CSS is unscoped (no Astro scoping transforms), which is acceptable because
- * Astro components show a fallback message in static builds.
+ * The CSS is unscoped (no Astro scoping transforms), so `:global(...)` wrappers
+ * are unwrapped here too — without that the browser drops the whole rule (e.g.
+ * PageCard's `.page-card__image-wrapper :global(img)` sizing).
  */
 function generateInlineStyles(filePath: string): string {
-  try {
-    const source = readFileSync(filePath, 'utf-8');
-    const cssBlocks = extractStyleBlocks(source);
+  const cssBlocks = collectStyleBlocks(filePath, new Set());
 
-    if (cssBlocks.length === 0) {return '';}
+  if (cssBlocks.length === 0) {return '';}
 
-    // Create a side-effect that injects styles into the document
-    return cssBlocks.map((css, i) => {
-      const escaped = JSON.stringify(css);
+  // Create a side-effect that injects styles into the document
+  return cssBlocks
+    .map(({ file, css }, i) =>
+      styleInjectionSnippet('data-astro-build', `${file}:${i}`, unwrapGlobalSelectors(css))
+    )
+    .join('\n');
+}
 
-      
-return `
-(function() {
-  if (typeof document !== 'undefined') {
-    const style = document.createElement('style');
-    style.setAttribute('data-astro-build', ${JSON.stringify(filePath + ':' + i)});
-    style.textContent = ${escaped};
-    document.head.appendChild(style);
-  }
-})();`;
-    }).join('\n');
+/**
+ * Collects <style> block contents from a component and its child .astro imports.
+ * Only relative specifiers are followed (aliases and packages can't be resolved
+ * from disk here). The visited set guards against import cycles.
+ */
+function collectStyleBlocks(
+  filePath: string,
+  visited: Set<string>
+): Array<{ file: string; css: string }> {
+  if (visited.has(filePath)) {return [];}
+  visited.add(filePath);
+
+  let source: string;
+
+  try {
+    source = readFileSync(filePath, 'utf-8');
   } catch {
-    return '';
+    return [];
+  }
+
+  const blocks = extractStyleBlocks(source).map((css) => ({ file: filePath, css }));
+
+  for (const specifier of extractAstroImportSpecifiers(source)) {
+    if (!specifier.startsWith('.')) {continue;}
+
+    blocks.push(...collectStyleBlocks(resolve(dirname(filePath), specifier), visited));
   }
+
+  return blocks;
 }
 
 /**
@@ -118,28 +243,25 @@ return `
  * Strips frontmatter before parsing.
  */
 function extractStyleBlocks(source: string): string[] {
+  return extractStyleBlocksWithLang(source).map((block) => block.css);
+}
+
+/**
+ * Like {@link extractStyleBlocks}, but also reports each block's `lang` attribute
+ * (e.g. "scss") so callers can tell preprocessed styles apart from plain CSS.
+ * Returns `null` for the lang when no attribute is present.
+ */
+function extractStyleBlocksWithLang(source: string): Array<{ css: string; lang: string | null }> {
   const withoutFrontmatter = source.replace(/^---[\s\S]*?---/m, '');
-  const blocks: string[] = [];
-  const regex = /<style(?:\s[^>]*)?>([\s\S]*?)<\/style>/g;
+  const blocks: Array<{ css: string; lang: string | null }> = [];
+  const regex = /<style((?:\s[^>]*)?)>([\s\S]*?)<\/style>/g;
   let match;
 
   while ((match = regex.exec(withoutFrontmatter)) !== null) {
-    blocks.push(match[1].trim());
+    const langMatch = match[1].match(/\blang\s*=\s*['"]?([\w-]+)/);
+
+    blocks.push({ css: match[2].trim(), lang: langMatch ? langMatch[1] : null });
   }
 
   return blocks;
 }
-
-/**
- * Counts the number of top-level <style> blocks in an Astro component's source.
- * Only counts opening tags that are NOT inside the frontmatter fence (---).
- */
-function countStyleBlocks(source: string): number {
-  // Strip frontmatter
-  const withoutFrontmatter = source.replace(/^---[\s\S]*?---/m, '');
-  // Match <style> opening tags (with optional attributes)
-  const matches = withoutFrontmatter.match(/<style(\s|>)/g);
-
-  
-return matches ? matches.length : 0;
-}

package/src/viteStorybookAstroRendererPlugin.ts

@@ -41,7 +41,8 @@ export function viteStorybookAstroRendererPlugin(options: {
         )});`,
         'export const render = renderer.render;',
         'export const init = renderer.init;',
-        'export const applyStyles = renderer.applyStyles;'
+        'export const applyStyles = renderer.applyStyles;',
+        'export const isStaticMode = false;'
       ].join('\n');
     }
   });

package/dist/chunk-E4LB75JN.js

@@ -1,89 +0,0 @@
-// src/vitePluginAstroComponentMarker.ts
-import { readFileSync } from "fs";
-function vitePluginAstroComponentMarker() {
-  let isBuild = false;
-  return {
-    name: "storybook-astro-component-marker",
-    enforce: "post",
-    configResolved(config) {
-      isBuild = config.command === "build";
-    },
-    transform(code, id) {
-      if (!id.endsWith(".astro")) {
-        return null;
-      }
-      if (!code.includes("Astro components cannot be used in the browser")) {
-        return null;
-      }
-      const moduleId = id;
-      const styleCode = isBuild ? generateInlineStyles(moduleId) : generateStyleImports(moduleId);
-      return {
-        code: `
-${styleCode}
-const __astro_component = () => {
-  throw new Error('Astro components are rendered server-side by Storybook.');
-};
-__astro_component.isAstroComponentFactory = true;
-__astro_component.moduleId = ${JSON.stringify(moduleId)};
-export default __astro_component;
-`,
-        map: null
-      };
-    }
-  };
-}
-function generateStyleImports(filePath) {
-  try {
-    const source = readFileSync(filePath, "utf-8");
-    const styleCount = countStyleBlocks(source);
-    return Array.from(
-      { length: styleCount },
-      (_, i) => `import ${JSON.stringify(`${filePath}?astro&type=style&index=${i}&lang.css`)};`
-    ).join("\n");
-  } catch {
-    return "";
-  }
-}
-function generateInlineStyles(filePath) {
-  try {
-    const source = readFileSync(filePath, "utf-8");
-    const cssBlocks = extractStyleBlocks(source);
-    if (cssBlocks.length === 0) {
-      return "";
-    }
-    return cssBlocks.map((css, i) => {
-      const escaped = JSON.stringify(css);
-      return `
-(function() {
-  if (typeof document !== 'undefined') {
-    const style = document.createElement('style');
-    style.setAttribute('data-astro-build', ${JSON.stringify(filePath + ":" + i)});
-    style.textContent = ${escaped};
-    document.head.appendChild(style);
-  }
-})();`;
-    }).join("\n");
-  } catch {
-    return "";
-  }
-}
-function extractStyleBlocks(source) {
-  const withoutFrontmatter = source.replace(/^---[\s\S]*?---/m, "");
-  const blocks = [];
-  const regex = /<style(?:\s[^>]*)?>([\s\S]*?)<\/style>/g;
-  let match;
-  while ((match = regex.exec(withoutFrontmatter)) !== null) {
-    blocks.push(match[1].trim());
-  }
-  return blocks;
-}
-function countStyleBlocks(source) {
-  const withoutFrontmatter = source.replace(/^---[\s\S]*?---/m, "");
-  const matches = withoutFrontmatter.match(/<style(\s|>)/g);
-  return matches ? matches.length : 0;
-}
-
-export {
-  vitePluginAstroComponentMarker
-};
-//# sourceMappingURL=chunk-E4LB75JN.js.map

package/dist/chunk-E4LB75JN.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/vitePluginAstroComponentMarker.ts"],"sourcesContent":["import { readFileSync } from 'node:fs';\nimport type { PluginOption } from 'vite';\n\n/**\n * Vite plugin that patches Astro 6's client-side .astro file transforms for Storybook.\n *\n * In Astro 6, the client-side transform of .astro files produces a stub function that\n * throws \"Astro components cannot be used in the browser\" without setting the\n * `isAstroComponentFactory` marker. Storybook's renderer relies on this marker to detect\n * Astro components and route them to server-side rendering via the Container API.\n *\n * This plugin also preserves the component's scoped CSS by importing the style sub-modules\n * that the Astro Vite plugin exposes. Without this, the client-side stub would strip all\n * CSS since Astro 6 no longer includes style imports in client-side .astro transforms.\n *\n * During builds, Astro's compile metadata cache is not populated for client-side transforms,\n * so style sub-module imports would fail. Instead, raw CSS is extracted directly from the\n * .astro source and inlined.\n */\nexport function vitePluginAstroComponentMarker(): PluginOption {\n  let isBuild = false;\n\n  return {\n    name: 'storybook-astro-component-marker',\n    enforce: 'post',\n\n    configResolved(config) {\n      isBuild = config.command === 'build';\n    },\n\n    transform(code: string, id: string) {\n      // Only process main .astro modules (not sub-modules like ?astro&type=style)\n      if (!id.endsWith('.astro')) {return null;}\n\n      // Detect the Astro 6 client-side stub pattern\n      if (!code.includes('Astro components cannot be used in the browser')) {return null;}\n\n      const moduleId = id;\n\n      // In dev mode, import style sub-modules via Astro's Vite plugin (which has\n      // compile metadata cached from the SSR transform).\n      // In build mode, Astro's compile metadata cache is not populated for client-side\n      // transforms, so sub-module imports would fail. Extract raw CSS instead.\n      const styleCode = isBuild\n        ? generateInlineStyles(moduleId)\n        : generateStyleImports(moduleId);\n\n      return {\n        code: `\n${styleCode}\nconst __astro_component = () => {\n  throw new Error('Astro components are rendered server-side by Storybook.');\n};\n__astro_component.isAstroComponentFactory = true;\n__astro_component.moduleId = ${JSON.stringify(moduleId)};\nexport default __astro_component;\n`,\n        map: null,\n      };\n    },\n  };\n}\n\n/**\n * Reads the original .astro source file and generates import statements\n * for each <style> block, using the Astro Vite plugin's sub-module convention.\n */\nfunction generateStyleImports(filePath: string): string {\n  try {\n    const source = readFileSync(filePath, 'utf-8');\n    const styleCount = countStyleBlocks(source);\n\n    return Array.from({ length: styleCount }, (_, i) =>\n      `import ${JSON.stringify(`${filePath}?astro&type=style&index=${i}&lang.css`)};`\n    ).join('\\n');\n  } catch {\n    return '';\n  }\n}\n\n/**\n * Reads the original .astro source file and generates a JS snippet that injects\n * the raw CSS from each <style> block into the document. Used during builds where\n * Astro's compile metadata cache is unavailable.\n *\n * The CSS is unscoped (no Astro scoping transforms), which is acceptable because\n * Astro components show a fallback message in static builds.\n */\nfunction generateInlineStyles(filePath: string): string {\n  try {\n    const source = readFileSync(filePath, 'utf-8');\n    const cssBlocks = extractStyleBlocks(source);\n\n    if (cssBlocks.length === 0) {return '';}\n\n    // Create a side-effect that injects styles into the document\n    return cssBlocks.map((css, i) => {\n      const escaped = JSON.stringify(css);\n\n      \nreturn `\n(function() {\n  if (typeof document !== 'undefined') {\n    const style = document.createElement('style');\n    style.setAttribute('data-astro-build', ${JSON.stringify(filePath + ':' + i)});\n    style.textContent = ${escaped};\n    document.head.appendChild(style);\n  }\n})();`;\n    }).join('\\n');\n  } catch {\n    return '';\n  }\n}\n\n/**\n * Extracts the content of all top-level <style> blocks from an Astro component's source.\n * Strips frontmatter before parsing.\n */\nfunction extractStyleBlocks(source: string): string[] {\n  const withoutFrontmatter = source.replace(/^---[\\s\\S]*?---/m, '');\n  const blocks: string[] = [];\n  const regex = /<style(?:\\s[^>]*)?>([\\s\\S]*?)<\\/style>/g;\n  let match;\n\n  while ((match = regex.exec(withoutFrontmatter)) !== null) {\n    blocks.push(match[1].trim());\n  }\n\n  return blocks;\n}\n\n/**\n * Counts the number of top-level <style> blocks in an Astro component's source.\n * Only counts opening tags that are NOT inside the frontmatter fence (---).\n */\nfunction countStyleBlocks(source: string): number {\n  // Strip frontmatter\n  const withoutFrontmatter = source.replace(/^---[\\s\\S]*?---/m, '');\n  // Match <style> opening tags (with optional attributes)\n  const matches = withoutFrontmatter.match(/<style(\\s|>)/g);\n\n  \nreturn matches ? matches.length : 0;\n}\n"],"mappings":";AAAA,SAAS,oBAAoB;AAmBtB,SAAS,iCAA+C;AAC7D,MAAI,UAAU;AAEd,SAAO;AAAA,IACL,MAAM;AAAA,IACN,SAAS;AAAA,IAET,eAAe,QAAQ;AACrB,gBAAU,OAAO,YAAY;AAAA,IAC/B;AAAA,IAEA,UAAU,MAAc,IAAY;AAElC,UAAI,CAAC,GAAG,SAAS,QAAQ,GAAG;AAAC,eAAO;AAAA,MAAK;AAGzC,UAAI,CAAC,KAAK,SAAS,gDAAgD,GAAG;AAAC,eAAO;AAAA,MAAK;AAEnF,YAAM,WAAW;AAMjB,YAAM,YAAY,UACd,qBAAqB,QAAQ,IAC7B,qBAAqB,QAAQ;AAEjC,aAAO;AAAA,QACL,MAAM;AAAA,EACZ,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,+BAKoB,KAAK,UAAU,QAAQ,CAAC;AAAA;AAAA;AAAA,QAG/C,KAAK;AAAA,MACP;AAAA,IACF;AAAA,EACF;AACF;AAMA,SAAS,qBAAqB,UAA0B;AACtD,MAAI;AACF,UAAM,SAAS,aAAa,UAAU,OAAO;AAC7C,UAAM,aAAa,iBAAiB,MAAM;AAE1C,WAAO,MAAM;AAAA,MAAK,EAAE,QAAQ,WAAW;AAAA,MAAG,CAAC,GAAG,MAC5C,UAAU,KAAK,UAAU,GAAG,QAAQ,2BAA2B,CAAC,WAAW,CAAC;AAAA,IAC9E,EAAE,KAAK,IAAI;AAAA,EACb,QAAQ;AACN,WAAO;AAAA,EACT;AACF;AAUA,SAAS,qBAAqB,UAA0B;AACtD,MAAI;AACF,UAAM,SAAS,aAAa,UAAU,OAAO;AAC7C,UAAM,YAAY,mBAAmB,MAAM;AAE3C,QAAI,UAAU,WAAW,GAAG;AAAC,aAAO;AAAA,IAAG;AAGvC,WAAO,UAAU,IAAI,CAAC,KAAK,MAAM;AAC/B,YAAM,UAAU,KAAK,UAAU,GAAG;AAGxC,aAAO;AAAA;AAAA;AAAA;AAAA,6CAIsC,KAAK,UAAU,WAAW,MAAM,CAAC,CAAC;AAAA,0BACrD,OAAO;AAAA;AAAA;AAAA;AAAA,IAI7B,CAAC,EAAE,KAAK,IAAI;AAAA,EACd,QAAQ;AACN,WAAO;AAAA,EACT;AACF;AAMA,SAAS,mBAAmB,QAA0B;AACpD,QAAM,qBAAqB,OAAO,QAAQ,oBAAoB,EAAE;AAChE,QAAM,SAAmB,CAAC;AAC1B,QAAM,QAAQ;AACd,MAAI;AAEJ,UAAQ,QAAQ,MAAM,KAAK,kBAAkB,OAAO,MAAM;AACxD,WAAO,KAAK,MAAM,CAAC,EAAE,KAAK,CAAC;AAAA,EAC7B;AAEA,SAAO;AACT;AAMA,SAAS,iBAAiB,QAAwB;AAEhD,QAAM,qBAAqB,OAAO,QAAQ,oBAAoB,EAAE;AAEhE,QAAM,UAAU,mBAAmB,MAAM,eAAe;AAG1D,SAAO,UAAU,QAAQ,SAAS;AAClC;","names":[]}