@wix/origami-site-runtime 1.0.13 → 1.0.14

package/README.md

@@ -58,7 +58,7 @@ and semantic container wrappers. Settings-only breakpoint overrides therefore af
 without repeating the size declarations. The layout compiler does not reset SPX settings;
 wrappers and nested components follow normal CSS inheritance. Scale retains the signed
 half-pixel floor; fixed values retain fractional pixels; zero is zero. See the
-[SPX plugin README](src/cssPlugins/spx/README.md) for a simple example and implementation details.
+[SPX plugin README](../origami-transforms/src/cssPlugins/spx/README.md) for a simple example and implementation details.
 
 ## Release and limitations
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/origami-site-runtime",
-  "version": "1.0.13",
+  "version": "1.0.14",
   "description": "Vite development and build helpers for wix-import static sites",
   "main": "./src/index.js",
   "files": [
@@ -14,23 +14,23 @@
     "test:browser": "node test/spx.browser.mjs && node test/semanticContainer.browser.mjs"
   },
   "dependencies": {
-    "@babel/core": "^7.26.0",
     "@babel/parser": "^7.25.0",
     "@babel/types": "^7.25.2",
     "@wix/builder-error-pages": "^1.1.6",
     "@wix/builder-piler-components": "^1.6.7",
-    "@wix/origami-fonts": "1.0.0",
-    "@wix/origami-system-components": "1.6.0",
-    "postcss": "^8.5.3",
-    "postcss-custom-media": "^12.0.1",
+    "@wix/origami-transforms": "0.1.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@wix/origami-types": "1.1.0",
+    "@babel/core": "^7.26.0",
     "@types/node": "^22.0.0",
     "@vitejs/plugin-react": "^4.3.4",
+    "@wix/origami-system-components": "1.0.0",
+    "@wix/origami-types": "1.1.0",
     "playwright": "^1.61.1",
+    "postcss": "^8.5.3",
+    "postcss-custom-media": "^12.0.1",
     "typescript": "^6.0.3",
     "vite": "^6.0.0"
   },
@@ -65,5 +65,5 @@
     "./default-error-404": "./src/default-error-404.jsx"
   },
   "type": "module",
-  "falconPackageHash": "598623d5aa01cc1cee0cc4ee1db03460f0154a007c7ffe9519a3efa6"
+  "falconPackageHash": "8c92f35adaf551b2211960c206b4571d4c8e90ea4d2a28fdddd390de"
 }

package/src/index.js

@@ -1,4 +1,4 @@
 export { createSiteViteConfig } from './siteViteConfig.js'
-export { cssPlugins } from './cssPlugins/index.js'
-export { jsxPlugins } from './jsxPlugins/index.js'
+export { cssPlugins } from '@wix/origami-transforms'
+export { jsxPlugins } from '@wix/origami-transforms'
 export { pagesToRoutes } from './routing/pagesToRoutes.js'

package/src/routing/siteLayout.js

@@ -2,7 +2,7 @@
 // module id this package exposes to a generated site's browser bundle.
 
 import { createRequire } from 'node:module'
-import { isAbsolute, relative, resolve, sep } from 'node:path'
+import { resolve } from 'node:path'
 
 export const runtimeDefaultError404Module = '@wix/origami-site-runtime/default-error-404'
 
@@ -21,11 +21,3 @@ export const siteLayout = root => {
             url === undefined ? resolve(rootPath, '404.html') : resolve(rootPath, `.${url}`, 'index.html'),
     })
 }
-
-// Path of `id` relative to the site root in posix form, or undefined when `id` escapes the root.
-export const relativeToSite = (root, id) => {
-    const filePath = id.split('?', 1)[0]
-    const fromRoot = relative(resolve(root), filePath)
-    if (!fromRoot || fromRoot === '..' || fromRoot.startsWith(`..${sep}`) || isAbsolute(fromRoot)) return undefined
-    return fromRoot.split(sep).join('/')
-}

package/src/siteViteConfig.js

