@wix/origami-lint 1.34.32 → 1.34.33

package/dist/rules/index.js

@@ -8,6 +8,7 @@ import cssSelectors from "./site-app/css-selectors.js";
 import dataValues from "./site-app/data-values.js";
 import globalStyles from "./site-app/global-styles.js";
 import knownTags from "./site-app/known-tags.js";
+import layoutDesignNotes from "./site-app/layout-design-notes.js";
 import noAbsoluteSection from "./site-app/no-absolute-section.js";
 import pageStructure from "./site-app/page-structure.js";
 import slotAttributes from "./site-app/slot-attributes.js";
@@ -17,5 +18,5 @@ import themeFontKnown from "./site-app/theme-font-known.js";
 import themeRoot from "./site-app/theme-root.js";
 import noFreeCode from "./site-app/no-free-code.js";
 // Execution registries combine already-checked rules; only this boundary erases their individual key unions.
-export const ruleRegistry = [allowedImports, noFreeCode, pageStructure, noAbsoluteSection, themeFontIds, themeFontKnown, slotAttributes, themeRoot, breakpoints, cssFileNesting, globalStyles, applyAndPresets, bindings, dataValues, cssLayoutProperties, cssSelectors, slotPlacement, knownTags];
+export const ruleRegistry = [allowedImports, noFreeCode, pageStructure, noAbsoluteSection, themeFontIds, themeFontKnown, slotAttributes, themeRoot, breakpoints, cssFileNesting, globalStyles, applyAndPresets, bindings, dataValues, cssLayoutProperties, cssSelectors, slotPlacement, knownTags, layoutDesignNotes];
 export { defineRule } from "./site-app/define-rule.js";

package/dist/rules/site-app/css-layout-properties.js

@@ -1,4 +1,4 @@
-import { CONTENT_TARGET, createCssFileReporter, getName, LAYER_ATTRIBUTES, OVERFLOW_TARGET } from "../../rules-api/index.js";
+import { CONTENT_TARGET, createCssFileReporter, getLayoutLiteral, OVERFLOW_TARGET } from "../../rules-api/index.js";
 import { defineRule } from "./define-rule.js";
 const CHECKS = ['duplicate_property', 'non_layout_property', 'property_outside_target', 'property_in_wrong_target', 'non_container_target_property', 'missing_property_value', 'incompatible_container_property', 'invalid_layout_value', 'missing_container_display', 'missing_grid_column', 'invalid_spx_context', 'unsupported_flex_wrap', 'child_without_container_layout'];
 // ── the tables (propSpecs.ts) ──
@@ -248,13 +248,10 @@ function checkItemParents(input) {
     for (const child of getItems(input))
         checkContainerParent(child, parent, input);
 }
-/** The elements this one is the parent of, as the import reads structure.jsx: its child elements and the elements in its attributes, through wrappers; not its layers (they get their item layout from the layer). */
-function getItems({ node, rulesApi }) {
-    const held = rulesApi.getAttributeElements(node).filter(({ attribute }) => !LAYER_ATTRIBUTES.includes(getName(attribute))).map(({ element }) => element);
-    return [...rulesApi.getChildElements(node), ...held].flatMap((element) => rulesApi.getComponent(element) ?? []);
-}
+/** The components this element lays out (its items, as the import reads structure.jsx). */
+const getItems = ({ node, rulesApi }) => rulesApi.getItemElements(node).flatMap((element) => rulesApi.getComponent(element) ?? []);
 /** Reports each breakpoint at which the child sets item properties in layout.css while its parent has no `display: grid` or `flex` there or by default; not for a `position: fixed` child (its last position at that breakpoint). */
