@wix/origami-lint 1.34.29 → 1.34.31

package/dist/rules/index.js

@@ -7,6 +7,7 @@ import cssLayoutProperties from "./site-app/css-layout-properties.js";
 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 noAbsoluteSection from "./site-app/no-absolute-section.js";
 import pageStructure from "./site-app/page-structure.js";
 import slotAttributes from "./site-app/slot-attributes.js";
@@ -16,5 +17,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];
+export const ruleRegistry = [allowedImports, noFreeCode, pageStructure, noAbsoluteSection, themeFontIds, themeFontKnown, slotAttributes, themeRoot, breakpoints, cssFileNesting, globalStyles, applyAndPresets, bindings, dataValues, cssLayoutProperties, cssSelectors, slotPlacement, knownTags];
 export { defineRule } from "./site-app/define-rule.js";

package/dist/rules/project/index.js

@@ -1,4 +1,5 @@
 import homePageFolder from "./home-page-folder.js";
+import themeConnectionNotes from "./theme-connection-notes.js";
 export { defineProjectRule } from "./define-project-rule.js";
 // Execution registries combine already-checked rules; only this boundary erases their individual key unions.
-export const projectRuleRegistry = [homePageFolder];
+export const projectRuleRegistry = [homePageFolder, themeConnectionNotes];

package/dist/rules/project/theme-connection-notes.js

