@wix/origami-transforms 0.1.2 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/origami-transforms",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "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": "373242c70dd5b71460d9daba8068a88149f756889c2c74db1709e9b1"
 }

package/src/cssPlugins/fonts.js

@@ -1,14 +1,24 @@
-// 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
+// Checks the theme's font tokens (`--wst-heading-1-font: normal normal 700 --spx(88)/1em benzin`), then loads the
+// fonts the stylesheet names.
+//
+// The check: the editor reads the family at the end of each token 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.
+//
+// The loading: a family is only a name until a `@font-face` rule says where its files are. For every Wix font a
+// font token, `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.
 
 import { basename } from 'node:path'
-import { fonts } from '@wix/origami-fonts'
+import { fontFaceCss, fontFaces, fonts } from '@wix/origami-fonts'
+import postcss from 'postcss'
 import { LayoutError } from '../transform/layoutError.js'
 
 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
@@ -42,6 +52,13 @@ const familyOf = value => {
     return parts.slice(size + 1).join(' ')
 }
 
+/** 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())
+}
+
 /** ` (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
@@ -67,9 +84,9 @@ const locationOf = source => {
 /** @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) {
+    validate(root) {
         /** @type {import('postcss').Declaration[]} */
         const declarations = []
         root.walkDecls(FONT_TOKEN, declaration => {
@@ -90,4 +107,12 @@ export const fontsPlugin = {
             throw new LayoutError(violations, locationOf(first))
         }
     },
+    transform(root) {
+        const ids = new Set()
+        root.walkDecls(FONT_DECLARATION, declaration => {
+            for (const id of fontIdsOf(declaration)) ids.add(id)
+        })
+        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 checks the theme's font tokens, as authored, and 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.