@wix/origami-site-runtime 1.0.10 → 1.0.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/origami-site-runtime",
-  "version": "1.0.10",
+  "version": "1.0.12",
   "description": "Vite development and build helpers for wix-import static sites",
   "main": "./src/index.js",
   "files": [
@@ -65,5 +65,5 @@
     "./default-error-404": "./src/default-error-404.jsx"
   },
   "type": "module",
-  "falconPackageHash": "0990c03591853c63cfb1830321eeb582aefc540da51c85616b51d879"
+  "falconPackageHash": "2e7b7eab8ba52e6afa27dfa363e20a634506137bd61591f8bf6015a3"
 }

package/src/cssPlugins/index.js

@@ -7,13 +7,15 @@
 // 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. fonts only checks the theme's font tokens, 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.
 //
 // `@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 { presetsPlugin } from './presets.js'
 import { layoutPlugin } from './layout/index.js'
 import { spxPlugin } from './spx/index.js'
 import { stackChildrenPlugin } from './stackChildren.js'
@@ -24,6 +26,7 @@ export const cssPlugins = Object.freeze([
     fontsPlugin,
     mixinsPlugin,
     stackChildrenPlugin,
+    presetsPlugin,
     layoutPlugin,
     spxPlugin,
 ])

package/src/cssPlugins/presets.js

@@ -0,0 +1,73 @@
+// A preset is set on the component's own rule (`#id` or `.id`): `--preset` for the component, `--preset-{key}` for
+// its ref element `key` (as listed in the wrapper's `REF_ELEMENTS`). An element nested deeper is reached the same way,
+// from the rule of the element it sits in: `.id .{parent} { --preset-{key}: … }`. The wrapper reads
+// `--preset` off the presets-wrapper classes it renders (see the origami-component-usage skill), so each declaration
+// moves there, as `--preset` in a rule of its own: `.{id}-presets-wrapper`, or `{selector} .{key}-presets-wrapper` so
+// an inner element's preset reaches that instance only. A rule that does not start at a component is left as authored.
+//
+// A preset on a component selector that can't be mapped is reported as a warning and left as authored rather than failing the
+// build: exported sites still carry presets in the older shape, and they must keep building until they are migrated.
+
+import postcss from 'postcss'
+
+const PRESET = /^--preset(?:-([\w-]+))?$/
+const COMPONENT = /^[#.]([\w-]+)$/
+const WRAPPER = '-presets-wrapper'
+
+/** Where a preset on `selector` goes: undefined when `selector` does not start at a component, null when it can't go. */
+const target = (selector, key) => {
+    const [first] = selector.split(/\s+/, 1)
+    const id = COMPONENT.exec(first)?.[1]
+    if (id === undefined || id.endsWith(WRAPPER)) return undefined
+    if (key !== undefined) return `${selector} .${key}${WRAPPER}`
+    return selector === first ? `.${id}${WRAPPER}` : null
+}
+
+/** @type {import('../transform/types.js').CssTransformPlugin} */
+export const presetsPlugin = {
+    name: 'presets',
+    order: 13,
+    transform(root, context) {
+        /** @type {import('postcss').Declaration[]} */
+        const declarations = []
+        root.walkDecls(PRESET, declaration => {
+            if (declaration.parent?.type === 'rule') declarations.push(declaration)
+        })
+        // Last first: each moved declaration lands right after its outermost rule, so source order is kept.
+        for (const declaration of declarations.reverse()) {
+            const rule = /** @type {import('postcss').Rule} */ (declaration.parent)
+            // The outermost rule, and the full selectors resolved as CSS Nesting does.
+            let outer = rule
+            let selectors = rule.selectors
+            while (outer.parent?.type === 'rule') {
+                outer = /** @type {import('postcss').Rule} */ (outer.parent)
+                const inner = selectors
+                selectors = outer.selectors.flatMap(parent =>
+                    inner.map(selector => (selector.includes('&') ? selector.replaceAll('&', parent) : `${parent} ${selector}`))
+                )
+            }
+            const targets = selectors.map(selector => target(selector, PRESET.exec(declaration.prop)?.[1]))
+            if (targets.every(selector => selector === undefined)) continue
+            if (!targets.every(Boolean)) {
+                context.warn?.(
+                    declaration,
+                    `presets: ${context.relativePath ?? context.filePath}: ` +
+                        `${declaration.prop} on "${selectors.join(', ')}": set --preset on #id or .id alone, ` +
+                        `and an inner element's as --preset-{key} on the rule of the element it sits in. Left as authored.`
+                )
+                continue
+            }
+            declaration.prop = '--preset'
+            const presetRule = postcss.rule({ selector: targets.join(', ') })
+            if (rule.source) presetRule.source = rule.source
+            outer.after(presetRule.append(declaration))
+            // Drop the rules the move left empty, from the declaration's own up to the outermost.
+            for (let node = rule; !node.nodes.length; ) {
+                const parent = node.parent
+                node.remove()
+                if (node === outer) break
+                node = /** @type {import('postcss').Rule} */ (parent)
+            }
+        }
+    },
+}

package/src/transform/css/postcssPlugin.js

@@ -46,8 +46,11 @@ export const createCssPostcssPlugin = ({ selectPlugins, contextFor, failures })
             declared.add(file)
             result.messages.push({ type: 'dependency', plugin: 'wix-import-css-transform', file, parent: from })
         }
+        // A plugin reports a problem that need not stop the build as a PostCSS warning, which Vite prints with the
+        // node's code frame.
+        const warn = (node, text) => node.warn(result, text)
         try {
-            runCssPlugins({ plugins, root, context: { ...fileContext, addDependency } })
+            runCssPlugins({ plugins, root, context: { ...fileContext, addDependency, warn } })
             failures?.delete(from)
         } catch (error) {
             failures?.set(from, declared)

package/src/transform/types.js

@@ -36,10 +36,12 @@
  * }} CssTransformPlugin
  *
  * @typedef {TransformContext & {
- *     addDependency?: (file: string) => void
+ *     addDependency?: (file: string) => void,
+ *     warn?: (node: import('postcss').Node, text: string) => void
  * }} CssTransformContext
  * `addDependency` declares a file the plugin read besides the stylesheet, so the bundler re-runs the
- * stylesheet when it changes. Absent when no bundler drives the run.
+ * stylesheet when it changes. `warn` reports a problem at `node` without failing the run, as a PostCSS
+ * warning on the stylesheet's result. Both are absent when no bundler drives the run.
  */
 
 export {}