@@ -6,7 +6,7 @@ import { defineConfig, searchForWorkspaceRoot } from 'vite'
 import { pagesToRoutes } from './routing/pagesToRoutes.js'
 import { itemFolderImports } from './vitePlugins/itemFolderImports.js'
 import { runtimeDefaultError404Path, siteLayout } from './routing/siteLayout.js'
-import { createTransformPipeline } from './transform/pipeline.js'
+import { createTransformPipeline } from '@wix/origami-transforms'
 import { reactBabelPlugin } from './vitePlugins/reactBabel.js'
 import { siteDocumentsPlugin } from './vitePlugins/siteDocumentsPlugin.js'
 
@@ -27,8 +27,8 @@ const isStylesheet = asset => (asset.names?.[0] ?? asset.originalFileNames?.[0]
 /**
  * @param {{
  *     root?: string,
- *     jsxPlugins?: readonly import('./transform/types.js').JsxTransformPlugin[],
- *     cssPlugins?: readonly import('./transform/types.js').CssTransformPlugin[],
+ *     jsxPlugins?: readonly import('@wix/origami-transforms').JsxTransformPlugin[],
+ *     cssPlugins?: readonly import('@wix/origami-transforms').CssTransformPlugin[],
  * }} [options]
  */
 export const createSiteViteConfig = ({ root, jsxPlugins, cssPlugins } = {}) => {
@@ -61,7 +61,7 @@ export const createSiteViteConfig = ({ root, jsxPlugins, cssPlugins } = {}) => {
         ],
         // Stating the PostCSS plugins here also opts out of Vite's search for a project postcss
         // config, which a generated site does not have. The CSS stage has to run as a PostCSS
-        // plugin rather than a Vite one — see transform/css/postcssPlugin.js.
+        // plugin rather than a Vite one — see origami-transforms/src/transform/css/postcssPlugin.js.
         css: { postcss: { plugins: [pipeline.postcssPlugin] } },
         server: {
             port: DEFAULT_DEVELOPMENT_PORT,

package/src/cssPlugins/customMedia.js

@@ -1,52 +0,0 @@
-// `@custom-media --name (query);` with `@media (--name) {}` (Media Queries Level 5). No browser ships it, so the
-// alias is always expanded. The expansion is postcss-custom-media's, which matches the DM output exactly; this
-// descriptor only runs that plugin over the stage's shared Root, so the stage keeps its gating (site-owned files)
-// and its ordering.
-//
-// A definition is only visible within the document that declares it. DM emits the definitions in the theme
-// carrier, the generator `@import`s that into every page stylesheet, and Vite's postcss-import inlines it before
-// this stage runs — so definition and usage share one Root.
-
-import postcss from 'postcss'
-import postcssCustomMedia from 'postcss-custom-media'
-
-const processor = postcss([postcssCustomMedia()])
-
-const CUSTOM_MEDIA_QUERY = /\(\s*--/
-
-// Whether the document uses the feature at all: a definition to remove, or an alias to expand. Every carrier but
-// the theme has neither, and this walk visits only at-rules, where the expansion walks and re-marks every node.
-const usesCustomMedia = root => {
-    let used = false
-    root.walkAtRules(atRule => {
-        if (atRule.name === 'custom-media' || (atRule.name === 'media' && CUSTOM_MEDIA_QUERY.test(atRule.params))) {
-            used = true
-            return false
-        }
-    })
-    return used
-}
-
-/** @type {import('../transform/types.js').CssTransformPlugin} */
-export const customMediaPlugin = {
-    name: 'custom-media',
-    order: 0,
-    transform(root, context) {
-        if (!usesCustomMedia(root)) return
-        // A Root handed to `process` is transformed in place. The plugin has no async hooks, so `sync` is safe.
-        // Its warnings go to the nested Result and are dropped: the only one it raises is a cyclic definition,
-        // which leaves the alias unexpanded and so fails below anyway. A definition it cannot parse at all is a
-        // different matter — it emits the unparsed bytes as the query and warns about nothing, which no check
-        // here can see. DM does not emit one.
-        processor.process(root, { from: context.filePath }).sync()
-        // An unexpanded alias is left as authored, and a browser evaluates it to "unknown", which silently
-        // disables the whole block.
-        root.walkAtRules('media', atRule => {
-            if (CUSTOM_MEDIA_QUERY.test(atRule.params)) {
-                throw new Error(
-                    `@media ${atRule.params} has no usable @custom-media definition: it is missing or cyclic`
-                )
-            }
-        })
-    },
-}

package/src/cssPlugins/fonts.js

@@ -1,93 +0,0 @@
-// 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
-// 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.
-
-import { basename } from 'node:path'
-import { fonts } from '@wix/origami-fonts'
-import { LayoutError } from '../transform/layoutError.js'
-
-const FONT_TOKEN = /^--wst-[\w-]+-font$/
-// 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 => {
-    const result = []
-    let depth = 0
-    let current = ''
-    for (const char of value.trim()) {
-        if (char === '(') depth++
-        else if (char === ')') depth--
-        if (depth === 0 && /\s/.test(char)) {
-            if (current) result.push(current)
-            current = ''
-        } else current += char
-    }
-    if (current) result.push(current)
-    return result
-}
-
-/** A font shorthand's family as written; undefined for `var(…)`. */
-const familyOf = value => {
-    if (/var\(/.test(value)) return undefined
-    const parts = tokens(value)
-    // The last size: the repo's TS lib (ES2022) has no findLastIndex.
-    let size = parts.length - 1
-    while (size >= 0 && !SIZE.test(parts[size])) size--
-    if (size === -1 || size === parts.length - 1) return undefined
-    return parts.slice(size + 1).join(' ')
-}
-
-/** ` (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',
-    // Only checks; it reads the tokens as authored, before spx rewrites the sizes the family follows.
-    order: 5,
-    transform(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))
-        }
-    },
-}

package/src/cssPlugins/index.js

@@ -1,32 +0,0 @@
-// The CSS stage's plugins, in the order they run. DM authors its CSS in features no browser implements yet, or only
-// Chromium does; these compile them away so a generated site renders everywhere. A caller can still pass its own
-// list through `createSiteViteConfig({ cssPlugins })`.
-//
-// A descriptor needs a `name`, an `order`, and `transform(root, context)`, where `root` is the PostCSS Root for the
-// stylesheet; see `../transform/types.js` for the contract and `../transform/css/postcssPlugin.js` for what the
-// 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. 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'
-
-/** @type {readonly import('../transform/types.js').CssTransformPlugin[]} */
-export const cssPlugins = Object.freeze([
-    customMediaPlugin,
-    fontsPlugin,
-    mixinsPlugin,
-    stackChildrenPlugin,
-    presetsPlugin,
-    layoutPlugin,
-    spxPlugin,
-])

package/src/cssPlugins/layout/README.md

@@ -1,77 +0,0 @@
-# Layout puts container styles on the right elements
-
-A container has an outer component, an overflow wrapper and a content wrapper.
-The outer component controls its place on the page. The overflow wrapper controls
-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-layout-type: FlexContainerLayout;
-
-    @origami-target internal-container-content-wrapper {
-        display: flex;
-        flex-direction: column;
-        row-gap: --spx(16);
-        --content-max-width: 1200px;
-        --content-max-width-align: center;
-    }
-
-    @origami-target internal-container-overflow-wrapper {
-        overflow-y: auto;
-    }
-}
-```
-
-The plugin replaces these target blocks with ordinary CSS rules that select the
-matching wrappers. Grid, flex, gaps, padding and content width go on the content
-wrapper; overflow goes on the overflow wrapper. Other component styles stay on
-the outer element.
-
-## What the plugin adds
-
-The outer element and overflow wrapper get a one-cell grid so the wrappers fill
-the container. The content wrapper gets sizing and positioning styles, including
-a maximum width and left, center or right alignment. It lets pointer events pass
-through empty space while its children remain clickable.
-
-Each container starts with no content width limit and centered alignment. These
-defaults live in a separate CSS layer so authored settings can override them.
-Media queries, scopes and other surrounding conditions still apply to generated
-rules. Vertical overflow also sets `--sticky-offset` to `0px` for `scroll` and
-resets it for other values.
-
-## Why validation runs before transformations
-
-During development and builds, Vite first inlines CSS imports. Our CSS pipeline
-then runs every plugin's optional `validate()` before running any plugin's
-`transform()`. Currently, layout is the only plugin with this validation hook.
-If validation fails, processing stops before transformations begin.
-
-Layout needs this early check because targets are not allowed inside mixins.
-The mixin plugin runs before layout compilation: it removes mixin definitions
-and copies their contents into the rules that use them. After that, an invalid
-target could look like a normal component rule, or disappear with an unused
-mixin. Early validation checks the original placement before that evidence is lost.
-
-Previously, plugins only had a transformation step and checked input as they
-processed it. The target placement rules introduced the need for a separate
-validation phase. Layout calls `parseTargets()` again during transformation to
-check and collect the target nodes from the updated stylesheet.
-
-## Files and boundaries
-
-- `index.js` registers validation and transformation.
-- `contract.js` lists the supported targets, their properties and layout displays.
-- `parser.js` checks target placement, properties and values, and rejects duplicates.
-- `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.
-
-This plugin generates CSS; the runtime supplies the wrapper elements. SPX values
-are converted afterward by the SPX plugin.
-
-`test/semanticContainer.browser.mjs` checks container behavior in the browser.
-Run it together with the SPX checks using the package's `test:browser` script.

package/src/cssPlugins/layout/compiler.js

@@ -1,116 +0,0 @@
-import postcss from 'postcss'
-import { buildContainerClasses } from '@wix/origami-system-components/layout-contract'
-import { CONTENT } from './contract.js'
-import { isLayoutSource, parseTargets } from './parser.js'
-
-const grid = { display: 'grid', 'grid-template-rows': '1fr', 'grid-template-columns': 'minmax(0, 1fr)' }
-
-/** Preserve source locations on every emitted declaration and selector. */
-const ruleFor = (owner, selector, declarations) => {
-    const rule = postcss.rule({ selector, source: owner.source })
-    for (const [prop, value] of Object.entries(declarations)) {
-        const declaration = postcss.decl({ prop, value: String(value) })
-        declaration.source = owner.source
-        rule.append(declaration)
-    }
-    return rule
-}
-
-/** @param {import('postcss').Root} root
- * @param {import('../../transform/types.js').TransformContext} context */
-export const compileContainers = (root, context) => {
-    const owners = parseTargets(root, context)
-    if (!owners.size) return
-    // Thunderbolt writes max-width and margin-left directly; neither property inherits.
-    // We use custom properties so width and alignment can change independently at breakpoints.
-    // Those do inherit, so each container needs defaults to avoid taking its parent's settings.
-    // This first layer keeps defaults weaker than authored rules, including rules in later layers.
-    // Clone only conditional/scope envelopes into it so the defaults apply under the same conditions.
-    const defaultsLayer = postcss.atRule({ name: 'layer', params: 'origami-container-defaults' })
-    if (root.source) defaultsLayer.source = root.source
-    root.prepend(defaultsLayer)
-    // Source identity prevents a matching selector in another carrier from becoming an owner.
-    const identities = new Set([...owners.keys()].map(rule => `${rule.source?.input.file}\0${rule.selector}`))
-    const rules = []
-    root.walkRules(rule => {
-        if (isLayoutSource(rule, context) && identities.has(`${rule.source?.input.file}\0${rule.selector}`))
-            rules.push(rule)
-    })
-    // Mechanics are emitted before the first rule in each envelope; authored declarations win.
-    const contexts = new WeakMap()
-    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.
-        let selector = owner.selector
-        for (let ancestor = owner.parent; ancestor && ancestor.type !== 'root'; ancestor = ancestor.parent) {
-            if (ancestor.type === 'atrule' && ancestor.name === 'scope') {
-                if (ancestor.params.trim() === `(${selector})`) selector = `:where(:scope)${selector}`
-                break
-            }
-        }
-        const overflow = `${selector} > .${overflowClass}`
-        const content = `${overflow} > .${contentClass}`
-        const emitted = contexts.get(owner.parent) ?? new Set()
-        if (!emitted.has(owner.selector)) {
-            let defaultsParent = defaultsLayer
-            const envelopes = []
-            for (let ancestor = owner.parent; ancestor && ancestor.type !== 'root'; ancestor = ancestor.parent) {
-                if (ancestor.type === 'atrule' && ancestor.name !== 'layer') envelopes.unshift(ancestor)
-            }
-            for (const envelope of envelopes) {
-                const clone = envelope.clone({ nodes: [] })
-                defaultsParent.append(clone)
-                defaultsParent = clone
-            }
-            defaultsParent.append(
-                ruleFor(owner, `:where(${content})`, {
-                    '--content-max-width': 'none',
-                    '--origami-content-align': '0.5',
-                })
-            )
-            owner.before(ruleFor(owner, selector, grid))
-            owner.before(ruleFor(owner, overflow, { ...grid, position: 'relative', 'align-self': 'stretch' }))
-            owner.before(
-                ruleFor(owner, content, {
-                    'box-sizing': 'border-box',
-                    position: 'relative',
-                    'pointer-events': 'none',
-                    'max-width': 'var(--content-max-width)',
-                    '--section-max-width': 'var(--content-max-width)',
-                    'margin-left':
-                        'clamp(0px, (100% - var(--content-max-width, 100%)) * var(--origami-content-align), 100 * var(--one-unit, 1%))',
-                })
-            )
-            owner.before(ruleFor(owner, `${content} > *`, { 'pointer-events': 'auto' }))
-            emitted.add(owner.selector)
-            contexts.set(owner.parent, emitted)
-        }
-        owner.selector = selector
-        let previous = owner
-        for (const target of owners.get(owner) ?? []) {
-            const generated = ruleFor(owner, target.params.trim() === CONTENT ? content : overflow, {})
-            for (const node of target.nodes ?? []) {
-                const clone = node.clone()
-                if (clone.type === 'decl') {
-                    if (clone.prop === '--content-max-width-align') {
-                        clone.prop = '--origami-content-align'
-                        // Left margin uses none, half or all of the extra space to align the content.
-                        clone.value = { left: '0', center: '0.5', right: '1' }[clone.value]
-                    }
-                    if (clone.prop === 'overflow-y')
-                        generated.append(
-                            clone.clone({
-                                prop: '--sticky-offset',
-                                value: clone.value === 'scroll' ? '0px' : 'initial',
-                            })
-                        )
-                }
-                generated.append(clone)
-            }
-            previous.after(generated)
-            previous = generated
-            target.remove()
-        }
-    }
-}

package/src/cssPlugins/layout/contract.js

@@ -1,35 +0,0 @@
-// DM JSX era 0.42, document-management ef124715766d47d0b420bb3ec5a6c54a674a7b9b.
-// Consumer routing only: component eligibility is validated by DM against JSX.
-export const CONTENT = 'internal-container-content-wrapper'
-export const OVERFLOW = 'internal-container-overflow-wrapper'
-export const targets = Object.freeze({
-    [CONTENT]: new Set([
-        'position',
-        'display',
-        'grid-template-columns',
-        'grid-template-rows',
-        'grid-auto-flow',
-        'grid-auto-rows',
-        'grid-auto-columns',
-        'row-gap',
-        'column-gap',
-        'flex-direction',
-        'flex-wrap',
-        'justify-content',
-        'align-items',
-        'align-content',
-        'padding-top',
-        'padding-bottom',
-        'padding-left',
-        'padding-right',
-        '--content-max-width',
-        '--content-max-width-align',
-    ]),
-    [OVERFLOW]: new Set(['overflow-x', 'overflow-y']),
-})
-export const displays = Object.freeze({
-    GridContainerLayout: 'grid',
-    FlexContainerLayout: 'flex',
-    StackContainerLayout: 'flex',
-    OrganizerContainerLayout: 'flex',
-})

package/src/cssPlugins/layout/index.js

@@ -1,12 +0,0 @@
-import { compileContainers } from './compiler.js'
-import { parseTargets } from './parser.js'
-
-/** @type {import('../../transform/types.js').CssTransformPlugin} */
-export const layoutPlugin = {
-    name: 'layout',
-    order: 15,
-    validate: (root, context) => {
-        parseTargets(root, context)
-    },
-    transform: compileContainers,
-}

package/src/cssPlugins/layout/parser.js

@@ -1,81 +0,0 @@
-import { basename } from 'node:path'
-import { isValidContainerId } from '@wix/origami-system-components/layout-contract'
-import { relativeToSite } from '../../routing/siteLayout.js'
-import { CONTENT, OVERFLOW, targets, displays } from './contract.js'
-
-/** @param {import('postcss').Node} node
- * @param {import('../../transform/types.js').TransformContext} context */
-export const isLayoutSource = (node, context) => {
-    const file = node.source?.input.file
-    if (!file || basename(file) !== 'layout.css') return false
-    const relative = context.layout ? relativeToSite(context.layout.root, file) : file
-    return relative !== undefined && !relative.split(/[\\/]/).includes('node_modules')
-}
-
-/** Validate before mixins can erase the original placement/source of a target.
- * @param {import('postcss').Root} root
- * @param {import('../../transform/types.js').TransformContext} context */
-export const parseTargets = (root, context) => {
-    /** @type {Map<import('postcss').Rule, import('postcss').AtRule[]>} */
-    const owners = new Map()
-    root.walkAtRules('origami-target', target => {
-        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))) {
-            throw target.error('@origami-target requires a single component ID rule')
-        }
-        for (let ancestor = owner.parent; ancestor && ancestor.type !== 'root'; ancestor = ancestor.parent) {
-            if (
-                ancestor.type !== 'atrule' ||
-                !['scope', 'media', 'layer', 'supports', 'container'].includes(ancestor.name)
-            ) {
-                throw target.error('@origami-target is only allowed inside layout rule envelopes')
-            }
-        }
-        if (!isLayoutSource(target, context))
-            throw target.error('@origami-target must originate in site-owned layout.css')
-        const siblings = owners.get(owner) ?? []
-        if (siblings.some(sibling => sibling.params.trim() === name)) throw target.error(`Duplicate target ${name}`)
-        const seen = new Set()
-        for (const node of target.nodes ?? []) {
-            if (node.type === 'comment') continue
-            if (node.type !== 'decl') throw node.error('Target bodies must contain declarations only')
-            if (seen.has(node.prop)) throw node.error(`Duplicate target property ${node.prop}`)
-            seen.add(node.prop)
-            if (!targets[name].has(node.prop)) throw node.error(`${node.prop} does not belong to ${name}`)
-            if (node.prop === 'position' && node.value !== 'relative')
-                throw node.error('Content position must be relative')
-            if (name === OVERFLOW && !['auto', 'scroll', 'hidden', 'visible', 'clip'].includes(node.value)) {
-                throw node.error(`Unsupported overflow value ${node.value}`)
-            }
-            if (node.prop === '--content-max-width-align' && !['left', 'center', 'right'].includes(node.value)) {
-                throw node.error(`Unsupported content alignment ${node.value}`)
-            }
-            if (node.prop === 'display') {
-                const type = owner.nodes.find(item => item.type === 'decl' && item.prop === '--container-layout-type')
-                if (
-                    !['grid', 'flex'].includes(node.value) ||
-                    (type?.type === 'decl' &&
-                        (!Object.hasOwn(displays, type.value) || displays[type.value] !== node.value))
-                ) {
-                    throw node.error('Container type and content display are inconsistent')
-                }
-            }
-        }
-        siblings.push(target)
-        owners.set(owner, siblings)
-    })
-    for (const owner of owners.keys()) {
-        const seen = new Set()
-        for (const node of owner.nodes) {
-            if (node.type !== 'decl') continue
-            if (seen.has(node.prop)) throw node.error(`Duplicate root property ${node.prop}`)
-            seen.add(node.prop)
-            if ((targets[CONTENT].has(node.prop) && node.prop !== 'position') || targets[OVERFLOW].has(node.prop)) {
-                throw node.error(`${node.prop} belongs inside @origami-target`)
-            }
-        }
-    }
-    return owners
-}