@stacklist-app/brandkit 1.3.0 → 1.3.1

package/dist/changelog.js

@@ -14,7 +14,9 @@
     ? (String(window.__BRANDKIT_BASE__).replace(/\/+$/, '') || '.') : '.';
 
   fetch(BASE + '/config.json')
-    .then(function (res) { return res.json(); })
+    // Guard before parsing: a non-200 response (e.g. a CDN/error page served
+    // with a JSON body) is routed to the error state instead of init().
+    .then(function (res) { if (!res.ok) throw new Error(res.status); return res.json(); })
     .then(function (config) { init(config); })
     .catch(function () { renderError(); });
 
@@ -34,14 +36,28 @@
     return stack + ', sans-serif';
   }
 
+  // Strip the characters a config value would need to break out of the
+  // injected <style> block ( < > ), the :root {…} rule ( { } ), or its own
+  // declaration to smuggle in another ( ; ). Mirrors cssVal() in
+  // dist/engine.js. A real CSS value never contains them.
+  function cssVal(v) { return String(v == null ? '' : v).replace(/[<>{};]/g, ''); }
+
   /* ================================================================
      Bootstrap — fonts + theme variables, mirroring engine.js
      ================================================================ */
   function bootstrap(cfg) {
     if (cfg.fonts) {
+      // Dedupe families: when display and body share a font, request it once.
+      var seen = {};
       var families = [];
-      if (cfg.fonts.display && cfg.fonts.display.googleImport) families.push(cfg.fonts.display.googleImport);
-      if (cfg.fonts.body && cfg.fonts.body.googleImport) families.push(cfg.fonts.body.googleImport);
+      function addFamily(f) {
+        if (f && f.googleImport && !seen[f.googleImport]) {
+          seen[f.googleImport] = 1;
+          families.push(f.googleImport);
+        }
+      }
+      addFamily(cfg.fonts.display);
+      addFamily(cfg.fonts.body);
       if (families.length) {
         var link = document.createElement('link');
         link.rel = 'stylesheet';
@@ -54,7 +70,7 @@
       var vars = [];
       var keys = Object.keys(cfg.theme);
       for (var i = 0; i < keys.length; i++) {
-        vars.push('  ' + keys[i] + ': ' + cfg.theme[keys[i]] + ';');
+        vars.push('  ' + cssVal(keys[i]) + ': ' + cssVal(cfg.theme[keys[i]]) + ';');
       }
       if (cfg.fonts) {
         if (cfg.fonts.display) vars.push('  --font-display: ' + fontStack(cfg.fonts.display) + ';');

package/dist/engine.js

@@ -13,6 +13,10 @@
   var BASE = (typeof window !== 'undefined' && window.__BRANDKIT_BASE__)
     ? (String(window.__BRANDKIT_BASE__).replace(/\/+$/, '') || '.') : '.';
   var res = await fetch(BASE + '/config.json');
+  // Guard before parsing: a non-200 response (e.g. a CDN/error page served
+  // with a JSON body) would otherwise flow straight into init() and render
+  // confusing output instead of failing cleanly.
+  if (!res.ok) throw new Error('Failed to load config.json: ' + res.status);
   var config = await res.json();
   init(config);
 
@@ -44,15 +48,36 @@
       return stack + ', sans-serif';
     }
 
+    /* ==============================================================
+       CSS-value sanitizer — strips the characters a config value would
+       need to break out of the injected <style> block ( < > ), out of the
+       :root {…} rule ( { } ), or out of its own declaration to smuggle in
+       another one ( ; ). A legitimate custom-property token/value never
+       contains them, so real configs pass through unchanged; an
+       adversarial value like "}</style><script>..." or
+       "red; background-image:url(x)" is defanged.
+       ============================================================== */
+    function cssVal(v) { return String(v == null ? '' : v).replace(/[<>{};]/g, ''); }
+
     /* ==============================================================
        BOOTSTRAP — inject fonts + CSS variables before any rendering
        ============================================================== */
     function bootstrap() {
       // Inject Google Fonts
       if (cfg.fonts) {
+        // Dedupe families: when display and body share a font (e.g. both
+        // Inter), requesting it once avoids a redundant URL + duplicate
+        // font CSS work.
+        var seen = {};
         var families = [];
-        if (cfg.fonts.display && cfg.fonts.display.googleImport) families.push(cfg.fonts.display.googleImport);
-        if (cfg.fonts.body && cfg.fonts.body.googleImport) families.push(cfg.fonts.body.googleImport);
+        function addFamily(f) {
+          if (f && f.googleImport && !seen[f.googleImport]) {
+            seen[f.googleImport] = 1;
+            families.push(f.googleImport);
+          }
+        }
+        addFamily(cfg.fonts.display);
+        addFamily(cfg.fonts.body);
         if (families.length) {
           var link = document.createElement('link');
           link.rel = 'stylesheet';
@@ -66,7 +91,7 @@
         var vars = [];
         var keys = Object.keys(cfg.theme);
         for (var i = 0; i < keys.length; i++) {
-          vars.push('  ' + keys[i] + ': ' + cfg.theme[keys[i]] + ';');
+          vars.push('  ' + cssVal(keys[i]) + ': ' + cssVal(cfg.theme[keys[i]]) + ';');
         }
         // Add font variables from config
         if (cfg.fonts) {
@@ -202,7 +227,7 @@
           '<circle cx="12" cy="12" r="9"/>' +
         '</svg>' +
         '<span class="sidebar-changelog-label">Changelog</span>' +
-        '<span class="sidebar-changelog-version">v' + esc(cfg.brand && cfg.brand.version) + '</span>';
+        '<span class="sidebar-changelog-version">v' + esc((cfg.brand && cfg.brand.version) || '') + '</span>';
       link.hidden = false;
     }
 

package/lib/template.js

@@ -19,6 +19,20 @@ function fontStack(font) {
   return stack + ', sans-serif';
 }
 
+/**
+ * Strip the characters a config value would need to break out of the
+ * generated :root block ( < > ), out of the :root {…} rule ( { } ), or out
+ * of its own declaration to smuggle in another one ( ; ). A legitimate CSS
+ * token/value never contains them, so real configs pass through unchanged;
+ * an adversarial value like "}</style><script>..." or
+ * "red; background-image:url(x)" is defanged. Mirrors cssVal() in
+ * dist/engine.js + dist/changelog.js so dev (runtime-injected) and
+ * production (build-baked) :root blocks sanitize identically.
+ */
+function cssValue(v) {
+  return String(v == null ? '' : v).replace(/[<>{};]/g, '');
+}
+
 /**
  * Generate a :root CSS block from config.theme + config.fonts.
  */
@@ -27,7 +41,7 @@ function generateRootCSS(config) {
   if (config.theme) {
     var keys = Object.keys(config.theme);
     for (var i = 0; i < keys.length; i++) {
-      lines.push('  ' + keys[i] + ': ' + config.theme[keys[i]] + ';');
+      lines.push('  ' + cssValue(keys[i]) + ': ' + cssValue(config.theme[keys[i]]) + ';');
     }
   }
   if (config.fonts) {
@@ -73,13 +87,19 @@ function normalizeBasePath(bp) {
  */
 function generateFontsLink(config) {
   if (!config.fonts) return '';
+  // Dedupe families: when display and body share a font (e.g. both Inter),
+  // baking it once avoids a redundant ...&family=Inter:...&family=Inter:...
+  // URL and the duplicate font CSS work it triggers.
+  var seen = {};
   var families = [];
-  if (config.fonts.display && config.fonts.display.googleImport) {
-    families.push(config.fonts.display.googleImport);
-  }
-  if (config.fonts.body && config.fonts.body.googleImport) {
-    families.push(config.fonts.body.googleImport);
+  function addFamily(f) {
+    if (f && f.googleImport && !seen[f.googleImport]) {
+      seen[f.googleImport] = 1;
+      families.push(f.googleImport);
+    }
   }
+  addFamily(config.fonts.display);
+  addFamily(config.fonts.body);
   if (!families.length) return '';
   return '<link href="https://fonts.googleapis.com/css2?family=' +
     families.join('&family=') + '&display=swap" rel="stylesheet">';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stacklist-app/brandkit",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "Config-driven brand guide that bolts onto any website. Zero dependencies.",
   "main": "lib/resolve.js",
   "bin": {