@woodsportal/hubspot-kit 5.0.2 → 5.0.3-beta.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## Unreleased
+
+### CSS prefix
+- **Auto-prefix** — class string bindings ending in `_CLASS` (e.g. `CARDS_GRID_CLASS`) are prefixed the same as `*DynamicClassName*`
+- **Auto-prefix** — JSX props ending in `ClassName` (`containerClassName`, `pageLinkClassName`, …) and helpers ending in `Class` (`paginationItemBaseClass`, `navBtnClass`) are prefixed
+
 ## [1.0.44] - 2026-08-06
 
 ### Portal auth scaffold

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@woodsportal/hubspot-kit",
-  "version": "5.0.2",
+  "version": "5.0.3-beta.1",
   "packageManager": "pnpm@10.12.1",
   "description": "WoodsCLI — HubSpot CMS dev kit by WoodsPortal. wp CLI, Vite presets, module-config overlay, and theme/module build pipelines.",
   "type": "module",
@@ -52,7 +52,7 @@
     "build": "tsup",
     "dev": "tsup --watch",
     "typecheck": "tsc --noEmit",
-    "test": "node --import tsx --test 'src/lib/**/*.test.ts' 'src/cli/**/*.test.ts' 'src/schema/**/*.test.ts' 'src/vite/**/*.test.ts' 'scripts/portal-build-id.test.mjs' 'scripts/resolve-consumer-dep.test.mjs' 'scripts/wp-cli-smoke.test.mjs' 'scripts/vite/ensure-dev-kit-shims.test.mjs' 'scripts/vite/consumer-react-aliases.test.mjs' 'scripts/vite/resolve-from-project-root.test.mjs' && vitest run src/dev-module-config/__tests__/normalize-repeater-items.test.ts src/dev-module-config/__tests__/module-config-transform.test.ts src/dev-module-config/__tests__/flatten-visible-fields.test.ts",
+    "test": "node --import tsx --test 'src/lib/**/*.test.ts' 'src/cli/**/*.test.ts' 'src/schema/**/*.test.ts' 'src/vite/**/*.test.ts' 'scripts/portal-build-id.test.mjs' 'scripts/resolve-consumer-dep.test.mjs' 'scripts/wp-cli-smoke.test.mjs' 'scripts/vite/ensure-dev-kit-shims.test.mjs' 'scripts/vite/consumer-react-aliases.test.mjs' 'scripts/vite/resolve-from-project-root.test.mjs' 'scripts/tailwind/prefix-plugin.test.mjs' && vitest run src/dev-module-config/__tests__/normalize-repeater-items.test.ts src/dev-module-config/__tests__/module-config-transform.test.ts src/dev-module-config/__tests__/flatten-visible-fields.test.ts src/dev-module-config/__tests__/drill-down-panels.test.ts",
     "test:examples": "node examples/smoke/run-matrix.mjs --tier static",
     "test:dist-pack": "node --test scripts/dist-cli-pack-smoke.test.mjs",
     "lint": "eslint src",

package/scripts/build-cdn.mjs

@@ -19,7 +19,35 @@ import {
 } from './portal-subprocess-stdio.mjs'
 import { spawnViteSync } from './resolve-vite-spawn.mjs'
 
+import { existsSync, mkdirSync, readdirSync, rmSync } from 'node:fs'
+
+/** Drop versioned CDN outputs from prior builds on the same worker. */
+function purgeStaleCdnArtifacts(cdnDir, buildId) {
+  if (!existsSync(cdnDir)) {
+    mkdirSync(cdnDir, { recursive: true })
+    return
+  }
+
+  for (const entry of readdirSync(cdnDir)) {
+    if (entry === 'assets') continue
+    const full = resolve(cdnDir, entry)
+    if (entry.endsWith('.js') || entry.endsWith('.css') || entry === 'manifest.json' || entry === 'n.json') {
+      rmSync(full, { force: true })
+      continue
+    }
+    if (entry === 'chunks') {
+      rmSync(full, { recursive: true, force: true })
+    }
+  }
+
+  if (buildId) {
+    console.log(`[build-cdn] purged prior dist/cdn artifacts before buildId ${buildId}`)
+  }
+}
+
+
 const root = findProjectRoot()
+const cdnDir = resolve(root, 'dist/cdn')
 
 const mode = resolvePortalViteMode()
 
