@wix/origami-transforms 0.1.3 → 0.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/origami-transforms",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "Babel and PostCSS checks and transforms for Wix origami page files.",
   "main": "./src/index.js",
   "files": [
@@ -54,5 +54,5 @@
   },
   "type": "module",
   "types": "./dist/index.d.ts",
-  "falconPackageHash": "373242c70dd5b71460d9daba8068a88149f756889c2c74db1709e9b1"
+  "falconPackageHash": "ca2361f449d0870ec5720dae8f71767a7dadabb976f2ed36c1481607"
 }

package/src/cssPlugins/fonts.js

@@ -1,28 +1,18 @@
-// 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.
+// 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 { fontFaceCss, fontFaces, fonts } from '@wix/origami-fonts'
+import { fontFaceCss, fontFaces } 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
-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 => {
@@ -59,54 +49,11 @@ const fontIdsOf = declaration => {
     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
-    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',
     // Reads the declarations as authored, before spx rewrites the sizes the family follows.
     order: 5,
-    validate(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))
-        }
-    },
     transform(root) {
         const ids = new Set()
         root.walkDecls(FONT_DECLARATION, declaration => {

package/src/cssPlugins/index.js

@@ -8,8 +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 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.
+// 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.
 

package/src/cssPlugins/layout/README.md

@@ -7,7 +7,7 @@ scrolling and clipping. The content wrapper arranges the children.
 In site-owned `layout.css`, `@origami-target` says which wrapper a style belongs to:
 
 ```css
-#container {
+.container {
     --container-layout-type: FlexContainerLayout;
 
     @origami-target internal-container-content-wrapper {
@@ -68,7 +68,7 @@ check and collect the target nodes from the updated stylesheet.
 - `compiler.js` builds wrapper selectors, adds base styles and moves declarations.
 
 Targets must come from site-owned `layout.css` and belong to a single component ID
-rule. Unsupported targets or properties fail with an error rather than being ignored.
+rule, written as `.compId` or `#compId`. Unsupported targets or properties fail with an error rather than being ignored.
 
 This plugin generates CSS; the runtime supplies the wrapper elements. SPX values
 are converted afterward by the SPX plugin.

package/src/cssPlugins/layout/compiler.js

@@ -41,7 +41,7 @@ export const compileContainers = (root, context) => {
     for (const owner of rules) {
         const { contentClass, overflowClass } = buildContainerClasses(owner.selector.slice(1))
         // In @scope, an unqualified selector cannot select the scoping root. DM emits
-        // #id there too; :where(:scope) includes that root without adding specificity.
+        // the owner selector there too; :where(:scope) includes that root without adding specificity.
         let selector = owner.selector
         for (let ancestor = owner.parent; ancestor && ancestor.type !== 'root'; ancestor = ancestor.parent) {
             if (ancestor.type === 'atrule' && ancestor.name === 'scope') {

package/src/cssPlugins/layout/parser.js

@@ -22,7 +22,12 @@ export const parseTargets = (root, context) => {
         const name = target.params.trim()
         if (!Object.hasOwn(targets, name)) throw target.error(`Unknown @origami-target ${name}`)
         const owner = target.parent
-        if (owner?.type !== 'rule' || !owner.selector.startsWith('#') || !isValidContainerId(owner.selector.slice(1))) {
+        // DM writes component rules as .compId; #compId is still accepted.
+        if (
+            owner?.type !== 'rule' ||
+            !['.', '#'].includes(owner.selector[0]) ||
+            !isValidContainerId(owner.selector.slice(1))
+        ) {
             throw target.error('@origami-target requires a single component ID rule')
         }
         for (let ancestor = owner.parent; ancestor && ancestor.type !== 'root'; ancestor = ancestor.parent) {