@wix/origami-transforms 0.1.1 → 0.1.3

package/dist/transform/pipeline.d.ts

@@ -3,6 +3,22 @@ export function createTransformPipeline({ layout, jsxPlugins, cssPlugins }: {
     jsxPlugins?: readonly import("./types.js").JsxTransformPlugin[];
     cssPlugins?: readonly import("./types.js").CssTransformPlugin[];
 }): {
+    /** Whether any JSX transform selects this module (structure.jsx/.tsx by default).
+     * @param {string} id
+     * @param {{ ssr?: boolean | undefined }} [contextOptions] */
+    appliesTo: (id: string, { ssr }?: {
+        ssr?: boolean | undefined;
+    }) => boolean;
+    /** Run the shared checks with JSX and TypeScript preserved for the adapter's compiler.
+     * @param {string} code
+     * @param {string} id
+     * @param {{ ssr?: boolean | undefined }} [contextOptions] */
+    transformJsx: (code: string, id: string, { ssr }?: {
+        ssr?: boolean | undefined;
+    }) => Promise<{
+        code: any;
+        map: any;
+    }>;
     postcssPlugin: {
         postcssPlugin: string;
         Once(root: any, { result }: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/origami-transforms",
-  "version": "0.1.1",
+  "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": "f8c86a6c866adc481be5b9391cc6d6aee64062877e89a73c69a386e9"
+  "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.
 

package/src/transform/pipeline.js

@@ -1,4 +1,5 @@
 // Select and cache transform plugins by stage, file, and SSR context.
+import { transformAsync } from '@babel/core'
 import { cssPlugins as defaultCssPlugins } from '../cssPlugins/index.js'
 import { jsxPlugins as defaultJsxPlugins } from '../jsxPlugins/index.js'
 import { createContextFactory } from './context.js'
@@ -45,9 +46,41 @@ export const createTransformPipeline = ({ layout, jsxPlugins = defaultJsxPlugins
     /** @type {Map<string, Set<string>>} stylesheet whose last CSS run failed -> the files it declared */
     const cssFailures = new Map()
 
+    const babelOptionsFor = createBabelOptionsSelector({ contextFor, selectPlugins: selectFor('jsx') })
+
     return {
+        /** Whether any JSX transform selects this module (structure.jsx/.tsx by default).
+         * @param {string} id
+         * @param {{ ssr?: boolean | undefined }} [contextOptions] */
+        appliesTo: (id, { ssr = false } = {}) => selectFor('jsx')(contextFor(id, { ssr })).length > 0,
+
+        /** Run the shared checks with JSX and TypeScript preserved for the adapter's compiler.
+         * @param {string} code
+         * @param {string} id
+         * @param {{ ssr?: boolean | undefined }} [contextOptions] */
+        transformJsx: async (code, id, { ssr = false } = {}) => {
+            const filename = id.split('?', 1)[0]
+            const options = babelOptionsFor(id, { ssr })
+            const result = await transformAsync(code, {
+                ...options,
+                filename,
+                babelrc: false,
+                configFile: false,
+                sourceMaps: true,
+                parserOpts: {
+                    ...options.parserOpts,
+                    plugins: [...new Set([
+                        'jsx',
+                        ...(filename.endsWith('.tsx') ? ['typescript'] : []),
+                        ...(options.parserOpts?.plugins ?? []),
+                    ])],
+                },
+            })
+            return { code: result.code, map: result.map }
+        },
+
         postcssPlugin: createCssPostcssPlugin({ contextFor, selectPlugins: selectFor('css'), failures: cssFailures }),
-        babelOptionsFor: createBabelOptionsSelector({ contextFor, selectPlugins: selectFor('jsx') }),
+        babelOptionsFor,
 
         /** Whether a stylesheet whose last CSS run failed declared `file`, so an edit to it may fix the stylesheet. */
         failedStylesheetDependsOn: file => [...cssFailures.values()].some(files => files.has(file)),