@stacksjs/stx 0.2.146 → 0.2.147

package/dist/document-shell.d.ts

@@ -1,4 +1,5 @@
 import type { AppHeadConfig } from './types/config-types';
+import type { ColorModeBootConfig } from './color-mode-boot';
 /**
  * Insert the inline x-cloak <style> before </head> if a head exists and the
  * style isn't already present. Idempotent (guards on the data-stx-cloak
@@ -43,6 +44,13 @@ export declare function generateDocumentShell(content: string, headConfig?: AppH
     /** Stacks to inject (from @push directives) */
     headStack?: string
     bodyStack?: string
+    /**
+     * Pre-paint color-mode config (stacksjs/stx#1794). When present, the boot
+     * script is emitted at the very top of <head> — above the stylesheets,
+     * because a stylesheet link ahead of it would block its execution and
+     * delay the one thing it exists to do early.
+     */
+    colorMode?: ColorModeBootConfig
   }): string;
 /**
  * Check if HTML already has a document shell (<!DOCTYPE> or <html>).

package/dist/document-shell.js

@@ -1,3 +1,4 @@
+import { generateColorModeBootScript } from "./color-mode-boot.js";
 export const CLOAK_STYLE = "<style data-stx-cloak>[x-cloak]{display:none !important}</style>";
 export function injectCloakStyle(html) {
   if (html.includes("data-stx-cloak"))
@@ -105,6 +106,7 @@ export function generateDocumentShell(content, headConfig = {}, options = {}) {
   }).filter(Boolean).join(`
 `), bodyAttrStr = Object.entries(bodyAttrs).map(([k, v]) => ` ${k}="${v}"`).join(""), bodyClassStr = bodyClass ? ` class="${bodyClass}"` : "", { body: pageBody, hoisted: pageHeadTags } = hoistLeadingHeadTags(content), headParts = [
     metaTags,
+    options.colorMode ? `  ${generateColorModeBootScript(options.colorMode)}` : "",
     `  <title>${pageTitle}</title>`,
     `  ${CLOAK_STYLE}`,
     linkTags,

package/dist/index.d.ts

@@ -68,6 +68,7 @@ export * from './broadcasting';
 export * from './caching';
 export * from './components';
 export * from './component-library';
+export * from './color-mode-boot';
 export * from './config';
 // craft-bridge, craft-compiler, craft-components, craft-ssr, native-build
 // moved to stx/craft

package/dist/index.js

@@ -27,6 +27,7 @@ export * from "./broadcasting.js";
 export * from "./caching.js";
 export * from "./components.js";
 export * from "./component-library.js";
+export * from "./color-mode-boot.js";
 export * from "./config.js";
 export * from "./csp.js";
 export * from "./custom-directives.js";

package/dist/process.js

@@ -36,6 +36,7 @@ import { processServerBindings } from "./server-bindings.js";
 import { processVueTemplate } from "./vue-template.js";
 import { processDynamicComponents } from "./dynamic-components.js";
 import { dedupeScopedStyles, processScopedStyles } from "./style-scoping.js";
+import { injectColorModeBootScript } from "./color-mode-boot.js";
 import { ensureDocumentShell, hasDocumentShell, injectCloakStyle, injectConfigHeadTags } from "./document-shell.js";
 import { hasSignalsSyntax, convertSignalDirectivesToAttributes, convertSignalLoopsToAttributes, preEvalLiteralReactiveIfs, processSignals } from "./signal-processing.js";
 import { processComponents } from "./component-renderer.js";
@@ -278,7 +279,9 @@ export async function processDirectives(template, context, filePath, options, de
           ...runtimeHead.htmlAttrs && { htmlAttrs: { ...baseHeadConfig.htmlAttrs || {}, ...runtimeHead.htmlAttrs } },
           ...runtimeHead.bodyAttrs && { bodyAttrs: { ...baseHeadConfig.bodyAttrs || {}, ...runtimeHead.bodyAttrs } }
         }, alreadyShelled = hasDocumentShell(result);
-        result = ensureDocumentShell(result, headConfig);
+        result = ensureDocumentShell(result, headConfig, {
+          ...options.app?.colorMode && { colorMode: options.app.colorMode }
+        });
         if (alreadyShelled)
           result = injectConfigHeadTags(result, baseHeadConfig);
         const layoutComment = result.match(/<!-- stx-layout: ([^ ]+) -->/);
@@ -297,6 +300,9 @@ export async function processDirectives(template, context, filePath, options, de
       }
       if (isTopLevel) {
         result = injectCloakStyle(result);
+        const colorModeConfig = options.app?.colorMode;
+        if (colorModeConfig)
+          result = injectColorModeBootScript(result, colorModeConfig);
         result = placeSignalsRuntimeBeforeScripts(result);
       }
       if (isTopLevel)

package/dist/production-builder.js

@@ -4,6 +4,7 @@ import { createRouter } from "./router.js";
 import { buildRuntimeAsset, buildRouterAsset } from "./build-assets.js";
 import { compileTemplate } from "./template-compiler.js";
 import { generateManifest, writeManifest } from "./manifest.js";
+import { injectColorModeBootScript } from "./color-mode-boot.js";
 import { ensureDocumentShell } from "./document-shell.js";
 import { extractContainerContent } from "./app-shell.js";
 import { injectCrosswindCSS } from "./dev-server/crosswind.js";
@@ -47,7 +48,7 @@ export async function buildForProduction(options = {}) {
   try {
     projectConfig = await loadStxConfig();
   } catch {}
-  const componentsDir = options.componentsDir ?? projectConfig.componentsDir ?? "components", partialsDir = options.partialsDir ?? projectConfig.partialsDir ?? "partials", layoutsDir = options.layoutsDir ?? projectConfig.layoutsDir ?? "layouts", publicDir = options.publicDir ?? projectConfig.publicDir ?? "public", headConfigDefault = projectConfig.app?.head || {}, routerContainer = projectConfig.router?.container || "main";
+  const componentsDir = options.componentsDir ?? projectConfig.componentsDir ?? "components", partialsDir = options.partialsDir ?? projectConfig.partialsDir ?? "partials", layoutsDir = options.layoutsDir ?? projectConfig.layoutsDir ?? "layouts", publicDir = options.publicDir ?? projectConfig.publicDir ?? "public", headConfigDefault = projectConfig.app?.head || {}, colorModeConfig = projectConfig.app?.colorMode, routerContainer = projectConfig.router?.container || "main";
   if (fs.existsSync(outputDir))
     fs.rmSync(outputDir, { recursive: !0 });
   const dirs = [
@@ -82,8 +83,11 @@ export async function buildForProduction(options = {}) {
       compiledPages.push(compiled);
       compiled.html = compiled.html.replace(/runtime\.__STX_HASH__\.js/g, runtimeAsset.filename).replace(/router\.__STX_HASH__\.js/g, routerAsset.filename);
       compiled.html = ensureDocumentShell(compiled.html, headConfigDefault, {
-        bodyScripts: [`<script src="/__stx/${routerAsset.filename}"></script>`]
+        bodyScripts: [`<script src="/__stx/${routerAsset.filename}"></script>`],
+        ...colorModeConfig && { colorMode: colorModeConfig }
       });
+      if (colorModeConfig)
+        compiled.html = injectColorModeBootScript(compiled.html, colorModeConfig);
       if (!/<body[^>]*\bdata-stx=/.test(compiled.html)) {
         const dataStxMatch = compiled.html.match(/<(?!body\b)[a-zA-Z][a-zA-Z0-9-]*\b[^>]*?\s(data-stx="[^"]+")[^>]*>/);
         if (dataStxMatch && dataStxMatch[1]) {