poveste 0.2.0 → 0.3.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "poveste",
   "type": "module",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "A fast story book powered by Vite",
   "author": {
     "name": "Sorin Gitlan"
@@ -38,7 +38,7 @@
     "histoire": "./bin.mjs"
   },
   "peerDependencies": {
-    "vite": "^7.0.0 || ^8.0.0"
+    "vite": "^8.0.0"
   },
   "dependencies": {
     "@akryum/tinypool": "^0.3.1",
@@ -53,7 +53,7 @@
     "globby": "^14.0.2",
     "gray-matter": "^4.0.3",
     "jiti": "^2.4.1",
-    "jsdom": "^27.4.0",
+    "jsdom": "^30.0.1",
     "lightningcss": "^1.32.0",
     "markdown-it": "^14.1.0",
     "markdown-it-anchor": "^9.2.0",
@@ -67,20 +67,18 @@
     "shiki": "^3.0.0",
     "sirv": "^3.0.0",
     "unhead": "^3.1.0",
-    "vite-node": "3.2.4",
-    "@poveste/app": "^0.2.0",
-    "@poveste/controls": "^0.2.0",
-    "@poveste/shared": "^0.2.0",
-    "@poveste/vendors": "^0.2.0"
+    "vite-node": "^6.0.0",
+    "@poveste/app": "^0.3.0",
+    "@poveste/controls": "^0.3.0",
+    "@poveste/shared": "^0.3.0",
+    "@poveste/vendors": "^0.3.0"
   },
   "devDependencies": {
     "@types/fs-extra": "^11.0.4",
     "@types/node": "^22.10.1",
-    "esbuild": "^0.27.2",
-    "rollup": "^4.28.0",
     "typescript": "5.6.3",
-    "vite": "^7.3.0",
-    "vitest": "4.0.16"
+    "vite": "^8.2.0",
+    "vitest": "^4.1.10"
   },
   "scripts": {
     "build": "rimraf dist && tsc",

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

@@ -10,8 +10,25 @@ describe('createDomEnv', () => {
     errorSpy?.mockRestore()
   })
 
-  describe('when a stylesheet contains unparseable directives (e.g. Tailwind v4 @theme)', () => {
+  describe('when a stylesheet contains CSS jsdom cannot parse', () => {
+    // An unparseable selector is one of the few inputs jsdom 28+ still reports
+    // a css-parsing jsdomError for, so it is what keeps this guard honest.
+    // Remove the suppression in `env.ts` and this test fails.
     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 = '.btn[[[ { color: red }'
+
+      env.window.document.head.appendChild(style)
+
+      expect(errorSpy).not.toHaveBeenCalled()
+    })
+
+    // The symptom that motivated the suppression. jsdom now drops the unknown
+    // at-rule silently and keeps the rest of the sheet, so this passes on its
+    // own merits — it is here to catch a regression, not to cover the guard.
+    it('parses a Tailwind v4 @theme sheet without complaining', () => {
       errorSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
       env = createDomEnv()
       const style = env.window.document.createElement('style')
@@ -20,6 +37,7 @@ describe('createDomEnv', () => {
       env.window.document.head.appendChild(style)
 
       expect(errorSpy).not.toHaveBeenCalled()
+      expect(env.window.document.styleSheets[0].cssRules).toHaveLength(1)
     })
   })
 

package/src/node/build.ts

@@ -3,8 +3,8 @@ import type {
   ChangeViteConfigCallback,
   PreviewStoryCallback,
 } from '@poveste/shared'
-import type { RollupOutput } from 'rollup'
 import type {
+  Rolldown,
   InlineConfig as ViteInlineConfig,
   Plugin as VitePlugin,
 } from 'vite'
@@ -197,7 +197,7 @@ export async function build(ctx: Context) {
   }
 
   const results = await viteBuild(buildViteConfig)
-  const result = Array.isArray(results) ? results[0] : results as RollupOutput
+  const result = Array.isArray(results) ? results[0] : results as Rolldown.RolldownOutput
 
   function findEntryCss(entryName: string) {
     return result.output.find(
@@ -303,7 +303,3 @@ 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('')
-}

package/src/node/builtin-plugins/tailwind-tokens.ts

@@ -3,20 +3,35 @@ import { findUp } from '../util/find-up.js'
 import { getInjectedImport } from '../util/vendors.js'
 
 export interface TailwindTokensOptions {
-  configFile?: string
+  /**
+   * Path to the CSS entrypoint that imports Tailwind and declares `@theme`.
+   * Tailwind v4 is CSS-first, so the design tokens are read from CSS rather
+   * than from a JS config. Auto-detected when omitted.
+   */
+  cssFile?: string
 }
 
+const CSS_ENTRY_CANDIDATES = [
+  'src/style.css',
+  'src/styles.css',
+  'src/main.css',
+  'src/index.css',
+  'src/app.css',
+  'src/assets/main.css',
+  'src/assets/style.css',
+  'src/assets/css/main.css',
+  // Nuxt conventions
+  'app/assets/css/main.css',
+  'assets/css/main.css',
+  // Next.js conventions
+  'styles/globals.css',
+  'app/globals.css',
+  'style.css',
+  'styles.css',
+]
+
 export function tailwindTokens(options: TailwindTokensOptions = {}): Plugin {
-  const tailwindConfigFile = options.configFile ?? findUp(process.cwd(), [
-    'tailwind.config.js',
-    'tailwind.config.cjs',
-    'tailwind.config.mjs',
-    'tailwind.config.ts',
-    'tailwind-config.js',
-    'tailwind-config.cjs',
-    'tailwind-config.mjs',
-    'tailwind-config.ts',
-  ])
+  const tailwindCssFile = options.cssFile ?? findUp(process.cwd(), CSS_ENTRY_CANDIDATES)
 
   async function generate(api: PluginApiBase) {
     try {
@@ -24,11 +39,9 @@ export function tailwindTokens(options: TailwindTokensOptions = {}): Plugin {
       await api.fs.emptyDir(api.pluginTempDir)
       api.moduleLoader.clearCache()
       await api.fs.writeFile(api.path.resolve(api.pluginTempDir, 'style.css'), css)
-      const tailwindConfig = await api.moduleLoader.loadModule(tailwindConfigFile)
-      const { default: resolveConfig } = await import('tailwindcss/resolveConfig.js')
-      const resolvedTailwindConfig = resolveConfig(tailwindConfig.default ?? tailwindConfig)
+      const theme = await loadTailwindTheme(api, tailwindCssFile)
       const storyFile = api.path.resolve(api.pluginTempDir, 'Tailwind.story.js')
-      await api.fs.writeFile(storyFile, storyTemplate(resolvedTailwindConfig))
+      await api.fs.writeFile(storyFile, storyTemplate({ theme }))
       api.addStoryFile(storyFile)
     }
     catch (e) {
@@ -40,7 +53,7 @@ export function tailwindTokens(options: TailwindTokensOptions = {}): Plugin {
     name: 'builtin:tailwind-tokens',
 
     config(config) {
-      if (tailwindConfigFile) {
+      if (tailwindCssFile) {
         // Add 'design-system' group
         if (!config.tree) {
           config.tree = {}
@@ -65,8 +78,8 @@ export function tailwindTokens(options: TailwindTokensOptions = {}): Plugin {
     },
 
     onDev(api, onCleanup) {
-      if (tailwindConfigFile) {
-        const watcher = api.watcher.watch(tailwindConfigFile)
+      if (tailwindCssFile) {
+        const watcher = api.watcher.watch(tailwindCssFile)
           .on('change', () => generate(api))
           .on('add', () => generate(api))
         onCleanup(() => {
@@ -76,13 +89,156 @@ export function tailwindTokens(options: TailwindTokensOptions = {}): Plugin {
     },
 
     async onBuild(api) {
-      if (tailwindConfigFile) {
+      if (tailwindCssFile) {
         await generate(api)
       }
     },
   }
 }
 
+/**
+ * Tailwind v4 keeps its theme as flat CSS custom properties rather than a
+ * resolved JS config (`resolveConfig` is gone). Load the design system from the
+ * project's CSS entrypoint and reshape its variables into the grouped structure
+ * the story template renders.
+ */
+/**
+ * Resolve a stylesheet referenced from CSS. A bare package specifier resolves
+ * to the JS entry, so its `style` field is used instead — that is how
+ * `@import 'tailwindcss'` reaches `tailwindcss/index.css`.
+ */
+async function resolveStylesheet(api: PluginApiBase, id: string, importBase: string) {
+  const { createRequire } = await import('node:module')
+  const require = createRequire(`${importBase}/`)
+
+  if (id.startsWith('.')) {
+    return api.path.resolve(importBase, id)
+  }
+  if (id.endsWith('.css')) {
+    return require.resolve(id)
+  }
+  const packageJsonPath = require.resolve(`${id}/package.json`)
+  const packageJson = JSON.parse(await api.fs.readFile(packageJsonPath, 'utf8'))
+  return api.path.resolve(api.path.dirname(packageJsonPath), packageJson.style ?? 'index.css')
+}
+
+async function loadTailwindTheme(api: PluginApiBase, cssFile: string) {
+  const { __unstable__loadDesignSystem } = await import('tailwindcss')
+
+  const base = api.path.dirname(cssFile)
+  const designSystem = await __unstable__loadDesignSystem(
+    await api.fs.readFile(cssFile, 'utf8'),
+    {
+      base,
+      loadStylesheet: async (id: string, importBase: string) => {
+        const resolved = await resolveStylesheet(api, id, importBase)
+        return {
+          path: resolved,
+          base: api.path.dirname(resolved),
+          content: await api.fs.readFile(resolved, 'utf8'),
+        }
+      },
+    },
+  )
+
+  const vars = new Map<string, string>(
+    [...designSystem.theme.entries()].map(([key, entry]: [string, any]) => [key, entry.value]),
+  )
+
+  /** All values in a `--namespace-*` group, keyed by their remainder. */
+  function group(namespace: string, exclude?: RegExp) {
+    const out: Record<string, string> = {}
+    const prefix = `${namespace}-`
+    for (const [key, value] of vars) {
+      if (!key.startsWith(prefix)) continue
+      if (exclude?.test(key)) continue
+      out[key.slice(prefix.length)] = value
+    }
+    return out
+  }
+
+  /** Colours are rendered as shade sets: `red-500` -> `{ red: { 500: … } }`. */
+  function colors() {
+    const out: Record<string, any> = {}
+    for (const [key, value] of Object.entries(group('--color'))) {
+      const match = key.match(/^(.*)-(\d+)$/)
+      if (match) {
+        out[match[1]] ??= {}
+        out[match[1]][match[2]] = value
+      }
+      else {
+        out[key] = value
+      }
+    }
+    return out
+  }
+
+  // v4 generates the spacing scale on demand from a single `--spacing` base,
+  // so the conventional steps are reconstructed here for display.
+  const SPACING_STEPS = [0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64, 72, 80, 96]
+  function spacing() {
+    const unit = vars.get('--spacing') ?? '0.25rem'
+    // Multiply out rather than emitting `calc(0.25rem * 4)`, so the story shows
+    // the resolved length the way the v3 resolved config did.
+    const [, rawAmount, cssUnit] = unit.trim().match(/^([\d.]+)([a-z%]*)$/i) ?? []
+    const amount = Number(rawAmount)
+    const out: Record<string, string> = {}
+    for (const step of SPACING_STEPS) {
+      if (step === 0) {
+        out['0'] = '0px'
+      }
+      else {
+        out[String(step)] = Number.isFinite(amount)
+          ? `${Number((amount * step).toFixed(4))}${cssUnit}`
+          : `calc(${unit} * ${step})`
+      }
+    }
+    return out
+  }
+
+  // Fractions and keywords have no theme variables in v4 — they are static
+  // utilities — but they belong in the sizing scales the story lists.
+  const SIZING_EXTRAS: Record<string, string> = {
+    'auto': 'auto',
+    'full': '100%',
+    'min': 'min-content',
+    'max': 'max-content',
+    'fit': 'fit-content',
+    'px': '1px',
+    '1/2': '50%',
+    '1/3': '33.333333%',
+    '2/3': '66.666667%',
+    '1/4': '25%',
+    '3/4': '75%',
+    '1/5': '20%',
+    '2/5': '40%',
+    '3/5': '60%',
+    '4/5': '80%',
+  }
+
+  const palette = colors()
+  const scale = spacing()
+
+  return {
+    backgroundColor: palette,
+    textColor: palette,
+    borderColor: palette,
+    padding: scale,
+    margin: scale,
+    width: { ...scale, ...SIZING_EXTRAS, screen: '100vw' },
+    height: { ...scale, ...SIZING_EXTRAS, screen: '100vh' },
+    fontSize: group('--text', /--line-height$|--letter-spacing$|--font-weight$/),
+    fontWeight: group('--font-weight'),
+    fontFamily: group('--font', /^--font-weight-/),
+    letterSpacing: group('--tracking'),
+    lineHeight: group('--leading'),
+    dropShadow: group('--drop-shadow'),
+    borderRadius: group('--radius'),
+    // v4 has no border-width namespace; these are the built-in static utilities.
+    borderWidth: { DEFAULT: '1px', 0: '0px', 2: '2px', 4: '4px', 8: '8px' },
+  }
+}
+
 function storyTemplate(tailwindConfig: any) {
   return `
 import 'poveste-style'
@@ -134,7 +290,7 @@ export default {
       onMount: (api) => mountApp(api, () => Object.entries(config.theme.backgroundColor).map(([key, shades]) => h(HstColorShades, {
         key,
         shades: typeof shades === 'object' ? shades : { DEFAULT: shades },
-        getName: shade => (config.prefix ?? '') + (shade === 'DEFAULT' ? \`bg-\${key}\` : \`bg-\${key}-\${shade}\`),
+        getName: shade => '' + (shade === 'DEFAULT' ? \`bg-\${key}\` : \`bg-\${key}-\${shade}\`),
         search: search.value,
       }, ({ color}) => h('div', {
         class: '__pvt-shade',
@@ -157,7 +313,7 @@ export default {
       onMount: (api) => mountApp(api, () => Object.entries(config.theme.textColor).map(([key, shades]) => h(HstColorShades, {
         key,
         shades: typeof shades === 'object' ? shades : { DEFAULT: shades },
-        getName: shade => (config.prefix ?? '') + (shade === 'DEFAULT' ? \`text-\${key}\` : \`text-\${key}-\${shade}\`),
+        getName: shade => '' + (shade === 'DEFAULT' ? \`text-\${key}\` : \`text-\${key}-\${shade}\`),
         search: search.value,
       }, ({ color}) => h('div', {
         class: '__pvt-shade __pvt-text',
@@ -180,7 +336,7 @@ export default {
       onMount: (api) => mountApp(api, () => Object.entries(config.theme.borderColor).map(([key, shades]) => h(HstColorShades, {
         key,
         shades: typeof shades === 'object' ? shades : { DEFAULT: shades },
-        getName: shade => (config.prefix ?? '') + (shade === 'DEFAULT' ? \`border-\${key}\` : \`border-\${key}-\${shade}\`),
+        getName: shade => '' + (shade === 'DEFAULT' ? \`border-\${key}\` : \`border-\${key}-\${shade}\`),
         search: search.value,
       }, ({ color}) => h('div', {
         class: '__pvt-shade __pvt-border',
@@ -202,7 +358,7 @@ export default {
       icon: 'carbon:area',
       onMount: (api) => mountApp(api, () => h(HstTokenList, {
         tokens: config.theme.padding,
-        getName: key => \`\${config.prefix ?? ''}p-\${key}\`,
+        getName: key => \`p-\${key}\`,
       }, ({ token }) => h('div', {
         class: '__pvt-padding',
         style: {
@@ -220,7 +376,7 @@ export default {
       icon: 'carbon:area',
       onMount: (api) => mountApp(api, () => h(HstTokenList, {
         tokens: config.theme.margin,
-        getName: key => \`\${config.prefix ?? ''}m-\${key}\`,
+        getName: key => \`m-\${key}\`,
       }, ({ token }) => h('div', {
         class: '__pvt-margin',
       }, [
@@ -238,7 +394,7 @@ export default {
       icon: 'carbon:text-font',
       onMount: (api) => mountApp(api, () => h(HstTokenList, {
         tokens: config.theme.fontSize,
-        getName: key => \`\${config.prefix ?? ''}text-\${key}\`,
+        getName: key => \`text-\${key}\`,
       }, ({ token }) => h('div', {
         class: '__pvt-truncate',
         style: {
@@ -261,7 +417,7 @@ export default {
       icon: 'carbon:text-font',
       onMount: (api) => mountApp(api, () => h(HstTokenList, {
         tokens: config.theme.fontWeight,
-        getName: key => \`\${config.prefix ?? ''}font-\${key}\`,
+        getName: key => \`font-\${key}\`,
       }, ({ token }) => h('div', {
         class: '__pvt-truncate',
         style: {
@@ -290,7 +446,7 @@ export default {
       icon: 'carbon:text-font',
       onMount: (api) => mountApp(api, () => h(HstTokenList, {
         tokens: config.theme.fontFamily,
-        getName: key => \`\${config.prefix ?? ''}font-\${key}\`,
+        getName: key => \`font-\${key}\`,
       }, ({ token }) => h('div', {
         class: '__pvt-truncate',
         style: {
@@ -319,7 +475,7 @@ export default {
       icon: 'carbon:text-font',
       onMount: (api) => mountApp(api, () => h(HstTokenList, {
         tokens: config.theme.letterSpacing,
-        getName: key => \`\${config.prefix ?? ''}tracking-\${key}\`,
+        getName: key => \`tracking-\${key}\`,
       }, ({ token }) => h('div', {
         class: '__pvt-truncate',
         style: {
@@ -348,7 +504,7 @@ export default {
       icon: 'carbon:text-font',
       onMount: (api) => mountApp(api, () => h(HstTokenList, {
         tokens: config.theme.lineHeight,
-        getName: key => \`\${config.prefix ?? ''}leading-\${key}\`,
+        getName: key => \`leading-\${key}\`,
       }, ({ token }) => h('div', {
         style: {
           lineHeight: token.value,
@@ -370,7 +526,7 @@ export default {
       icon: 'carbon:shape-except',
       onMount: (api) => mountApp(api, () => h(HstTokenGrid, {
         tokens: config.theme.dropShadow,
-        getName: key => (config.prefix ?? '') + (key === 'DEFAULT' ? 'drop-shadow' : \`drop-shadow-\${key}\`),
+        getName: key => '' + (key === 'DEFAULT' ? 'drop-shadow' : \`drop-shadow-\${key}\`),
         colSize: 180,
       }, ({ token }) => h('div', {
         class: '__pvt-drop-shadow',
@@ -385,7 +541,7 @@ export default {
       icon: 'carbon:condition-wait-point',
       onMount: (api) => mountApp(api, () => h(HstTokenGrid, {
         tokens: config.theme.borderRadius,
-        getName: key => (config.prefix ?? '') + (key === 'DEFAULT' ? 'rounded' : \`rounded-\${key}\`),
+        getName: key => '' + (key === 'DEFAULT' ? 'rounded' : \`rounded-\${key}\`),
         colSize: 180,
       }, ({ token }) => h('div', {
         class: '__pvt-border-radius',
@@ -400,7 +556,7 @@ export default {
       icon: 'carbon:checkbox',
       onMount: (api) => mountApp(api, () => h(HstTokenGrid, {
         tokens: config.theme.borderWidth,
-        getName: key => (config.prefix ?? '') + (key === 'DEFAULT' ? 'border' : \`border-\${key}\`),
+        getName: key => '' + (key === 'DEFAULT' ? 'border' : \`border-\${key}\`),
         colSize: 180,
       }, ({ token }) => h('div', {
         class: '__pvt-border-width',
@@ -415,7 +571,7 @@ export default {
       icon: 'carbon:pan-horizontal',
       onMount: (api) => mountApp(api, () => h(HstTokenList, {
         tokens: config.theme.width,
-        getName: key => (config.prefix ?? '') + (key === 'DEFAULT' ? 'w' : \`w-\${key}\`),
+        getName: key => '' + (key === 'DEFAULT' ? 'w' : \`w-\${key}\`),
       }, ({ token }) => h('div', {
         class: '__pvt-width',
       }, [
@@ -433,7 +589,7 @@ export default {
       icon: 'carbon:pan-vertical',
       onMount: (api) => mountApp(api, () => h(HstTokenList, {
         tokens: config.theme.height,
-        getName: key => (config.prefix ?? '') + (key === 'DEFAULT' ? 'h' : \`h-\${key}\`),
+        getName: key => '' + (key === 'DEFAULT' ? 'h' : \`h-\${key}\`),
       }, ({ token }) => h('div', {
         class: '__pvt-height',
         style: {

package/src/node/collect/index.ts

@@ -127,9 +127,7 @@ export function useCollectStories(options: UseCollectStoriesOptions, ctx: Contex
       // Default props
       if (ctx.config.defaultStoryProps) {
         for (const key in ctx.config.defaultStoryProps) {
-          if (finalData[key] == null) {
-            finalData[key] = ctx.config.defaultStoryProps[key]
-          }
+          finalData[key] ??= ctx.config.defaultStoryProps[key]
         }
       }
 

package/src/node/config.ts

@@ -265,6 +265,9 @@ export async function resolveConfig(cwd: string = process.cwd(), mode: ConfigMod
     result = await loadConfigFile(resolvedConfigFile)
   }
   const viteConfig = await resolveViteConfig({}, 'serve')
+  // The `histoire` key is our own deprecation, and reading it is the whole
+  // point — it is what makes poveste drop-in for an existing histoire config.
+  // eslint-disable-next-line ts/no-deprecated
   const vitePovesteConfig = (viteConfig.poveste ?? viteConfig.histoire ?? {}) as PovesteConfig
 
   const preUserConfig = mergeConfig(result, vitePovesteConfig)

package/src/node/dom/env.ts

@@ -8,12 +8,16 @@ import { populateGlobal } from './util.js'
 const JSDOM_ERROR_CSS_PARSING = 'css-parsing'
 const JSDOM_ERROR_UNHANDLED_EXCEPTION = 'unhandled-exception'
 
-// Directives JSDOM's CSS parser doesn't know — Tailwind v4's `@theme` is the
-// common one — make it emit a jsdomError per stylesheet, so collecting stories
-// from a Tailwind app prints "Could not parse CSS stylesheet" over and over.
-// The parser recovers on its own and keeps the valid rules, so the message is
-// pure noise: drop css-parsing errors, mirror jsdom's default forwardTo for
-// the rest.
+// CSS jsdom's parser can't make sense of makes it emit a jsdomError per
+// stylesheet, so collecting stories from an app with such a stylesheet prints
+// "Could not parse CSS stylesheet" over and over. The parser recovers on its
+// own and keeps the valid rules, so the message is pure noise: drop
+// css-parsing errors, mirror jsdom's default forwardTo for the rest.
+//
+// jsdom 28 moved to css-tree, which recovers browser-style and stays quiet for
+// most of what jsdom 27 complained about — Tailwind v4's `@theme`, unknown
+// at-rules, unterminated strings. It still reports some inputs (an
+// unparseable selector, for one), so this stays.
 function createVirtualConsole(): VirtualConsole | undefined {
   if (!console || !globalThis.console) return undefined
   const virtualConsole = new VirtualConsole().forwardTo(globalThis.console, { jsdomErrors: 'none' })

package/src/node/index.ts

@@ -2,11 +2,3 @@ export { defaultColors } from './colors.js'
 export * from './config.js'
 export * from './plugin.js'
 export * from '@poveste/shared'
-
-declare module 'rollup' {
-  interface PluginContextMeta {
-    poveste: {
-      isCollecting: boolean
-    }
-  }
-}

package/src/node/markdown.ts

@@ -1,4 +1,5 @@
 import type { ServerMarkdownFile } from '@poveste/shared'
+import type { Highlighter } from 'shiki'
 import type { Plugin as VitePlugin } from 'vite'
 import type { Context } from './context.js'
 import { kebabCase } from 'change-case'
@@ -28,14 +29,35 @@ function notifyMarkdownListChange() {
   }
 }
 
-export async function createMarkdownRenderer(ctx: Context) {
-  const highlighter = await createHighlighter({
+/**
+ * Shared between the markdown Vite plugin and the markdown file watcher, which
+ * both build a renderer — a `poveste build` reaches this three times. The
+ * themes and langs are constant, and each instance eagerly loads every bundled
+ * grammar, so the duplicates are pure waste.
+ */
+let highlighterPromise: Promise<Highlighter> | undefined
+
+function getHighlighter() {
+  highlighterPromise ??= createHighlighter({
     themes: ['github-dark'],
     langs: Object.keys(bundledLanguages), // not ideal but markdown-it does not provide async highlight
   })
 
+  return highlighterPromise
+}
+
+export async function createMarkdownRenderer(ctx: Context) {
+  const highlighter = await getHighlighter()
+
   const md = new MarkdownIt({
-    highlight: (code, lang) => `<div class="ptw-relative ptw-not-prose __poveste-code __histoire-code"><div class="ptw-absolute ptw-top-0 ptw-right-0 ptw-text-xs ptw-text-white/40">${lang}</div>${highlighter.codeToHtml(code, { theme: 'github-dark', lang })}</div>`,
+    /*
+     * Unprefixed utilities: the `ptw-` prefix went away with Tailwind v4, and
+     * `not-prose` in particular is matched by the typography plugin's own
+     * `[class~="not-prose"]` selector, so a prefixed spelling silently opts the
+     * block back *into* prose. These classes are generated because main.pcss
+     * `@source`s this file — v4 auto-detection only scans the app package.
+     */
+    highlight: (code, lang) => `<div class="relative not-prose __poveste-code __histoire-code"><div class="absolute top-0 right-0 text-xs text-white/40">${lang}</div>${highlighter.codeToHtml(code, { theme: 'github-dark', lang })}</div>`,
     linkify: true,
     html: true,
     breaks: false,

package/src/node/stories.ts

@@ -76,7 +76,7 @@ export async function watchStories(newContext: Context) {
   watcher
     .on('add', (file) => {
       const storyFile = addStory(file)
-      setTimeout(() => notifyStoryChange(storyFile), 100) // Delay in case file renaming fired Add event before Unlink event
+      setTimeout(notifyStoryChange, 100, storyFile) // Delay in case file renaming fired Add event before Unlink event
     })
     .on('unlink', (file) => {
       removeStory(file)