@wix/origami-site-runtime 1.0.10 → 1.0.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/origami-site-runtime",
-  "version": "1.0.10",
+  "version": "1.0.11",
   "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": "e22a7402b3249122540518d623a21731e722614ef9110bb8cce0eef7"
 }

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,67 @@
+// 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.
+
+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) {
+        /** @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)) {
+                throw new Error(
+                    `${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`
+                )
+            }
+            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)
+            }
+        }
+    },
+}