poveste 0.2.1 → 0.3.1

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)

package/src/node/style-isolation/__tests__/entry-css-merger.spec.ts

@@ -1,4 +1,4 @@
-import type { OutputBundle } from 'rollup'
+import type { Rolldown } from 'vite'
 import { describe, expect, it } from 'vitest'
 import { entryCssMergerPlugin } from '../entry-css-merger.js'
 import { USER_CSS_MARK_END, USER_CSS_MARK_START } from '../vite-plugin.js'
@@ -30,25 +30,44 @@ function mark(css: string): string {
   return `${USER_CSS_MARK_START}\n${css}\n${USER_CSS_MARK_END}\n`
 }
 
+// Rolldown ignores assignment to `bundle` in generateBundle, so merged CSS is
+// added via this.emitFile. Capture those emits to assert on them.
+function runMerger(plugin: any, bundle: Rolldown.OutputBundle) {
+  const emitted = new Map<string, any>()
+  const ctx = {
+    emitFile: (file: any) => {
+      emitted.set(file.fileName, file)
+      return file.fileName
+    },
+  }
+  ;(plugin.generateBundle as any).call(ctx, {}, bundle)
+  return emitted
+}
+
 describe('entry-css-merger', () => {
   it('produces one CSS asset per entry chunk', async () => {
     const plugin = entryCssMergerPlugin()
-    const bundle: OutputBundle = {
+    const bundle: Rolldown.OutputBundle = {
       'bundle-main.js': fakeChunk('bundle-main', ['route1.css', 'route2.css']),
       'bundle-sandbox.js': fakeChunk('bundle-sandbox', ['sandbox-route.css']),
       'route1.css': fakeAsset('route1.css', 'a {}'),
       'route2.css': fakeAsset('route2.css', 'b {}'),
       'sandbox-route.css': fakeAsset('sandbox-route.css', 'c {}'),
     }
-    await (plugin.generateBundle as any).call({ emitFile: () => '' }, {}, bundle)
+    const emitted = runMerger(plugin, bundle)
 
-    const cssAssets = Object.values(bundle).filter(a => a.type === 'asset' && a.fileName.endsWith('.css'))
+    const cssAssets = [...emitted.values()].filter(a => a.fileName.endsWith('.css'))
     expect(cssAssets).toHaveLength(2)
-    const mainCss = cssAssets.find(a => a.fileName === 'bundle-main.css')
-    const sandboxCss = cssAssets.find(a => a.fileName === 'bundle-sandbox.css')
+    const mainCss = emitted.get('bundle-main.css')
+    const sandboxCss = emitted.get('bundle-sandbox.css')
     expect(mainCss?.source).toContain('a {}')
     expect(mainCss?.source).toContain('b {}')
     expect(sandboxCss?.source).toContain('c {}')
+
+    // The per-chunk CSS assets are dropped from the bundle once merged.
+    expect(bundle['route1.css']).toBeUndefined()
+    expect(bundle['route2.css']).toBeUndefined()
+    expect(bundle['sandbox-route.css']).toBeUndefined()
   })
 
   it('wraps marked user CSS in @scope on the main entry when isolation is enabled', async () => {
@@ -57,14 +76,14 @@ describe('entry-css-merger', () => {
       scopeRoot: '.__poveste-render-story',
       mainEntryName: 'bundle-main',
     })
-    const bundle: OutputBundle = {
+    const bundle: Rolldown.OutputBundle = {
       'bundle-main.js': fakeChunk('bundle-main', ['user.css', 'chrome.css']),
       'user.css': fakeAsset('user.css', mark('body { color: red }')),
       'chrome.css': fakeAsset('chrome.css', '@scope (.poveste-app-root) { .x {} }'),
     }
-    await (plugin.generateBundle as any).call({ emitFile: () => '' }, {}, bundle)
+    const emitted = runMerger(plugin, bundle)
 
-    const main = Object.values(bundle).find(a => a.type === 'asset' && a.fileName === 'bundle-main.css') as any
+    const main = emitted.get('bundle-main.css')
     expect(main.source).toContain('@scope (.__poveste-render-story)')
     expect(main.source).toContain('color: red')
     expect(main.source).toContain('@scope (.poveste-app-root)')
@@ -77,13 +96,13 @@ describe('entry-css-merger', () => {
       scopeRoot: '.__poveste-render-story',
       mainEntryName: 'bundle-main',
     })
-    const bundle: OutputBundle = {
+    const bundle: Rolldown.OutputBundle = {
       'bundle-sandbox.js': fakeChunk('bundle-sandbox', ['user.css']),
       'user.css': fakeAsset('user.css', mark('body { color: red }')),
     }
-    await (plugin.generateBundle as any).call({ emitFile: () => '' }, {}, bundle)
+    const emitted = runMerger(plugin, bundle)
 
-    const sandbox = Object.values(bundle).find(a => a.type === 'asset' && a.fileName === 'bundle-sandbox.css') as any
+    const sandbox = emitted.get('bundle-sandbox.css')
     expect(sandbox.source).toContain('body')
     expect(sandbox.source).toContain('color: red')
     expect(sandbox.source).not.toContain('@scope')
@@ -95,14 +114,14 @@ describe('entry-css-merger', () => {
     const main = fakeChunk('bundle-main', ['app.css'], '', { imports: ['vendor.js'], isEntry: true })
     main.fileName = 'bundle-main.js'
     const vendor = { ...fakeChunk('vendor', ['vendor.css']), isEntry: false, fileName: 'vendor.js' }
-    const bundle: OutputBundle = {
+    const bundle: Rolldown.OutputBundle = {
       'bundle-main.js': main,
       'vendor.js': vendor,
       'app.css': fakeAsset('app.css', '.app {}'),
       'vendor.css': fakeAsset('vendor.css', '.vendor {}'),
     }
-    await (plugin.generateBundle as any).call({ emitFile: () => '' }, {}, bundle)
-    const mainCss = Object.values(bundle).find(a => a.type === 'asset' && a.fileName === 'bundle-main.css') as any
+    const emitted = runMerger(plugin, bundle)
+    const mainCss = emitted.get('bundle-main.css')
     expect(mainCss.source).toContain('.app')
     expect(mainCss.source).toContain('.vendor')
   })
@@ -113,13 +132,13 @@ describe('entry-css-merger', () => {
       scopeRoot: '.__poveste-render-story',
       mainEntryName: 'bundle-main',
     })
-    const bundle: OutputBundle = {
+    const bundle: Rolldown.OutputBundle = {
       'bundle-main.js': fakeChunk('bundle-main', ['user.css']),
       'user.css': fakeAsset('user.css', mark('body { color: red }')),
     }
-    await (plugin.generateBundle as any).call({ emitFile: () => '' }, {}, bundle)
+    const emitted = runMerger(plugin, bundle)
 
-    const main = Object.values(bundle).find(a => a.type === 'asset' && a.fileName === 'bundle-main.css') as any
+    const main = emitted.get('bundle-main.css')
     expect(main.source).not.toContain('@scope')
     expect(main.source).not.toContain(USER_CSS_MARK_START)
   })

package/src/node/style-isolation/__tests__/transforms.spec.ts

@@ -1,21 +1,48 @@
 import { describe, expect, it } from 'vitest'
 import { isGlobalImport, wrapChromeCss, wrapUserCss } from '../transforms.js'
 
+/** Selectors of every rule inside the wrap, so a test can assert on them whole. */
+function selectorsIn(css: string): string[] {
+  return css.split('{')
+    .slice(0, -1)
+    .map(chunk => chunk.slice(chunk.lastIndexOf('}') + 1).trim())
+    .filter(selector => selector.length > 0 && !selector.startsWith('@'))
+}
+
 describe('wrapUserCss', () => {
   it('wraps a single rule in @scope (.scope-root)', () => {
-    const out = wrapUserCss('body { color: red }', { scopeRoot: '.__poveste-render-story' })
+    const out = wrapUserCss('main { color: red }', { scopeRoot: '.__poveste-render-story' })
     expect(out).toContain('@scope (.__poveste-render-story)')
-    expect(out).toContain('body')
+    expect(out).toContain('main')
     expect(out).toContain('color: red')
   })
 
-  it('rewrites :root → :scope inside the scope', () => {
-    const out = wrapUserCss(':root { --color-primary: blue }', {
+  // Every root spelling has to land on :scope. A rule left as `html`/`body`
+  // targets an ancestor of the scoping root and can never match — silently,
+  // which is what made #116 survive this long. Asserting the whole selector
+  // rather than "contains :scope": the failure mode is a leftover `html`, and
+  // a substring check passes right over it.
+  it.each([
+    [':root', ':root { --brand: rebeccapurple }', ':scope'],
+    ['html', 'html { --brand: rebeccapurple }', ':scope'],
+    ['body', 'body { --brand: rebeccapurple }', ':scope'],
+    ['BODY', 'BODY { --brand: rebeccapurple }', ':scope'],
+    ['body .card', 'body .card { --brand: rebeccapurple }', ':scope .card'],
+    ['body.dark .card', 'body.dark .card { --brand: rebeccapurple }', ':scope.dark .card'],
+    ['.body-copy', '.body-copy { --brand: rebeccapurple }', '.body-copy'],
+    ['.page-html', '.page-html { --brand: rebeccapurple }', '.page-html'],
+  ])('compiles %s to a selector that can still match', (_input, css, expected) => {
+    const out = wrapUserCss(css, { scopeRoot: '.__poveste-render-story' })
+
+    expect(selectorsIn(out)).toEqual([expected])
+  })
+
+  it('rewrites root selectors nested in at-rules', () => {
+    const out = wrapUserCss('@media (min-width: 700px) { body { --brand: rebeccapurple } }', {
       scopeRoot: '.__poveste-render-story',
     })
-    expect(out).toContain(':scope')
-    expect(out).not.toContain(':root')
-    expect(out).toContain('--color-primary: blue')
+
+    expect(selectorsIn(out)).toEqual([':scope'])
   })
 
   it('leaves :scope alone (idempotent)', () => {
@@ -47,7 +74,18 @@ describe('wrapChromeCss', () => {
       scopeLower: '.__poveste-render-story',
     })
     expect(out).toContain('@scope (.poveste-app-root) to (.__poveste-render-story)')
-    expect(out).toContain('body')
+    expect(out).toContain('color: red')
+  })
+
+  // Same rule as the user side: inside the wrap, `body` means the app's root
+  // container, which is what :scope resolves to (#102).
+  it('rewrites html and body to :scope', () => {
+    const out = wrapChromeCss('body { font-size: .875rem }\nhtml { color-scheme: dark }', {
+      scopeRoot: '.poveste-app-root',
+      scopeLower: '.__poveste-render-story',
+    })
+    expect(out).toContain(':scope')
+    expect(out).not.toMatch(/(?:^|[\s,{])(?:html|body)\b/m)
   })
 
   it('hoists @import to the top, outside @scope', () => {

package/src/node/style-isolation/entry-css-merger.ts

@@ -1,4 +1,3 @@
-import type { OutputBundle } from 'rollup'
 import type { Plugin as VitePlugin } from 'vite'
 import { STORY_SCOPE_ROOT } from './selectors.js'
 import { wrapUserCss } from './transforms.js'
@@ -17,7 +16,7 @@ export function entryCssMergerPlugin(opts: EntryCssMergerOptions = { isolateStyl
     name: 'poveste:style-isolation:entry-css-merger',
     apply: 'build',
     enforce: 'post',
-    generateBundle(_options, bundle: OutputBundle) {
+    generateBundle(_options, bundle) {
       function collectChunkCss(entryFileName: string, entryName: string, acc: Map<string, string[]>) {
         const seen = new Set<string>()
         const queue = [entryFileName]
@@ -48,6 +47,7 @@ export function entryCssMergerPlugin(opts: EntryCssMergerOptions = { isolateStyl
       }
 
       const mergedByEntry = new Map<string, string[]>()
+      const mergedCssAssets: string[] = []
       for (const [cssName, entries] of cssAssetUsedBy) {
         const asset = bundle[cssName]
         if (!asset || asset.type !== 'asset') continue
@@ -59,6 +59,13 @@ export function entryCssMergerPlugin(opts: EntryCssMergerOptions = { isolateStyl
           list.push(source)
           mergedByEntry.set(entryName, list)
         }
+        mergedCssAssets.push(cssName)
+      }
+
+      // Rolldown ignores assignment to `bundle` in generateBundle, so the merged
+      // files are added with this.emitFile. The now-merged per-chunk CSS assets
+      // are dropped so they don't ship as unscoped, orphaned duplicates.
+      for (const cssName of mergedCssAssets) {
         delete bundle[cssName]
       }
 
@@ -68,13 +75,7 @@ export function entryCssMergerPlugin(opts: EntryCssMergerOptions = { isolateStyl
         const finalSource = entryName === mainEntryName && opts.isolateStyles
           ? wrapMarkedUserCss(merged, scopeRoot)
           : stripMarkers(merged)
-        bundle[fileName] = {
-          type: 'asset',
-          fileName,
-          name: fileName,
-          source: finalSource,
-          needsCodeReference: false,
-        } as any
+        this.emitFile({ type: 'asset', fileName, source: finalSource })
       }
 
       // Re-point CSS metadata: entries claim their own merged file; non-entry

package/src/node/style-isolation/transforms.ts

@@ -16,7 +16,7 @@ export function wrapUserCss(css: string, opts: WrapOptions): string {
     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` : ''
@@ -29,10 +29,10 @@ export function wrapChromeCss(css: string, opts: WrapWithLowerOptions): string {
     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` : ''
@@ -46,19 +46,48 @@ export function isGlobalImport(id: string): boolean {
   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: string): boolean {
+  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: string): boolean {
+  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: string): string {
+  const scope = { type: 'pseudo-class', kind: 'scope' } as const
   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 as any).kind === 'root') {
-            ;(part as any).kind = 'scope'
+            return scope as unknown as typeof part
+          }
+          if (part.type === 'type' && isRootTypeSelector(part.name)) {
+            return scope as unknown as typeof part
           }
-        }
-        return selector
+          return part
+        })
       },
     },
   })

package/src/node/vite.ts

@@ -30,9 +30,9 @@ export async function mergePovesteViteConfig(viteConfig: InlineConfig, ctx: Cont
     const command = ctx.mode === 'dev' ? 'serve' : 'build'
     const overrides = typeof ctx.config.vite === 'function'
       ? await ctx.config.vite(viteConfig as ViteConfig, {
-        mode: ctx.mode,
-        command,
-      })
+          mode: ctx.mode,
+          command,
+        })
       : ctx.config.vite
     if (overrides) {
       viteConfig = mergeViteConfig(viteConfig, overrides)
@@ -324,7 +324,7 @@ export async function getViteConfigWithPlugins(isServer: boolean, ctx: Context):
     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/tsconfig.json

@@ -10,7 +10,7 @@
     "baseUrl": ".",
     "rootDir": "src",
     "module": "ESNext",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "types": [
       "node"