@@ -0,0 +1,221 @@
+// The theme-connection-notes subject: how an element's style.css connects to the Theme. Warnings: the import stores each value as
+// written, so it takes all of these; the editor edits a half-connected element worse, and its Theme no longer changes a copied literal.
+// - KIT-slotMix: an element takes every field from one slot of a family. A slot is the theme's --wst-* tokens of one look: a button
+//   (button-primary, -secondary, -tertiary), a box (box-primary, -secondary) or a type style (heading-1 to heading-6, paragraph-1 to -3).
+// - KIT-slotPartial: an element connected to a slot writes no raw value on that slot's fields: a type slot's font or color, any color of
+//   a button or a box.
+// - KIT-themeRepeat: a literal color or font written on three or more element rules across the site, when a --wst-* token in
+//   global/themes/theme.css holds it: connect them to the token.
+// An element's fields are its classes' own rules in its page's, popup's or global component's style.css, joined as the cascade
+// reads them (`className="base extra"` takes both): per breakpoint (`@media`) and property, the line that applies. Its inner parts
+// (`.comp-a .item`) are left out, as the editor itself writes a slot's font with a raw color on them (converter fixture
+// f16-c1dmp-real-page); so are states (`:hover`) and what an `@apply` puts in (a global style is the theme's). KIT-themeRepeat counts
+// class rules, and needs every page at once, so this is a project rule: it builds each page's model and reads the theme.
+import { buildPageModel, findPages, JSX_FILES } from "../../page-model/index.js";
+import { readThemeTokens } from "../../shared/css.js";
+import { POPUPS_FOLDER, SITE_SRC } from "../../shared/site-files-tree-mapping.js";
+import { defineProjectRule } from "./define-project-rule.js";
+/** One check per row: KIT-slotMix, KIT-slotPartial, KIT-themeRepeat. */
+const CHECKS = ['mixed_slots', 'raw_slot_field', 'repeated_theme_literal'];
+/** A var() of a slot's token: `var(--wst-heading-1-font)` → 'heading-1'. */
+const SLOT_TOKEN = /var\(\s*--wst-(button-(?:primary|secondary|tertiary)|box-(?:primary|secondary)|heading-[1-6]|paragraph-[1-3])-/g;
+/** A type slot's fields; a button's and a box's are every color they write. */
+const TYPE_FIELDS = ['font', 'color'];
+/** At least this many element rules write a literal before KIT-themeRepeat reports it. */
+const REPEATS = 3;
+/** At most this many rules are named in a KIT-themeRepeat message. */
+const NAMED_RULES = 5;
+/** A literal color in a value: `#` and 3 to 8 hex digits, or `rgb(…)` / `rgba(…)`. */
+const LITERAL_COLOR = /#[0-9a-f]{3,8}\b|rgba?\([^)]*\)/gi;
+const HEX_COLOR = /^#([0-9a-f]{3,8})$/i;
+const RGB_COLOR = /^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*(?:,\s*([\d.]+%?)\s*)?\)$/i;
+const THEME_TOKEN = /^--wst-/;
+const FONT_TOKEN = /^--wst-[\w-]+-font$/;
+export default defineProjectRule({
+    name: 'theme-connection-notes',
+    checks: CHECKS,
+    editors: ['studio2'],
+    severity: 'warn',
+    check: (project) => {
+        const pages = getPageModels(project);
+        const holders = getThemeHolders(pages[0]);
+        return [
+            ...pages.flatMap(getElementsFields).flatMap(checkElementSlots),
+            ...[...getLiteralUses(pages.flatMap(getClassRulesFields))].flatMap(([key, uses]) => checkLiteralConnected(key, uses, holders)),
+        ];
+    },
+});
+// ── the steps ──
+/** Per family of slots the element uses: one slot (KIT-slotMix), then that slot's fields connected (KIT-slotPartial). */
+function checkElementSlots(element) {
+    return [...getSlotsByFamily(element)].flatMap(([family, slots]) => {
+        const mix = checkElementOneSlot(element, slots);
+        return mix.length ? mix : checkSlotFieldsConnected(element, family, slots[0].slot);
+    });
+}
+/** Reports an element that takes fields from two slots of one family, on the line the second is first used (KIT-slotMix). */
+function checkElementOneSlot({ file, name }, slots) {
+    if (slots.length === 1)
+        return [];
+    const names = slots.map(({ slot }) => `--wst-${slot}-*`).join(' with ');
+    return [{ check: 'mixed_slots', file, line: slots[1].line, message: `${name} mixes ${names}. Connect every field to one slot (rule KIT-slotMix).` }];
+}
+/** Reports each raw value on the slot's fields: a type slot's font or color, any color of a button or a box (KIT-slotPartial). A transparent
+ * color is no raw look. */
+function checkSlotFieldsConnected({ file, name, fields }, family, slot) {
+    return fields.flatMap(({ property, value, line }) => {
+        if (value.includes('var(') || !(family === 'type' ? TYPE_FIELDS.includes(property) && !isTransparent(value) : readLiteralColors(value).length > 0))
+            return [];
+        const token = family === 'type' ? `var(--wst-${slot}-${property})` : `a --wst-${slot}-* token with var()`;
+        return [{ check: 'raw_slot_field', file, line, message: `${name} is connected to --wst-${slot}-* but its ${property} is a raw value (${value}). Connect it to ${token}, or keep it as a deliberate one-off (rule KIT-slotPartial).` }];
+    });
+}
+/** Reports a literal written on three or more element rules that a theme token holds, on the first rule's line (KIT-themeRepeat). */
+function checkLiteralConnected(key, uses, holders) {
+    const tokens = holders.get(key);
+    if (uses.length < REPEATS || tokens === undefined)
+        return [];
+    const [kind, value] = [key.slice(0, key.indexOf(':')), key.slice(key.indexOf(':') + 1)];
+    const named = uses.slice(0, NAMED_RULES).map(({ file, name, line }) => `${name} in ${file.slice(SITE_SRC.length + 1)}:${line}`);
+    const rules = `${named.join(', ')}${uses.length > NAMED_RULES ? ', …' : ''}`;
+    const message = `${kind} ${value} is written on ${uses.length} rules (${rules}); ${tokens.join(' / ')} in theme.css holds it. Connect them with var(${tokens[0]}) (rule KIT-themeRepeat).`;
+    return [{ check: 'repeated_theme_literal', file: uses[0].file, line: uses[0].line, message }];
+}
+// ── reading the site ──
+/** The fields of each element of a page: its classes' CSS joined (`component.css`, as the cascade reads them, in file order). Elements with
+ * the same set of classes, in any order, are one, named by the set sorted: `.base.extra`. */
+function getElementsFields(page) {
+    const byName = new Map();
+    for (const component of Object.values(page.components)) {
+        const classNames = [...new Set(component.classNames.filter((className) => page.css.byClassName[className]))].sort();
+        if (classNames.length)
+            byName.set(`.${classNames.join('.')}`, component.css);
+    }
+    return [...byName].flatMap(([name, css]) => getFieldsByMedia(`${page.path}/style.css`, name, css));
+}
+/** Each class rule's fields: what KIT-themeRepeat counts, a rule written once whatever elements take it. */
+function getClassRulesFields(page) {
+    return Object.entries(page.css.byClassName).flatMap(([className, css]) => getFieldsByMedia(`${page.path}/style.css`, `.${className}`, css));
+}
+/** One entry per breakpoint (`@media`): the own style.css lines (`&`: no part, no state), per property the last one, which applies. */
+function getFieldsByMedia(file, name, css) {
+    const byMedia = new Map();
+    for (const [property, lines] of Object.entries(css.style)) {
+        for (const line of lines.filter(({ selector }) => selector === '&')) {
+            if (!byMedia.has(line.media))
+                byMedia.set(line.media, new Map());
+            byMedia.get(line.media).set(property, { property, ...line });
+        }
+    }
+    return [...byMedia.values()].map((fields) => ({ file, name, fields: [...fields.values()].sort((a, b) => a.line - b.line || a.column - b.column) }));
+}
+/** The model of each page, popup and global component, sorted by path; a page whose files can't be parsed is left out (the page rules report it,
+ * and a note never fails the run). */
+function getPageModels({ files, readFile }) {
+    return [...findPages([...files], [...files]), ...getPopupJsxFiles(files)].sort().flatMap((jsxFile) => {
+        try {
+            return [buildPageModel({ jsxFile, text: readFile(jsxFile) ?? '' }, readFile)];
+        }
+        catch {
+            return [];
+        }
+    });
+}
+/** Each popup's structure file: one popup per folder directly under popups/, written like a page (structure.tsx wins over structure.jsx).
+ * findPages, which picks the page rules' pages, has no popups. */
+function getPopupJsxFiles(files) {
+    const existing = new Set(files);
+    const folders = new Set(files.filter((file) => file.startsWith(`${POPUPS_FOLDER}/`) && file.split('/').length === POPUPS_FOLDER.split('/').length + 2).map((file) => file.slice(0, file.lastIndexOf('/'))));
+    return [...folders].flatMap((folder) => JSX_FILES.map((name) => `${folder}/${name}`).find((file) => existing.has(file)) ?? []);
+}
+/** The slots an element's fields use, by family, each once, in the order first used. */
+function getSlotsByFamily({ fields }) {
+    const slots = new Map();
+    for (const { value, line } of fields) {
+        for (const [, slot] of value.matchAll(SLOT_TOKEN)) {
+            const family = getFamily(slot);
+            const uses = slots.get(family) ?? [];
+            if (!uses.some((use) => use.slot === slot))
+                slots.set(family, [...uses, { slot, line }]);
+        }
+    }
+    return slots;
+}
+/** 'button-primary' → 'button'; 'box-secondary' → 'box'; 'heading-1', 'paragraph-2' → 'type'. */
+function getFamily(slot) {
+    if (slot.startsWith('button-'))
+        return 'button';
+    return slot.startsWith('box-') ? 'box' : 'type';
+}
+/** Each literal color and font the class rules write, with the rules that write it, each rule once, in order. */
+function getLiteralUses(rules) {
+    const uses = new Map();
+    const add = (key, use) => {
+        const keyUses = uses.get(key) ?? [];
+        if (!keyUses.some(({ file, name }) => file === use.file && name === use.name))
+            uses.set(key, [...keyUses, use]);
+    };
+    for (const { file, name, fields } of rules) {
+        for (const { property, value, line } of fields) {
+            const literal = value.replace(/!important\s*$/i, '').trim();
+            if (literal.includes('var('))
+                continue;
+            if (property === 'font')
+                add(fontKey(literal), { file, name, line });
+            for (const color of readLiteralColors(literal))
+                add(`color:${color}`, { file, name, line });
+        }
+    }
+    return uses;
+}
+/** The theme's --wst-* tokens whose value is one literal color or a literal font, by that literal. Every page holds the same theme. */
+function getThemeHolders(page) {
+    const holders = new Map();
+    for (const { name, value } of readThemeTokens(page?.css.files.theme)) {
+        if (!THEME_TOKEN.test(name) || value.includes('var('))
+            continue;
+        const color = normalizeColor(value);
+        const key = FONT_TOKEN.test(name) ? fontKey(value) : color && `color:${color}`;
+        if (key && !holders.get(key)?.includes(name))
+            holders.set(key, [...(holders.get(key) ?? []), name]);
+    }
+    return holders;
+}
+/** A font shorthand in one spelling: spaces collapsed, lower case. */
+const fontKey = (value) => `font:${value.replace(/\s+/g, ' ').trim().toLowerCase()}`;
+/** A literal color read: its channels in one spelling ('#116DFF', '#16f', 'rgb(17, 102, 255)' → '#116dff', '#1166ff') and its alpha, 0 to 1.
+ * Null for anything else ('red', 'var(--x)', '#12345'). */
+function parseColor(color) {
+    const hex = HEX_COLOR.exec(color.trim())?.[1].toLowerCase();
+    const rgb = hex ? null : RGB_COLOR.exec(color.trim());
+    let channels;
+    let alpha = 1;
+    if (hex) {
+        const digits = hex.length <= 4 ? [...hex].map((digit) => digit + digit).join('') : hex;
+        if (digits.length !== 6 && digits.length !== 8)
+            return null;
+        channels = [0, 2, 4].map((at) => parseInt(digits.slice(at, at + 2), 16));
+        if (digits.length === 8)
+            alpha = parseInt(digits.slice(6), 16) / 255;
+    }
+    else if (rgb) {
+        channels = rgb.slice(1, 4).map(Number);
+        if (rgb[4] !== undefined)
+            alpha = rgb[4].endsWith('%') ? parseFloat(rgb[4]) / 100 : Number(rgb[4]);
+    }
+    else
+        return null;
+    return { spelled: `#${channels.map((channel) => Math.round(channel).toString(16).padStart(2, '0')).join('')}`, alpha };
+}
+/** One spelling of a literal color, so two spellings of one color compare equal; with an alpha, '#116dff/0.5'. Null for a transparent
+ * color (alpha 0: not a look) and for anything that isn't a literal color. */
+function normalizeColor(color) {
+    const parsed = parseColor(color);
+    if (parsed === null || parsed.alpha === 0)
+        return null;
+    return parsed.alpha >= 1 ? parsed.spelled : `${parsed.spelled}/${Number(parsed.alpha.toFixed(2))}`;
+}
+/** `transparent`, or a literal color with alpha 0: no look of its own, so not a raw value. */
+const isTransparent = (value) => /^transparent$/i.test(value.trim()) || parseColor(value)?.alpha === 0;
+/** The literal colors written in a value, each in one spelling (normalizeColor), in order; a transparent one is left out. */
+const readLiteralColors = (value) => [...value.matchAll(LITERAL_COLOR)].flatMap(([color]) => normalizeColor(color) ?? []);