-function checkContainerParent(child, parent, { report }) {
+function checkContainerParent(child, parent, { report, rulesApi }) {
     const byMedia = new Map();
     for (const prop of Object.keys(ITEM_PROPS)) {
         for (const decl of (child.css.layout[prop] ?? []).filter(isOnElement))
@@ -263,7 +260,7 @@ function checkContainerParent(child, parent, { report }) {
     for (const [media, declarations] of byMedia) {
         if (declarations.filter(({ prop }) => prop === 'position').at(-1)?.decl.value.trim() === 'fixed')
             continue; // the last position wins, as the import merges the scope
-        if (isContainerAt(parent, media))
+        if (isContainerAt(parent, media, rulesApi))
             continue;
         const childName = nameOf(child);
         const parentName = nameOf(parent);
@@ -272,10 +269,9 @@ function checkContainerParent(child, parent, { report }) {
         report({ check: 'child_without_container_layout', loc: child.loc, message: `layout.css:${line}: ${childName} sets item properties (${props}), but its parent ${parentName} has no container layout${media ? ` at @media ${media}` : ''}: give ${parentName} \`display: grid\` or \`display: flex\`, or remove ${childName}'s item properties.` });
     }
 }
-/** The parent's container type at this breakpoint, as the import derives it: its last `display` there (on itself or in its content-wrapper block) when it is grid or flex, else the default's. */
-function isContainerAt(parent, media) {
-    const displays = (parent.css.layout.display ?? []).filter((decl) => decl.selector === '&' || decl.selector === `& @origami-target ${CONTENT_TARGET}`);
-    const isContainer = (at) => ['grid', 'flex'].includes(displays.filter((decl) => decl.media === at).at(-1)?.value.trim() ?? '');
+/** The parent's container type at this breakpoint, as the import derives it: its `display` there (on itself or in its target blocks) when it is grid or flex, else the default's. */
+function isContainerAt(parent, media, rulesApi) {
+    const isContainer = (at) => ['grid', 'flex'].includes(rulesApi.getLayoutCss(parent, 'display', at)?.value.trim() ?? '');
     return isContainer(media) || (media !== null && isContainer(null));
 }
 /** On the element itself, not in a target block or on an inner part; at any breakpoint. */
@@ -335,13 +331,11 @@ function mergeScopes(blocks) {
 // ── reading values (valueDeserializers.ts) ──
 /** A value reads as the import reads it: a site layout variable's token, `var(--name, <fallback>)`, by its fallback (layoutVariables.ts literalOf); `--spx(12)` as `12spx`. */
 function isReadable(spec, value) {
-    const literal = LAYOUT_VARIABLE_TOKEN.exec(value)?.[1] ?? value;
+    const literal = getLayoutLiteral(value);
     if (spec.values)
         return spec.values.includes(literal);
     return spec.reads ? spec.reads(restoreSpx(literal)) : true;
 }
-/** `var(--name, <fallback>)`: a field connected to one of the site's layout variables, written with the field's own value as the fallback. */
-const LAYOUT_VARIABLE_TOKEN = /^var\(--[A-Za-z_-][\w-]*,\s*(.+)\)$/;
 /** The import reads `--spx(12)` as `12spx` before it reads a value (spxTransformer.ts restoreSpxValue). */
 const restoreSpx = (value) => value.replace(/--spx\((-?\d+(?:\.\d+)?)\)/g, '$1spx');
 const SIZE_KEYWORDS = ['auto', 'fit-content', 'max-content', 'min-content', 'unset'];

package/dist/rules/site-app/layout-design-notes.js

@@ -0,0 +1,277 @@
+// The layout-design-notes subject (tracker tab css-subjects, rows KIT-*): layout choices the editor's later editing depends on, as the kit's
+// notes check them (origami PR #45 at 01510ad, validate.mjs: stackPolicyNotes :250-283, oneColumnGrids :197-223, boxIssues :157-169, noMobile
+// :446, :556). Warnings, never errors: the import accepts every case; the design call stays the author's. In a page's or global component's
+// layout.css, read with its structure.jsx:
+// - a Section, HeaderSection or FooterSection and its canvas (its InternalContainer) are a grid, never `display: flex` (KIT-sectionStack);
+// - a BoxContainer carries no `display: flex`, the stack goes on its InternalContainer (KIT-boxStack), which has no width or height of its
+//   own (KIT-icSize); the box of a row stack is `width: max-content`, not a % (KIT-rowStackBox);
+// - an InternalContainer that isn't a canvas and isn't inside a Menu: a one-column grid with two or more children in separate rows is a
+//   Stack (KIT-oneColumnGrid, by default only); a stack with one child is a grid (KIT-stackSingle); a stack's children each have their own
+//   order, 1 to n (KIT-stackOrder); by default, the orders follow the JSX order (KIT-stackOrderJsx);
+// - when the site or the page has a breakpoint, a component with no rule for it reuses its desktop layout (KIT-noMobile): one line per
+//   page and breakpoint, from the page's root.
+// A breakpoint is its `@media` query as written; a breakpoint without a value takes the default's, as the import merges the element's
+// scope (rulesApi.getLayoutCss). A breakpoint's note that repeats the default's (inherited, not restated) is reported once.
+import { FILE_START } from "../../page-model/index.js";
+import { getLayoutLiteral, GLOBAL_SECTIONS, isElementDeclaration, SECTIONS, WRAPPERS } from "../../rules-api/index.js";
+import { defineRule } from "./define-rule.js";
+const CHECKS = ['section_stack', 'box_stack', 'inner_container_size', 'row_stack_box_width', 'one_column_grid', 'stack_single_child', 'stack_order', 'stack_order_jsx', 'no_mobile_rule'];
+export default defineRule({
+    name: 'layout-design-notes',
+    editors: ['studio2'],
+    severity: 'warn',
+    checks: CHECKS,
+    callbacks: {
+        JSXElement: checkElementLayout,
+    },
+});
+/** The notes on one element, by what it is: a section, a BoxContainer, an InternalContainer; the page's mobile rules from its root. */
+function checkElementLayout(input) {
+    const { node, rulesApi } = input;
+    const component = rulesApi.getComponent(node);
+    if (!component)
+        return;
+    const type = rulesApi.getType(node);
+    if (type !== null && SECTIONS.includes(type))
+        checkSectionIsGrid(component, 'a section', input);
+    if (type === 'box')
+        checkBox(component, input);
+    if (type === 'innerElement')
+        checkInternalContainer(component, input);
+    if (rulesApi.getRoot() === component)
+        checkMobileRules(input);
+}
+// ── a section and its canvas (KIT-sectionStack) ──
+/** A section, or a section's canvas, with `display: flex`. */
+function checkSectionIsGrid(component, what, input) {
+    reportAtEachBreakpoint([component], (media) => {
+        const display = getLayoutLine(input.rulesApi, component, 'display', media);
+        if (!isStack(display))
+            return null;
+        return { loc: component.loc, line: display.line, text: `${nameOf(component)}, ${what}, has \`display: flex\`: ${what} is always a grid, write \`display: grid\``, row: 'KIT-sectionStack', check: 'section_stack' };
+    }, input);
+}
+// ── a BoxContainer and its InternalContainer (KIT-boxStack, KIT-icSize, KIT-rowStackBox) ──
+function checkBox(box, input) {
+    const { node, rulesApi } = input;
+    const innerElement = rulesApi.getItemElements(node).find((item) => rulesApi.getType(item) === 'innerElement'); // a child, or `children={<InternalContainer …>}`
+    const inner = innerElement ? rulesApi.getComponent(innerElement) : null;
+    checkBoxStack(box, inner, input);
+    if (!inner)
+        return;
+    checkBoxSize(box, inner, input);
+    checkRowStackBoxWidth(box, inner, input);
+}
+/** `display: flex` on the BoxContainer itself. */
+function checkBoxStack(box, inner, input) {
+    reportAtEachBreakpoint([box], (media) => {
+        const display = getLayoutLine(input.rulesApi, box, 'display', media);
+        if (!isStack(display))
+            return null;
+        return { loc: box.loc, line: display.line, text: `${nameOf(box)} (BoxContainer) has \`display: flex\`: put the stack on its InternalContainer${inner ? `, ${nameOf(inner)}` : ''}`, row: 'KIT-boxStack', check: 'box_stack' };
+    }, input);
+}
+/** A width or height of its own on the BoxContainer's InternalContainer: not `100%` or `auto`, which fill the box (the export writes `width: 100%; height: auto`). */
+function checkBoxSize(box, inner, input) {
+    for (const property of ['width', 'height']) {
+        reportAtEachBreakpoint([inner], (media) => {
+            const size = getLayoutLine(input.rulesApi, inner, property, media);
+            if (!size || FILLS_BOX.includes(size.value))
+                return null;
+            return { loc: inner.loc, line: size.line, text: `${nameOf(inner)} has \`${property}: ${size.value}\`: put the size on its BoxContainer, ${nameOf(box)}`, row: 'KIT-icSize', check: 'inner_container_size' };
+        }, input);
+    }
+}
+/** An InternalContainer size that fills its BoxContainer rather than sizing it. */
+const FILLS_BOX = ['100%', 'auto'];
+/** A % width on the BoxContainer of a row stack. */
+function checkRowStackBoxWidth(box, inner, input) {
+    reportAtEachBreakpoint([box, inner], (media) => {
+        const { rulesApi } = input;
+        const width = getLayoutLine(rulesApi, box, 'width', media);
+        const direction = getLayoutLine(rulesApi, inner, 'flex-direction', media)?.value ?? 'row'; // CSS's default
+        if (!width || !width.value.endsWith('%') || !isStack(getLayoutLine(rulesApi, inner, 'display', media)) || !/^row(-reverse)?$/.test(direction))
+            return null;
+        return { loc: box.loc, line: width.line, text: `${nameOf(box)} has \`width: ${width.value}\`, but its InternalContainer ${nameOf(inner)} is a row stack: a row stack's box follows its content, write \`width: max-content\``, row: 'KIT-rowStackBox', check: 'row_stack_box_width' };
+    }, input);
+}
+// ── an InternalContainer's children (KIT-oneColumnGrid, KIT-stackSingle, KIT-stackOrder, KIT-stackOrderJsx) ──
+function checkInternalContainer(inner, input) {
+    const holders = getHolders(input.node, input.rulesApi);
+    const holderType = holders[0] ? input.rulesApi.getType(holders[0]) : null;
+    if (holderType !== null && SECTIONS.includes(holderType))
+        return checkSectionIsGrid(inner, "a section's canvas", input);
+    if (holders.some((holder) => input.rulesApi.getType(holder) === 'menu'))
+        return;
+    const items = input.rulesApi.getItemElements(input.node).flatMap((element) => input.rulesApi.getComponent(element) ?? []);
+    checkOneColumnGrid(inner, items, input);
+    checkStackSingleChild(inner, items, input);
+    checkStackOrder(inner, items, input);
+    checkStackOrderJsx(inner, items, input);
+}
+/** By default: a one-column grid whose two or more children sit in separate rows. */
+function checkOneColumnGrid(inner, items, { rulesApi, report }) {
+    const display = getLayoutLine(rulesApi, inner, 'display', null);
+    if (display?.value !== 'grid' || items.length < 2)
+        return;
+    const columns = (getLayoutLine(rulesApi, inner, 'grid-template-columns', null)?.value ?? '').replace(/^repeat\(\s*1\s*,\s*(.*)\)$/, '$1'); // repeat(1, <tracks>) is its tracks
+    if (columns.includes('repeat(') || columns.split(/\s+(?![^(]*\))/).length > 1)
+        return;
+    if (items.some((item) => !isFirstColumn(getLayoutLine(rulesApi, item, 'grid-column', null))))
+        return; // a child past the one track adds a column
+    const rows = items.map((item) => getRowRange(getLayoutLine(rulesApi, item, 'grid-row', null))).filter((range) => range !== null);
+    const layered = rows.some((a, index) => rows.slice(index + 1).some((b) => a[0] < b[1] && b[0] < a[1]));
+    if (layered)
+        return;
+    reportNote({ loc: inner.loc, line: display.line, text: `${nameOf(inner)} is a one-column grid with ${items.length} children in separate rows: a Stack (\`display: flex; flex-direction: column\`) keeps them editable as a group`, row: 'KIT-oneColumnGrid', check: 'one_column_grid' }, null, report);
+}
+/** Whether a `grid-column` keeps the child in the first column: none, `auto`, `1`, `span 1`, `1 / 2`, `1 / -1` or `1 / span 1`. */
+const isFirstColumn = (gridColumn) => !gridColumn || /^(auto|span\s+1|1(\s*\/\s*(2|-1|span\s+1))?)$/.test(gridColumn.value);
+/** A `grid-row` as the rows it occupies, [start, end): `2 / 4` → [2, 4], `2` → [2, 3]; a line counted from the end (`1 / -1`) as every row;
+ * null for anything else (a free row). */
+function getRowRange(gridRow) {
+    const match = /^(-?\d+)(?:\s*\/\s*(-?\d+))?$/.exec(gridRow?.value ?? '');
+    if (!match)
+        return null;
+    // Without the row count, a line from the end can't be placed: taken as every row, so the grid isn't noted (read grid-template-rows to place it).
+    if (match[1].startsWith('-') || match[2]?.startsWith('-'))
+        return [-Infinity, Infinity];
+    const start = Number(match[1]);
+    const end = match[2] === undefined ? start + 1 : Number(match[2]);
+    return end > start ? [start, end] : null;
+}
+/** A stack with one child. */
+function checkStackSingleChild(inner, items, input) {
+    if (items.length !== 1)
+        return;
+    reportAtEachBreakpoint([inner], (media) => {
+        const display = getLayoutLine(input.rulesApi, inner, 'display', media);
+        if (!isStack(display))
+            return null;
+        return { loc: inner.loc, line: display.line, text: `${nameOf(inner)} is a stack with one child, ${nameOf(items[0])}: a single child sits in a grid, write \`display: grid\``, row: 'KIT-stackSingle', check: 'stack_single_child' };
+    }, input);
+}
+/** A stack's children that share an order, or whose orders (all written) aren't 1 to n. A missing order isn't noted: the import fills the JSX order. */
+function checkStackOrder(inner, items, input) {
+    if (items.length < 2)
+        return;
+    reportAtEachBreakpoint([inner, ...items], (media) => {
+        const { rulesApi } = input;
+        if (!isStack(getLayoutLine(rulesApi, inner, 'display', media)))
+            return null;
+        const orders = items.flatMap((item) => { const order = getLayoutLine(rulesApi, item, 'order', media); return order ? [{ item, order }] : []; });
+        const byValue = new Map();
+        for (const { item, order } of orders)
+            byValue.set(order.value, [...(byValue.get(order.value) ?? []), item]);
+        const shared = [...byValue].find(([, sharing]) => sharing.length > 1);
+        if (shared)
+            return { loc: inner.loc, line: orders[0].order.line, text: `stack children ${shared[1].map(nameOf).join(' and ')} share \`order: ${shared[0]}\`: give each child its own order, 1, 2, 3 …`, row: 'KIT-stackOrder', check: 'stack_order' };
+        if (orders.length !== items.length || isOneToN(orders.map(({ order }) => Number(order.value))))
+            return null;
+        return { loc: inner.loc, line: orders[0].order.line, text: `${nameOf(inner)}'s stack children use order ${orders.map(({ order }) => order.value).join(', ')}, not 1 to ${items.length}: give each child its own order, 1, 2, 3 …`, row: 'KIT-stackOrder', check: 'stack_order' };
+    }, input);
+}
+/** By default, on a stack that isn't reversed: orders (a clean 1 to n) that show the children in another order than the JSX. */
+function checkStackOrderJsx(inner, items, { rulesApi, report }) {
+    if (items.length < 2 || !isStack(getLayoutLine(rulesApi, inner, 'display', null)))
+        return;
+    if (/reverse/.test(getLayoutLine(rulesApi, inner, 'flex-direction', null)?.value ?? ''))
+        return;
+    const orders = items.map((item) => getLayoutLine(rulesApi, item, 'order', null));
+    if (!orders.every((order) => order !== undefined) || !isOneToN(orders.map((order) => Number(order.value))))
+        return;
+    const shown = items.map((item, index) => ({ item, order: Number(orders[index].value) })).sort((a, b) => a.order - b.order).map(({ item }) => item);
+    if (shown.every((item, index) => item === items[index]))
+        return;
+    reportNote({ loc: inner.loc, line: orders[0].line, text: `${nameOf(inner)} shows its children as ${shown.map(nameOf).join(', ')}, unlike the JSX order ${items.map(nameOf).join(', ')} (fine when intended)`, row: 'KIT-stackOrderJsx', check: 'stack_order_jsx' }, null, report);
+}
+/** Whether these are 1, 2 … n in some order. */
+const isOneToN = (numbers) => [...numbers].sort((a, b) => a - b).every((number, index) => number === index + 1);
+// ── the page's mobile rules (KIT-noMobile) ──
+/** At each breakpoint the site or the page has: the elements with a default layout rule but no rule for it; one line per breakpoint. Not the
+ * root, a reference to a global component (its page lays it out), a layer or a Background (it spans its owner at every breakpoint), or anything inside a Menu (the editor's own layout). */
+function checkMobileRules({ node, rulesApi, report }) {
+    const laidOut = getLaidOutComponents(node, rulesApi);
+    const siteBreakpoints = rulesApi.getCustomMedia('theme').filter(({ query }) => query);
+    /** A breakpoint by its range: `(--tablet)` (or `( --tablet )`) as the theme declares it, `(max-width: 1023px)`; any other as written. */
+    const toRange = (media) => {
+        const name = media === null ? null : rulesApi.getBreakpointName(media);
+        return siteBreakpoints.find((breakpoint) => breakpoint.name === name)?.query ?? media;
+    };
+    // The page's breakpoints: from every component, the ones not counted too (a Background's `@media` is the page's).
+    const breakpoints = new Set([...siteBreakpoints.map(({ query }) => query), ...getBreakpoints(Object.values(rulesApi.page.components)).map(toRange)]);
+    for (const breakpoint of breakpoints) {
+        const missing = laidOut.filter((component) => hasLayoutAt(component, null) && !hasLayoutAt(component, breakpoint, toRange));
+        if (!missing.length)
+            continue;
+        const names = missing.slice(0, 6).map(nameOf).join(', ') + (missing.length > 6 ? ', …' : '');
+        report({ check: 'no_mobile_rule', loc: FILE_START, message: `layout.css: ${missing.length} element${missing.length === 1 ? ' has' : 's have'} no rule for @media ${breakpoint} and reuse${missing.length === 1 ? 's' : ''} the desktop layout as is (fine when intended): ${names} (tracker KIT-noMobile).` });
+    }
+}
+/** The components the page lays out below its root: through every element and its items; not into a Menu, not a global component's reference or a Background. */
+function getLaidOutComponents(root, rulesApi) {
+    const found = [];
+    const walk = (element) => {
+        for (const item of rulesApi.getItemElements(element)) {
+            const type = rulesApi.getType(item);
+            if (type !== null && (GLOBAL_SECTIONS.includes(type) || type === 'background'))
+                continue;
+            const component = rulesApi.getComponent(item);
+            if (component)
+                found.push(component);
+            if (type !== 'menu')
+                walk(item);
+        }
+    };
+    walk(root);
+    return found;
+}
+/** Whether the element's own layout lines (not a state's or an inner part's, as getLayoutCss reads them) include one at this breakpoint (null: by default), each line's `@media` read by `read`. */
+const hasLayoutAt = (component, media, read = (written) => written) => Object.values(component.css.layout).some((lines) => lines.some((line) => read(line.media) === media && isElementDeclaration(line)));
+// ── reporting ──
+/** Runs a check by default, then at each `@media` these components' layout lines use; a breakpoint's note that repeats the default's isn't reported again. */
+function reportAtEachBreakpoint(components, check, { report }) {
+    const byDefault = check(null);
+    if (byDefault)
+        reportNote(byDefault, null, report);
+    for (const media of getBreakpoints(components)) {
+        const note = check(media);
+        if (note && note.text !== byDefault?.text)
+            reportNote(note, media, report);
+    }
+}
+/** The `@media` queries these components' own layout lines use, as written, in order of first use. */
+function getBreakpoints(components) {
+    const medias = new Set();
+    for (const component of components)
+        for (const lines of Object.values(component.css.layout))
+            for (const line of lines)
+                if (line.media !== null && isElementDeclaration(line))
+                    medias.add(line.media);
+    return [...medias];
+}
+/** A note on its component: `layout.css:<line>: <text>[ at @media …] (tracker <row>).` */
+function reportNote({ loc, line, text, row, check }, media, report) {
+    report({ check, loc, message: `layout.css:${line}: ${text}${media ? ` at @media ${media}` : ''} (tracker ${row}).` });
+}
+/** A layout line with its value as the import reads it: trimmed, a layout variable `var(--name, <fallback>)` by its fallback. */
+function getLayoutLine(rulesApi, component, property, media) {
+    const line = rulesApi.getLayoutCss(component, property, media);
+    return line && { ...line, value: getLayoutLiteral(line.value.trim()) };
+}
+/** `display: flex`, the import's stack. */
+const isStack = (display) => display?.value === 'flex';
+/** The components around this element, closest first: wrappers are transparent. */
+function getHolders(element, rulesApi) {
+    const holders = [];
+    for (let node = element.parent; node; node = node.parent) {
+        if (node.type !== 'JSXElement')
+            continue;
+        const type = rulesApi.getType(node);
+        if (type === null || !WRAPPERS.includes(type))
+            holders.push(node);
+    }
+    return holders;
+}
+/** How a message names the element: its first class as a selector, or its key when it has no class (and so no layout CSS). */
+const nameOf = (component) => (component.classNames[0] ? `.${component.classNames[0]}` : component.key);

package/dist/rules-api/index.js

@@ -3,4 +3,5 @@ export { createRulesApi, getOrCreateRulesApi } from "./rules-api.js";
 export { createCssFileReporter, describeAtRule, reportCssProblem } from "./report.js";
 export { bare, getAttribute, getExpression, getKey, getName, getObject, getProperties, getCallbackKind, getParamReadKind, getProperty, isBound, isOneEditAway, isRecord, isReservedAttribute, isStructure, isReadByImport, ownerOf, } from "../shared/utils.js";
 export { BUILDERS, CATALOG_FONTS, CALLBACK_PROP, DATA_KEY, ELEMENT_PROPS, EVENT_ATTRIBUTE, GLOBAL_SECTIONS, INSTANCE_PROPS, INTERACTIONS_PACKAGES, LAYER_ATTRIBUTES, RESERVED_ATTRIBUTES, RESERVED_ENTRY_KEYS, RUNTIME_ONLY_BUILDERS, RUNTIME_PACKAGE, SECTIONS, SHARED_COMP_ID, STRUCTURE, SYSTEM_PACKAGE, TRANSFORM_BUILDERS, TYPED_BUILDERS, WRAPPERS, } from "../shared/constants.js";
-export { BREAKPOINT_AT_RULES, CONTENT_TARGET, getCssChildren, getDashedId, getMixinId, getSegmentClass, getSelectorSegments, isCssIdentifier, isPresetProperty, isSafeCssIdentifier, ORIGAMI_TARGETS, OVERFLOW_TARGET, PREAMBLE_LAYER, readFontShorthand, readSegment } from "../shared/css.js";
+export { isElementDeclaration } from "./utils.js";
+export { BREAKPOINT_AT_RULES, CONTENT_TARGET, getCssChildren, getDashedId, getLayoutLiteral, getMixinId, getSegmentClass, getSelectorSegments, isCssIdentifier, isPresetProperty, isSafeCssIdentifier, ORIGAMI_TARGETS, OVERFLOW_TARGET, PREAMBLE_LAYER, readFontShorthand, readSegment } from "../shared/css.js";

package/dist/rules-api/rules-api.js

@@ -6,8 +6,8 @@ import { GLOBAL_COMPONENTS_FOLDER } from "../shared/site-files-tree-mapping.js";
 import { models, pageId } from "../bi/stats.js";
 import { readPage } from "../page-model/index.js";
 import { getAttributeElements as getHeldElements, getAttributeValue, getChildren, getId, getImport, getImportKind, getImportedName, getPropNames, getSlot, getTagName, getType, hasDataAttributes, isTypeScript } from "../shared/utils.js";
-import { readBreakpointName, readCustomMedia, readThemeFontTokens, readThemeTokens } from "../shared/css.js";
-import { WRAPPERS } from "../shared/constants.js";
+import { CONTENT_TARGET, readBreakpointName, readCustomMedia, readThemeFontTokens, readThemeTokens } from "../shared/css.js";
+import { LAYER_ATTRIBUTES, WRAPPERS } from "../shared/constants.js";
 import { getEnclosingAtRules, isBaseDeclaration } from "./utils.js";
 /** Theme lines come from @apply inside style.css, so style.css's own lines usually come after them. */
 const CASCADE_ORDER = ['layout', 'theme', 'style'];
@@ -26,6 +26,10 @@ export function createRulesApi(page) {
         return isWrapper(child) ? getChildElements(child) : [child];
     });
     const getAttributeElements = (node) => getHeldElements(node).flatMap((held) => (isWrapper(held.element) ? getChildElements(held.element).map((inner) => ({ ...held, element: inner })) : [held]));
+    const getLayoutCss = (component, property, media) => {
+        const lines = (component.css.layout[property] ?? []).filter((line) => line.selector === '&' || line.selector === `& @origami-target ${CONTENT_TARGET}`);
+        return lines.filter((line) => line.media === media).at(-1) ?? (media === null ? undefined : lines.filter((line) => line.media === null).at(-1));
+    };
     return {
         page,
         // A JSX element starts where its component starts.
@@ -34,6 +38,7 @@ export function createRulesApi(page) {
         getRoot: () => Object.values(page.components).find((component) => !getParent(component)) ?? null,
         getCss,
         getBaseCss: (component, property) => getCss(component, property).filter(isBaseDeclaration).at(-1),
+        getLayoutCss,
         getThemeTokens: () => readThemeTokens(page.css.files.theme),
         getThemeFontTokens: () => readThemeFontTokens(page.css.files.theme),
         getCustomMedia: (kind) => readCustomMedia(page.css.files[kind]),
@@ -46,6 +51,7 @@ export function createRulesApi(page) {
         getChildren,
         getChildElements,
         getAttributeElements,
+        getItemElements: (node) => [...getChildElements(node), ...getAttributeElements(node).filter(({ name }) => !LAYER_ATTRIBUTES.includes(name)).map(({ element }) => element)],
         getAttributeValue,
         getSlot,
         getImport: (node) => getImport(node.type === 'JSXElement' ? getTagName(node).split('.')[0] : node.name, getProgram(node)),

package/dist/rules-api/utils.js

@@ -1,5 +1,7 @@
 /** On the component itself, outside any @media and @origami-target: applies by default. */
 export const isBaseDeclaration = (decl) => !decl.media && decl.selector === '&';
+/** On the component itself (`&`) or in one of its `@origami-target` blocks, at any breakpoint: the lines the import merges into the element's layout scope; not a state's or an inner part's. */
+export const isElementDeclaration = (decl) => decl.selector === '&' || decl.selector.startsWith('& @origami-target ');
 /** The at-rules around a CSS node, outer to inner (`@media`, `@scope`, `@layer`, `@mixin`…); [] at the file's top level. */
 export function getEnclosingAtRules(node) {
     const atRules = [];

package/dist/shared/css.js

@@ -52,6 +52,11 @@ function parseCustomMedia(params) {
     const [, name = '', query = ''] = /^(\S*)\s*([\s\S]*)$/.exec(params.trim()) ?? [];
     return { name, query };
 }
+/** A layout value as the import reads it (layoutVariables.ts literalOf): `var(--name, <fallback>)`, a field connected to one of the site's layout
+ * variables, by its fallback; any other value as is. */
+export const getLayoutLiteral = (value) => LAYOUT_VARIABLE_TOKEN.exec(value)?.[1] ?? value;
+/** `var(--name, <fallback>)`: a field connected to one of the site's layout variables, written with the field's own value as the fallback. */
+const LAYOUT_VARIABLE_TOKEN = /^var\(--[A-Za-z_-][\w-]*,\s*(.+)\)$/;
 /** A `font` shorthand's weight and family; undefined for a `var(…)` or a value with no family after its size. */
 export function readFontShorthand(value) {
     if (value.includes('var('))

package/dist/shared/utils.js

@@ -9,6 +9,10 @@ const TYPE_BY_IMPORT_SOURCE = [
     [new RegExp(`^${SYSTEM_PACKAGE}/(?:layout/)?HeaderSection$`), 'header'],
     [new RegExp(`^${SYSTEM_PACKAGE}/(?:layout/)?FooterSection$`), 'footer'],
     [new RegExp(`^${SYSTEM_PACKAGE}/InternalContainer$`), 'innerElement'],
+    // The editor's containers and its background, as the export imports their wrappers.
+    [/^@origami-wrappers\/wixEditorElements\/boxcontainer$/, 'box'],
+    [/^@origami-wrappers\/wixEditorElements\/menu$/, 'menu'],
+    [/^@origami-wrappers\/wixSystemElements\/background$/, 'background'],
     // A global component's folder is `<Type>_<id>`: HeaderSection_mb7ogqqn.
     [new RegExp(`/${GLOBAL_COMPONENTS}/(?:HeaderSection|Header)_[^/]+$`), 'globalHeader'],
     [new RegExp(`/${GLOBAL_COMPONENTS}/(?:FooterSection|Footer)_[^/]+$`), 'globalFooter'],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/origami-lint",
-  "version": "1.34.32",
+  "version": "1.34.33",
   "description": "Offline lint for an exported Origami site: lints the pages that changed since the last passing run",
   "type": "module",
   "bin": {
@@ -52,5 +52,5 @@
       ]
     }
   },
-  "falconPackageHash": "85567c0c24100afc6ec763f714be471d941b2f00b00ec2182eb63324"
+  "falconPackageHash": "fa4525b9f8f5fa63ad7d72b383deab33b1a9c16033290d6381eb0ee9"
 }