@wix/origami-lint 1.34.4 → 1.34.6

package/dist/rules/css-selectors.js

@@ -0,0 +1,270 @@
+import { BREAKPOINT_AT_RULES, createCssFileReporter, getSelectorSegments, isCssIdentifier, isSafeCssIdentifier, PREAMBLE_LAYER, readSegment } from "../rules-api/index.js";
+import { defineRule } from "./define-rule.js";
+/** The at-rules whose rules the import reads: breakpoint blocks, and a `@mixin`'s `@result`. */
+const READ_AT_RULES = [...BREAKPOINT_AT_RULES, 'result'];
+const SCOPE_OWNER = /^\(\.([^:[\]"\s]+)\)$/;
+/** A class made of classes only (no attribute or `:not(…)` glued to it), whose later classes are state classes. */
+const CLASSES_ONLY = /^[^:[\]"]+$/;
+export default defineRule({
+    name: 'css-selectors',
+    editors: ['studio2'],
+    callbacks: {
+        Program: checkCssFilesSelectors,
+    },
+});
+// ── the steps ──
+/** Every rule of layout.css, style.css and theme.css, with the class names of the page's elements. */
+function checkCssFilesSelectors({ rulesApi, report }) {
+    const file = {
+        elementClassNames: new Set(Object.values(rulesApi.page.components).flatMap((component) => component.classNames)),
+        inMixin: false,
+    };
+    for (const kind of ['layout', 'style', 'theme']) {
+        const root = rulesApi.page.css.files[kind];
+        if (root)
+            checkNodes(root.nodes, { ...file, name: `${kind}.css`, reportAt: createCssFileReporter(`${kind}.css`, report) });
+    }
+}
+/** The rules the import reads, file it reads them; a rule's own nested rules are dropped or refused by other rows, not read. */
+function checkNodes(nodes, file) {
+    for (const node of nodes) {
+        if (node.type === 'rule')
+            checkSelector(node, file);
+        if (node.type !== 'atrule' || node.nodes === undefined)
+            continue;
+        if (node.name === 'layer' && node.params.trim() === PREAMBLE_LAYER)
+            continue;
+        if (node.name === 'scope')
+            checkScopeOwner(node, file);
+        if (node.name === 'mixin')
+            checkNodes(node.nodes, { ...file, inMixin: true });
+        else if (READ_AT_RULES.includes(node.name))
+            checkNodes(node.nodes, file);
+    }
+}
+/** A `@scope` names its owner as `(.class)` (CONV-utils.ts:70), and the class is a plain identifier: `(.comp-a.comp-a--open)` and
+ * `(.comp-a#x)` pass the pattern, then the import refuses the owner (live: "Cannot resolve breakpoint {…ownerComponentId:
+ * "comp-a.x"}"; styleParser.ts:282 `assertSafeBreakpointId` behind it). */
+function checkScopeOwner(node, file) {
+    const params = node.params.trim();
+    const owner = SCOPE_OWNER.exec(params)?.[1];
+    if (owner !== undefined && isSafeCssIdentifier(owner))
+        return;
+    file.reportAt(node, `\`@scope ${params}\` must name its owner as \`(.<class>)\`, one element's class. Write \`@scope (.${ownClassOf(owner ?? params.replace(/^[(.#\s]+/, ''))})\` (tracker CONV-utils.ts:70).`);
+}
+/** One rule's selector, in the import's order: the flat global style, the split, the parts, the first part, then the chain. */
+function checkSelector(rule, file) {
+    const selector = rule.selector.replace(/\s+/g, ' ').trim();
+    if (selector.startsWith(':root'))
+        return;
+    if (!checkFlatGlobalStyle(selector, rule, file))
+        return;
+    const parts = splitParts(selector, rule, file);
+    if (!parts)
+        return;
+    const [first, ...rest] = parts;
+    if (first === undefined)
+        return file.reportAt(rule, 'the rule has an empty selector. Start it with the element\'s class: `.comp-a { … }` (tracker CONV-cssSelectors.ts:370).');
+    if (first.isAmpersand)
+        return checkGlobalStyleChain(first, rest, selector, rule, file);
+    if (file.inMixin)
+        return;
+    if (first.className === undefined)
+        return file.reportAt(rule, `selector \`${selector}\` doesn't start with an element. Start it with the element's class: \`.comp-a${first.text}\` (tracker CONV-cssSelectors.ts:370).`);
+    const element = splitStateClasses(first);
+    if (!checkElementClass(element.className, first.className, selector, rule, file))
+        return;
+    if (file.name === 'layout.css')
+        return checkLayoutChain(element, rest, selector, rule, file);
+    checkElementChain(element, rest, selector, rule, file);
+}
+/** Reports a style or theme rule written as `--id { … }` (CONV-astParser.ts:88). */
+function checkFlatGlobalStyle(selector, rule, file) {
+    if (file.name === 'layout.css' || file.inMixin || !selector.startsWith('--'))
+        return true;
+    file.reportAt(rule, `\`${selector} { … }\` is not a valid rule. Declare the global style as \`@mixin ${selector} { @result { … } }\` (tracker CONV-astParser.ts:88).`);
+    return false;
+}
+/** Reports an element class that isn't a plain identifier or is a reserved name (CONV-cssSelectors.ts:54), naming the class as written. */
+function checkElementClass(className, written, selector, rule, file) {
+    if (isSafeCssIdentifier(className))
+        return true;
+    const problem = isCssIdentifier(className) ? `\`${className}\` is a reserved name, not an element class. Give the element another className` : `\`${written}\` is not an element class. ${howToWrite(written, ownClassOf(className))}`;
+    file.reportAt(rule, `in \`${selector}\`, ${problem} (tracker CONV-cssSelectors.ts:54).`);
+    return false;
+}
+/** A layout.css rule: one element's class (CONV-layoutParser.ts:105), no state (:108); a part with no class is refused first (CONV-cssSelectors.ts:213). */
+function checkLayoutChain(first, rest, selector, rule, file) {
+    if (!checkPartsHaveClass(rest, selector, rule, file))
+        return;
+    const state = [first, ...rest].flatMap((part) => part.states)[0];
+    if (rest.length) {
+        const element = rest.findLast((part) => file.elementClassNames.has(baseClassOf(part))) ?? first;
+        return file.reportAt(rule, `\`${selector}\` names more than one element; a layout rule takes one element's class: write \`.${baseClassOf(element)} { … }\` (layout can't be set on an inner part or through an ancestor) (tracker CONV-layoutParser.ts:105).`);
+    }
+    if (state !== undefined)
+        return file.reportAt(rule, `\`${selector}\` sets layout by state, which isn't supported: remove \`${state}\` from the selector (state changes go in style.css) (tracker CONV-layoutParser.ts:108).`);
+    checkElementExists(first, rule, file);
+}
+/** A style or theme rule on an element (cssSelectors.ts parseComponentChain): a second element needs a state on the first (:321), carries
+ * none of its own (:216), and is followed by no third (:318); then the inner parts, with no id (:222), then the element exists
+ * (CONV-fromBundle.ts:855). */
+function checkElementChain(first, rest, selector, rule, file) {
+    let target = first;
+    let inner = rest;
+    if (rest.length && isAnotherElement(rest[0], file)) {
+        const second = splitStateClasses(rest[0]);
+        const third = rest.slice(1).find((part) => isAnotherElement(part, file));
+        if (third)
+            return file.reportAt(rule, `\`${selector}\` chains three elements. Keep one ancestor: \`.${first.className}${first.states.join('')} .${baseClassOf(third)}\` (tracker CONV-cssSelectors.ts:318).`);
+        if (!first.states.length)
+            return file.reportAt(rule, `\`${selector}\` puts one element under another without a state. Address the element by its own class (\`.${ownClassOf(second.className)}\`), or condition it on the ancestor's state (\`.${first.className}:hover .${ownClassOf(second.className)}\`) (tracker CONV-cssSelectors.ts:321).`);
+        if (second.states.length)
+            return reportTwoOwners(first, second, selector, rule, file);
+        if (!checkElementClass(second.className, rest[0].className, selector, rule, file))
+            return;
+        target = second;
+        inner = rest.slice(1);
+    }
+    if (!checkInnerParts(inner, first, selector, rule, file))
+        return;
+    if (!checkInnerPartsHaveNoId(inner, selector, rule, file))
+        return;
+    if (file.name === 'style.css')
+        checkElementExists(target, rule, file);
+}
+/** A class after an element is another element when the page has an element with it, or when it holds a `#` outside an attribute
+ * (`[data-x="#"]` is no id), which no inner part's selector has (`.comp-b#x`: the import reads it as an element and refuses it). Anything
+ * else is taken as an inner part (cssSelectors.ts namesInnerElementOf reads the contract; the lint doesn't). */
+function isAnotherElement(part, file) {
+    return part.className !== undefined && (file.elementClassNames.has(baseClassOf(part)) || hasId(part));
+}
+/** Whether a part's class holds a `#` outside an attribute (`[data-x="#"]` is no id). */
+const hasId = (part) => part.className?.replace(/\[[^\]]*\]/g, '').includes('#') ?? false;
+/** Reports the first inner part with an id (CONV-cssSelectors.ts:222): no inner part's selector has one, so the import refuses
+ * `.comp-a:hover .label .foo#x` whatever `.label` is. */
+function checkInnerPartsHaveNoId(inner, selector, rule, file) {
+    const part = inner.find(hasId);
+    if (part === undefined)
+        return true;
+    file.reportAt(rule, `in \`${selector}\`, \`.${part.className}\` is not an inner part: an inner part's selector has no \`#\` id. Use an inner part's selector from the element's contract, without the id (\`.${ownClassOf(part.className)}\`) (tracker CONV-cssSelectors.ts:222).`);
+    return false;
+}
+/** A `@mixin`'s rule, `&…` (cssSelectors.ts parseGlobalStyleChain): outside a `@mixin` it's refused (:377); a later `&` or `:root` is the
+ * global-styles rows'; then the inner parts, read as an element's (parseIeChain), with no id (:222). */
+function checkGlobalStyleChain(first, rest, selector, rule, file) {
+    if (!file.inMixin)
+        return file.reportAt(rule, `\`${selector}\` is outside a \`@mixin\`. Replace \`&\` with the element's class (\`.comp-a${selector.slice(1)}\`), or move the rule into the global style's \`@mixin\` (tracker CONV-cssSelectors.ts:377).`);
+    if (rest.some((part) => part.isAmpersand || part.text === ':root'))
+        return;
+    if (!checkInnerParts(rest, first, selector, rule, file))
+        return;
+    checkInnerPartsHaveNoId(rest, selector, rule, file);
+}
+/** The inner parts after an element or `&` (cssSelectors.ts parseManifestSelector, parseOwnerStateSelector): every part has a class and
+ * states sit on one part (:213), not on it and the element both (:216). Only `:pseudo` states are read here: file a part's own selector
+ * ends and its state classes start is the contract's, which the lint doesn't read. */
+function checkInnerParts(inner, owner, selector, rule, file) {
+    if (!checkPartsHaveClass(inner, selector, rule, file))
+        return false;
+    const stated = inner.filter((part) => part.states.length);
+    if (stated.length > 1) {
+        file.reportAt(rule, `in \`${selector}\`, states sit on \`${stated[0].text}\` and \`${stated[1].text}\`. Attach the states to the one part that owns them (tracker CONV-cssSelectors.ts:213).`);
+        return false;
+    }
+    if (stated.length && owner.states.length) {
+        reportTwoOwners(owner, stated[0], selector, rule, file);
+        return false;
+    }
+    return true;
+}
+/** Reports a part after the first with no class (CONV-cssSelectors.ts:213). */
+function checkPartsHaveClass(parts, selector, rule, file) {
+    const bare = parts.find((part) => part.className === undefined);
+    if (!bare)
+        return true;
+    file.reportAt(rule, `in \`${selector}\`, \`${bare.text}\` has no class. Attach the state to the part that owns it (\`.comp-a:hover\`, \`.comp-a .label:hover\`) and write every later part as a class (tracker CONV-cssSelectors.ts:213).`);
+    return false;
+}
+/** Reports states on two owners (CONV-cssSelectors.ts:216). */
+function reportTwoOwners(owner, other, selector, rule, file) {
+    const name = (part) => (part.isAmpersand ? '&' : `.${baseClassOf(part)}`);
+    file.reportAt(rule, `\`${selector}\` puts states on two owners (\`${name(owner)}\` and \`${name(other)}\`). Condition the rule on one owner's states only (tracker CONV-cssSelectors.ts:216).`);
+}
+/** Reports a rule for an element that structure.jsx doesn't have (CONV-fromBundle.ts:855). */
+function checkElementExists(element, rule, file) {
+    if (file.inMixin || file.elementClassNames.has(element.className))
+        return;
+    file.reportAt(rule, `\`.${element.className}\` styles no element: no element in structure.jsx has className="${element.className}". Remove the rule, or write the className of an element (tracker CONV-fromBundle.ts:855).`);
+}
+// ── reading a selector ──
+/** The selector's parts, split as the import splits them (getSelectorSegments, cssSelectors.ts splitSegments), each read as the import
+ * reads it. Null after reporting a list (:92), an unbalanced selector (:87) or a part it can't read (:169). */
+function splitParts(selector, rule, file) {
+    const segments = getSelectorSegments(selector);
+    if (!segments)
+        return reportUnsplittable(selector, rule, file);
+    const parts = [];
+    for (const segment of segments) {
+        const part = readPart(segment, selector, rule, file);
+        if (!part)
+            return null;
+        parts.push(part);
+    }
+    return parts;
+}
+/** Reports why the import can't split a selector: a list (:92), or a bracket or quote not closed (:87), whichever comes first. */
+function reportUnsplittable(selector, rule, file) {
+    const openers = [];
+    let inQuotes = false;
+    for (const char of selector) {
+        if (inQuotes)
+            inQuotes = char !== '"';
+        else if (char === '"')
+            inQuotes = true;
+        else if (char === '[' || char === '(')
+            openers.push(char);
+        else if ((char === ']' || char === ')') && !openers.pop())
+            return reportUnbalanced(`has a \`${char}\` with no \`${char === ']' ? '[' : '('}\` before it`, selector, rule, file);
+        else if (char === ',' && !openers.length) {
+            file.reportAt(rule, `\`${selector}\` is a selector list. Split it into one rule per selector (tracker CONV-cssSelectors.ts:92).`);
+            return null;
+        }
+    }
+    return reportUnbalanced(inQuotes ? 'has an unclosed `"`' : `has an unclosed \`${openers.at(-1)}\``, selector, rule, file);
+}
+function reportUnbalanced(what, selector, rule, file) {
+    file.reportAt(rule, `selector \`${selector}\` ${what}. Close the bracket or quote (tracker CONV-cssSelectors.ts:87).`);
+    return null;
+}
+/** One part as the import reads it: `:root`, or `&` or a class, then states (`:hover`, `.state-class`); an attribute or functional
+ * pseudo-class glued to the class is part of the class. Null after reporting what it can't read (CONV-cssSelectors.ts:169). */
+function readPart(text, selector, rule, file) {
+    if (text === ':root')
+        return { text, isAmpersand: false, states: [] };
+    const { base, states, unread } = readSegment(text);
+    if (unread) {
+        file.reportAt(rule, `in \`${selector}\`, the format can't read \`${unread}\`. ${howToWrite(unread, 'comp-a')} (tracker CONV-cssSelectors.ts:169).`);
+        return null;
+    }
+    return { text, isAmpersand: base === '&', className: base === '&' ? undefined : base?.slice(1), states };
+}
+/** The import reads an element's class as one class: the classes after it are its state classes (cssSelectors.ts withStateClasses). */
+function splitStateClasses(part) {
+    if (part.className === undefined || !CLASSES_ONLY.test(part.className))
+        return part;
+    const [className, ...stateClasses] = part.className.split('.');
+    return { ...part, className, states: [...stateClasses.map((name) => `.${name}`), ...part.states] };
+}
+/** The identifier a class starts with, for a message's suggestion: 'comp-b' for `comp-b#x`; 'comp-a' when it starts with none. */
+const ownClassOf = (className) => /^-?[_a-zA-Z][_a-zA-Z0-9-]*/.exec(className)?.[0] ?? 'comp-a';
+/** A part's first class, before any state class glued to it: 'comp-b' for `.comp-b.comp-b--open`. */
+const baseClassOf = (part) => part.className?.split('.')[0] ?? '';
+/** What to write instead of a form the import can't read; the forms earlier converters wrote get their own line. */
+function howToWrite(written, element) {
+    if (written.includes('[data-state~='))
+        return `Since converter 0.74 a state is written as \`:hover\` or as a state class (\`.${element}.${element}--open\`), not \`[data-state~=…]\``;
+    if (written.includes('[data-ie-name='))
+        return `Since converter 0.71 an inner part is addressed by its class from the component's contract (\`.label\`), not \`[data-ie-name]\``;
+    return `Address the element by its own class only (\`.${element}\`); write a state as \`:hover\` or as a state class (\`.${element}.${element}--open\`)`;
+}

package/dist/rules/data-values.js

@@ -2,7 +2,7 @@
 // 1227, 1231, 1235, 1255, 1268, 1289, 1697; projectData.ts 214, 225, 281, 435, 443; enrichImage.ts 94, 105.
 // Converter 0.81 (checked at 0.84, 2c0e21c): the tag's import, not a `type` attr, decides if a component takes data attributes; `type` is data.
 import { isDeepStrictEqual } from 'node:util';
-import { DATA_KEY, GLOBAL_SECTIONS, RESERVED_ATTRIBUTES, RESERVED_ENTRY_KEYS, SHARED_COMP_ID, bare, getAttribute, getExpression, getKey, getName, getProperties, getProperty, isOneEditAway, isStructure, ownerOf, } from "../rules-api/index.js";
+import { DATA_KEY, EVENT_ATTRIBUTE, RESERVED_ATTRIBUTES, RESERVED_ENTRY_KEYS, bare, getAttribute, getExpression, getKey, getName, getObject, getProperties, getCallbackKind, getProperty, isBound, isOneEditAway, isReservedAttribute, isStructure, ownerOf, } from "../rules-api/index.js";
 import { defineRule } from "./define-rule.js";
 /** The names the import never reads as data (dataKeys.ts). The React name is joined as the converter does: Wix Standards fails the build on it in any file. */
 const EXCLUDED_DATA_KEYS = [
@@ -66,9 +66,9 @@ function checkValuesAreLiterals(input, skip) {
             continue;
         }
         const value = getExpression(attribute);
-        if (!value || skip.includes(name) || (isReserved(name) && !READ_AS_DATA.includes(name)))
+        if (!value || skip.includes(name) || (isReservedAttribute(name) && !READ_AS_DATA.includes(name)))
             continue;
-        if (!isReserved(name) && (isExcluded(name) || nearMissOf(name) || value.type === 'CallExpression'))
+        if (!isReservedAttribute(name) && (isExcluded(name) || nearMissOf(name) || isBound(value) || getCallbackKind(value) === 'template'))
             continue;
         const mode = name === 'props' ? PROPS : FULL;
         const found = name === 'elementProps' ? nonLiteralInElementProps(value, mode, input.rulesApi, textOf(input)) : nonLiteralIn(value, mode, input.rulesApi, textOf(input));
@@ -107,7 +107,7 @@ function checkElementPropsEntries(input, map, path) {
     for (const property of getProperties(map)) {
         const name = getKey(property);
         const at = [...path, name].join('.');
-        if (!checkEntryName(input, property, name) || builderOf(bare(property.value), input.rulesApi))
+        if (!checkEntryName(input, property, name) || isRuntimeCall(bare(property.value), input.rulesApi))
             continue;
         // an object written out: a media call decodes to an object, but not to an inner part's settings
         const entry = getObject(property.value);
@@ -138,10 +138,10 @@ function checkEntryName(input, property, name) {
 function checkEntryKeysAreKnown(input, entry, at) {
     for (const property of getProperties(entry)) {
         const key = getKey(property);
-        if (key === null || key === '_id' || RESERVED_ENTRY_KEYS.includes(key) || bare(property.value).type === 'CallExpression')
+        if (key === null || key === '_id' || RESERVED_ENTRY_KEYS.includes(key) || isBound(bare(property.value)))
             continue;
         const typo = nearMissOf(key);
-        if (!isReserved(key) && !isExcluded(key) && !typo)
+        if (!isReservedAttribute(key) && !isExcluded(key) && !typo)
             continue;
         say(input, property.key, `${owner(input)}'s elementProps entry \`${at}\` has the key \`${key}\`, which an inner part doesn't take. Use its data keys, or \`data: {…}\`${typo ? ` (did you mean \`${typo}\`?)` : ''}.`);
     }
@@ -151,7 +151,7 @@ function checkDataCarrier(input) {
     const value = getExpression(data);
     if (!value)
         return null;
-    const merges = dataAttributes(input).length > 0 || (takesData(input) && getAttribute(input.node, '_id') !== undefined);
+    const merges = dataAttributes(input).length > 0 || (input.rulesApi.hasDataAttributes(input.node) && getAttribute(input.node, '_id') !== undefined);
     if (!merges)
         return null;
     if (!isObjectValue(value, input.rulesApi)) {
@@ -286,34 +286,23 @@ function imageCallsIn(input, dataValuesRead, read) {
         if (value.type === 'ArrayExpression')
             return value.elements.flatMap((element) => (element && element.type !== 'SpreadElement' ? calls(element) : []));
         if (value.type === 'ObjectExpression')
-            return getProperties(value).flatMap((property) => (builderOf(bare(property.value), input.rulesApi) ? [] : calls(property.value)));
+            return getProperties(value).flatMap((property) => (isRuntimeCall(bare(property.value), input.rulesApi) ? [] : calls(property.value)));
         return [];
     };
     return values.flatMap(calls);
 }
 // ── reading the code ──
 const getAttributes = (element) => element.openingElement.attributes.filter((attribute) => attribute.type === 'JSXAttribute');
-const getObject = (node) => (node && bare(node).type === 'ObjectExpression' ? bare(node) : null);
-/** The tags the import reads as the DM's own components ('document') or a global component's reference (identity.ts identityOfTag): no data attributes. */
-const NO_DATA_TYPES = ['page', 'section', 'header', 'footer', 'headerLandmark', 'footerLandmark', ...GLOBAL_SECTIONS];
-/** Converter 0.81: a builder component (its import gives a componentType) takes data attributes; the `type` attr is gone. */
-function takesData({ node, rulesApi }) {
-    const found = rulesApi.getImport(node);
-    const type = rulesApi.getType(node);
-    return found !== null && found.kind !== 'core' && !found.source.startsWith('.') && !(type && NO_DATA_TYPES.includes(type));
-}
 /** The name the import gives the tag's component (parseJsx.ts namedImportOf): the imported name, else the tag's own (`<Box>`, `<ui.Box>`). */
 function componentNameOf({ node, rulesApi }) {
     const imported = rulesApi.getImport(node)?.imported;
     return imported && imported !== 'default' && imported !== '*' ? imported : rulesApi.getTagName(node).split('.').at(-1);
 }
-/** Not the component's data: the converter's reserved attributes, and `sharedCompId`. */
-const isReserved = (name) => RESERVED_ATTRIBUTES.includes(name) || name === SHARED_COMP_ID;
-const isDataName = (name) => !isReserved(name) && !isExcluded(name) && nearMissOf(name) === undefined;
-const isExcluded = (name) => EXCLUDED_DATA_KEYS.includes(name) || name.startsWith('data-') || name.startsWith('aria-') || /^on/i.test(name) || !DATA_KEY.test(name);
+const isDataName = (name) => !isReservedAttribute(name) && !isExcluded(name) && nearMissOf(name) === undefined;
+const isExcluded = (name) => EXCLUDED_DATA_KEYS.includes(name) || name.startsWith('data-') || name.startsWith('aria-') || EVENT_ATTRIBUTE.test(name) || !DATA_KEY.test(name);
 const nearMissOf = (name) => RESERVED_ATTRIBUTES.find((target) => isOneEditAway(name, target));
-const dataAttributes = (input) => !takesData(input) ? [] : getAttributes(input.node).filter((attribute) => isDataName(getName(attribute)) && getExpression(attribute)?.type !== 'CallExpression');
-const entryDataKeys = (entry) => getProperties(entry).filter((property) => getKey(property) !== null && !RESERVED_ENTRY_KEYS.includes(getKey(property)) && bare(property.value).type !== 'CallExpression');
+const dataAttributes = (input) => !input.rulesApi.hasDataAttributes(input.node) ? [] : getAttributes(input.node).filter((attribute) => isDataName(getName(attribute)) && !isBound(getExpression(attribute)) && getCallbackKind(getExpression(attribute) ?? attribute) !== 'template');
+const entryDataKeys = (entry) => getProperties(entry).filter((property) => getKey(property) !== null && !RESERVED_ENTRY_KEYS.includes(getKey(property)) && !isBound(bare(property.value)));
 /** The attribute a data value's path starts at: `data.x` → `data`, `elementProps.nav.label` → `elementProps`. */
 const attributeOf = (path) => path.split('.')[0];
 function getEntries(map, path = []) {
@@ -357,7 +346,8 @@ function documentIdentifierOf(node, rulesApi) {
 }
 /** What `x` decodes to is an object: an object written out, or a media call (the import keeps it as an object). */
 const isObjectValue = (node, rulesApi) => bare(node).type === 'ObjectExpression' || isImageCall(bare(node), rulesApi) || documentIdentifierOf(bare(node), rulesApi) !== null;
-function builderOf(node, rulesApi) {
+/** A call of any name from the runtime, a builder or not: the bindings rule reports one that isn't a builder. */
+function isRuntimeCall(node, rulesApi) {
     return node.type === 'CallExpression' && node.callee.type === 'Identifier' && rulesApi.getImport(node.callee)?.kind === 'runtime';
 }
 function nonLiteralIn(node, mode, rulesApi, getText, path = '') {
@@ -433,7 +423,7 @@ function nonLiteralInElementProps(node, mode, rulesApi, getText, path = '') {
     const readEntry = (property, at) => {
         const key = getKey(property);
         const value = bare(property.value);
-        if (key === 'bindings' || key === 'slots' || key === 'className' || (!RESERVED_ENTRY_KEYS.includes(key) && value.type === 'CallExpression'))
+        if (key === 'bindings' || key === 'slots' || key === 'className' || (!RESERVED_ENTRY_KEYS.includes(key) && isBound(value)))
             return null;
         return key === 'elementProps' ? nonLiteralInElementProps(value, mode, rulesApi, getText, at) : nonLiteralIn(value, mode, rulesApi, getText, at);
     };
@@ -499,10 +489,11 @@ function dataValues(input) {
     }
     return values;
 }
+/** In Structure's own JSX, or in a renderItem template, which the import reads in the row's scope (parseJsx.ts claimSlotChild). */
 function isWrittenOut(element) {
     for (let up = element.parent; up.type !== 'JSXElement' && up.type !== 'Program'; up = up.parent) {
         if (up.type === 'ArrowFunctionExpression')
-            return isStructure(up);
+            return isStructure(up) || getCallbackKind(up) === 'template';
         if (NOT_READ_IN.includes(up.type) || (up.type === 'JSXExpressionContainer' && up.parent.type !== 'JSXAttribute'))
             return false;
     }

package/dist/rules/index.js

@@ -4,6 +4,7 @@ import bindings from "./bindings.js";
 import breakpoints from "./breakpoints.js";
 import cssFileNesting from "./css-file-nesting.js";
 import cssLayoutProperties from "./css-layout-properties.js";
+import cssSelectors from "./css-selectors.js";
 import dataValues from "./data-values.js";
 import globalStyles from "./global-styles.js";
 import noAbsoluteSection from "./no-absolute-section.js";
@@ -12,5 +13,5 @@ import slotAttributes from "./slot-attributes.js";
 import themeFontIds from "./theme-font-ids.js";
 import themeRoot from "./theme-root.js";
 import noFreeCode from "./no-free-code.js";
-export const ruleRegistry = [allowedImports, noFreeCode, pageStructure, noAbsoluteSection, themeFontIds, slotAttributes, themeRoot, breakpoints, cssFileNesting, globalStyles, applyAndPresets, bindings, dataValues, cssLayoutProperties];
+export const ruleRegistry = [allowedImports, noFreeCode, pageStructure, noAbsoluteSection, themeFontIds, slotAttributes, themeRoot, breakpoints, cssFileNesting, globalStyles, applyAndPresets, bindings, dataValues, cssLayoutProperties, cssSelectors];
 export { defineRule } from "./define-rule.js";

package/dist/rules-api/index.js

@@ -1,5 +1,6 @@
 // Part 3 — rules API: one linted file's page and the functions over it, and how a rule reports.
 export { createRulesApi, getOrCreateRulesApi } from "./rules-api.js";
 export { createCssFileReporter, describeAtRule, reportCssProblem } from "./report.js";
-export { BUILDERS, DATA_KEY, GLOBAL_SECTIONS, INSTANCE_PROPS, LAYER_ATTRIBUTES, RESERVED_ATTRIBUTES, RESERVED_ENTRY_KEYS, RUNTIME_ONLY_BUILDERS, RUNTIME_PACKAGE, SECTIONS, SHARED_COMP_ID, STRUCTURE, WRAPPERS, bare, getAttribute, getExpression, getKey, getName, getProperties, getProperty, isOneEditAway, isStructure, ownerOf, } from "../shared/utils.js";
-export { BREAKPOINT_AT_RULES, CONTENT_TARGET, getCssChildren, getDashedId, getSegmentClass, getSelectorSegments, isCssIdentifier, isPresetProperty, isSafeCssIdentifier, ORIGAMI_TARGETS, OVERFLOW_TARGET, PREAMBLE_LAYER } from "../shared/css.js";
+export { bare, getAttribute, getExpression, getKey, getName, getObject, getProperties, getCallbackKind, getParamReadKind, getProperty, isBound, isOneEditAway, isReservedAttribute, isStructure, ownerOf, } from "../shared/utils.js";
+export { BUILDERS, CALLBACK_PROP, DATA_KEY, 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 { BREAKPOINT_AT_RULES, CONTENT_TARGET, getCssChildren, getDashedId, getSegmentClass, getSelectorSegments, isCssIdentifier, isPresetProperty, isSafeCssIdentifier, ORIGAMI_TARGETS, OVERFLOW_TARGET, PREAMBLE_LAYER, readSegment } from "../shared/css.js";

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

@@ -3,8 +3,9 @@
 // One per file, shared by every rule on it. Only building its page reads from disk, once per file.
 import path from 'node:path';
 import { readPage } from "../page-model/index.js";
-import { getAttributeElements as getHeldElements, getChildren, getId, getImport, getImportKind, getImportedName, getPropNames, getSlot, getTagName, getType, isTypeScript, WRAPPERS } from "../shared/utils.js";
+import { getAttributeElements as getHeldElements, getChildren, getId, getImport, getImportKind, getImportedName, getPropNames, getSlot, getTagName, getType, hasDataAttributes, isTypeScript } from "../shared/utils.js";
 import { readBreakpointName, readCustomMedia, readThemeTokens } from "../shared/css.js";
+import { 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'];
@@ -43,6 +44,7 @@ export function createRulesApi(page) {
         getAttributeElements,
         getSlot,
         getImport: (node) => getImport(node.type === 'JSXElement' ? getTagName(node).split('.')[0] : node.name, getProgram(node)),
+        hasDataAttributes: (node) => hasDataAttributes(node, getProgram(node)),
         getImportKind,
         getImportedName,
         isTypeScript,

package/dist/shared/constants.js

@@ -0,0 +1,41 @@
+/** Any section: rules that don't care which one. */
+export const SECTIONS = ['section', 'header', 'footer'];
+/** A page's reference to a global component (`<HeaderSection_x sharedCompId="…" />`). */
+export const GLOBAL_SECTIONS = ['globalHeader', 'globalFooter', 'globalSection'];
+/** A tag that wraps one component and isn't one itself: `<Remove when={…}>`, `<Interaction interactKey="…">`. */
+export const WRAPPERS = ['remove', 'interaction'];
+/** 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). */
+export const INSTANCE_PROPS = ['id', 'className'];
+/** The system components package: `Page`, the sections, `InternalContainer`. */
+export const SYSTEM_PACKAGE = '@wix/origami-system-components';
+/** The runtime package: the builders (`ctx`, `fn`…) and the `<Remove>` wrapper. */
+export const RUNTIME_PACKAGE = '@wix/origami-runtime';
+/** The typed builders (converter 0.76, PRIMITIVE_DATA_TYPES): `email('a@b.c')` is a fixed value of that type, like a literal. */
+export const TYPED_BUILDERS = ['textEnum', 'phone', 'email', 'webUrl', 'hostname', 'regex', 'guid', 'direction', 'localDate', 'localTime', 'localDateTime', 'dateTime'];
+/** The builders whose second argument is a callback, `map(source, (item) => ({…}))` (astValue.ts TRANSFORM_CALLBACKS). */
+export const TRANSFORM_BUILDERS = ['map', 'shape'];
+/** The runtime's builders: the converter's BINDINGS_BUILDER_ORDER without `Remove`, which is a tag (reservedAttributes.ts); `map`, `shape` and `callback` since converter 0.82–0.86. */
+export const BUILDERS = [
+    'all', 'ctx', 'fn', 'is', 'raw', 'state', 'map', 'shape', 'callback',
+    ...TYPED_BUILDERS,
+];
+/** The six builders no other package exports under these names; `email`, `regex`… may well come from a library for fn(). */
+export const RUNTIME_ONLY_BUILDERS = ['all', 'ctx', 'fn', 'is', 'raw', 'state'];
+/** The attributes the converter reads on any component as something other than its data (reservedAttributes.ts RESERVED_ATTRIBUTES, converter 0.81: `type` is data since). */
+export const RESERVED_ATTRIBUTES = [
+    'id', '_id', 'data', 'props', 'skin', 'styleId', 'className', 'documentType', 'style', 'slot', 'bindings', 'elementProps',
+];
+/** The attribute of a page's reference to a global component (SHARED_COMP_ID_ATTR); on any other tag it's data. */
+export const SHARED_COMP_ID = 'sharedCompId';
+/** The keys of an elementProps entry the converter reads as something other than the part's data (RESERVED_INNER_ELEMENT_ENTRY_KEYS, converter 0.80). */
+export const RESERVED_ENTRY_KEYS = ['data', 'slots', 'elementProps', 'bindings', 'className'];
+/** A data key is a JavaScript name (dataKeys.ts). */
+export const DATA_KEY = /^[A-Za-z_$][A-Za-z0-9_$]*$/;
+/** An attribute the import reads as a React event, never as data: `on` in any case (dataKeys.ts REACT_EVENT_ATTR_PATTERN, converter 0.87). */
+export const EVENT_ATTRIBUTE = /^on/i;
+/** A callback prop, which the runtime hands a function: `on` and a capital letter, `onClick` but not `onclick` (the runtime's withOrigami.tsx). */
+export const CALLBACK_PROP = /^on[A-Z]/;
+/** By import source; the wrappers also by the imported name, since their packages export other things (`Show`, `Interact`). */
+export const LAYER_ATTRIBUTES = ['backgroundLayer', 'pinnedLayer'];

package/dist/shared/css.js

@@ -93,32 +93,32 @@ export function getSelectorSegments(selector) {
         return merged;
     }, []);
 }
-/**
- * A segment's class, its states taken out, read as cssSelectors.ts parseSegment reads it (0.83.0): `&:hover` → `&` (the mixin's own
- * element); `.label:hover` → `.label`; `.label.open` → `.label`. A functional pseudo-class (`:not(:hover)`) or an attribute
- * (`[data-state~="open"]`) right after the class is part of the class, its brackets whole. Null for a segment the import can't parse:
- * a part that isn't a class (`[data-ie-name="x"]`, `:hover` alone, `:root`), or `&` followed by anything but a state (`&[x]`, `&:not(…)`).
- */
-export function getSegmentClass(segment) {
-    const base = segment.startsWith('&') ? '&' : BASE_CLASS.exec(segment)?.[0];
-    if (base === undefined)
-        return null;
-    const isClass = base !== '&';
-    let kept = base;
-    let rest = segment.slice(base.length);
-    let seenState = false;
+/** A segment's base, states and what the import can't read. A functional pseudo-class (`:not(:hover)`) or an attribute (`[data-state~="open"]`)
+ * right after the class is part of the class; after a state, or after `&`, it isn't read. */
+export function readSegment(segment) {
+    let base = segment.startsWith('&') ? '&' : BASE_CLASS.exec(segment)?.[0];
+    const isClass = base !== undefined && base !== '&';
+    const states = [];
+    let rest = segment.slice(base?.length ?? 0);
     while (rest) {
-        const functional = isClass && !seenState ? FUNCTIONAL_PSEUDO.exec(rest) : null;
+        const gluedToClass = isClass && states.length === 0;
+        const functional = gluedToClass ? FUNCTIONAL_PSEUDO.exec(rest) : null;
         const state = functional ? null : (STATE_CLASS.exec(rest) ?? PSEUDO_CLASS.exec(rest));
-        const attribute = functional || state || seenState || !isClass ? null : ATTRIBUTE.exec(rest);
-        const token = functional ?? state ?? attribute;
-        if (!token)
-            return null;
+        const attribute = functional || state || !gluedToClass ? null : ATTRIBUTE.exec(rest);
+        const token = (functional ?? state ?? attribute)?.[0];
+        if (token === undefined)
+            break;
         if (state)
-            seenState = true;
+            states.push(token);
         else
-            kept += token[0];
-        rest = rest.slice(token[0].length);
+            base += token;
+        rest = rest.slice(token.length);
     }
-    return kept;
+    return { base, states, unread: rest };
+}
+/** A segment's class, its states taken out: `&:hover` → `&`; `.label:hover` → `.label`; `.label.open` → `.label`. Null for a segment the import
+ * can't parse: a part that isn't a class (`[data-ie-name="x"]`, `:hover` alone, `:root`), or `&` followed by anything but a state (`&[x]`, `&:not(…)`). */
+export function getSegmentClass(segment) {
+    const { base, unread } = readSegment(segment);
+    return base === undefined || unread ? null : base;
 }