@@ -31,6 +59,8 @@ const env = envForPortalBuild(mode, root, {
   VITE_DATADOG_RUM_ENABLED: defaultDatadogFlag(mode),
 })
 
+purgeStaleCdnArtifacts(cdnDir, env.MODULE_BUILD_ID ?? env.PORTAL_BUILD_ID)
+
 function runWithEnv(config, buildMode) {
   const result = spawnViteSync(
     root,

package/scripts/cdn-release-artifacts.mjs

@@ -0,0 +1,76 @@
+/**
+ * Resolve vendor/app/css filenames for the active CDN build id.
+ * Prevents stale dist/cdn artifacts from an older build id winning .find(name === 'vendor').
+ */
+
+/**
+ * @param {string} buildId
+ * @param {string} file
+ */
+export function cdnArtifactMatchesBuildId(buildId, file) {
+  return String(file).includes(buildId)
+}
+
+/**
+ * @param {string} role vendor | app
+ * @param {string} buildId
+ */
+export function expectedCdnScriptBasename(role, buildId) {
+  return `${role}.${buildId}.js`
+}
+
+/** @param {string} buildId */
+export function expectedCdnAppCssBasename(buildId) {
+  return `app.${buildId}.css`
+}
+
+/**
+ * @param {{ buildId: string, scripts?: Array<{ name?: string, file?: string }>, styles?: Array<{ name?: string, file?: string }> }} manifest
+ */
+export function resolveCdnPrimaryScripts(manifest) {
+  const buildId = manifest.buildId?.trim()
+  if (!buildId) {
+    throw new Error('manifest.json missing buildId')
+  }
+
+  const vendorExpected = expectedCdnScriptBasename('vendor', buildId)
+  const appExpected = expectedCdnScriptBasename('app', buildId)
+  const appCssExpected = expectedCdnAppCssBasename(buildId)
+
+  const vendor = manifest.scripts?.find((s) => s.file === vendorExpected)
+  const app = manifest.scripts?.find((s) => s.file === appExpected)
+  const appCss =
+    manifest.styles?.find((s) => s.file === appCssExpected) ??
+    manifest.styles?.find((s) => s.name === 'app' && s.file?.includes(buildId))
+
+  if (!vendor?.file || !app?.file) {
+    const vendorCandidates = (manifest.scripts ?? [])
+      .filter((s) => s.name === 'vendor')
+      .map((s) => s.file)
+      .join(', ')
+    const appCandidates = (manifest.scripts ?? [])
+      .filter((s) => s.name === 'app')
+      .map((s) => s.file)
+      .join(', ')
+    throw new Error(
+      `manifest.json must include ${vendorExpected} and ${appExpected} (buildId=${buildId}). ` +
+        `Found vendor=[${vendorCandidates || 'none'}], app=[${appCandidates || 'none'}]`,
+    )
+  }
+
+  if (!appCss?.file) {
+    throw new Error(`manifest.json must include ${appCssExpected} for buildId ${buildId}`)
+  }
+
+  for (const [label, file] of [
+    ['vendor', vendor.file],
+    ['app', app.file],
+    ['app css', appCss.file],
+  ]) {
+    if (!cdnArtifactMatchesBuildId(buildId, file)) {
+      throw new Error(`manifest ${label} file ${file} does not match buildId ${buildId}`)
+    }
+  }
+
+  return { buildId, vendorFile: vendor.file, appFile: app.file, appCssFile: appCss.file }
+}

package/scripts/cdn-release-artifacts.test.mjs

@@ -0,0 +1,20 @@
+import assert from 'node:assert/strict'
+import test from 'node:test'
+
+import { resolveCdnPrimaryScripts } from './cdn-release-artifacts.mjs'
+
+test('resolveCdnPrimaryScripts picks scripts for manifest buildId, not lexicographically first vendor', () => {
+  const manifest = {
+    buildId: '5.0.2-beta.802',
+    scripts: [
+      { name: 'vendor', file: 'vendor.5.0.2-beta.800.js' },
+      { name: 'vendor', file: 'vendor.5.0.2-beta.802.js' },
+      { name: 'app', file: 'app.5.0.2-beta.802.js' },
+    ],
+    styles: [{ name: 'app', file: 'app.5.0.2-beta.802.css' }],
+  }
+
+  const resolved = resolveCdnPrimaryScripts(manifest)
+  assert.equal(resolved.vendorFile, 'vendor.5.0.2-beta.802.js')
+  assert.equal(resolved.appFile, 'app.5.0.2-beta.802.js')
+})

package/scripts/generate-cdn-manifest.mjs

@@ -2,13 +2,21 @@
 /**
  * Write dist/cdn/manifest.json after vendor + app builds.
  */
-import { readdirSync, writeFileSync, statSync } from 'node:fs'
-import { resolve, dirname } from 'node:path'
-import { fileURLToPath } from 'node:url'
-import { findProjectRoot } from './project-root.mjs'
+import { readdirSync, readFileSync, writeFileSync } from 'node:fs'
+import { resolve } from 'node:path'
 import { gzipSync } from 'node:zlib'
-import { readFileSync } from 'node:fs'
-import { resolveCdnBaseUrl, portalBuildId } from './resolve-cdn-base-url.mjs'
+
+import {
+  cdnArtifactMatchesBuildId,
+  expectedCdnAppCssBasename,
+  expectedCdnScriptBasename,
+} from './cdn-release-artifacts.mjs'
+import { findProjectRoot } from './project-root.mjs'
+import { clearPortalBuildIdCache, resolveCdnBaseUrl, portalBuildId } from './resolve-cdn-base-url.mjs'
+
+if (process.env.MODULE_BUILD_ID?.trim() || process.env.PORTAL_BUILD_ID?.trim()) {
+  clearPortalBuildIdCache()
+}
 
 const root = findProjectRoot()
 const cdnDir = resolve(root, 'dist/cdn')
@@ -37,10 +45,20 @@ function scriptEntry(file) {
   return { name: file, order: 99, preload: false }
 }
 
-const jsFiles = readdirSync(cdnDir, { recursive: true })
+const allJsRelPaths = readdirSync(cdnDir, { recursive: true })
   .filter((f) => String(f).endsWith('.js'))
-  .map((rel) => {
-    const file = String(rel)
+  .map(String)
+
+const staleJs = allJsRelPaths.filter((file) => !cdnArtifactMatchesBuildId(buildId, file))
+if (staleJs.length > 0) {
+  console.warn(
+    `[cdn-manifest] ignoring ${staleJs.length} stale .js artifact(s) for buildId ${buildId}: ${staleJs.join(', ')}`,
+  )
+}
+
+const jsFiles = allJsRelPaths
+  .filter((file) => cdnArtifactMatchesBuildId(buildId, file))
+  .map((file) => {
     const metrics = fileMetrics(file)
     const entry = scriptEntry(file)
     return {
@@ -50,8 +68,16 @@ const jsFiles = readdirSync(cdnDir, { recursive: true })
   })
   .sort((a, b) => a.order - b.order || a.file.localeCompare(b.file))
 
-const cssFiles = readdirSync(cdnDir)
-  .filter((f) => f.endsWith('.css'))
+const allCssFiles = readdirSync(cdnDir).filter((f) => f.endsWith('.css'))
+const staleCss = allCssFiles.filter((file) => !cdnArtifactMatchesBuildId(buildId, file))
+if (staleCss.length > 0) {
+  console.warn(
+    `[cdn-manifest] ignoring ${staleCss.length} stale .css artifact(s) for buildId ${buildId}: ${staleCss.join(', ')}`,
+  )
+}
+
+const cssFiles = allCssFiles
+  .filter((file) => cdnArtifactMatchesBuildId(buildId, file))
   .map((file) => {
     const metrics = fileMetrics(file)
     return {
@@ -61,15 +87,22 @@ const cssFiles = readdirSync(cdnDir)
     }
   })
 
-const appCss = cssFiles.find((f) => f.name === 'app') ?? cssFiles[0]
+const vendorExpected = expectedCdnScriptBasename('vendor', buildId)
+const appExpected = expectedCdnScriptBasename('app', buildId)
+const appCssExpected = expectedCdnAppCssBasename(buildId)
 
-if (!jsFiles.some((f) => f.name === 'vendor') || !jsFiles.some((f) => f.name === 'app')) {
-  console.error('[cdn-manifest] expected vendor.*.js and app.*.js in dist/cdn/')
+if (!jsFiles.some((f) => f.file === vendorExpected) || !jsFiles.some((f) => f.file === appExpected)) {
+  console.error(
+    `[cdn-manifest] expected ${vendorExpected} and ${appExpected} in dist/cdn/ (buildId=${buildId})`,
+  )
+  console.error(`[cdn-manifest] found js: ${jsFiles.map((f) => f.file).join(', ') || '(none)'}`)
   process.exit(1)
 }
 
+const appCss = cssFiles.find((f) => f.file === appCssExpected) ?? cssFiles.find((f) => f.name === 'app')
+
 if (!appCss) {
-  console.error('[cdn-manifest] expected app.*.css in dist/cdn/ — component styles load from CDN')
+  console.error(`[cdn-manifest] expected ${appCssExpected} in dist/cdn/ — component styles load from CDN`)
   process.exit(1)
 }
 

package/scripts/hubspot-module-postbuild.mjs

@@ -13,6 +13,7 @@ import {
   writeFileSync,
 } from 'node:fs'
 import { resolve } from 'node:path'
+import { resolveCdnPrimaryScripts } from './cdn-release-artifacts.mjs'
 
 /** Substrings that break when HubSpot tokenizes module.js (Jinja/HubL). */
 export const FORBIDDEN_HUBL_IN_MODULE_JS = ['{{', '{%', '<%', '%>']
@@ -70,24 +71,14 @@ export function injectCdnManifestIntoModuleHtml(html, manifestPath) {
   }
 
   const manifest = JSON.parse(readFileSync(manifestPath, 'utf8'))
-  const vendor = manifest.scripts?.find((s) => s.name === 'vendor')
-  const app = manifest.scripts?.find((s) => s.name === 'app')
-  const appCss = manifest.styles?.find((s) => s.name === 'app') ?? manifest.styles?.[0]
-
-  if (!vendor?.file || !app?.file) {
-    throw new Error('manifest.json must include vendor and app scripts')
-  }
-
-  if (!appCss?.file) {
-    throw new Error('manifest.json must include app styles (app.*.css from yarn build:cdn:dev or build:cdn:prod)')
-  }
+  const { buildId, vendorFile, appFile, appCssFile } = resolveCdnPrimaryScripts(manifest)
 
   return html
     .replaceAll('__PORTAL_CDN_BASE__', manifest.baseUrl)
-    .replaceAll('__PORTAL_BUILD_ID__', manifest.buildId)
-    .replaceAll('__PORTAL_VENDOR_FILE__', vendor.file)
-    .replaceAll('__PORTAL_APP_FILE__', app.file)
-    .replaceAll('__PORTAL_APP_CSS_FILE__', appCss.file)
+    .replaceAll('__PORTAL_BUILD_ID__', buildId)
+    .replaceAll('__PORTAL_VENDOR_FILE__', vendorFile)
+    .replaceAll('__PORTAL_APP_FILE__', appFile)
+    .replaceAll('__PORTAL_APP_CSS_FILE__', appCssFile)
 }
 
 /**
@@ -100,12 +91,9 @@ export function mergeCdnAppStylesIntoModuleCss(moduleDir, manifestPath) {
   }
 
   const manifest = JSON.parse(readFileSync(manifestPath, 'utf8'))
-  const appCss = manifest.styles?.find((s) => s.name === 'app') ?? manifest.styles?.[0]
-  if (!appCss?.file) {
-    throw new Error('manifest.json must include app styles for module.css merge')
-  }
+  const { appCssFile } = resolveCdnPrimaryScripts(manifest)
 
-  const cdnCssPath = resolve(moduleDir, '../cdn', appCss.file)
+  const cdnCssPath = resolve(moduleDir, '../cdn', appCssFile)
   if (!existsSync(cdnCssPath)) {
     throw new Error(
       `Missing ${cdnCssPath} — run build:cdn before hubspot post-build (needed for module.css)`,

package/scripts/resolve-cdn-base-url.mjs

@@ -2,9 +2,9 @@
  * Resolve CDN base URL from env (jsDelivr GitHub, custom, or local).
  */
 import { loadPortalCdnConfig } from './load-portal-cdn-config.mjs'
-import { portalBuildId, resolvePortalBuildId } from './resolve-portal-build-id.mjs'
+import { clearPortalBuildIdCache, portalBuildId, resolvePortalBuildId } from './resolve-portal-build-id.mjs'
 
-export { portalBuildId, resolvePortalBuildId }
+export { clearPortalBuildIdCache, portalBuildId, resolvePortalBuildId }
 
 export function resolveCdnBaseUrl(env = process.env) {
   const config = loadPortalCdnConfig(env)