@wix/origami-site-runtime 1.0.9 → 1.0.11

package/README.md

@@ -28,12 +28,12 @@ cannot hide an illegally placed target. Diagnostics retain the original node sou
 `@origami-target internal-container-content-wrapper` routes to
 `#id > .id-overflow-wrapper > .id-container`; `internal-container-overflow-wrapper`
 routes to `#id > .id-overflow-wrapper`. Names come from the pure
-`@wix/origami-runtime/layout-contract` entry point. Root sizing, item placement, visibility
+`@wix/origami-system-components/layout-contract` entry point. Root sizing, item placement, visibility
 and ordinary positioning remain on the ID selector. Background, border and pinned-layer
 CSS comes from `@wix/origami-system-components/InternalContainer.css`, imported by the maintained
-`@wix/origami-runtime/components/InternalContainer` component. The component preserves focus and
+`@wix/origami-system-components/InternalContainer` component. The component preserves focus and
 wrapper flags. Ref support is deferred
-(see the [runtime decision](../origami-runtime/README.md#decision-defer-ref-support-2026-09-24)).
+(see the [system-components decision](../origami-system-components/README.md#decision-defer-ref-support-2026-09-24)).
 
 Only explicit targets in site-owned layout.css carriers opt in. Sources of inlined nodes
 are checked too, including dependency CSS. Targets in style/global-style CSS, mixins,
@@ -62,10 +62,10 @@ half-pixel floor; fixed values retain fractional pixels; zero is zero. See the
 
 ## Release and limitations
 
-Generated structures import Page, Section, HeaderSection and FooterSection from
-`@wix/origami-system-components` subpaths, InternalContainer from `@wix/origami-runtime`,
+Generated structures import Page, Section, HeaderSection, FooterSection and InternalContainer from
+`@wix/origami-system-components` subpaths,
 and other editor components from fetched wrappers. The package dependency order is
-`@wix/origami-system-components` → `@wix/origami-runtime` → `@wix/origami-site-runtime`;
+`@wix/origami-system-components` → `@wix/origami-site-runtime`;
 publish the required entry points before generator/CLI releases that consume them. Existing dependency
 entries, including local/file runtime overrides, are preserved when component dependencies are added.
 Packed tests verify the compiler and pure layout contract outside the workspace with only
@@ -84,5 +84,5 @@ limitations, not claims of Thunderbolt parity; they need a separate producer/run
   responsive SPX and grid/flex, nested fractional fixed values, max widths/alignment, overflow,
   visibility, focus/pointer mechanics, HMR and production build. Install Playwright Chromium or
   set `CHROME_CHANNEL=chrome` to use installed Chrome.
-- Build, lint and test the origami runtime and site generator when changing their contract or
+- Build, lint and test system-components and the site generator when changing their contract or
   minimum versions. Static producer fixture provenance lives in test/fixtures/css/README.md.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/origami-site-runtime",
-  "version": "1.0.9",
+  "version": "1.0.11",
   "description": "Vite development and build helpers for wix-import static sites",
   "main": "./src/index.js",
   "files": [
@@ -20,7 +20,7 @@
     "@wix/builder-error-pages": "^1.1.6",
     "@wix/builder-piler-components": "^1.6.7",
     "@wix/origami-fonts": "1.0.0",
-    "@wix/origami-runtime": "0.11.0",
+    "@wix/origami-system-components": "1.5.0",
     "postcss": "^8.5.3",
     "postcss-custom-media": "^12.0.1",
     "react": "^18.3.1",
@@ -65,5 +65,5 @@
     "./default-error-404": "./src/default-error-404.jsx"
   },
   "type": "module",
-  "falconPackageHash": "641cce00719388c9e1fbc0fd6cab982b52a23c4daf02f37771b70615"
+  "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/layout/compiler.js

@@ -1,5 +1,5 @@
 import postcss from 'postcss'
-import { buildContainerClasses } from '@wix/origami-runtime/layout-contract'
+import { buildContainerClasses } from '@wix/origami-system-components/layout-contract'
 import { CONTENT } from './contract.js'
 import { isLayoutSource, parseTargets } from './parser.js'
 

package/src/cssPlugins/layout/parser.js

@@ -1,5 +1,5 @@
 import { basename } from 'node:path'
-import { isValidContainerId } from '@wix/origami-runtime/layout-contract'
+import { isValidContainerId } from '@wix/origami-system-components/layout-contract'
 import { relativeToSite } from '../../routing/siteLayout.js'
 import { CONTENT, OVERFLOW, targets, displays } from './contract.js'
 

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)
+            }
+        }
+    },
+}