@wix/origami-lint 1.34.3 → 1.34.5

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/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/page-structure.js

@@ -6,6 +6,8 @@
 // recognized by import source (rulesApi.getType), so renaming an import doesn't matter.
 // Checked in every file, pages and global components alike:
 // - Structure returns one element, with a string id (tracker CONV-runValidation.ts:9);
+// - every section, wherever it sits (a page's, a global component's top one, one nested lower down), holds exactly one
+//   <InternalContainer> and nothing else: the site's own build refuses anything else (rule S2-SECTION-001, tracker OUR-001);
 // - a <Page> is only ever the top of its own page: one held by another element is refused at save (rule card P1-R16);
 // - the header and footer sit outside every <InternalContainer>: inside one, that container can no longer be deleted in the
 //   editor (rule card P1-R03). Both the HeaderSection / FooterSection tags and a page's reference to the global ones;
@@ -38,6 +40,8 @@ export default defineRule({
             if (isLandmark(input.node, input.rulesApi))
                 hasSectionInLandmark(input);
             hasOnlyElements(input);
+            if (isSection(input.node, input.rulesApi))
+                hasOneInternalContainer(input.node, input);
             hasLayerArrays(input);
             isNotNestedPage(input);
             isOutsideInternalContainers(input);
@@ -50,8 +54,7 @@ export default defineRule({
                 return;
             if (!startsWithPage(input))
                 return;
-            for (const section of getSections(input))
-                hasOneInternalContainer(section, input);
+            checkPageChildren(input);
         },
     },
 });
@@ -94,29 +97,25 @@ function startsWithPage({ node, rulesApi, report }) {
     report({ loc: getLoc(node, rulesApi), message: `A page must start with <Page>, found ${describe(node, rulesApi)}.` });
     return false;
 }
