diff --git a/app/entry.server.tsx b/app/entry.server.tsx
index 8fcd8a6e5a..6587267ffc 100644
--- a/app/entry.server.tsx
+++ b/app/entry.server.tsx
@@ -4,7 +4,7 @@ import { renderToString } from "react-dom/server";
import { renderToDocument } from "./server/document";
import { wrapTraceAsyncSimple } from "./utils/opentelemetry-utils";
-const handleDocumentRequest: HandleDocumentRequestFunction = (
+const handleDocumentRequest: HandleDocumentRequestFunction = async (
request,
responseStatusCode,
responseHeaders,
@@ -14,7 +14,7 @@ const handleDocumentRequest: HandleDocumentRequestFunction = (
const ssrHtml = renderToString(
);
- const documentHtml = renderToDocument(ssrHtml);
+ const documentHtml = await renderToDocument(ssrHtml);
responseHeaders.set("content-type", "text/html");
return new Response(documentHtml, {
status: responseStatusCode,
diff --git a/app/server/document.tsx b/app/server/document.tsx
index 7a3bc3c1a7..bdc5acc1e0 100644
--- a/app/server/document.tsx
+++ b/app/server/document.tsx
@@ -1,10 +1,21 @@
import { generateThemeScript } from "@hiogawa/theme-script";
+import { tinyassert } from "@hiogawa/utils";
+import { viteDevServer } from "@hiogawa/vite-import-dev-server/runtime";
import { injectPublicConfigScript, publicConfig } from "../utils/config-public";
// since we don't currently use remix's or convention,
// we can render static document html only on server, which is probably common ssr practice.
-export function renderToDocument(ssrHtml: string) {
+export async function renderToDocument(ssrHtml: string) {
+ // inject CSS to prevent FOUC during dev
+ // since vite/unocss will inject css on client via javascript
+ let style = "";
+ if (import.meta.env.DEV) {
+ tinyassert(viteDevServer);
+ const unocss = await viteDevServer.ssrLoadModule("virtual:uno.css");
+ style = ``;
+ }
+
// syntax highlight by https://github.com/mjbvz/vscode-comment-tagged-templates/
return /* html */ `
@@ -31,6 +42,7 @@ export function renderToDocument(ssrHtml: string) {
height: 100%;
}
+ ${style}
${generateThemeScript({ storageKey: "ytsub:theme" })}
${injectPublicConfigScript()}
diff --git a/package.json b/package.json
index 68d5fe22d9..4b97bfc849 100644
--- a/package.json
+++ b/package.json
@@ -6,8 +6,6 @@
"dev-coverage:remix": "c8 -o coverage/e2e-server -r text -r html --exclude build --exclude-after-remap node_modules/.bin/remix dev",
"tsc": "tsc -b",
"dev:tsc": "pnpm tsc --watch --preserveWatchOutput",
- "build:css": "unocss 'app/**/*.tsx' --out-file ./build/css/index.css",
- "dev:css": "pnpm build:css --watch",
"lint": "run-s lint:*",
"lint-check": "run-s lint-check:*",
"lint:isort": "pnpm lint-check:isort --fix",