poveste 0.2.0 → 0.3.0

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/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/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"