@wix/origami-lint 1.34.33 → 1.34.35

package/dist/rules/site-app/breakpoints.js

@@ -1,6 +1,6 @@
 import { describeAtRule, reportCssProblem } from "../../rules-api/index.js";
 import { defineRule } from "./define-rule.js";
-const CHECKS = ['malformed_custom_media', 'duplicate_breakpoint', 'unknown_breakpoint_name', 'changed_breakpoint_range', 'undeclared_breakpoint', 'unknown_breakpoint_range'];
+const CHECKS = ['malformed_custom_media', 'duplicate_breakpoint', 'unknown_breakpoint_name', 'changed_breakpoint_range', 'unknown_breakpoint_range'];
 /** The converter's shape for a declaration's name: a dashed identifier. */
 const DASHED_NAME = /^--[A-Za-z0-9_-]+$/;
 export default defineRule({
@@ -63,27 +63,27 @@ function keepsSiteRange(file, declaration, site, report) {
     reportCssProblem(report, file.name, declaration.line, 'changed_breakpoint_range', `\`@custom-media ${declaration.name} ${declaration.query}\` changes the site's range for ${declaration.name}, which is \`${exported}\`. Restore it; a breakpoint's width is changed in the editor, not in CSS.`);
     return false;
 }
-/** Reports a `@media (--name)` with no declaration of that name in the same file (CONV-breakpoints.ts:57). A malformed declaration of the name (its own line) counts as the declaration, so the use gets no second line. */
+/** Reports a `@media (--name)` whose name isn't one of the site's breakpoints (CONV-breakpoints.ts:150): the import reads the name from the site's
+ * breakpoints, so the file needs no `@custom-media` of its own. Nothing without a theme to compare with. A name the file declares is reported on its
+ * declaration (checkDeclarations), so the use gets no second line. */
 function checkNamedUses(file, site, report) {
+    if (!site.hasTheme)
+        return;
     const declared = new Set(file.declared.flatMap(({ name }) => [name, `--${name}`]));
     for (const { name, line } of file.used) {
-        if (!name || declared.has(name))
+        if (!name || declared.has(name) || getSiteRange(name, site) !== undefined)
             continue;
-        const range = getSiteRange(name, site);
-        const fix = range
-            ? `add \`@custom-media ${name} ${range};\` at the top of ${file.name}, or write the range itself, \`@media ${range}\``
-            : `add \`@custom-media ${name} (<its range>);\` at the top of ${file.name} (the range the site gives it), or write the range itself`;
-        reportCssProblem(report, file.name, line, 'undeclared_breakpoint', `\`@media (${name})\` uses a name the file doesn't declare: ${fix}.`);
+        reportCssProblem(report, file.name, line, 'unknown_breakpoint_name', `\`@media (${name})\` names a breakpoint the site doesn't have. Use one of the theme's breakpoints: ${describe(site.breakpoints)}.`);
     }
 }
-/** Reports each `@media` of a file whose range is none of the site's (P4-R01, CONV-breakpoints.ts:75); nothing without a theme to compare with. A name is read through the file's declaration when that declaration is the site's; otherwise the steps above report it. A component's own breakpoint (inside `@scope`) is compared once unmapped.json is read. */
+/** Reports each `@media` of a file whose range is none of the site's (P4-R01, CONV-breakpoints.ts:75); nothing without a theme to compare with. A name is read as the site's range for it; an unknown name is checkNamedUses'. A component's own breakpoint (inside `@scope`) is compared once unmapped.json is read. */
 function checkRanges(file, site, report) {
     if (!site.hasTheme)
         return;
     for (const media of file.used) {
         if (media.scope !== null)
             continue;
-        const query = resolve(media, file.declared, site);
+        const query = resolve(media, site);
         if (query === null || site.breakpoints.some((breakpoint) => canonical(breakpoint.query) === canonical(query)))
             continue;
         reportCssProblem(report, file.name, media.line, 'unknown_breakpoint_range', `\`${describeAtRule({ name: 'media', params: media.query })}\` is a breakpoint the site doesn't have. Write one of the theme's breakpoints: ${describe(site.breakpoints)}. The import refuses a value for a breakpoint the site doesn't have.`);
@@ -112,13 +112,11 @@ function getMedia(file, isPage, rulesApi) {
 const hasShape = ({ name, query }) => DASHED_NAME.test(name) && query !== '';
 /** The site's range for a name; undefined when the theme has no well-formed declaration of it. */
 const getSiteRange = (name, site) => site.breakpoints.find((breakpoint) => breakpoint.name === name)?.query;
-/** The range to compare: the @media's own; for `(--name)`, the range the file declares for it, when that declaration is the site's name with the site's range (otherwise the steps above report it); null when there is nothing to compare. */
-function resolve(media, declarations, site) {
+/** The range to compare: the @media's own; for `(--name)`, the site's range for that name, as the import reads it (an unknown name is checkNamedUses'); null when there is nothing to compare. */
+function resolve(media, site) {
     if (!media.name)
         return media.query;
-    const declaration = declarations.find((entry) => entry.name === media.name && hasShape(entry));
-    const exported = getSiteRange(media.name, site);
-    return declaration && exported !== undefined && exported.trim() === declaration.query.trim() ? declaration.query : null;
+    return getSiteRange(media.name, site) ?? null;
 }
 /** How the import reads a range: `(max-width:1023px)` and `(max-width: 1023px)` are the same; anything else, a different case or other spaces included, is another query. */
 const canonical = (query) => query.trim().replace(/:\s+/g, ':');

package/dist/rules/site-app/page-structure.js

@@ -148,7 +148,7 @@ function isOutsideInternalContainers({ node, rulesApi, report }) {
         return;
     report({ check: 'landmark_inside_container', loc: getLoc(node, rulesApi), message: `The ${kind} ${describeElement(node, rulesApi)} is inside the internal container ${describeElement(container, rulesApi)}. Move it out of every internal container: the header and footer sit directly in the page or the master page.` });
 }
-/** Reports a wrapper that doesn't hold exactly one element: none, two, text, or a {…} (a comment too) beside it (CONV-parseJsx.ts:1028). */
+/** Reports a wrapper that doesn't hold exactly one element: none, two, text, or a {…} beside it; a comment is fine (CONV-parseJsx.ts:1028). */
 function holdsOneElement({ node, rulesApi, report }) {
     if (holdsOne(node))
         return;
@@ -161,13 +161,13 @@ function checkNoRemoveInRemove({ node, rulesApi, report }) {
         return;
     report({ check: 'nested_remove', loc: node.openingElement.name.loc, message: `<${rulesApi.getTagName(node)}> is inside another <Remove>. <Remove> wraps the component itself: merge the two conditions into one <Remove>.` });
 }
-/** Reports text, a {…} (a comment too), a fragment or a spread between a component's tags (CONV-parseJsx.ts:1668). The root steps report those in <Page> and its sections, except comments, which they don't see. */
+/** Reports text, a {…}, a fragment or a spread between a component's tags (CONV-parseJsx.ts:1668). A comment is fine, as whitespace is: the import
+ * skips both (it reads a `@name` comment as the component's name). The root steps report the rest in <Page> and its sections. */
 function hasOnlyElements({ node, rulesApi, report }) {
-    const commentsOnly = isRootTreeHolder(node, rulesApi);
+    if (isRootTreeHolder(node, rulesApi))
+        return;
     for (const child of node.children) {
-        if (child.type === 'JSXElement' || (child.type === 'JSXText' && child.value.trim() === ''))
-            continue;
-        if (commentsOnly && !isComment(child))
+        if (child.type === 'JSXElement' || isFiller(child))
             continue;
         report({ check: 'non_element_child', loc: child.type === 'JSXText' ? getTextLoc(child) : child.loc, message: `${describeElement(node, rulesApi)} has text or {…} as a child. Put the value in an attribute: only elements go between the tags.` });
     }
@@ -283,13 +283,13 @@ function isRootTreeHolder(holder, rulesApi) {
 }
 /** Whether the element is one of the holder's children (through wrappers), not something passed in one of its attributes. */
 const isStructuralChild = (holder, element, rulesApi) => getStructuralChildren(holder, rulesApi).includes(element);
-/** A wrapper holds exactly one element: non-blank text, a {…} (a comment too), a fragment count as what it holds. */
+/** A wrapper holds exactly one element: non-blank text, a {…} and a fragment count as what it holds; whitespace and comments don't. */
 const holdsOne = (wrapper) => {
-    const inside = wrapper.children.filter((child) => child.type !== 'JSXText' || child.value.trim() !== '');
+    const inside = wrapper.children.filter((child) => !isFiller(child));
     return inside.length === 1 && inside[0].type === 'JSXElement';
 };
-/** A JSX comment: an expression container with nothing in it. */
-const isComment = (child) => child.type === 'JSXExpressionContainer' && child.expression.type === 'JSXEmptyExpression';
+/** What the import skips between tags: whitespace, and a JSX comment (an expression container with nothing in it). */
+const isFiller = (child) => (child.type === 'JSXText' && child.value.trim() === '') || (child.type === 'JSXExpressionContainer' && child.expression.type === 'JSXEmptyExpression');
 /** `backgroundLayer={[<Background … />]}`: an array literal whose every entry is an element. */
 function isArrayOfElements(attribute) {
     const { value } = attribute;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/origami-lint",
-  "version": "1.34.33",
+  "version": "1.34.35",
   "description": "Offline lint for an exported Origami site: lints the pages that changed since the last passing run",
   "type": "module",
   "bin": {
@@ -25,7 +25,7 @@
     "oxc-parser": "^0.151.0",
     "oxlint": "^1.39.0",
     "postcss": "^8.5.3",
-    "@wix/origami-bi": "0.13.0"
+    "@wix/origami-bi": "0.14.0"
   },
   "devDependencies": {
     "@types/node": "^22.0.0",
@@ -52,5 +52,5 @@
       ]
     }
   },
-  "falconPackageHash": "fa4525b9f8f5fa63ad7d72b383deab33b1a9c16033290d6381eb0ee9"
+  "falconPackageHash": "3167f248bc0c6e01893243829d375999c8ee55bc2d649ba40becbf55"
 }