@wix/origami-transforms 0.1.2 → 0.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/origami-transforms",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "Babel and PostCSS checks and transforms for Wix origami page files.",
   "main": "./src/index.js",
   "files": [
@@ -15,7 +15,7 @@
   },
   "dependencies": {
     "@babel/core": "^7.26.0",
-    "@wix/origami-fonts": "1.0.0",
+    "@wix/origami-fonts": "1.0.1",
     "@wix/origami-system-components": "1.7.0",
     "postcss": "^8.5.3",
     "postcss-custom-media": "^12.0.1"
@@ -54,5 +54,5 @@
   },
   "type": "module",
   "types": "./dist/index.d.ts",
-  "falconPackageHash": "bfbe3e19687be417c93cd5eb07f45cc936aa654b83b1cb5958af7a59"
+  "falconPackageHash": "35811fffdca1725e0dd686efa31f1755a08fb3d17f32f9d20b06a808"
 }

package/src/cssPlugins/fonts.js

@@ -1,18 +1,18 @@
-// 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.
+// Loads the fonts the stylesheet names. A family is only a name until a `@font-face` rule says where its files are.
+// For every Wix font a font token (`--wst-heading-1-font: normal normal 700 --spx(88)/1em benzin`), `font` or
+// `font-family` declaration names, the `@font-face` rules a live Wix site writes for it are appended to the
+// stylesheet. They point at Wix's CDN, so no font file is downloaded into the site or its build; the browser fetches
+// only the files of the fonts, weights and scripts a page uses. A family with no font faces, like a system font, adds
+// nothing. The rules exist only in the served CSS, never in the site's own files. Whether a token names exactly one
+// Wix font id is checked by the lint (@wix/origami-lint's theme-font-ids rule), not here.
 
-import { basename } from 'node:path'
-import { fonts } from '@wix/origami-fonts'
-import { LayoutError } from '../transform/layoutError.js'
+import { fontFaceCss, fontFaces } from '@wix/origami-fonts'
+import postcss from 'postcss'
 
-const FONT_TOKEN = /^--wst-[\w-]+-font$/
+const FONT_DECLARATION = /^(?:--wst-[\w-]+-font|font|font-family)$/
 // 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 => {
@@ -42,52 +42,24 @@ const familyOf = value => {
     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
+/** The Wix font ids a declaration names, as the font faces key them: each name of its family list, lowercase. */
+const fontIdsOf = declaration => {
+    const family = declaration.prop === 'font-family' ? declaration.value : familyOf(declaration.value)
+    if (family === undefined || /var\(/.test(family)) return []
+    return family.split(',').map(name => name.trim().replace(/^(['"])(.*)\1$/, '$2').toLowerCase())
 }
 
 /** @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.
+    // Reads the declarations 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 ids = new Set()
+        root.walkDecls(FONT_DECLARATION, declaration => {
+            for (const id of fontIdsOf(declaration)) ids.add(id)
         })
-        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))
-        }
+        const css = fontFaceCss(fontFaces, ids)
+        if (css) root.append(postcss.parse(css).nodes)
     },
 }

package/src/cssPlugins/index.js

@@ -8,7 +8,8 @@
 // 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. presets runs after mixins too, so a `--preset` a mixin body carries is moved
-// like an authored one. fonts only checks the theme's font tokens, as authored.
+// like an authored one. fonts appends the `@font-face` rules that load the Wix fonts the stylesheet names from Wix's
+// CDN.
 //
 // `@layer` needs no plugin: cascade layers have been in every browser since March 2022.