@symbo.ls/brender 3.14.677 → 3.14.679

package/env.js

@@ -101,6 +101,284 @@ const patchCustomPropertyNames = (document) => {
   })
 }
 
+// ── Rules a browser keeps that linkedom's CSS parser cannot read ───────────
+// linkedom gives every <style> a sheet from `cssom` 0.5: `style.sheet` parses
+// the style's text, `sheet.insertRule` parses one rule. That parser knows
+// @media, @supports, @font-face, @keyframes, @import, @document and @host and
+// nothing newer: a rule that holds a container query threw ("Unexpected }").
+// Under a `breakpointsFrom` ancestor the atomic engine writes every breakpoint
+// as one (`@container breakpoints (max-width: 1024px){._cX{display:none}}`,
+// @symbo.ls/element resolveMediaCssKey) and counts a throw as an invalid rule:
+// the server page carried the class with no rule. On the merged landing
+// (`Page` declares `breakpointsFrom: 'container'`) 153 of the 343 `_c`
+// classes of `/` had none, and a phone's first frame showed the desktop header
+// until the client replaced it (W7-FIXA). Reading the sheet of a <style> whose
+// TEXT held such a rule threw too, and the render failed with it.
+// Kept now, as a browser keeps them: a block rule whose at-keyword cssom does
+// not know (@container, @layer, @scope, @starting-style), or an @media /
+// @supports that holds one, is read as a grouping rule — its condition, its
+// rules and its text — and a `@layer a, b;` statement as a statement. A rule
+// a browser refuses still throws: text after the one rule (a stray `}`, a
+// second rule), or a rule inside the block that cannot be read either. Every
+// rule cssom reads is cssom's own, as before.
+const GROUP_RULES = Symbol.for('@symbo.ls/brender:groupRules')
+const GROUP_AT_RULE = /^@(container|layer|scope|starting-style|media|supports)(?![\w-])/i
+const LAYER_STATEMENT = /^@layer\s+[-\w.]+(?:\s*,\s*[-\w.]+)*\s*;?$/i
+// The CSSRule type a browser reports; a rule kind newer than the type
+// constants reports 0.
+const GROUP_RULE_TYPES = { media: 4, supports: 12 }
+
+// The top-level rules of a CSS text, each as its own text; null when the text
+// is not whole (an unclosed block, string or comment, a stray `}`). A comment
+// between rules belongs to none of them.
+const topLevelRules = (css) => {
+  const rules = []
+  let depth = 0
+  let start = 0
+  let quote = null
+  const take = (end) => {
+    const rule = css.slice(start, end).trim()
+    if (rule) rules.push(rule)
+    start = end
+  }
+  for (let i = 0; i < css.length; i++) {
+    const ch = css[i]
+    if (quote) {
+      if (ch === '\\') i++
+      else if (ch === quote) quote = null
+      continue
+    }
+    if (ch === '\\') {
+      i++
+      continue
+    }
+    if (ch === '/' && css[i + 1] === '*') {
+      const close = css.indexOf('*/', i + 2)
+      if (close === -1) return null
+      if (depth === 0 && !css.slice(start, i).trim()) start = close + 2
+      i = close + 1
+      continue
+    }
+    if (ch === '"' || ch === "'") quote = ch
+    else if (ch === '{') depth++
+    else if (ch === '}') {
+      if (depth === 0) return null
+      if (--depth === 0) take(i + 1)
+    } else if (ch === ';' && depth === 0) take(i + 1)
+  }
+  if (quote || depth) return null
+  take(css.length)
+  return rules
+}
+
+// A grouping rule cssom cannot read, the way a browser reads it.
+class ServerGroupingRule {
+  constructor (keyword, condition, rules) {
+    this.keyword = keyword
+    this.condition = condition
+    this.cssRules = rules
+    this.parentRule = null
+    this.parentStyleSheet = null
+    for (const rule of rules) rule.parentRule = this
+  }
+
+  get type () { return GROUP_RULE_TYPES[this.keyword] || 0 }
+  get conditionText () { return this.condition }
+  get name () { return this.keyword === 'layer' ? this.condition : undefined }
+  get cssText () {
+    // the way cssom writes an @media rule: `@media <condition> {<rules>}`
+    let inner = ''
+    for (const rule of this.cssRules) inner += rule.cssText
+    return `@${this.keyword}${this.condition ? ' ' + this.condition : ''} {${inner}}`
+  }
+}
+
+// A `@layer a, b;` statement.
+class ServerLayerStatementRule {
+  constructor (names) {
+    this.nameList = names
+    this.parentRule = null
+    this.parentStyleSheet = null
+  }
+
+  get type () { return 0 }
+  get cssText () { return `@layer ${this.nameList.join(', ')};` }
+}
+
+// One rule's text as a rule: cssom's reading of it, else the grouping rule
+// (or @layer statement) a browser reads; else the error cssom threw.
+// `cssomInsertRule` is cssom's own CSSStyleSheet#insertRule, run on a holder.
+const readRule = (text, cssomInsertRule) => {
+  const holder = { cssRules: [] }
+  let error = null
+  try {
+    cssomInsertRule.call(holder, text, 0)
+    if (holder.cssRules[0]) return holder.cssRules[0]
+  } catch (e) {
+    error = e
+  }
+  const rule = groupingRuleOf(String(text).trim(), cssomInsertRule)
+  if (rule) return rule
+  throw error || new SyntaxError(`Failed to parse the rule '${text}'`)
+}
+
+const groupingRuleOf = (text, cssomInsertRule) => {
+  if (LAYER_STATEMENT.test(text)) {
+    return new ServerLayerStatementRule(text.replace(/^@layer\s+/i, '').replace(/\s*;$/, '').split(/\s*,\s*/))
+  }
+  const at = GROUP_AT_RULE.exec(text)
+  if (!at) return null
+  // exactly one block rule: `<prelude>{<rules>}` and nothing after it
+  const whole = topLevelRules(text)
+  if (!whole || whole.length !== 1 || !text.endsWith('}')) return null
+  const open = blockStart(text)
+  if (open === -1) return null
+  const inner = topLevelRules(text.slice(open + 1, -1))
+  if (!inner) return null
+  const rules = []
+  for (const ruleText of inner) {
+    try {
+      rules.push(readRule(ruleText, cssomInsertRule))
+    } catch (e) {
+      return null
+    }
+  }
+  return new ServerGroupingRule(at[1].toLowerCase(), text.slice(at[0].length, open).trim(), rules)
+}
+
+// Where a rule's block opens: its first `{` outside strings and comments.
+const blockStart = (text) => {
+  let quote = null
+  for (let i = 0; i < text.length; i++) {
+    const ch = text[i]
+    if (quote) {
+      if (ch === '\\') i++
+      else if (ch === quote) quote = null
+      continue
+    }
+    if (ch === '\\') {
+      i++
+      continue
+    }
+    if (ch === '/' && text[i + 1] === '*') {
+      const close = text.indexOf('*/', i + 2)
+      if (close === -1) return -1
+      i = close + 1
+      continue
+    }
+    if (ch === '"' || ch === "'") quote = ch
+    else if (ch === '{') return i
+  }
+  return -1
+}
+
+const adopt = (rule, sheet) => {
+  rule.parentStyleSheet = sheet
+  if (rule instanceof ServerGroupingRule) for (const inner of rule.cssRules) adopt(inner, sheet)
+}
+
+// Patch linkedom's sheets once per process (the prototypes are cssom's and
+// linkedom's, shared by every document): insertRule keeps a rule cssom cannot
+// read and a browser keeps; `style.sheet` of a text holding one reads that
+// text rule by rule, as a browser does, dropping only a rule it cannot read.
+const patchStyleSheetRules = (document) => {
+  const style = document.createElement('style')
+  let sheet
+  try { sheet = style.sheet } catch (e) { return }
+  let sheetProto = sheet && Object.getPrototypeOf(sheet)
+  while (sheetProto && !Object.prototype.hasOwnProperty.call(sheetProto, 'insertRule')) sheetProto = Object.getPrototypeOf(sheetProto)
+  if (!sheetProto || Object.prototype.hasOwnProperty.call(sheetProto, GROUP_RULES)) return
+  const cssomInsertRule = sheetProto.insertRule
+  if (typeof cssomInsertRule !== 'function') return
+  const SheetConstructor = sheet.constructor
+  Object.defineProperty(sheetProto, GROUP_RULES, { configurable: true, value: true })
+  Object.defineProperty(sheetProto, 'insertRule', {
+    configurable: true,
+    writable: true,
+    value: function insertRule (rule, index) {
+      try {
+        return cssomInsertRule.apply(this, arguments)
+      } catch (error) {
+        const text = String(rule)
+        const kept = groupingRuleOf(text.trim(), cssomInsertRule)
+        if (!kept) throw error
+        const at = index === undefined ? 0 : Number(index)
+        if (!(at >= 0 && at <= this.cssRules.length)) throw new RangeError('INDEX_SIZE_ERR')
+        adopt(kept, this)
+        this.cssRules.splice(at, 0, kept)
+        return at
+      }
+    }
+  })
+
+  let styleProto = Object.getPrototypeOf(style)
+  let desc
+  while (styleProto && !(desc = Object.getOwnPropertyDescriptor(styleProto, 'sheet'))) styleProto = Object.getPrototypeOf(styleProto)
+  if (!styleProto || !desc || typeof desc.get !== 'function' || typeof SheetConstructor !== 'function') return
+  const readSheet = desc.get
+  // the sheet read from a style's text, while the text holds
+  const textSheets = new WeakMap()
+  Object.defineProperty(styleProto, 'sheet', {
+    configurable: true,
+    enumerable: desc.enumerable,
+    get () {
+      try {
+        return readSheet.call(this)
+      } catch (error) {
+        const text = this.textContent
+        const known = textSheets.get(this)
+        if (known && known.text === text) return known.sheet
+        const rules = topLevelRules(text)
+        if (!rules) throw error
+        const read = new SheetConstructor()
+        for (const rule of rules) {
+          try { read.insertRule(rule, read.cssRules.length) } catch (e) { /* a browser drops a rule it cannot read */ }
+        }
+        textSheets.set(this, { text, sheet: read })
+        return read
+      }
+    }
+  })
+}
+
+// ── A page timer that throws ends nothing ──────────────────────────────────
+// In a browser, a timer callback that throws (or whose promise rejects) is a
+// line in the console, and the page goes on. In Node it is an uncaught
+// exception (an unhandled rejection), and a host that runs renders ends the
+// process on one: the smbls CLI's handler exits 1. W7-FIXA (fly/landing-fly
+// 1.5.0, a dry run that rendered every static route): `/ask` (fly/core
+// askReveal / askStay) scheduled `win.setTimeout(...)` callbacks that call
+// `win.getComputedStyle`, which the server window does not have; they fired
+// during the next four renders, and `smbls publish` stopped in its
+// pre-render, before it published. The window's own timers (setTimeout,
+// setInterval, the requestAnimationFrame shim) now run their callback inside
+// a try and report what it throws, once per message. What stays: page code
+// that calls the BARE `setTimeout` gets Node's own, and a timer a render
+// left behind still fires during a later render (render.js "One render at a
+// time").
+const reportedTimerErrors = new Set()
+const reportTimerError = (err) => {
+  const message = (err && err.message) || String(err)
+  if (reportedTimerErrors.has(message)) return
+  if (reportedTimerErrors.size >= 200) reportedTimerErrors.clear()
+  reportedTimerErrors.add(message)
+  console.warn(`[brender] page code threw in a timer; reported as a browser reports it, the render goes on (once per message): ${message}`)
+}
+const containedCallback = (fn) => function (...args) {
+  try {
+    const out = fn.apply(this, args)
+    if (out && typeof out.then === 'function') out.then(null, reportTimerError)
+    return out
+  } catch (err) {
+    reportTimerError(err)
+  }
+}
+// The process's timer, read when the page calls it (as the window read it
+// before: a host's fake timers still apply). Node refuses a callback that is
+// not a function; so does this.
+const pageTimer = (name) => (fn, ...rest) =>
+  globalThis[name](typeof fn === 'function' ? containedCallback(fn) : fn, ...rest)
+
 // Web Storage for one environment.
 const createStorage = () => {
   const store = {}
@@ -150,14 +428,19 @@ export const createEnv = (html = '<!DOCTYPE html><html><head></head><body></body
       pushState: () => {},
       replaceState: () => {},
       state: null
-    }
+    },
+    // the page's timers: a callback that throws is reported, never the end of
+    // the process (see "A page timer that throws ends nothing"); the bare
+    // globals stay Node's
+    setTimeout: pageTimer('setTimeout'),
+    setInterval: pageTimer('setInterval')
   }
   const { window, document } = parseHTML(html, own)
 
   // Stub APIs that DOMQL/smbls may call during rendering
   if (!window.requestAnimationFrame) {
     window.requestAnimationFrame = (fn) => {
-      const id = setTimeout(fn, 0)
+      const id = setTimeout(typeof fn === 'function' ? containedCallback(fn) : fn, 0)
       if (id?.unref) id.unref()
       return id
     }
@@ -202,6 +485,12 @@ export const createEnv = (html = '<!DOCTYPE html><html><head></head><body></body
   // as before.
   patchCustomPropertyNames(document)
 
+  // linkedom's sheets parse with `cssom` 0.5, which cannot read a container
+  // query: every breakpoint under a `breakpointsFrom` ancestor lost its rule
+  // (W7-FIXA: 153 of the 343 `_c` classes of the merged landing's `/`). A rule
+  // a browser keeps is kept (see patchStyleSheetRules).
+  patchStyleSheetRules(document)
+
   // Stub MutationObserver for SSR (not provided by linkedom)
   if (!window.MutationObserver) {
     window.MutationObserver = class MutationObserver {

package/faces.js

@@ -0,0 +1,193 @@
+// ── The page's font faces: one sheet, marked for a host ─────────────────────
+// renderPage writes every @font-face rule of the page into ONE
+// `<style data-smbls-faces>` ahead of the server's styles (render.js,
+// facesStyle). XMA r12, ask 2 (mirc #430, decided in #440/#441): a host
+// that serves a returning reader the faces it already keeps by address, and
+// the rest inline, needs to tell kept faces from new ones and to warm the
+// files. So the sheet carries two marks:
+//
+//   data-smbls-faces-version  a content hash of the sheet's rules — equal
+//                             rules (same text, same order) give the same
+//                             version, any change to a rule a new one
+//   data-smbls-faces-files    per @font-face rule, in rule order, its file
+//                             address: the first url() of its `src` (a
+//                             `local()` source before it is skipped), as the
+//                             rule names it; `-` for a rule that names no
+//                             file (no url(), or a data: url); a space in an
+//                             address is written %20
+//
+// The marks describe the faces BY ADDRESS. `smbls build` marks each page
+// again after its file: URLs point into the build output (the version then
+// follows the files the page names, and every page of a build carries the
+// same one when the font URLs are site-root or absolute); its
+// `brender.faces.inline` step moves files into the sheet as data: URLs and
+// keeps both marks as they are, so an inlined face still names its file.
+// No sheet file is written: the host builds a by-address sheet from the list.
+import { createHash } from 'crypto'
+import { stylesheetRules } from './pageWeight.js'
+
+export const FACES_SHEET_ATTR = 'data-smbls-faces'
+export const FACES_VERSION_ATTR = 'data-smbls-faces-version'
+export const FACES_FILES_ATTR = 'data-smbls-faces-files'
+// The list entry of a rule that names no file.
+export const NO_FACE_FILE = '-'
+
+const FACE_RULE_START = /^@font-face\b/i
+const isFaceRule = (rule) => typeof rule === 'string' && FACE_RULE_START.test(rule.trim())
+
+// The declarations of one rule's block, name (lowercase) → value, read past
+// strings and parentheses: a `;` inside `url(data:…;base64,…)` or a quoted
+// url does not end a declaration.
+const declarationsOf = (rule) => {
+  const out = {}
+  const open = rule.indexOf('{')
+  if (open === -1) return out
+  let start = open + 1
+  let quote = null
+  let parens = 0
+  const take = (end) => {
+    const text = rule.slice(start, end)
+    const colon = text.indexOf(':')
+    if (colon !== -1) {
+      const name = text.slice(0, colon).trim().toLowerCase()
+      if (name && !(name in out)) out[name] = text.slice(colon + 1).trim()
+    }
+    start = end + 1
+  }
+  for (let i = start; i < rule.length; i++) {
+    const ch = rule[i]
+    if (quote) {
+      if (ch === '\\') i++
+      else if (ch === quote) quote = null
+      continue
+    }
+    if (ch === '\\') { i++; continue }
+    if (ch === '"' || ch === "'") quote = ch
+    else if (ch === '(') parens++
+    else if (ch === ')') parens = Math.max(0, parens - 1)
+    else if (parens) continue
+    else if (ch === ';') take(i)
+    else if (ch === '}') { take(i); break }
+  }
+  return out
+}
+
+// A code point from a CSS hex escape (an invalid one is U+FFFD).
+const codePoint = (hex) => {
+  const n = parseInt(hex, 16)
+  return n > 0 && n <= 0x10FFFF && !(n >= 0xD800 && n <= 0xDFFF) ? String.fromCodePoint(n) : '�'
+}
+
+// The text of a url() argument: quotes off, CSS escapes resolved.
+const urlText = (text) => {
+  const t = text.trim()
+  const q = t[0]
+  const body = (q === '"' || q === "'") && t.length > 1 && t[t.length - 1] === q ? t.slice(1, -1) : t
+  return body.replace(/\\(?:([0-9a-fA-F]{1,6})\s?|([\s\S]))/g, (m, hex, ch) => hex ? codePoint(hex) : ch).trim()
+}
+
+/**
+ * The file address a `src` value names: its first `url()` (a `local()`
+ * before it is skipped). null when it names none, or only a data: url.
+ * @param {string} src - the value of a `@font-face` rule's `src`
+ * @returns {string|null}
+ */
+export const faceFileOf = (src) => {
+  if (typeof src !== 'string') return null
+  let quote = null
+  for (let i = 0; i < src.length; i++) {
+    const ch = src[i]
+    if (quote) {
+      if (ch === '\\') i++
+      else if (ch === quote) quote = null
+      continue
+    }
+    if (ch === '"' || ch === "'") { quote = ch; continue }
+    if (!/^url\(/i.test(src.slice(i, i + 4)) || /[\w-]/.test(src[i - 1] || '')) continue
+    // the argument: a quoted string, or the raw text up to the `)`
+    let j = i + 4
+    while (j < src.length && /\s/.test(src[j])) j++
+    let end
+    if (src[j] === '"' || src[j] === "'") {
+      end = j + 1
+      while (end < src.length && src[end] !== src[j]) end += src[end] === '\\' ? 2 : 1
+      end++
+    } else {
+      end = src.indexOf(')', j)
+      if (end === -1) end = src.length
+    }
+    const value = urlText(src.slice(j, end))
+    return value && !/^data:/i.test(value) ? value : null
+  }
+  return null
+}
+
+// A whitespace character in an address, percent-encoded: the list is
+// space-separated.
+const listEntry = (file) => file
+  ? file.replace(/\s/g, (c) => '%' + c.charCodeAt(0).toString(16).toUpperCase().padStart(2, '0'))
+  : NO_FACE_FILE
+
+/**
+ * The marks of a faces sheet, from its rules.
+ * @param {string|string[]} rules - the sheet's text, or its rules in order
+ * @returns {{ version: string, files: string[] }|null} null for a sheet with
+ *   no @font-face rule, or a text that cannot be read whole
+ */
+export const facesSheetMarks = (rules) => {
+  const list = typeof rules === 'string' ? stylesheetRules(rules) : Array.isArray(rules) ? rules : null
+  if (!list) return null
+  const all = list.map((rule) => String(rule).trim()).filter(Boolean)
+  const faces = all.filter(isFaceRule)
+  if (!faces.length) return null
+  return {
+    version: createHash('sha256').update(all.join('\n')).digest('hex').slice(0, 12),
+    files: faces.map((rule) => listEntry(faceFileOf(declarationsOf(rule).src)))
+  }
+}
+
+const escapeAttr = (value) => String(value).replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;')
+
+const marksText = (marks) => marks
+  ? ` ${FACES_VERSION_ATTR}="${escapeAttr(marks.version)}" ${FACES_FILES_ATTR}="${escapeAttr(marks.files.join(' '))}"`
+  : ''
+
+/**
+ * The page's `<style data-smbls-faces>` for its @font-face rules, marked.
+ * @param {string[]} rules - the rules, in order
+ * @returns {string} '' for no rule
+ */
+export const facesSheetTag = (rules) => {
+  if (!Array.isArray(rules) || !rules.length) return ''
+  return `<style ${FACES_SHEET_ATTR}${marksText(facesSheetMarks(rules))}>\n${rules.join('\n')}\n</style>`
+}
+
+// A <style> element, or a <script> one (skipped: its text is code, not markup).
+const STYLE_OR_SCRIPT = /<script\b[\s\S]*?<\/script\s*>|<style\b([^>]*)>([\s\S]*?)(<\/style\s*>)/gi
+const SHEET_ATTR = /(^|\s)data-smbls-faces(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+))?(?=[\s/]|$)/i
+const OLD_MARK = /\s(?:data-smbls-faces-version|data-smbls-faces-files)(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+))?/gi
+
+/**
+ * Mark a page's faces sheet again from the rules it holds now — after a
+ * step changed the addresses its rules name (`smbls build` maps file: URLs
+ * into the build output). The sheet's text and its other attributes stay as
+ * they are; the two marks are written again after `data-smbls-faces`. A page
+ * without a faces sheet, or with one whose text cannot be read whole, comes
+ * back as it was.
+ * @param {string} html
+ * @returns {string}
+ */
+export const markFacesSheet = (html) => {
+  if (typeof html !== 'string' || !html.includes(FACES_SHEET_ATTR)) return html
+  let done = false
+  return html.replace(STYLE_OR_SCRIPT, (whole, attrs, css, close) => {
+    if (done || attrs === undefined || !SHEET_ATTR.test(attrs)) return whole
+    done = true
+    const marks = facesSheetMarks(css)
+    if (!marks) return whole
+    const rest = attrs.replace(OLD_MARK, '')
+    const at = SHEET_ATTR.exec(rest)
+    const end = at.index + at[0].length
+    return `<style${rest.slice(0, end)}${marksText(marks)}${rest.slice(end)}>${css}${close}`
+  })
+}

package/index.js

@@ -12,6 +12,13 @@ import { composeIntoShell } from './shell.js'
 // or trims a stored page as it serves it (stylesheetRules reads a stored
 // stylesheet text back into the rules classRulesForPage takes).
 import { trimSpriteToPage, classRulesForPage, markupClasses, trimVariablesToPage, stylesheetRules } from './pageWeight.js'
+// The faces sheet's marks (XMA r12): a caller that changes the addresses a
+// page's faces name (`smbls build` maps file: URLs into its output) marks the
+// sheet again.
+import { markFacesSheet, facesSheetMarks } from './faces.js'
+// The faces a page's elements draw (XMA r12 results, item 2): `smbls build`
+// inlines and awaits only those.
+import { drawnFaces } from './drawnFaces.js'
 
 export {
   createEnv,
@@ -42,7 +49,10 @@ export {
   classRulesForPage,
   markupClasses,
   trimVariablesToPage,
-  stylesheetRules
+  stylesheetRules,
+  markFacesSheet,
+  facesSheetMarks,
+  drawnFaces
 }
 
 export default {
@@ -74,5 +84,8 @@ export default {
   classRulesForPage,
   markupClasses,
   trimVariablesToPage,
-  stylesheetRules
+  stylesheetRules,
+  markFacesSheet,
+  facesSheetMarks,
+  drawnFaces
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symbo.ls/brender",
-  "version": "3.14.677",
+  "version": "3.14.679",
   "license": "CC-BY-NC-4.0",
   "type": "module",
   "module": "./dist/esm/index.js",
@@ -25,6 +25,16 @@
       "development": "./load.js",
       "import": "./dist/esm/load.js",
       "default": "./dist/esm/load.js"
+    },
+    "./faces": {
+      "development": "./faces.js",
+      "import": "./dist/esm/faces.js",
+      "default": "./dist/esm/faces.js"
+    },
+    "./drawnFaces": {
+      "development": "./drawnFaces.js",
+      "import": "./dist/esm/drawnFaces.js",
+      "default": "./dist/esm/drawnFaces.js"
     }
   },
   "source": "index.js",
@@ -48,16 +58,16 @@
   "dependencies": {
     "@symbo.ls/css": "^3.14.782",
     "@symbo.ls/default-config": "^3.14.789",
-    "@symbo.ls/element": "^3.14.818",
-    "@symbo.ls/fetch": "^3.14.673",
-    "@symbo.ls/helmet": "^3.14.672",
-    "@symbo.ls/scratch": "^3.14.795",
-    "@symbo.ls/utils": "^3.14.853",
+    "@symbo.ls/element": "^3.14.819",
+    "@symbo.ls/fetch": "^3.14.675",
+    "@symbo.ls/helmet": "^3.14.674",
+    "@symbo.ls/scratch": "^3.14.796",
+    "@symbo.ls/utils": "^3.14.855",
     "esbuild": "^0.28.1",
     "linkedom": "^0.16.8"
   },
   "peerDependencies": {
-    "smbls": "^3.14.859"
+    "smbls": "^3.14.862"
   },
   "optionalDependencies": {
     "@symbo.ls/funcql": "^3.14.0"

package/render.js

@@ -11,6 +11,7 @@ import { extractMetadata, generateHeadHtml } from './metadata.js'
 import { hydrate } from './hydrate.js'
 import { composeIntoShell } from './shell.js'
 import { trimSpriteToPage, classRulesForPage, markupClasses, trimVariablesToPage } from './pageWeight.js'
+import { facesSheetTag } from './faces.js'
 import { fetchSSRTranslations } from './prefetch.js'
 import { createEarlySeedScript } from '@symbo.ls/fetch'
 import { headerEntries } from '@symbo.ls/fetch/rest'
@@ -2114,7 +2115,10 @@ export const renderPage = async (data, route = '/', options = {}) => {
   const emotionCSS = cssClasses === 'page'
     ? classRulesForPage(classRules, markupClasses(bodyHtml, typeof shell === 'string' ? shell : '')).join('\n')
     : classRules.join('\n')
-  const facesStyle = faceRules.length ? `<style data-smbls-faces>\n${faceRules.join('\n')}\n</style>` : ''
+  // Marked for a host (faces.js): `data-smbls-faces-version` (a hash of the
+  // rules) and `data-smbls-faces-files` (each rule's file address, in rule
+  // order) — XMA r12, ask 2.
+  const facesStyle = facesSheetTag(faceRules)
 
   // Global CSS (variables, reset, keyframes): this render's own init output.
   // The style tags, built once for both documents below.