poveste 0.1.2 → 0.2.0

package/dist/node/util/head.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"head.d.ts","sourceRoot":"","sources":["../../../src/node/util/head.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAA;AAGhD,wBAAsB,kBAAkB,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,YAAY,GAAG,SAAS,GAAG,OAAO,CAAC,MAAM,CAAC,CAQtG"}

package/dist/node/util/head.js

@@ -0,0 +1,10 @@
+import { createHead, transformHtmlTemplate } from 'unhead/server';
+export async function applyHeadTransform(html, head) {
+    if (!head) {
+        return html;
+    }
+    // disableDefaults: don't inject unhead's `lang="en"` / viewport tags — Poveste's
+    // own HTML template already provides viewport, and we shouldn't override it.
+    const instance = createHead({ init: [head], disableDefaults: true });
+    return await transformHtmlTemplate(instance, html);
+}

package/dist/node/virtual/markdown.js

@@ -12,7 +12,7 @@ export const relativePath = ${JSON.stringify(relativePath)}
 if (import.meta.hot) {
   import.meta.hot.accept(newModule => {
     if (newModule) {
-      window.__hst_md_hmr(newModule)
+      window.__pvt_md_hmr(newModule)
     }
   })
 }`;

package/dist/node/virtual/noop.d.ts

@@ -1,2 +1,3 @@
-export declare const noop: () => string;
+import type { Context } from '../context.js';
+export declare function noop(ctx: Context): string;
 //# sourceMappingURL=noop.d.ts.map

package/dist/node/virtual/noop.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"noop.d.ts","sourceRoot":"","sources":["../../../src/node/virtual/noop.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,IAAI,cAAkC,CAAA"}
+{"version":3,"file":"noop.d.ts","sourceRoot":"","sources":["../../../src/node/virtual/noop.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAG5C,wBAAgB,IAAI,CAAC,GAAG,EAAE,OAAO,UAKhC"}

package/dist/node/virtual/noop.js

@@ -1 +1,7 @@
-export const noop = () => `export default () => {}`;
+import { declareEmptySetupFns } from './util.js';
+export function noop(ctx) {
+    return [
+        `export default () => {}`,
+        declareEmptySetupFns(ctx),
+    ].join('\n');
+}

package/dist/node/virtual/resolved-generated-global-setup.js

@@ -1,5 +1,5 @@
 import { GENERATED_SETUP_CODE } from './index.js';
-import { ID_SEPARATOR } from './util.js';
+import { declareEmptySetupFns, getSetupFnNames, ID_SEPARATOR } from './util.js';
 export function resolvedGeneratedGlobalSetup(ctx) {
     if (ctx.config.setupCode) {
         return [
@@ -8,7 +8,7 @@ export function resolvedGeneratedGlobalSetup(ctx) {
             // List
             `const setupList = [${ctx.config.setupCode.map((c, index) => `setup_${index}`).join(', ')}]`,
             // Setups
-            ...ctx.supportPlugins.map(p => p.setupFn).flat().map(fnName => `export async function ${fnName} (payload) {
+            ...getSetupFnNames(ctx).map(fnName => `export async function ${fnName} (payload) {
         for (const setup of setupList) {
           if (setup?.${fnName}) {
             await setup.${fnName}(payload)
@@ -18,6 +18,6 @@ export function resolvedGeneratedGlobalSetup(ctx) {
         ].join('\n');
     }
     else {
-        return '';
+        return declareEmptySetupFns(ctx);
     }
 }

package/dist/node/virtual/resolved-markdown-files.js

@@ -4,8 +4,8 @@ export function resolvedMarkdownFiles(ctx) {
     return `import { reactive } from ${process.env.POVESTE_DEV ? `'vue'` : getInjectedImport('@poveste/vendors/vue')}
 export const markdownFiles = reactive({${filesJs}})
 if (import.meta.hot) {
-  if (!window.__hst_md_hmr) {
-    window.__hst_md_hmr = (newModule) => {
+  if (!window.__pvt_md_hmr) {
+    window.__pvt_md_hmr = (newModule) => {
       markdownFiles[newModule.relativePath] = () => newModule
     }
   }

package/dist/node/virtual/util.d.ts

@@ -1,3 +1,18 @@
+import type { Context } from '../context.js';
 export declare const ID_SEPARATOR = "__-__";
+/**
+ * Names of every setup hook contributed by the enabled support plugins, e.g.
+ * `setupVanilla`, `setupVue3`, `setupSvelte4`.
+ */
+export declare function getSetupFnNames(ctx: Context): string[];
+/**
+ * Declares the setup hooks as named exports set to `undefined`.
+ *
+ * Consumers read them off a namespace import (`generatedSetup.setupVue3`) behind
+ * a `typeof === 'function'` guard. Without the declaration Rollup can't resolve
+ * the member access statically and warns `"setupVue3" is not exported by ...`
+ * in every consumer build.
+ */
+export declare function declareEmptySetupFns(ctx: Context): string;
 export declare const PLUGINS_HAVE_DEV: string[];
 //# sourceMappingURL=util.d.ts.map

package/dist/node/virtual/util.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../../../src/node/virtual/util.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,YAAY,UAAU,CAAA;AAEnC,eAAO,MAAM,gBAAgB,UAE5B,CAAA"}
+{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../../../src/node/virtual/util.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAE5C,eAAO,MAAM,YAAY,UAAU,CAAA;AAEnC;;;GAGG;AACH,wBAAgB,eAAe,CAAC,GAAG,EAAE,OAAO,YAE3C;AAED;;;;;;;GAOG;AACH,wBAAgB,oBAAoB,CAAC,GAAG,EAAE,OAAO,UAEhD;AAED,eAAO,MAAM,gBAAgB,UAE5B,CAAA"}

package/dist/node/virtual/util.js

@@ -1,4 +1,22 @@
 export const ID_SEPARATOR = '__-__';
+/**
+ * Names of every setup hook contributed by the enabled support plugins, e.g.
+ * `setupVanilla`, `setupVue3`, `setupSvelte4`.
+ */
+export function getSetupFnNames(ctx) {
+    return [...new Set(ctx.supportPlugins.flatMap(p => p.setupFn))];
+}
+/**
+ * Declares the setup hooks as named exports set to `undefined`.
+ *
+ * Consumers read them off a namespace import (`generatedSetup.setupVue3`) behind
+ * a `typeof === 'function'` guard. Without the declaration Rollup can't resolve
+ * the member access statically and warns `"setupVue3" is not exported by ...`
+ * in every consumer build.
+ */
+export function declareEmptySetupFns(ctx) {
+    return getSetupFnNames(ctx).map(fnName => `export const ${fnName} = undefined`).join('\n');
+}
 export const PLUGINS_HAVE_DEV = [
     '@poveste/plugin-vue',
 ];

package/dist/node/virtual/vite-plugin.js

@@ -80,7 +80,7 @@ export function createVirtualFilesPlugin(ctx, isServer) {
                 return VirtualFiles.resolvedStories(ctx);
             }
             if (id === VirtualFiles.NOOP_ID) {
-                return VirtualFiles.noop();
+                return VirtualFiles.noop(ctx);
             }
             if (id === VirtualFiles.RESOLVED_CONFIG_ID) {
                 return VirtualFiles.resolvedConfig(ctx);

package/dist/node/vite.d.ts

@@ -1,6 +1,6 @@
 import type { InlineConfig } from 'vite';
 import type { Context } from './context.js';
-export declare function mergeHistoireViteConfig(viteConfig: InlineConfig, ctx: Context): Promise<InlineConfig>;
+export declare function mergePovesteViteConfig(viteConfig: InlineConfig, ctx: Context): Promise<InlineConfig>;
 export interface ViteConfigWithPlugins {
     viteConfig: InlineConfig;
     viteConfigFile: string | null;

package/dist/node/vite.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vite.d.ts","sourceRoot":"","sources":["../../src/node/vite.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,YAAY,EAGb,MAAM,MAAM,CAAA;AACb,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AAe3C,wBAAsB,uBAAuB,CAAC,UAAU,EAAE,YAAY,EAAE,GAAG,EAAE,OAAO,yBAmCnF;AAED,MAAM,WAAW,qBAAqB;IACpC,UAAU,EAAE,YAAY,CAAA;IACxB,cAAc,EAAE,MAAM,GAAG,IAAI,CAAA;CAC9B;AAED,wBAAsB,wBAAwB,CAAC,QAAQ,EAAE,OAAO,EAAE,GAAG,EAAE,OAAO,GAAG,OAAO,CAAC,qBAAqB,CAAC,CA4T9G"}
+{"version":3,"file":"vite.d.ts","sourceRoot":"","sources":["../../src/node/vite.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,YAAY,EAGb,MAAM,MAAM,CAAA;AACb,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AAsB3C,wBAAsB,sBAAsB,CAAC,UAAU,EAAE,YAAY,EAAE,GAAG,EAAE,OAAO,yBAmClF;AAED,MAAM,WAAW,qBAAqB;IACpC,UAAU,EAAE,YAAY,CAAA;IACxB,cAAc,EAAE,MAAM,GAAG,IAAI,CAAA;CAC9B;AAED,wBAAsB,wBAAwB,CAAC,QAAQ,EAAE,OAAO,EAAE,GAAG,EAAE,OAAO,GAAG,OAAO,CAAC,qBAAqB,CAAC,CAqW9G"}

package/dist/node/vite.js

@@ -1,3 +1,4 @@
+import { existsSync } from 'node:fs';
 import { createRequire } from 'node:module';
 import { lookup as lookupMime } from 'mrmime';
 import { dirname, join, relative } from 'pathe';
@@ -5,9 +6,11 @@ import { loadConfigFromFile as loadViteConfigFromFile, mergeConfig as mergeViteC
 import { APP_PATH, TEMP_PATH } from './alias.js';
 import { createMarkdownPlugins } from './markdown.js';
 import { notifyStoryChange } from './stories.js';
+import { chromeCssScopePlugin, globalStylesPlugin, userCssScopePlugin, } from './style-isolation/index.js';
+import { applyHeadTransform } from './util/head.js';
 import { createVirtualFilesPlugin } from './virtual/vite-plugin.js';
 const require = createRequire(import.meta.url);
-export async function mergeHistoireViteConfig(viteConfig, ctx) {
+export async function mergePovesteViteConfig(viteConfig, ctx) {
     if (ctx.config.vite) {
         const command = ctx.mode === 'dev' ? 'serve' : 'build';
         const overrides = typeof ctx.config.vite === 'function'
@@ -42,7 +45,7 @@ export async function mergeHistoireViteConfig(viteConfig, ctx) {
 export async function getViteConfigWithPlugins(isServer, ctx) {
     const userViteConfigFile = await loadViteConfigFromFile({ command: ctx.mode === 'dev' ? 'serve' : 'build', mode: ctx.mode });
     const userViteConfig = mergeViteConfig(userViteConfigFile?.config ?? {}, { server: { port: 6006 } });
-    const inlineConfig = await mergeHistoireViteConfig(userViteConfig, ctx);
+    const inlineConfig = await mergePovesteViteConfig(userViteConfig, ctx);
     const plugins = [];
     const supportPluginAllowPaths = ctx.supportPlugins.flatMap((plugin) => {
         const paths = [ctx.root, import.meta.url];
@@ -60,14 +63,40 @@ export async function getViteConfigWithPlugins(isServer, ctx) {
         }
         return Array.from(result);
     });
+    // Mirror how Vite resolves `optimizeDeps.include`: walk `node_modules` up from
+    // the project root. Deliberately not `require.resolve(dep, { paths: [root] })`
+    // — Node always folds NODE_PATH into resolution even when `paths` is given, and
+    // pnpm's bin shims point NODE_PATH at the hidden `.pnpm/node_modules` store, so
+    // every package would look reachable from every root. Vite ignores NODE_PATH.
+    function isResolvableFromRoot(dep) {
+        let dir = ctx.root;
+        while (true) {
+            if (existsSync(join(dir, 'node_modules', dep, 'package.json'))) {
+                return true;
+            }
+            const parent = dirname(dir);
+            if (parent === dir) {
+                return false;
+            }
+            dir = parent;
+        }
+    }
     function optimizeDeps(deps) {
         const result = [];
         for (const dep of deps) {
-            result.push(dep);
+            // The bare specifier is what hoisted installs (npm, yarn, pnpm with
+            // `shamefully-hoist`) need — see histoire@a1014ab. Under strict pnpm it is
+            // unreachable from the root and Vite only logs "Failed to resolve
+            // dependency", so emit it just when the root can actually resolve it.
+            if (isResolvableFromRoot(dep)) {
+                result.push(dep);
+            }
             try {
+                // Absolute path, valid regardless of layout — this is what makes the
+                // dep optimizable under strict pnpm.
                 result.push(dirname(require.resolve(`${dep}/package.json`)));
             }
-            catch (e) {
+            catch {
                 // Noop
             }
         }
@@ -97,11 +126,7 @@ export async function getViteConfigWithPlugins(isServer, ctx) {
                         `${APP_PATH}/bundle-sandbox.js`,
                     ],
                     include: optimizeDeps([
-                        'flexsearch',
                         'shiki',
-                        // Shiki dependencies
-                        'vscode-oniguruma',
-                        'vscode-textmate',
                     ]),
                     exclude: [
                         'poveste',
@@ -141,7 +166,7 @@ export async function getViteConfigWithPlugins(isServer, ctx) {
                         : {},
                     '__HST_COLLECT__': isServer,
                 },
-                cacheDir: isServer ? 'node_modules/.hst-vite-server' : 'node_modules/.hst-vite',
+                cacheDir: isServer ? 'node_modules/.pvt-vite-server' : 'node_modules/.pvt-vite',
             };
         },
         options() {
@@ -189,6 +214,7 @@ export async function getViteConfigWithPlugins(isServer, ctx) {
   <script type="module" src="/@fs/${APP_PATH}/bundle-sandbox${process.env.POVESTE_DEV ? '-dev' : ''}.js"></script>
 </body>
 </html>`;
+                    html = await applyHeadTransform(html, ctx.config.head);
                     // Apply Vite HTML transforms. This injects the Vite HMR client, and
                     // also applies HTML transforms from Vite plugins
                     html = await server.transformIndexHtml(req.url, html);
@@ -213,12 +239,14 @@ export async function getViteConfigWithPlugins(isServer, ctx) {
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <meta name="description" content="">
     ${ctx.config.theme?.favicon ? `<link rel="icon" type="${lookupMime(ctx.config.theme.favicon)}" href="${server.config.base}${ctx.config.theme.favicon}"/>` : ''}
+    <style>html,body{margin:0;padding:0}</style>
   </head>
   <body>
     <div id="app"></div>
     <script type="module" src="/@fs/${APP_PATH}/bundle-main${process.env.POVESTE_DEV ? '-dev' : ''}.js"></script>
   </body>
 </html>`;
+                        html = await applyHeadTransform(html, ctx.config.head);
                         // Apply Vite HTML transforms. This injects the Vite HMR client, and
                         // also applies HTML transforms from Vite plugins
                         html = await server.transformIndexHtml(req.url, html);
@@ -232,6 +260,20 @@ export async function getViteConfigWithPlugins(isServer, ctx) {
         },
     });
     plugins.push(createVirtualFilesPlugin(ctx, isServer));
+    plugins.push(globalStylesPlugin({
+        files: ctx.config.globalStyles ?? [],
+        rootDir: ctx.root,
+    }));
+    // Dev-mode isolation. User CSS is wrapped in `@scope (.__poveste-render-story)`
+    // so it cannot leak into chrome (popovers, tooltips, dropdowns). The build
+    // path emits stronger per-bundle isolation that ALSO keeps the user's
+    // teleporting-component styling working inside the sandbox iframe — in dev
+    // that case is a known trade-off, see docs/guide/css.md.
+    const isolate = ctx.config.isolateStyles !== false;
+    if (ctx.mode === 'dev' && !isServer) {
+        plugins.push(userCssScopePlugin({ enabled: isolate, mode: 'wrap' }));
+        plugins.push(chromeCssScopePlugin({ enabled: isolate }));
+    }
     // Replace dev flag
     const flags = {
         '_ctx.__POVESTE_DEV__': JSON.stringify(ctx.mode === 'dev'),

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "poveste",
   "type": "module",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "A fast story book powered by Vite",
   "author": {
     "name": "Sorin Gitlan"
@@ -54,6 +54,7 @@
     "gray-matter": "^4.0.3",
     "jiti": "^2.4.1",
     "jsdom": "^27.4.0",
+    "lightningcss": "^1.32.0",
     "markdown-it": "^14.1.0",
     "markdown-it-anchor": "^9.2.0",
     "markdown-it-attrs": "^4.3.0",
@@ -65,11 +66,12 @@
     "sade": "^1.8.1",
     "shiki": "^3.0.0",
     "sirv": "^3.0.0",
+    "unhead": "^3.1.0",
     "vite-node": "3.2.4",
-    "@poveste/controls": "^0.1.2",
-    "@poveste/vendors": "^0.1.2",
-    "@poveste/app": "^0.1.2",
-    "@poveste/shared": "^0.1.2"
+    "@poveste/app": "^0.2.0",
+    "@poveste/controls": "^0.2.0",
+    "@poveste/shared": "^0.2.0",
+    "@poveste/vendors": "^0.2.0"
   },
   "devDependencies": {
     "@types/fs-extra": "^11.0.4",

package/src/node/__tests__/dom-env.spec.ts

@@ -0,0 +1,38 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { createDomEnv } from '../dom/env.js'
+
+describe('createDomEnv', () => {
+  let env: ReturnType<typeof createDomEnv>
+  let errorSpy: ReturnType<typeof vi.spyOn>
+
+  afterEach(() => {
+    env?.destroy()
+    errorSpy?.mockRestore()
+  })
+
+  describe('when a stylesheet contains unparseable directives (e.g. Tailwind v4 @theme)', () => {
+    it('does not log a css-parsing jsdomError', () => {
+      errorSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
+      env = createDomEnv()
+      const style = env.window.document.createElement('style')
+      style.textContent = '@theme { --color-brand: oklch(0.7 0.1 200); }\n.btn { color: var(--color-brand) }'
+
+      env.window.document.head.appendChild(style)
+
+      expect(errorSpy).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('when a script throws an unhandled exception', () => {
+    it('forwards the error to console.error', () => {
+      errorSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
+      env = createDomEnv()
+      const script = env.window.document.createElement('script')
+      script.textContent = 'throw new Error("boom from story script")'
+
+      env.window.document.head.appendChild(script)
+
+      expect(errorSpy).toHaveBeenCalledWith(expect.stringContaining('boom from story script'))
+    })
+  })
+})

package/src/node/__tests__/head.spec.ts

@@ -0,0 +1,32 @@
+import { describe, expect, it } from 'vitest'
+import { applyHeadTransform } from '../util/head.js'
+
+const BASE_HTML = '<!DOCTYPE html><html><head><meta charset="utf-8"></head><body></body></html>'
+
+describe('applyHeadTransform', () => {
+  it('returns the html untouched when head is undefined', async () => {
+    expect(await applyHeadTransform(BASE_HTML, undefined)).toBe(BASE_HTML)
+  })
+
+  it('injects user-supplied link tags into the head', async () => {
+    const out = await applyHeadTransform(BASE_HTML, {
+      link: [{ rel: 'preconnect', href: 'https://fonts.googleapis.com' }],
+    })
+    expect(out).toContain('<link rel="preconnect" href="https://fonts.googleapis.com">')
+  })
+
+  it('injects user-supplied meta tags into the head', async () => {
+    const out = await applyHeadTransform(BASE_HTML, {
+      meta: [{ name: 'theme-color', content: '#10b981' }],
+    })
+    expect(out).toContain('<meta name="theme-color" content="#10b981">')
+  })
+
+  it('skips unhead default lang and viewport tags when head is provided', async () => {
+    const out = await applyHeadTransform(BASE_HTML, {
+      meta: [{ name: 'theme-color', content: '#10b981' }],
+    })
+    expect(out).not.toContain('lang="en"')
+    expect(out).not.toMatch(/<meta[^>]*name="viewport"/)
+  })
+})

package/src/node/__tests__/virtual-setup.spec.ts

@@ -0,0 +1,51 @@
+import type { Context } from '../context.js'
+import { describe, expect, it } from 'vitest'
+import { noop } from '../virtual/noop.js'
+import { resolvedGeneratedGlobalSetup } from '../virtual/resolved-generated-global-setup.js'
+
+function contextFactory(config: Partial<Context['config']> = {}): Context {
+  return {
+    config,
+    supportPlugins: [
+      { setupFn: 'setupVanilla' },
+      { setupFn: 'setupVue3' },
+      { setupFn: ['setupSvelte4', 'setupSvelte5'] },
+    ],
+  } as Context
+}
+
+const SETUP_FN_NAMES = ['setupVanilla', 'setupVue3', 'setupSvelte4', 'setupSvelte5']
+
+// Consumers read these hooks off a namespace import behind a `typeof === 'function'`
+// guard. If the module doesn't declare them, Rollup can't resolve the member access
+// statically and warns `"setupVue3" is not exported by ...` in every consumer build.
+describe('virtual setup modules', () => {
+  describe('generated global setup', () => {
+    it('should declare every support plugin setup hook when there is no setup code', () => {
+      const code = resolvedGeneratedGlobalSetup(contextFactory())
+
+      for (const fnName of SETUP_FN_NAMES) {
+        expect(code).toContain(`export const ${fnName} = undefined`)
+      }
+    })
+
+    it('should export a real hook per support plugin when there is setup code', () => {
+      const code = resolvedGeneratedGlobalSetup(contextFactory({ setupCode: ['export function setupVue3() {}'] }))
+
+      for (const fnName of SETUP_FN_NAMES) {
+        expect(code).toContain(`export async function ${fnName} (payload)`)
+      }
+    })
+  })
+
+  describe('noop', () => {
+    it('should keep the default export and declare every setup hook', () => {
+      const code = noop(contextFactory())
+
+      expect(code).toContain('export default () => {}')
+      for (const fnName of SETUP_FN_NAMES) {
+        expect(code).toContain(`export const ${fnName} = undefined`)
+      }
+    })
+  })
+})

package/src/node/bin.ts

@@ -18,7 +18,7 @@ program.command('dev')
   .option('-p, --port <port>', 'Listening port of the server')
   .option('-c, --config <file>', `[string] use specified config file`)
   .option('--open', 'Open in your default browser')
-  .option('--host <host>', '[string] specify hostname')
+  .option('--host [host]', '[string] specify hostname (omit value or pass `0.0.0.0` to expose to all network interfaces)')
   .action(async (options) => {
     const { devCommand } = await import('./commands/dev.js')
     return devCommand(options)
@@ -35,6 +35,8 @@ program.command('build')
 program.command('preview')
   .describe('preview the built directory')
   .option('-p, --port <port>', 'Listening port of the server')
+  .option('--open', 'Open in your default browser')
+  .option('--host [host]', '[string] specify hostname (omit value or pass `0.0.0.0` to expose to all network interfaces)')
   .action(async (options) => {
     const { previewCommand } = await import('./commands/preview.js')
     return previewCommand(options)

package/src/node/build.ts

@@ -27,6 +27,12 @@ import { createMarkdownFilesWatcher } from './markdown.js'
 import { BuildPluginApi } from './plugin.js'
 import { startPreview } from './preview.js'
 import { findAllStories } from './stories.js'
+import {
+  chromeCssScopePlugin,
+  entryCssMergerPlugin,
+  userCssScopePlugin,
+} from './style-isolation/index.js'
+import { applyHeadTransform } from './util/head.js'
 import { getViteConfigWithPlugins } from './vite.js'
 
 const PRELOAD_MODULES = [
@@ -169,7 +175,8 @@ export async function build(ctx: Context) {
       Object.assign(config.build, {
         outDir: ctx.config.outDir,
         emptyOutDir: true,
-        cssCodeSplit: false,
+        // Re-merged per-entry by entry-css-merger.
+        cssCodeSplit: true,
         minify: false,
         // Don't build in SSR mode
         ssr: false,
@@ -179,6 +186,11 @@ export async function build(ctx: Context) {
     },
   })
 
+  const isolate = ctx.config.isolateStyles !== false
+  buildViteConfig.plugins.push(userCssScopePlugin({ enabled: isolate }))
+  buildViteConfig.plugins.push(chromeCssScopePlugin({ enabled: isolate }))
+  buildViteConfig.plugins.push(entryCssMergerPlugin({ isolateStyles: isolate }))
+
   for (const cb of changeViteConfigCallbacks) {
     console.log('vite config hook', cb)
     await cb(buildViteConfig)
@@ -187,7 +199,14 @@ export async function build(ctx: Context) {
   const results = await viteBuild(buildViteConfig)
   const result = Array.isArray(results) ? results[0] : results as RollupOutput
 
-  const styleOutput = result.output.find(o => o.name === 'style.css' && o.type === 'asset')
+  function findEntryCss(entryName: string) {
+    return result.output.find(
+      o => o.type === 'asset' && o.fileName === `${entryName}.css`,
+    )
+  }
+  const mainStyleOutput = findEntryCss('bundle-main')
+    ?? result.output.find(o => o.name === 'style.css' && o.type === 'asset')
+  const sandboxStyleOutput = findEntryCss('bundle-sandbox') ?? mainStyleOutput
 
   // Preload
   const preloadOutputs = result.output.filter(o => PRELOAD_MODULES.includes(o.name) && o.type === 'chunk')
@@ -199,14 +218,16 @@ export async function build(ctx: Context) {
 
   // Index
   const indexOutput = result.output.find(o => o.name === 'bundle-main' && o.type === 'chunk')
-  const indexHtml = generateEntryHtml(indexOutput.fileName, styleOutput.fileName, {
+  let indexHtml = generateEntryHtml(indexOutput.fileName, mainStyleOutput.fileName, {
     HEAD: `${preloadHtml}${prefetchHtml}`,
   }, ctx)
+  indexHtml = await applyHeadTransform(indexHtml, ctx.config.head)
   await writeFile('index.html', indexHtml, ctx)
 
   // Sandbox
   const sandboxOutput = result.output.find(o => o.name === 'bundle-sandbox' && o.type === 'chunk')
-  const sandboxHtml = generateEntryHtml(sandboxOutput.fileName, styleOutput.fileName, {}, ctx)
+  let sandboxHtml = generateEntryHtml(sandboxOutput.fileName, sandboxStyleOutput.fileName, {}, ctx)
+  sandboxHtml = await applyHeadTransform(sandboxHtml, ctx.config.head)
   await writeFile('__sandbox.html', sandboxHtml, ctx)
 
   await writeFile('poveste.json', JSON.stringify(getSerializedStoryData(ctx), null, 2), ctx)
@@ -219,7 +240,7 @@ export async function build(ctx: Context) {
 
   // Render
   if (previewStoryCallbacks.length) {
-    const { baseUrl, close } = await startPreview(null, ctx)
+    const { baseUrl, close } = await startPreview({}, ctx)
     for (const storyFile of ctx.storyFiles) {
       const story = storyFile.story
       for (const variant of story.variants) {
@@ -255,6 +276,7 @@ function generateBaseHtml(head: string, body: string, ctx: Context) {
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <meta name="description" content="">
+  <style>html,body{margin:0;padding:0}</style>
   ${head}
 </head>
 <body>
@@ -281,3 +303,7 @@ async function writeFile(fileName: string, content: string, ctx: Context) {
 function generateScriptLinks(prefetchScripts: string[], rel: string, ctx: Context) {
   return prefetchScripts.map(s => `<link rel="${rel}" href="${ctx.resolvedViteConfig.base}${s}" as="script" crossOrigin="anonymous">`).join('')
 }
+
+function generateStyleLinks(styleFiles: string[], rel: string, ctx: Context) {
+  return styleFiles.map(s => `<link rel="${rel}" href="${ctx.resolvedViteConfig.base}${s}" as="style">`).join('')
+}