-/** <Page>'s sections. Any other component (the page's <Background>, a pinned element) is accepted, as the import accepts it; reports text and {…} (CONV-parseJsx.ts:1668). */
-function getSections({ node: page, rulesApi, report }) {
-    const sections = [];
+/** Reports text and {…} directly in <Page> (CONV-parseJsx.ts:1668). Any component is accepted there: a section, the page's <Background>, a pinned element, as the import accepts it. */
+function checkPageChildren({ node: page, rulesApi, report }) {
     for (const child of getStructuralChildren(page, rulesApi)) {
-        if (child.type === 'JSXElement') {
-            const type = rulesApi.getType(child);
-            if (type && SECTIONS.includes(type))
-                sections.push(child);
+        if (child.type === 'JSXElement')
             continue;
-        }
         report({ loc: getLoc(page, rulesApi), message: `<Page> has ${describe(child, rulesApi)} as a child. Only elements go directly inside <Page>: a section, or a component pinned to the page (tracker CONV-parseJsx.ts:1668).` });
     }
-    return sections;
 }
-/** Reports a section that doesn't hold exactly one <InternalContainer>, and nothing else. A wrapper in it that holds the wrong number of elements is reported by its own step first. */
+/** Reports a section, anywhere in the file, that doesn't hold exactly one <InternalContainer>, and nothing else (S2-SECTION-001, OUR-001). A wrapper in it
+ * that holds the wrong number of elements is reported by its own step first; text and {…} count only where hasOnlyElements leaves them to this step. */
 function hasOneInternalContainer(section, { rulesApi, report }) {
     if (rulesApi.getChildren(section).some((child) => child.type === 'JSXElement' && isWrapper(child, rulesApi) && !holdsOne(child)))
         return;
-    const inside = getStructuralChildren(section, rulesApi);
+    const reportsText = isRootTreeHolder(section, rulesApi);
+    const inside = getStructuralChildren(section, rulesApi).filter((child) => reportsText || child.type === 'JSXElement');
     if (inside.length === 1 && inside[0].type === 'JSXElement' && rulesApi.getType(inside[0]) === 'innerElement')
         return;
     const name = rulesApi.getId(section) ?? `<${rulesApi.getTagName(section)}>`;
-    report({ loc: getLoc(section, rulesApi), message: `Section ${name} must contain exactly one <InternalContainer>, found: ${inside.map((child) => describe(child, rulesApi)).join(', ') || 'nothing'}.` });
+    report({ loc: getLoc(section, rulesApi), message: `Section ${name} must contain exactly one <InternalContainer>, found: ${inside.map((child) => describe(child, rulesApi)).join(', ') || 'nothing'}. Put the section's content inside its one <InternalContainer> (rule S2-SECTION-001).` });
 }
 /** Reports a <Page> held by another element (P1-R16), unless the root steps above report that placement already (a section's children). */
 function isNotNestedPage({ node, rulesApi, report }) {
@@ -250,6 +249,11 @@ function describe(child, rulesApi) {
         return `<${rulesApi.getTagName(child)}>`;
     return child.type === 'JSXText' ? 'text' : 'a {…} expression';
 }
+/** Section, HeaderSection, FooterSection (by import source); not a page's reference to a global one. */
+function isSection(node, rulesApi) {
+    const type = rulesApi.getType(node);
+    return type !== null && SECTIONS.includes(type);
+}
 function isLandmark(node, rulesApi) {
     const type = rulesApi.getType(node);
     return type === 'headerLandmark' || type === 'footerLandmark';
@@ -259,10 +263,8 @@ function hasSectionInLandmark(input) {
     const { node, rulesApi, report } = input;
     const expected = rulesApi.getType(node) === 'headerLandmark' ? 'header' : 'footer';
     const children = getStructuralChildren(node, rulesApi);
-    if (children.length === 1 && children[0].type === 'JSXElement' && rulesApi.getType(children[0]) === expected) {
-        hasOneInternalContainer(children[0], input);
+    if (children.length === 1 && children[0].type === 'JSXElement' && rulesApi.getType(children[0]) === expected)
         return;
-    }
     report({ loc: getLoc(node, rulesApi), message: `<${rulesApi.getTagName(node)}> must contain exactly one ${expected === 'header' ? 'HeaderSection' : 'FooterSection'}.` });
 }
 function receivesInstanceId(node) {

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, getProperties, getProperty, isOneEditAway, isStructure, ownerOf, } from "../shared/utils.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, SYSTEM_PACKAGE, 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, 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'];

package/dist/shared/constants.js

@@ -0,0 +1,33 @@
+/** 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 runtime's builders: the converter's BINDINGS_BUILDER_ORDER without `Remove`, which is a tag (reservedAttributes.ts). */
+export const BUILDERS = [
+    'all', 'ctx', 'fn', 'is', 'raw', 'state',
+    'textEnum', 'phone', 'email', 'webUrl', 'hostname', 'regex', 'guid', 'direction', 'localDate', 'localTime', 'localDateTime', 'dateTime',
+];
+/** 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_$]*$/;
+/** 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;
 }

package/dist/shared/utils.js

@@ -1,43 +1,13 @@
+import { RUNTIME_PACKAGE, STRUCTURE, SYSTEM_PACKAGE } from "./constants.js";
 import { GLOBAL_COMPONENTS, GLOBAL_MENUS } from "./site-files-tree-mapping.js";
-/** 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'];
-const SYSTEM = '@wix/origami-system-components';
-/** The runtime package: the builders (`ctx`, `fn`…) and the `<Remove>` wrapper. */
-export const RUNTIME_PACKAGE = '@wix/origami-runtime';
-/** The runtime's builders: the converter's BINDINGS_BUILDER_ORDER without `Remove`, which is a tag (reservedAttributes.ts). */
-export const BUILDERS = [
-    'all', 'ctx', 'fn', 'is', 'raw', 'state',
-    'textEnum', 'phone', 'email', 'webUrl', 'hostname', 'regex', 'guid', 'direction', 'localDate', 'localTime', 'localDateTime', 'dateTime',
-];
-/** 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_$]*$/;
-/** By import source; the wrappers also by the imported name, since their packages export other things (`Show`, `Interact`). */
 const TYPE_BY_IMPORT_SOURCE = [
-    [new RegExp(`^${SYSTEM}/(?:layout/)?Page$`), 'page'],
-    [new RegExp(`^${SYSTEM}/layout/Header$`), 'headerLandmark'],
-    [new RegExp(`^${SYSTEM}/layout/Footer$`), 'footerLandmark'],
-    [new RegExp(`^${SYSTEM}/(?:layout/)?Section$`), 'section'],
-    [new RegExp(`^${SYSTEM}/(?:layout/)?HeaderSection$`), 'header'],
-    [new RegExp(`^${SYSTEM}/(?:layout/)?FooterSection$`), 'footer'],
-    [new RegExp(`^${SYSTEM}/InternalContainer$`), 'innerElement'],
+    [new RegExp(`^${SYSTEM_PACKAGE}/(?:layout/)?Page$`), 'page'],
+    [new RegExp(`^${SYSTEM_PACKAGE}/layout/Header$`), 'headerLandmark'],
+    [new RegExp(`^${SYSTEM_PACKAGE}/layout/Footer$`), 'footerLandmark'],
+    [new RegExp(`^${SYSTEM_PACKAGE}/(?:layout/)?Section$`), 'section'],
+    [new RegExp(`^${SYSTEM_PACKAGE}/(?:layout/)?HeaderSection$`), 'header'],
+    [new RegExp(`^${SYSTEM_PACKAGE}/(?:layout/)?FooterSection$`), 'footer'],
+    [new RegExp(`^${SYSTEM_PACKAGE}/InternalContainer$`), 'innerElement'],
     // A global component's folder is `<Type>_<id>`: HeaderSection_mb7ogqqn.
     [new RegExp(`/${GLOBAL_COMPONENTS}/(?:HeaderSection|Header)_[^/]+$`), 'globalHeader'],
     [new RegExp(`/${GLOBAL_COMPONENTS}/(?:FooterSection|Footer)_[^/]+$`), 'globalFooter'],
@@ -109,7 +79,6 @@ export function getSlot(element) {
     return getLiteralString(element.openingElement.attributes.find(isSlotAttribute)?.value);
 }
 /** The attributes that hold an element's layers: drawn behind it, and pinned to it. */
-export const LAYER_ATTRIBUTES = ['backgroundLayer', 'pinnedLayer'];
 /** The elements this one holds in its attributes (`content={<X />}`, or inside the attribute's object or array, `elementProps` too), each with the attribute it is in. Not its children, and not the elements inside those elements. */
 export function getAttributeElements(owner) {
     const elementsIn = (value) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/origami-lint",
-  "version": "1.34.3",
+  "version": "1.34.5",
   "description": "Offline lint for an exported Origami site: lints the pages that changed since the last passing run",
   "type": "module",
   "bin": {
@@ -51,5 +51,5 @@
       ]
     }
   },
-  "falconPackageHash": "162134940d5c0140fe1b81ff9111d25a7f98f0201dfbbc32130245ca"
+  "falconPackageHash": "7e83272a42478bff6871d3e1a9841d447d7f2446e79f08856a87192d"
 }