package/dist/rules/site-app/allowed-imports.js

@@ -3,12 +3,10 @@
 // refuses a tag from them, parseJsx.ts:471, identity.ts:80; a call is free code, and fn() / ctx() refuse them as a source).
 import path from 'node:path';
 import { CSS_FILES, JSX_FILES } from "../../page-model/index.js";
-import { BUILDERS, RUNTIME_ONLY_BUILDERS, RUNTIME_PACKAGE } from "../../rules-api/index.js";
+import { BUILDERS, INTERACTIONS_PACKAGES, RUNTIME_ONLY_BUILDERS, RUNTIME_PACKAGE } from "../../rules-api/index.js";
 import { GLOBAL_COMPONENTS, GLOBAL_COMPONENTS_FOLDER, GLOBAL_FOLDER, SITE_SRC } from "../../shared/site-files-tree-mapping.js";
 import { defineRule } from "./define-rule.js";
 const CHECKS = ['disallowed_import_source', 'interaction_import', 'missing_global_import_name', 'invalid_global_import_name', 'default_builder_import', 'aliased_builder_import', 'wrong_builder_source'];
-/** The interactions packages, which the import reserves: structure.jsx imports nothing from them. Matched by source, not by name: `Interact` from @site/site-code is the site's own. */
-const INTERACTIONS_PACKAGES = ['interactReact', 'interact', 'motionPresets'];
 const SOURCE_HINT = `Only packages, files in ${path.posix.basename(GLOBAL_FOLDER)}/, and ${CSS_FILES.map((file) => `'./${file}'`).join(' or ')} can be.`;
 export default defineRule({
     name: 'allowed-imports',

package/dist/rules/site-app/known-tags.js

@@ -0,0 +1,100 @@
+// How a structure file writes its tags, as the converter reads them (tagOf and validTagOrIssue, parseJsx.ts, converter 0.88):
+// - a tag is <Name> or <NS.Name>: no <svg:rect>, no <UI.Forms.Input> (tracker CONV-parseJsx.ts:401);
+// - a lowercase tag is an HTML element, which the import refuses: <div> (CONV-parseJsx.ts:379). page-structure already reports
+//   one at the top of the file or directly in a section, so this rule doesn't. <NS.Name> needs `import * as NS` (379);
+// - no component comes from a source that holds none: the runtime (except <Remove>), a menu, `document/…`, @wix/sdk (CONV-parseJsx.ts:351).
+//   The DM's own `document` holds the classic components (<ClassicSection>). allowed-imports reports @wix/interact and
+//   @wix/motion-presets on the import line;
+// - a tag's name is capitalized (CONV-parseJsx.ts:359). It reads the local name: the export imports a context provider as
+//   `import { cartContext as CartContext }`, and only the site's providers tell it apart from `import { image as Image }`.
+// A capitalized tag with no import, <NS.Name> with no NS, and a namespace written as <NS> are TypeScript's (#409): it reports a name not in scope.
+import { INTERACTIONS_PACKAGES, SECTIONS } from "../../rules-api/index.js";
+import { defineRule } from "./define-rule.js";
+const CHECKS = ['unsupported_tag_name', 'html_tag', 'named_import_as_namespace', 'tag_from_reserved_source', 'lowercase_tag'];
+/** The converter's TAG_PATTERN (identity.ts). */
+const TAG_PATTERN = /^[A-Z][A-Za-z0-9_$]*$/;
+/** The sources the converter reserves (isReservedRegistry, identity.ts) that allowed-imports doesn't already report. */
+const RESERVED_SOURCES = ['runtime', 'menu', 'document', 'sdk'];
+/** The one tag the runtime has: the <Remove> wrapper. */
+const RUNTIME_TAG = 'Remove';
+export default defineRule({
+    name: 'known-tags',
+    checks: CHECKS,
+    editors: ['studio2'],
+    callbacks: {
+        JSXElement: (input) => {
+            if (!input.rulesApi.getComponent(input.node))
+                return;
+            if (!checkTagNameShape(input))
+                return;
+            if (!checkTagNotHtml(input))
+                return;
+            if (!checkTagNamespaceImport(input))
+                return;
+            if (!checkTagSource(input))
+                return;
+            checkTagCapitalized(input);
+        },
+    },
+});
+// ── the steps: each reports its problem; one that returns false ends the steps for the tag, as the converter stops at its first ──
+/** Reports <svg:rect> and <UI.Forms.Input> (CONV-parseJsx.ts:401). */
+function checkTagNameShape({ node, rulesApi, report }) {
+    const { name } = node.openingElement;
+    if (name.type === 'JSXIdentifier' || (name.type === 'JSXMemberExpression' && name.object.type === 'JSXIdentifier'))
+        return true;
+    report({ check: 'unsupported_tag_name', loc: name.loc, message: `<${rulesApi.getTagName(node)}> is not a supported tag name: write <Name> or <NS.Name> (one namespace import, one dot).` });
+    return false;
+}
+/** Reports a lowercase tag with no import: an HTML element (CONV-parseJsx.ts:379), unless page-structure reports it already. */
+function checkTagNotHtml({ node, rulesApi, report }) {
+    const { name } = node.openingElement;
+    if (name.type !== 'JSXIdentifier' || !/^[a-z]/.test(name.name) || rulesApi.getImport(node))
+        return true;
+    if (!isReportedByPageStructure(node, rulesApi)) {
+        report({ check: 'html_tag', loc: name.loc, message: `<${name.name}> is an HTML tag, which the import refuses: use an imported component (import { Name } from '@origami-wrappers/<app>/<name>', then <Name>).` });
+    }
+    return false;
+}
+/** Reports <NS.Name> whose NS is imported by name, not as `import * as NS` (CONV-parseJsx.ts:379). With no import at all, it's TypeScript's; from an interactions package, allowed-imports'. */
+function checkTagNamespaceImport({ node, rulesApi, report }) {
+    const { name } = node.openingElement;
+    const found = rulesApi.getImport(node);
+    if (name.type !== 'JSXMemberExpression' || name.object.type !== 'JSXIdentifier' || !found || found.imported === '*' || (found.kind && INTERACTIONS_PACKAGES.includes(found.kind)))
+        return true;
+    const namespace = name.object.name;
+    report({ check: 'named_import_as_namespace', loc: name.loc, message: `<${namespace}.${name.property.name}> reads \`${namespace}\` as a namespace, but \`${namespace}\` is imported by name: import it as \`import * as ${namespace} from '${found.source}'\`, or import ${name.property.name} by name and write <${name.property.name}>.` });
+    return false;
+}
+/** Reports a tag imported from a source that holds no components (CONV-parseJsx.ts:351). <Remove> from the runtime is a wrapper. */
+function checkTagSource({ node, rulesApi, report }) {
+    const found = rulesApi.getImport(node);
+    if (!found?.kind || !RESERVED_SOURCES.includes(found.kind) || (found.kind === 'runtime' && found.imported === RUNTIME_TAG))
+        return true;
+    const tag = rulesApi.getTagName(node);
+    const menuHint = found.kind === 'menu' ? `, and use the menu as a value (items: ${tag}.items)` : '';
+    report({ check: 'tag_from_reserved_source', loc: node.openingElement.name.loc, message: `<${tag}> is imported from '${found.source}', which holds no components (menus, runtime builders, document/…, @wix/sdk): import the component from its @origami-wrappers package${menuHint}.` });
+    return false;
+}
+/** Reports a tag whose name isn't capitalized (CONV-parseJsx.ts:359): its local name, and the name the converter reads (the imported name), both.
+ * A namespace as a tag is TypeScript's; a tag from an interactions package, allowed-imports'. */
+function checkTagCapitalized({ node, rulesApi, report }) {
+    const { name } = node.openingElement;
+    const found = rulesApi.getImport(node);
+    if (name.type !== 'JSXIdentifier' || !found || found.imported === '*' || (found.kind && INTERACTIONS_PACKAGES.includes(found.kind)))
+        return;
+    if (TAG_PATTERN.test(name.name) || TAG_PATTERN.test(found.imported))
+        return;
+    report({ check: 'lowercase_tag', loc: name.loc, message: `<${name.name}> must be capitalized: import the component under its capitalized export name (import { Name } from '${found.source}') and write <Name>; a lowercase tag is an HTML element.` });
+}
+// ── reading the code ──
+/** page-structure reports an element at the top of the file, and one directly in a section: its closest holder, wrappers skipped, is none or a section. */
+function isReportedByPageStructure(node, rulesApi) {
+    for (let holder = node.parent; holder; holder = holder.parent) {
+        if (holder.type !== 'JSXElement' || rulesApi.isWrapper(holder))
+            continue;
+        const type = rulesApi.getType(holder);
+        return type !== null && SECTIONS.includes(type) && rulesApi.getChildElements(holder).includes(node);
+    }
+    return true;
+}

package/dist/rules-api/index.js

@@ -2,5 +2,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, 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 { 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";

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

@@ -40,6 +40,7 @@ export function createRulesApi(page) {
         getBreakpointName: readBreakpointName,
         getEnclosingAtRules,
         getType: (node) => getType(node, getProgram(node)),
+        isWrapper,
         getTagName,
         getId,
         getChildren,

package/dist/shared/constants.js

@@ -8,6 +8,8 @@ export const SECTIONS = ['section', 'header', 'footer'];
 export const GLOBAL_SECTIONS = ['globalHeader', 'globalFooter', 'globalSection'];
 /** A tag that wraps one component and isn't one itself: `<Remove when={…}>`, `<Interaction interactKey="…">`, `<PinnedToScreen>` (the import drops it). */
 export const WRAPPERS = ['remove', 'interaction', 'pinnedToScreen'];
+/** The interactions packages, which the import reserves: structure.jsx imports nothing from them. Matched by source, not by name: `Interact` from @site/site-code is the site's own. */
+export const INTERACTIONS_PACKAGES = ['interactReact', 'interact', 'motionPresets'];
 /** The name a structure file exports its tree under: `export const Structure = () => (…)`. */
 export const STRUCTURE = 'Structure';
 /** The props a global component's Structure may take: its instance identity, `({ id, className })` (#300). */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/origami-lint",
-  "version": "1.34.29",
+  "version": "1.34.31",
   "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": "2c36ab85acce27a2dc10d53da990328e863a2935e38f2d82a6dd7467"
+  "falconPackageHash": "686d35f346108816f50b0d95576cb023e273a903c797136d43187f3e"
 }