Fix Electron production CSS not loading under file://.

Strip crossorigin from the built index so stylesheets apply in the packaged app, and use a relative manifest path for the same reason.
This commit is contained in:
2026-07-22 18:37:21 +10:00
parent 57828dd33a
commit 340a719efc
3 changed files with 17 additions and 3 deletions

View File

@@ -32,7 +32,7 @@
href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Space+Grotesk:wght@400;600;700&display=swap"
/>
<link rel="manifest" href="/manifest.json" />
<link rel="manifest" href="./manifest.json" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="application-name" content="Paarrot" />
<meta name="apple-mobile-web-app-title" content="Paarrot" />

View File

@@ -6,8 +6,6 @@ import { MessageEmptyContent } from './content';
import { sanitizeCustomHtml } from '../../utils/sanitize';
import { highlightText, scaleSystemEmoji } from '../../plugins/react-custom-html-parser';
import { isMxEmoticonOnlyHtml } from '../../utils/regex';
// Ensure jumbo emoji global styles are always in the bundle.
import './layout/layout.css';
type RenderBodyProps = {
body: string;

View File

@@ -136,6 +136,21 @@ function servePublicAssets() {
}
// CORS proxy for Matrix homeservers during development
/**
* Vite adds crossorigin to module/CSS tags when base is relative (./).
* Electron serves the build via file:// — those assets then fail CORS checks
* and the app renders with browser defaults (black text, broken spacing).
*/
function stripCrossoriginForFileProtocol() {
return {
name: 'strip-crossorigin-for-file-protocol',
apply: 'build',
transformIndexHtml(html) {
return html.replace(/\s+crossorigin/g, '');
},
};
}
function corsProxyMiddleware() {
return {
name: 'vite-plugin-cors-proxy',
@@ -228,6 +243,7 @@ export default defineConfig({
},
},
plugins: [
stripCrossoriginForFileProtocol(),
corsProxyMiddleware(), // Add CORS proxy for development
serverMatrixSdkCryptoWasm('/node_modules/.vite/deps/pkg/matrix_sdk_crypto_wasm_bg.wasm'),
serveGifWorker(),