fix(astrolabe): Fix CSS loading for Nextcloud apps

Two issues prevented CSS from loading correctly:

1. Entry point naming mismatch: Vite output `main.css` but Nextcloud's
   `Util::addStyle('astrolabe', 'astrolabe-main')` expected `astrolabe-main.css`

2. CSS code splitting: Vite extracted @nextcloud/vue component styles
   into separate chunks (e.g., NcUserBubble-*.css) that Nextcloud doesn't
   load automatically. Without these styles, the UI rendered incorrectly.

Changes:
- Rename entry point from `main` to `astrolabe-main`
- Add `cssCodeSplit: false` to bundle all CSS into the entry point
- Update assetFileNames to output consistent `astrolabe-main.css`

This increases CSS bundle from 11KB to 286KB but ensures all component
styles are available when the page loads.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Chris Coutinho
2025-12-30 11:05:34 -06:00
parent 55312b1032
commit dd23191987
+5 -3
View File
@@ -7,9 +7,10 @@ export default defineConfig({
build: {
outDir: '.',
emptyOutDir: false,
cssCodeSplit: false, // Bundle all CSS into entry points (Nextcloud doesn't load CSS chunks)
rollupOptions: {
input: {
main: resolve(__dirname, 'src/main.js'),
'astrolabe-main': resolve(__dirname, 'src/main.js'),
'astrolabe-adminSettings': resolve(__dirname, 'src/adminSettings.js'),
'astrolabe-personalSettings': resolve(__dirname, 'src/personalSettings.js'),
},
@@ -17,9 +18,10 @@ export default defineConfig({
entryFileNames: 'js/[name].mjs',
chunkFileNames: 'js/[name]-[hash].chunk.mjs',
assetFileNames: (assetInfo) => {
// Output CSS to css/ directory, JS/other assets to js/
// With cssCodeSplit:false, all CSS goes to a single file
// Name it astrolabe-main.css to match Nextcloud's Util::addStyle expectation
if (assetInfo.name && assetInfo.name.endsWith('.css')) {
return 'css/[name][extname]';
return 'css/astrolabe-main.css';
}
return 'js/[name][extname]';
},