fix: Move fonts to css/fonts and fix css path resolving

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

__tests__/appconfig.spec.ts

@@ -56,6 +56,18 @@ describe('app config', () => {
 		expect(assetFileNames({ name: 'some.ico' })).toBe('img/[name][extname]')
 	})
 
+	it('moves fonts to css/fonts', async () => {
+		const resolved = await createConfig('build', 'development')
+
+		const output = resolved.build.rollupOptions.output as OutputOptions
+		expect(typeof output?.assetFileNames).toBe('function')
+		const assetFileNames = output?.assetFileNames as ((chunkInfo: unknown) => string)
+		expect(assetFileNames({ name: 'some.woff' })).toBe('css/fonts/[name][extname]')
+		expect(assetFileNames({ name: 'some.woff2' })).toBe('css/fonts/[name][extname]')
+		expect(assetFileNames({ name: 'some.otf' })).toBe('css/fonts/[name][extname]')
+		expect(assetFileNames({ name: 'some.ttf' })).toBe('css/fonts/[name][extname]')
+	})
+
 	it('allow custom asset names', async () => {
 		const resolved = await createConfig('build', 'development', { assetFileNames: (({ name }) => name === 'main.css' ? 'css/app-styles.css' : undefined) as never })
 

lib/appConfig.ts

@@ -7,6 +7,7 @@
 import type { UserConfig, UserConfigFn } from 'vite'
 import type { BaseOptions, NodePolyfillsOptions } from './baseConfig.js'
 
+import { relative } from 'node:path'
 import { mergeConfig } from 'vite'
 import { createBaseConfig } from './baseConfig.js'
 
@@ -113,7 +114,11 @@ export const createAppConfig = (entries: { [entryAlias: string]: string }, optio
 				// we need to set the base path, so module preloading works correctly
 				// currently this is hidden behind the `experimental` options.
 				experimental: {
-					renderBuiltUrl(filename) {
+					renderBuiltUrl(filename, { hostType }) {
+						if (hostType === 'css') {
+							// CSS `url()` does not support any dynamic path, so we use relative path to the css files
+							return relative('../css', `../${filename}`)
+						}
 						return {
 							// already contains the "js/" prefix as it is our output file configuration
 							runtime: `OC.filePath('${appName}', '', '${filename}')`,
@@ -145,6 +150,8 @@ export const createAppConfig = (entries: { [entryAlias: string]: string }, optio
 									return 'img/[name][extname]'
 								} else if (/css/i.test(extType)) {
 									return `css/${appNameSanitized}-[name].css`
+								} else if (/woff2?|ttf|otf/i.test(extType)) {
+									return 'css/fonts/[name][extname]'
 								}
 								return 'dist/[name]-[hash][extname]'
 							},