fix: high-priority bugs and ship dev overlay from CLI package (#4)

* fix: high-priority bugs and ship dev overlay from CLI package

- Fix propPath bug in template compiler: `:index` without parent propPath
  now derives a base name from the `:props` expression instead of
  generating bare "[0]" paths

- Fix interpolation regex to support multiline expressions ([\s\S] vs .)
  and detect unmatched braces at compile time

- Fix unsafe string replacement in html-renderer: use split/join instead
  of replace() to avoid $ replacement patterns in region content

- Prevent double cache-busting: skip ?v= append if URL already has one

- Move dev-overlay.js into @vojtaholik/static-kit-cli package so it
  ships from the package rather than being copied into every project.
  Removes drift between example, template, and actual served version.

- Remove devOnlyFiles filter from build (no longer needed since
  dev-overlay.js no longer lives in publicDir)

https://claude.ai/code/session_01XkNESeZ6fwXRAYsnw1BhqR

* feat: add cssOutput config for customizable CSS minification

- Introduced `cssOutput` option ("formatted" | "minified", default "formatted") to control CSS output format during the build process.
- Updated build command to conditionally minify CSS based on the new configuration, enhancing flexibility for users.

---------

Co-authored-by: Claude <noreply@anthropic.com>

Author: vojtaholik

example/public/js/dev-overlay.js packages/cli/src/client/dev-overlay.jsexample/public/js/dev-overlay.js renamed to packages/cli/src/client/dev-overlay.js

@@ -99,10 +99,8 @@ async function build() {
   console.log("\n📦 Copying public assets...");
   const outPublicDir = join(outDir, publicPathDir);
 
-  const devOnlyFiles = new Set(["js/dev-overlay.js"]);
   const publicGlob = new Glob("**/*");
   for await (const file of publicGlob.scan(publicDir)) {
-    if (devOnlyFiles.has(file)) continue;
     const srcFile = join(publicDir, file);
     const destFile = join(outPublicDir, file);
 
@@ -113,13 +111,14 @@ async function build() {
       // Process CSS files through lightningcss
       if (file.endsWith(".css")) {
         const cssBytes = new Uint8Array(await bunFile.arrayBuffer());
+        const shouldMinify = config.cssOutput === "minified";
         const result = processCSS({
           filename: srcFile,
           code: cssBytes,
-          minify: true,
+          minify: shouldMinify,
         });
         await Bun.write(destFile, result.code);
-        console.log(`  ✓ ${config.publicPath}/${file} (minified)`);
+        console.log(`  ✓ ${config.publicPath}/${file}${shouldMinify ? " (minified)" : ""}`);
       } else {
         await Bun.write(destFile, await bunFile.arrayBuffer());
         console.log(`  ✓ ${config.publicPath}/${file}`);

packages/cli/src/commands/build.ts

@@ -210,9 +210,10 @@ Bun.serve({
     const path = url.pathname;
 
     try {
-      // Dev overlay (special internal asset)
+      // Dev overlay — served from the CLI package (not the user's publicDir)
       if (path === "/__dev-overlay.js") {
-        const js = await Bun.file(join(publicDir, "js/dev-overlay.js")).text();
+        const overlayPath = join(import.meta.dir, "../client/dev-overlay.js");
+        const js = await Bun.file(overlayPath).text();
         return new Response(js, {
           headers: { "Content-Type": "application/javascript" },
         });

packages/cli/src/commands/dev.ts

@@ -18,6 +18,8 @@ export const configSchema = z.object({
   devPort: z.number().default(3000),
   /** HTML output format: "formatted" (pretty-printed) or "minified" */
   htmlOutput: z.enum(["formatted", "minified"]).default("formatted"),
+  /** CSS output format: "formatted" (as-is) or "minified" */
+  cssOutput: z.enum(["formatted", "minified"]).default("formatted"),
   /** URL path prefix for production builds — all internal links get this prefix */
   basePath: z
     .string()

packages/core/src/config.ts

@@ -134,13 +134,13 @@ export async function renderPage(
       if (node.nodeName === "link") {
         const rel = getAttr(node, "rel");
         const href = getAttr(node, "href");
-        if (rel === "stylesheet" && href && href.endsWith(".css")) {
+        if (rel === "stylesheet" && href && href.endsWith(".css") && !href.includes("?v=")) {
           setAttr(node, "href", `${href}?v=${options.cacheBust}`);
         }
       }
       if (node.nodeName === "script") {
         const src = getAttr(node, "src");
-        if (src && src.endsWith(".js")) {
+        if (src && src.endsWith(".js") && !src.includes("?v=")) {
           setAttr(node, "src", `${src}?v=${options.cacheBust}`);
         }
       }
@@ -176,9 +176,11 @@ export async function renderPage(
   );
 
   // Replace markers with actual region content
+  // Uses split/join instead of replace() to avoid issues with $ in content
+  // being interpreted as replacement patterns
   for (const [regionName, content] of Object.entries(regionContent)) {
     const marker = `<!--__REGION_CONTENT_${regionName}__-->`;
-    html = html.replace(marker, content);
+    html = html.split(marker).join(content);
   }
 
   // Czech typography: non-breaking spaces after single-char prepositions

packages/core/src/html-renderer.ts

@@ -434,7 +434,10 @@ function compileRenderSlot(element: Element, indent: number): string {
   } else if (indexExpr) {
     // Build prop path from index (assumes we're iterating over an array prop)
     // This creates paths like "posts[0]", "posts[1]" etc.
-    addrExpr = `{ ...addr, propPath: (addr.propPath ? addr.propPath + "[" + ${indexExpr} + "]" : "[" + ${indexExpr} + "]") }`;
+    // When addr.propPath is set, appends index: "posts[0]"
+    // When addr.propPath is missing, uses the :props expression base as prefix
+    const propsBase = propsExpr.replace(/^props\./, "").split(/[.[]/)[0];
+    addrExpr = `{ ...addr, propPath: (addr.propPath ? addr.propPath + "[" + ${indexExpr} + "]" : "${propsBase}[" + ${indexExpr} + "]") }`;
   } else {
     // No prop path
     addrExpr = "addr";
@@ -477,7 +480,16 @@ function compileTextWithInterpolation(text: string, indent: number): string {
 
   // Split on {{{ ... }}} (raw) and {{ ... }} (escaped)
   // Order matters: match triple braces first
-  const parts = text.split(/(\{\{\{.+?\}\}\}|\{\{.+?\}\})/g);
+  // Uses [\s\S] instead of . to support multiline expressions
+  const parts = text.split(/(\{\{\{[\s\S]+?\}\}\}|\{\{[\s\S]+?\}\})/g);
+
+  // Detect unmatched braces in static text parts (every other part is static)
+  for (let j = 0; j < parts.length; j += 2) {
+    const staticPart = parts[j];
+    if (staticPart && /\{\{/.test(staticPart)) {
+      throw new Error(`Unmatched interpolation braces in template text: "${staticPart.trim().slice(0, 60)}"`);
+    }
+  }
 
   for (let i = 0; i < parts.length; i++) {
     const part = parts[i];