@uniweb/theming 0.1.8 → 0.1.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniweb/theming",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "description": "Theming utilities for the Uniweb platform — shade generation, CSS generation, theme processing",
   "type": "module",
   "exports": {

package/src/css-generator.js

@@ -277,6 +277,27 @@ function filterGoogleFontsUrl(url, usedFamilies) {
   }
 }
 
+/**
+ * Prefix a root-relative asset URL with the site's base path.
+ *
+ * Self-hosted font `src` values are authored root-relative (`/fonts/x.woff2`)
+ * because that is what they are relative to the site. Under a subdirectory
+ * deployment (GitHub Pages project sites, `/docs/`, ...) the served root moves,
+ * so the emitted URL has to carry the base. A relative URL is not an option:
+ * the rules live in an inline `<style>`, so they would resolve against the
+ * *document* URL, which differs per route.
+ *
+ * Left untouched: absolute URLs (http:, //, data:), already-based URLs, and
+ * document-relative ones (`./`, `../`) whose author clearly meant them.
+ */
+function withBase(url, base) {
+  if (!url || !base || base === '/') return url
+  if (!url.startsWith('/') || url.startsWith('//')) return url
+  const prefix = base.endsWith('/') ? base.slice(0, -1) : base
+  if (url === prefix || url.startsWith(prefix + '/')) return url // already based
+  return prefix + url
+}
+
 /**
  * Check whether a URL points to Google Fonts.
  */
@@ -293,9 +314,10 @@ function isGoogleFontsUrl(url) {
  *
  * @param {Object} fontRoles - Resolved font roles (name → { value, applyTo, apply, load })
  * @param {Object} fonts - Font loading config (import[] / faces[])
+ * @param {string} [base='/'] - Site base path, prefixed onto root-relative face srcs
  * @returns {{ css: string, links: string }} css for <style>, links for <head>
  */
-function generateFontCSS(fontRoles = {}, fonts = {}) {
+function generateFontCSS(fontRoles = {}, fonts = {}, base = '/') {
   const cssLines = []
   const linkTags = []
 
@@ -311,10 +333,11 @@ function generateFontCSS(fontRoles = {}, fonts = {}) {
       if (!usedFamilies.has(face.family.toLowerCase())) continue
 
       const format = face.format || (face.src.endsWith('.woff2') ? 'woff2' : 'woff')
+      const src = withBase(face.src, base)
       cssLines.push(
         `@font-face {`,
         `  font-family: ${face.family};`,
-        `  src: url('${face.src}') format('${format}');`,
+        `  src: url('${src}') format('${format}');`,
         `  font-weight: ${face.weight || 400};`,
         `  font-style: ${face.style || 'normal'};`,
         `  font-display: swap;`,
@@ -323,7 +346,7 @@ function generateFontCSS(fontRoles = {}, fonts = {}) {
 
       const mimeType = PRELOAD_TYPE[format]
       if (mimeType) {
-        linkTags.push(`<link rel="preload" href="${face.src}" as="font" type="${mimeType}" crossorigin>`)
+        linkTags.push(`<link rel="preload" href="${src}" as="font" type="${mimeType}" crossorigin>`)
       }
     }
     if (cssLines.length > 0) {
@@ -333,6 +356,7 @@ function generateFontCSS(fontRoles = {}, fonts = {}) {
 
   // --- External imports → <link> tags (filtered to used families) ---
   const googleUrls = []
+  const otherOrigins = new Set()
 
   if (fonts.import && Array.isArray(fonts.import)) {
     for (const entry of fonts.import) {
@@ -343,10 +367,23 @@ function generateFontCSS(fontRoles = {}, fonts = {}) {
         if (filtered) googleUrls.push(filtered)
       } else {
         linkTags.push(`<link rel="stylesheet" href="${entry.url}">`)
+        try {
+          otherOrigins.add(new URL(entry.url).origin)
+        } catch {
+          // relative or malformed — no origin to preconnect to
+        }
       }
     }
   }
 
+  // Preconnect to non-Google font hosts so the DNS/TLS handshake overlaps the
+  // stylesheet request instead of following it. Google's own preconnects are
+  // emitted below, alongside the merged css2 link. Emitting every font <link>
+  // from one place keeps consumers from having to re-derive any of them.
+  for (const origin of otherOrigins) {
+    linkTags.unshift(`<link rel="preconnect" href="${origin}">`)
+  }
+
   // Merge Google Fonts into a single <link> with preconnect
   if (googleUrls.length > 0) {
     // Collect all family params from all URLs into one
@@ -482,9 +519,12 @@ export function generateFoundationVars(vars = {}) {
  * @param {Object} config.fonts - Font configuration
  * @param {Object} config.appearance - Appearance settings (dark mode, etc.)
  * @param {Object} config.foundationVars - Foundation-specific variables
+ * @param {Object} [options] - Generation options
+ * @param {string} [options.base='/'] - Site base path for subdirectory deployments
  * @returns {{ css: string, links: string }} CSS string and font link tags
  */
-export function generateThemeCSS(config = {}) {
+export function generateThemeCSS(config = {}, options = {}) {
+  const { base = '/' } = options
   const {
     colors = DEFAULT_COLORS,
     contexts = {},
@@ -501,7 +541,7 @@ export function generateThemeCSS(config = {}) {
   //    resolved by the processor; `fonts` carries only import[] / faces[] here.
   //    Font-typed vars are already split out of `foundationVars`, so the generic
   //    foundation-var emission below never double-writes a --font-<name>.
-  const fontResult = generateFontCSS(fontRoles, fonts)
+  const fontResult = generateFontCSS(fontRoles, fonts, base)
   if (fontResult.css) {
     sections.push('/* Typography */\n' + fontResult.css)
   }

package/src/index.js

@@ -53,11 +53,13 @@ import { generateThemeCSS } from './css-generator.js'
  * @param {Object} themeYml - Raw theme.yml content
  * @param {Object} options - Processing options
  * @param {Object} options.foundationVars - Foundation variables
+ * @param {string} [options.base='/'] - Site base path, prefixed onto root-relative
+ *   font `src` URLs so self-hosted fonts resolve under subdirectory deployments
  * @returns {{ css: string, links: string, config: Object, errors: string[], warnings: string[] }}
  */
 export function buildTheme(themeYml = {}, options = {}) {
   const { config, errors, warnings } = processTheme(themeYml, options)
-  const { css, links } = generateThemeCSS(config)
+  const { css, links } = generateThemeCSS(config, { base: options.base })
 
   return {
     css,