@storybook-astro/framework 1.5.0-canary.1 → 1.5.0

package/dist/{chunk-5MNCPWIU.js → chunk-6RIGYMZP.js}

@@ -17,7 +17,7 @@ function vitePluginAstroComponentMarker() {
         return null;
       }
       const moduleId = id;
-      const styleCode = isBuild ? generateInlineStyles(moduleId) : generateStyleImports(moduleId);
+      const styleCode = isBuild ? generateInlineStyles(moduleId) : generateHybridStyles(moduleId);
       return {
         code: `
 ${styleCode}
@@ -33,22 +33,53 @@ export default __astro_component;
     }
   };
 }
-function generateStyleImports(filePath) {
+function generateHybridStyles(filePath) {
   try {
     const source = readFileSync(filePath, "utf-8");
-    const styleCount = countStyleBlocks(source);
-    const styleImports = Array.from(
-      { length: styleCount },
-      (_, i) => `import ${JSON.stringify(`${filePath}?astro&type=style&index=${i}&lang.css`)};`
-    );
+    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");
     const childImports = extractAstroImportSpecifiers(source).map(
       (specifier) => `import ${JSON.stringify(specifier)};`
     );
-    return [...styleImports, ...childImports].join("\n");
+    return [inlinedCss, ...childImports].filter(Boolean).join("\n");
   } catch {
     return "";
   }
 }
+function unwrapGlobalSelectors(css) {
+  return css.replace(/:global\(\s*([^)]*?)\s*\)/g, "$1");
+}
+function warnUnsupportedStyleLang(filePath, lang) {
+  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)}); }
+})();`;
+}
+function styleInjectionSnippet(markerAttr, markerValue, css) {
+  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);
+})();`;
+}
 function extractAstroImportSpecifiers(source) {
   const frontmatterMatch = source.match(/^---([\s\S]*?)---/m);
   if (!frontmatterMatch) {
@@ -68,18 +99,9 @@ function generateInlineStyles(filePath) {
   if (cssBlocks.length === 0) {
     return "";
   }
-  return cssBlocks.map(({ file, 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(file + ":" + i)});
-    style.textContent = ${escaped};
-    document.head.appendChild(style);
-  }
-})();`;
-  }).join("\n");
+  return cssBlocks.map(
+    ({ file, css }, i) => styleInjectionSnippet("data-astro-build", `${file}:${i}`, unwrapGlobalSelectors(css))
+  ).join("\n");
 }
 function collectStyleBlocks(filePath, visited) {
   if (visited.has(filePath)) {
@@ -102,22 +124,21 @@ function collectStyleBlocks(filePath, visited) {
   return blocks;
 }
 function extractStyleBlocks(source) {
+  return extractStyleBlocksWithLang(source).map((block) => block.css);
+}
+function extractStyleBlocksWithLang(source) {
   const withoutFrontmatter = source.replace(/^---[\s\S]*?---/m, "");
   const blocks = [];
-  const regex = /<style(?:\s[^>]*)?>([\s\S]*?)<\/style>/g;
+  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;
 }
-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-5MNCPWIU.js.map
+//# sourceMappingURL=chunk-6RIGYMZP.js.map

package/dist/chunk-6RIGYMZP.js.map

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

package/dist/preset.js

@@ -1,6 +1,6 @@
 import {
   vitePluginAstroComponentMarker
-} from "./chunk-5MNCPWIU.js";
+} from "./chunk-6RIGYMZP.js";
 import {
   createAstroRenderHandler,
   ensureAstroPassthroughImageService,

package/dist/vitest/index.js

@@ -1,6 +1,6 @@
 import {
   vitePluginAstroComponentMarker
-} from "../chunk-5MNCPWIU.js";
+} from "../chunk-6RIGYMZP.js";
 import {
   registerTestingIntegrationsForRoot
 } from "../chunk-WUTCMEF5.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook-astro/framework",
-  "version": "1.5.0-canary.1",
+  "version": "1.5.0",
   "description": "Community-supported Storybook framework for Astro 5 & 6 components",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -145,7 +145,7 @@
     }
   },
   "dependencies": {
-    "@storybook-astro/renderer": "1.5.0-canary.1",
+    "@storybook-astro/renderer": "1.5.0",
     "hono": "^4.11.12",
     "sanitize-html": "^2.17.0",
     "tsconfck": "^3.1.6",

package/src/vitePluginAstroComponentMarker.test.ts

@@ -58,7 +58,7 @@ describe('vitePluginAstroComponentMarker transform', () => {
     expect(result?.code).toContain(JSON.stringify(filePath));
   });
 
-  test('imports style sub-modules for own <style> blocks in dev mode', () => {
+  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>'
@@ -66,7 +66,48 @@ describe('vitePluginAstroComponentMarker transform', () => {
     const plugin = createPlugin();
     const result = plugin.transform(ASTRO6_CLIENT_STUB, filePath);
 
-    expect(result?.code).toContain(`${filePath}?astro&type=style&index=0&lang.css`);
+    // 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', () => {
@@ -110,6 +151,18 @@ describe('vitePluginAstroComponentMarker transform', () => {
     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',

package/src/vitePluginAstroComponentMarker.ts

@@ -38,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: `
@@ -63,32 +64,99 @@ 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.
  *
- * Child .astro components imported in the frontmatter are re-imported too.
- * Only the server renders children, so without these imports the child modules
- * never enter the browser's module graph and their scoped styles never load.
- * Each child passes through this same plugin, so style loading is transitive.
+ * 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);
 
-    const styleImports = Array.from({ length: styleCount }, (_, i) =>
-      `import ${JSON.stringify(`${filePath}?astro&type=style&index=${i}&lang.css`)};`
-    );
+    // 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 [...styleImports, ...childImports].join('\n');
+    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
@@ -122,8 +190,9 @@ export function extractAstroImportSpecifiers(source: string): string[] {
  * .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 {
   const cssBlocks = collectStyleBlocks(filePath, new Set());
@@ -131,20 +200,11 @@ function generateInlineStyles(filePath: string): string {
   if (cssBlocks.length === 0) {return '';}
 
   // Create a side-effect that injects styles into the document
-  return cssBlocks.map(({ file, 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(file + ':' + i)});
-    style.textContent = ${escaped};
-    document.head.appendChild(style);
-  }
-})();`;
-  }).join('\n');
+  return cssBlocks
+    .map(({ file, css }, i) =>
+      styleInjectionSnippet('data-astro-build', `${file}:${i}`, unwrapGlobalSelectors(css))
+    )
+    .join('\n');
 }
 
 /**
@@ -183,28 +243,25 @@ function collectStyleBlocks(
  * 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/dist/chunk-5MNCPWIU.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/vitePluginAstroComponentMarker.ts"],"sourcesContent":["import { readFileSync } from 'node:fs';\nimport { dirname, resolve } from 'node:path';\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 *\n * Child .astro components imported in the frontmatter are re-imported too.\n * Only the server renders children, so without these imports the child modules\n * never enter the browser's module graph and their scoped styles never load.\n * Each child passes through this same plugin, so style loading is transitive.\n */\nfunction generateStyleImports(filePath: string): string {\n  try {\n    const source = readFileSync(filePath, 'utf-8');\n    const styleCount = countStyleBlocks(source);\n\n    const styleImports = Array.from({ length: styleCount }, (_, i) =>\n      `import ${JSON.stringify(`${filePath}?astro&type=style&index=${i}&lang.css`)};`\n    );\n    const childImports = extractAstroImportSpecifiers(source).map(\n      (specifier) => `import ${JSON.stringify(specifier)};`\n    );\n\n    return [...styleImports, ...childImports].join('\\n');\n  } catch {\n    return '';\n  }\n}\n\n/**\n * Extracts import specifiers ending in `.astro` from a component's frontmatter.\n * Comments are stripped first so commented-out imports don't resurface as\n * broken module requests in the browser.\n */\nexport function extractAstroImportSpecifiers(source: string): string[] {\n  const frontmatterMatch = source.match(/^---([\\s\\S]*?)---/m);\n\n  if (!frontmatterMatch) {return [];}\n\n  const frontmatter = frontmatterMatch[1]\n    .replace(/\\/\\*[\\s\\S]*?\\*\\//g, '')\n    .replace(/\\/\\/[^\\n]*/g, '');\n\n  // Matches static imports (`import Child from './Child.astro'`), side-effect\n  // imports (`import './Child.astro'`), and dynamic imports (`import('./Child.astro')`).\n  const importPattern = /(?:from|import)\\s*\\(?\\s*['\"]([^'\"]+\\.astro)['\"]/g;\n  const specifiers = new Set<string>();\n  let match;\n\n  while ((match = importPattern.exec(frontmatter)) !== null) {\n    specifiers.add(match[1]);\n  }\n\n  return [...specifiers];\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, recursing into child\n * .astro components imported via relative paths. 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  const cssBlocks = collectStyleBlocks(filePath, new Set());\n\n  if (cssBlocks.length === 0) {return '';}\n\n  // Create a side-effect that injects styles into the document\n  return cssBlocks.map(({ file, 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(file + ':' + i)});\n    style.textContent = ${escaped};\n    document.head.appendChild(style);\n  }\n})();`;\n  }).join('\\n');\n}\n\n/**\n * Collects <style> block contents from a component and its child .astro imports.\n * Only relative specifiers are followed (aliases and packages can't be resolved\n * from disk here). The visited set guards against import cycles.\n */\nfunction collectStyleBlocks(\n  filePath: string,\n  visited: Set<string>\n): Array<{ file: string; css: string }> {\n  if (visited.has(filePath)) {return [];}\n  visited.add(filePath);\n\n  let source: string;\n\n  try {\n    source = readFileSync(filePath, 'utf-8');\n  } catch {\n    return [];\n  }\n\n  const blocks = extractStyleBlocks(source).map((css) => ({ file: filePath, css }));\n\n  for (const specifier of extractAstroImportSpecifiers(source)) {\n    if (!specifier.startsWith('.')) {continue;}\n\n    blocks.push(...collectStyleBlocks(resolve(dirname(filePath), specifier), visited));\n  }\n\n  return blocks;\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":"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","names":[]}