@wix/origami-site-runtime 1.0.8 → 1.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/origami-site-runtime",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "Vite development and build helpers for wix-import static sites",
   "main": "./src/index.js",
   "files": [
@@ -19,6 +19,7 @@
     "@babel/types": "^7.25.2",
     "@wix/builder-error-pages": "^1.1.6",
     "@wix/builder-piler-components": "^1.6.7",
+    "@wix/origami-fonts": "1.0.0",
     "@wix/origami-runtime": "0.11.0",
     "postcss": "^8.5.3",
     "postcss-custom-media": "^12.0.1",
@@ -64,5 +65,5 @@
     "./default-error-404": "./src/default-error-404.jsx"
   },
   "type": "module",
-  "falconPackageHash": "6816322c222999dcbe8c51a591cff934a894bfc9b63294e23c90b7a7"
+  "falconPackageHash": "641cce00719388c9e1fbc0fd6cab982b52a23c4daf02f37771b70615"
 }

package/src/cssPlugins/fonts.js

@@ -0,0 +1,93 @@
+// Checks the theme's font tokens (`--wst-heading-1-font: normal normal 700 --spx(88)/1em benzin`). It changes
+// nothing. The editor reads the family at the end of each one as one Wix font id and fails the import otherwise, so
+// the build fails, with every such token listed, unless the family is exactly the id of a font in the Wix font
+// catalog bundled in @wix/origami-fonts: no quotes, commas or fallbacks, the same case. A legacy font, which the
+// editor no longer offers, counts as not in the catalog. `origami search-font` finds the right id.
+
+import { basename } from 'node:path'
+import { fonts } from '@wix/origami-fonts'
+import { LayoutError } from '../transform/layoutError.js'
+
+const FONT_TOKEN = /^--wst-[\w-]+-font$/
+// The size in a `font` shorthand, with its optional line height: the family follows it. The number's quantifiers
+// never overlap, so a long run of digits that is not a size fails in linear time.
+const SIZE = /^(?:--spx\(.*\)|calc\(.*\)|(?:\d+(?:\.\d*)?|\.\d+)(?:px|em|rem|%|vw|vh|pt)?)(?:\/\S+)?$/i
+const FONT_IDS = new Set(fonts.filter(font => font.permissions !== 'legacy').map(font => font.id))
+
+/** A value split on top-level whitespace, so `--spx(16)/1.3em` stays one token. */
+const tokens = value => {
+    const result = []
+    let depth = 0
+    let current = ''
+    for (const char of value.trim()) {
+        if (char === '(') depth++
+        else if (char === ')') depth--
+        if (depth === 0 && /\s/.test(char)) {
+            if (current) result.push(current)
+            current = ''
+        } else current += char
+    }
+    if (current) result.push(current)
+    return result
+}
+
+/** A font shorthand's family as written; undefined for `var(…)`. */
+const familyOf = value => {
+    if (/var\(/.test(value)) return undefined
+    const parts = tokens(value)
+    // The last size: the repo's TS lib (ES2022) has no findLastIndex.
+    let size = parts.length - 1
+    while (size >= 0 && !SIZE.test(parts[size])) size--
+    if (size === -1 || size === parts.length - 1) return undefined
+    return parts.slice(size + 1).join(' ')
+}
+
+/** ` (theme.css:12)`: the carrier the declaration was written in, which the bundler doesn't name. */
+const where = declaration => {
+    const file = declaration.source?.input.file
+    const line = declaration.source?.start?.line
+    return file ? ` (${basename(file)}${line ? `:${line}` : ''})` : ''
+}
+
+/**
+ * Where `source` starts, as LayoutError's location, leaving out what it doesn't know.
+ * @param {import('postcss').Declaration['source']} source
+ */
+const locationOf = source => {
+    /** @type {{ file?: string, line?: number, column?: number }} */
+    const location = {}
+    if (source?.input.file !== undefined) location.file = source.input.file
+    if (source?.start !== undefined) {
+        location.line = source.start.line
+        location.column = source.start.column
+    }
+    return location
+}
+
+/** @type {import('../transform/types.js').CssTransformPlugin} */
+export const fontsPlugin = {
+    name: 'fonts',
+    // Only checks; it reads the tokens as authored, before spx rewrites the sizes the family follows.
+    order: 5,
+    transform(root) {
+        /** @type {import('postcss').Declaration[]} */
+        const declarations = []
+        root.walkDecls(FONT_TOKEN, declaration => {
+            declarations.push(declaration)
+        })
+        const violations = []
+        let first
+        for (const declaration of declarations) {
+            const family = familyOf(declaration.value)
+            if (family === undefined || FONT_IDS.has(family)) continue
+            first ??= declaration.source
+            violations.push(
+                `${declaration.prop}${where(declaration)} must name exactly one Wix font id from the catalog; found ` +
+                    `${family}. Run \`origami search-font --font <name>\` for the id.`
+            )
+        }
+        if (violations.length) {
+            throw new LayoutError(violations, locationOf(first))
+        }
+    },
+}

package/src/cssPlugins/index.js

@@ -7,15 +7,23 @@
 // stage guarantees a plugin sees. The order matters once: mixin bodies are copied into their calling rules before
 // layout routes declarations to wrappers and SPX converts calls using the browser's active settings. stack-children
 // only checks, and runs between mixins and layout: it needs the mixins' declarations and the stack rules as authored,
-// before layout compiles them away.
+// before layout compiles them away. fonts only checks the theme's font tokens, as authored.
 //
 // `@layer` needs no plugin: cascade layers have been in every browser since March 2022.
 
 import { customMediaPlugin } from './customMedia.js'
+import { fontsPlugin } from './fonts.js'
 import { mixinsPlugin } from './mixins.js'
 import { layoutPlugin } from './layout/index.js'
 import { spxPlugin } from './spx/index.js'
 import { stackChildrenPlugin } from './stackChildren.js'
 
 /** @type {readonly import('../transform/types.js').CssTransformPlugin[]} */
-export const cssPlugins = Object.freeze([customMediaPlugin, mixinsPlugin, stackChildrenPlugin, layoutPlugin, spxPlugin])
+export const cssPlugins = Object.freeze([
+    customMediaPlugin,
+    fontsPlugin,
+    mixinsPlugin,
+    stackChildrenPlugin,
+    layoutPlugin,
+    spxPlugin,
+])

package/src/transform/css/runPlugins.js

@@ -1,18 +1,26 @@
 // Runs the selected CSS plugins over one shared Root, in order. Parsing, stringifying and source
 // maps belong to PostCSS, which drives this stage — the only thing added here is attributing a
 // failure to the plugin and the file that caused it. A LayoutError is the author's, so it passes through.
+//
+// A LayoutError comes from a plugin that only checks, so the Root is as it was and the later plugins still run:
+// the author gets every plugin's violations in one error, at the first one's position, not one plugin's per build.
 
 import { LayoutError } from '../layoutError.js'
 
 const reason = cause => (cause instanceof Error ? cause.message : String(cause))
 
 export const runCssPlugins = ({ plugins, root, context }) => {
+    /** @type {LayoutError[]} */
+    const layoutErrors = []
     for (const phase of ['validate', 'transform']) {
         for (const plugin of plugins) {
             try {
                 plugin[phase]?.(root, context)
             } catch (cause) {
-                if (cause instanceof LayoutError) throw cause
+                if (cause instanceof LayoutError) {
+                    layoutErrors.push(cause)
+                    continue
+                }
                 // Tooling such as Vite's error overlay prints only the message, so the reason goes in it as well. A
                 // plugin may throw any value, so it is read without assuming an Error.
                 throw new Error(
@@ -22,4 +30,11 @@ export const runCssPlugins = ({ plugins, root, context }) => {
             }
         }
     }
+    if (layoutErrors.length === 1) throw layoutErrors[0]
+    if (layoutErrors.length > 1) {
+        throw new LayoutError(
+            layoutErrors.flatMap(error => error.violations),
+            layoutErrors[0].location
+        )
+    }
 }

package/src/transform/layoutError.js

@@ -12,6 +12,8 @@ export class LayoutError extends Error {
         super(violations.length === 1 ? violations[0] : `\n  ${violations.join('\n  ')}`)
         this.name = 'LayoutError'
         this.stack = ''
+        this.violations = violations
+        this.location = location
         Object.assign(this, location)
     }
 }