hubspot-cms-sync 0.5.5 → 0.5.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hubspot-cms-sync",
-  "version": "0.5.5",
+  "version": "0.5.7",
   "description": "Git-backed bidirectional sync for HubSpot CMS themes, content, blogs, forms, and assets.",
   "type": "module",
   "license": "MIT",

package/src/build-static.mjs

@@ -13,7 +13,7 @@
 //   _redirects                 Cloudflare redirects from sync/redirects.csv
 //   _headers                   cache + basic security headers
 
-import { mkdir, writeFile, cp, readFile } from 'node:fs/promises';
+import { mkdir, writeFile, cp, readFile, readdir } from 'node:fs/promises';
 import { existsSync } from 'node:fs';
 import { join, dirname } from 'node:path';
 
@@ -34,6 +34,50 @@ async function loadTagSlugs(siteDir) {
   return map;
 }
 
+// Build a `theme` context from the theme fields (fields.json) so HubL `{{ theme.* }}`
+// expressions in CSS resolve to the field defaults. HubSpot resolves these server-side;
+// the static target must do it at build time or brand colors — var(--brand) etc. — break
+// (an invalid custom property silently drops the whole declaration that references it).
+export function themeFromFields(fields) {
+  const obj = {};
+  for (const f of Array.isArray(fields) ? fields : []) {
+    if (!f?.name) continue;
+    obj[f.name] = f.type === 'group' ? themeFromFields(f.children) : f.default;
+  }
+  return obj;
+}
+
+async function loadThemeContext(siteDir) {
+  try {
+    return themeFromFields(JSON.parse(await readFile(join(siteDir, 'fields.json'), 'utf8')));
+  } catch {
+    return {};
+  }
+}
+
+// Resolve `{{ theme.a.b.c }}` tokens against the theme context. Targeted to theme.* only,
+// so it can't disturb CSS syntax; unknown paths are left untouched.
+export function resolveThemeTokens(text, theme) {
+  return String(text).replace(/\{\{\s*theme\.([\w.]+)\s*\}\}/g, (m, path) => {
+    let v = theme;
+    for (const k of path.split('.')) v = v == null ? v : v[k];
+    return v == null ? m : String(v);
+  });
+}
+
+// Copy a directory, resolving theme tokens in .css files (HubSpot does this server-side).
+async function copyCssResolved(fromDir, toDir, theme) {
+  if (!existsSync(fromDir)) return;
+  await mkdir(toDir, { recursive: true });
+  for (const ent of await readdir(fromDir, { withFileTypes: true })) {
+    const from = join(fromDir, ent.name);
+    const to = join(toDir, ent.name);
+    if (ent.isDirectory()) await copyCssResolved(from, to, theme);
+    else if (ent.name.endsWith('.css')) await writeFile(to, resolveThemeTokens(await readFile(from, 'utf8'), theme), 'utf8');
+    else await cp(from, to);
+  }
+}
+
 /**
  * buildStatic({ siteDir, outDir, baseUrl, assetBase, trackingPortalId }) -> summary
  *
@@ -102,7 +146,11 @@ export async function buildStatic({ siteDir, outDir, baseUrl = '', assetBase = '
   }
 
   // Assets. get_asset_url maps ../css|js|images -> /css|js|images; @asset:<p> -> /assets/<p>.
-  for (const [src, dest] of [['css', 'css'], ['js', 'js'], ['images', 'images'],
+  // CSS is rendered (theme tokens resolved) since HubSpot resolves {{ theme.* }} server-side;
+  // everything else is copied as bytes.
+  const theme = await loadThemeContext(siteDir);
+  await copyCssResolved(join(siteDir, 'css'), join(outDir, 'css'), theme);
+  for (const [src, dest] of [['js', 'js'], ['images', 'images'],
     ['content/assets', 'assets'], ['content/blog/assets', 'assets']]) {
     const from = join(siteDir, src);
     if (existsSync(from)) await cp(from, join(outDir, dest), { recursive: true });
@@ -118,10 +166,13 @@ export async function buildStatic({ siteDir, outDir, baseUrl = '', assetBase = '
     redirectCount = lines.length;
   }
 
+  // /assets/* are content-hashed, so immutable is safe. css/js use STABLE filenames, so
+  // immutable would pin stale styles at the edge for a year after a deploy — they must
+  // revalidate instead (cheap 304s) so CSS/JS fixes actually reach users.
   await writeFile(join(outDir, '_headers'),
     '/assets/*\n  Cache-Control: public, max-age=31536000, immutable\n'
-    + '/css/*\n  Cache-Control: public, max-age=31536000, immutable\n'
-    + '/js/*\n  Cache-Control: public, max-age=31536000, immutable\n'
+    + '/css/*\n  Cache-Control: public, max-age=0, must-revalidate\n'
+    + '/js/*\n  Cache-Control: public, max-age=0, must-revalidate\n'
     + '/*\n  X-Content-Type-Options: nosniff\n  X-Frame-Options: SAMEORIGIN\n  Referrer-Policy: strict-origin-when-cross-origin\n',
     'utf8');