poveste 0.2.1 → 0.3.1

package/dist/node/style-isolation/transforms.js

@@ -6,7 +6,7 @@ export function wrapUserCss(css, opts) {
         return css;
     }
     const { hoisted, remainder } = extractHoistableAtRules(css);
-    const body = remainder.includes(':root')
+    const body = hasRootSelector(remainder)
         ? rewriteRootToScope(remainder)
         : remainder;
     const hoistedBlock = hoisted.length > 0 ? `${hoisted.join('\n')}\n` : '';
@@ -18,10 +18,10 @@ export function wrapChromeCss(css, opts) {
         return css;
     }
     const { hoisted, remainder } = extractHoistableAtRules(css);
-    // Rewrite `:root` to `:scope` so source-level `@scope (:root) to (...)`
+    // Rewrite root selectors to `:scope` so source-level `@scope (:root) to (...)`
     // rules nest correctly under the outer scope; without this, the inner
     // `:root` resolves to the document root which is outside the outer scope.
-    const body = remainder.includes(':root')
+    const body = hasRootSelector(remainder)
         ? rewriteRootToScope(remainder)
         : remainder;
     const hoistedBlock = hoisted.length > 0 ? `${hoisted.join('\n')}\n` : '';
@@ -34,20 +34,44 @@ export function isGlobalImport(id) {
     const parts = id.slice(q + 1).split('&');
     return parts.includes('global') || parts.some(p => p.startsWith('global='));
 }
+// `html` and `body` sit above the scoping root once the sheet is wrapped, so a
+// rule targeting either can never match. Inside a story they mean the same
+// thing `:root` does — the one root there is — which is what `:scope`
+// resolves to. Leaving them out made `body { font-size: 14px }` inert with no
+// error (#116); the chrome wrapper learned the same lesson in #102.
+const ROOT_TYPE_SELECTORS = new Set(['html', 'body']);
+// Only a gate on the lightningcss round-trip, so a false positive costs a
+// reparse and nothing else. Word-bounded to skip `.sidebar-body` and friends.
+const ROOT_SELECTOR_RE = /:root|(?:^|[\s,{}>+~])(?:html|body)\b/i;
+function hasRootSelector(css) {
+    return ROOT_SELECTOR_RE.test(css);
+}
+// Type selectors are ASCII case-insensitive against HTML and lightningcss
+// reports the name as authored, so `BODY { … }` arrives spelled `BODY`.
+function isRootTypeSelector(name) {
+    return ROOT_TYPE_SELECTORS.has(name.toLowerCase());
+}
+// Top level of the selector only: lightningcss hands `:is()`/`:where()`/`:not()`
+// over as one part with the inner selectors nested inside, so a root spelled
+// `:is(html, body)` is left alone. Descending needs a decision on `:not()`,
+// where rewriting would change what the rule matches rather than fix it (#124).
 function rewriteRootToScope(css) {
+    const scope = { type: 'pseudo-class', kind: 'scope' };
     const processed = lightningcssTransform({
         filename: 'user.css',
         code: Buffer.from(css, 'utf8'),
         minify: false,
         visitor: {
             Selector(selector) {
-                for (const part of selector) {
+                return selector.map((part) => {
                     if (part.type === 'pseudo-class' && part.kind === 'root') {
-                        ;
-                        part.kind = 'scope';
+                        return scope;
+                    }
+                    if (part.type === 'type' && isRootTypeSelector(part.name)) {
+                        return scope;
                     }
-                }
-                return selector;
+                    return part;
+                });
             },
         },
     });

package/dist/node/vite.js

@@ -283,7 +283,7 @@ export async function getViteConfigWithPlugins(isServer, ctx) {
         name: 'poveste:flags',
         enforce: 'pre',
         transform(code, id) {
-            if (id.match(/\.(vue|js)($|\?)/)) {
+            if (/\.(?:vue|js)(?:$|\?)/.test(id)) {
                 const original = code;
                 for (const flag in flags) {
                     code = code.replace(new RegExp(flag, 'g'), flags[flag]);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "poveste",
   "type": "module",
-  "version": "0.2.1",
+  "version": "0.3.1",
   "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.1",
-    "@poveste/controls": "^0.2.1",
-    "@poveste/shared": "^0.2.1",
-    "@poveste/vendors": "^0.2.1"
+    "vite-node": "^6.0.0",
+    "@poveste/app": "^0.3.1",
+    "@poveste/controls": "^0.3.1",
+    "@poveste/vendors": "^0.3.1",
+    "@poveste/shared": "^0.3.1"
   },
   "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
-    }
-  }
-}