getfilepress 0.1.11 → 0.1.12

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "getfilepress",
-	"version": "0.1.11",
+	"version": "0.1.12",
 	"private": false,
 	"type": "module",
 	"description": "FilePress — file-based Markdown blog engine. Link this package from a content-only site (config + posts), then run `filepress build`.",

package/packages/app/src/lib/theme-entry.ts

@@ -1,8 +1,9 @@
 /**
- * Essay chrome + fonts, then a named preset, then the site theme.
- * Site rules use higher-specificity selectors (`:root:root`, `header.site-header …`)
- * so they win even if Vite emits Essay CSS after the site sheet.
+ * Layer order is declared first. Essay chrome, then preset, then site theme.
+ * Site rules live in `@layer site` so they win even if Vite injects Essay CSS
+ * after the site sheet (dev) or splits the CSS (build).
  */
+import './theme-layers.css';
 import '@filepress/core/theme';
 import '$site-preset';
 import '$site-theme';

package/packages/app/src/lib/theme-layers.css

@@ -0,0 +1,3 @@
+/* Essay first, site last. Declared before either sheet so order does not
+ * depend on Vite inject timing. */
+@layer filepress, site;

package/packages/app/vite-plugin-critical-theme.ts

@@ -2,28 +2,42 @@ import { existsSync, readFileSync, writeFileSync } from 'node:fs';
 import type { Plugin } from 'vite';
 
 /**
- * Extract early paint tokens from the site theme: `:root` blocks (including
- * those nested in `prefers-color-scheme` media) and top-level `body { ... }`.
+ * @import cannot live inside @layer. Pull them out, wrap the rest.
+ * Quoted URLs may contain `;` (Google Fonts `wght@400;700`).
  */
-export function extractCriticalTheme(css: string): string {
-	const chunks: string[] = [];
+const IMPORT_RE = /@import\s+(?:url\(\s*)?(["'])(?:\\.|(?!\1).)*\1\s*\)?\s*;/g;
 
-	// Prefer `:root:root` (higher specificity site tokens) when present.
-	for (const m of css.matchAll(/:root(?::root)?\s*\{[^}]*\}/g)) {
-		chunks.push(m[0]);
-	}
+export function takeImports(css: string): { imports: string[]; rest: string } {
+	const imports: string[] = [];
+	const rest = css.replace(IMPORT_RE, (m) => {
+		imports.push(m.trim());
+		return '';
+	});
+	return { imports, rest };
+}
 
-	for (const m of css.matchAll(
-		/@media\s*\([^)]*prefers-color-scheme[^)]*\)\s*\{\s*:root(?::root)?\s*\{[^}]*\}\s*\}/g
-	)) {
-		chunks.push(m[0]);
-	}
+export function hoistImportsAndLayer(css: string, layer: string): string {
+	const { imports, rest } = takeImports(css);
+	const body = rest.trim();
+	const hoisted = imports.length ? `${imports.join('\n')}\n` : '';
+	if (!body) return hoisted;
+	return `${hoisted}@layer ${layer} {\n${body}\n}\n`;
+}
 
-	for (const m of css.matchAll(/(?:^|\n)(?:html\s+)?body\s*\{[^}]*\}/g)) {
-		chunks.push(m[0].trim());
-	}
+/** Site tokens must beat later Essay `:root` (same specificity, later source). */
+export function boostRoot(css: string): string {
+	return css.replace(/:root(?::root)?/g, ':root:root');
+}
 
-	return chunks.join('\n');
+/**
+ * Inline the site theme for first paint (minus remote @import).
+ * Cascade layer `site` wins over Essay even after Vite injects core CSS.
+ */
+export function extractCriticalTheme(css: string): string {
+	const withoutImport = takeImports(css).rest;
+	const meaningful = withoutImport.replace(/\/\*[\s\S]*?\*\//g, '').trim();
+	if (!meaningful) return '';
+	return `@layer filepress, site;\n${hoistImportsAndLayer(boostRoot(withoutImport), 'site')}`;
 }
 
 export function writeCriticalThemeModule(siteThemePath: string, outPath: string): string {
@@ -41,16 +55,32 @@ export function writeCriticalThemeModule(siteThemePath: string, outPath: string)
 	return critical;
 }
 
+function fileId(id: string): string {
+	return id.replace(/\\/g, '/').split('?')[0] ?? id;
+}
+
 /**
- * Keep `$lib/critical-theme.generated.ts` in sync with the site theme so
- * layout can inline tokens without a Vite virtual module (SSR-safe).
+ * Keep `$critical-theme` in sync, and put Essay vs site CSS in cascade
+ * layers so Vite's inject order cannot flash the default look.
  */
 export function criticalThemePlugin(siteThemePath: string, outPath: string): Plugin {
+	const siteNorm = siteThemePath.replace(/\\/g, '/');
+
 	return {
 		name: 'filepress-critical-theme',
 		buildStart() {
 			writeCriticalThemeModule(siteThemePath, outPath);
 		},
+		transform(code, id) {
+			const path = fileId(id);
+			if (path === siteNorm) {
+				return hoistImportsAndLayer(boostRoot(code), 'site');
+			}
+			if (path.endsWith('/lib/styles/theme.css') || path.includes('/lib/styles/presets/')) {
+				return hoistImportsAndLayer(code, 'filepress');
+			}
+			return null;
+		},
 		configureServer(server) {
 			writeCriticalThemeModule(siteThemePath, outPath);
 			server.watcher.add(siteThemePath);