@wix/origami-lint 1.34.41 → 1.34.42

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

@@ -1,6 +1,6 @@
-import { CONTENT_TARGET, createCssFileReporter, getLayoutLiteral, mergeLayoutScopes, OVERFLOW_TARGET, readLayoutRuleBlocks, SPX_PROPS, SPX_RESOLVER_TYPES } from "../../rules-api/index.js";
+import { CONTENT_TARGET, createCssFileReporter, getLayoutLiteral, mergeLayoutScopes, OVERFLOW_TARGET, PREAMBLE_LAYER, readLayoutRuleBlocks, SPX_PROPS, SPX_RESOLVER_TYPES } from "../../rules-api/index.js";
 import { defineRule } from "./define-rule.js";
-const CHECKS = ['duplicate_property', 'non_layout_property', 'property_outside_target', 'property_in_wrong_target', 'non_container_target_property', 'missing_property_value', 'incompatible_container_property', 'invalid_layout_value', 'missing_container_display', 'missing_grid_column', 'invalid_spx_context', 'unsupported_flex_wrap', 'child_without_container_layout'];
+const CHECKS = ['duplicate_property', 'non_layout_property', 'property_outside_target', 'property_in_wrong_target', 'non_container_target_property', 'missing_property_value', 'incompatible_container_property', 'invalid_layout_value', 'missing_container_display', 'missing_grid_column', 'invalid_spx_context', 'internal_spx_call', 'missing_spx_reference_width', 'unsupported_flex_wrap', 'child_without_container_layout'];
 // ── the tables (propSpecs.ts) ──
 const keywords = (...values) => ({ values, allowed: values.join(', ') });
 const ANY = { allowed: 'any value' };
@@ -94,7 +94,9 @@ export default defineRule({
 });
 // ── the file: each rule block, then each element at each breakpoint ──
 /** The page's layout.css: each rule block, then each element at each breakpoint. */
-function checkLayoutFile({ rulesApi, report }) {
+function checkLayoutFile(input) {
+    checkInternalSpxCalls(input);
+    const { rulesApi, report } = input;
     const root = rulesApi.page.css.files.layout;
     if (!root)
         return;
@@ -116,6 +118,7 @@ function checkBlock(block, reportAt) {
     checkPropertiesOnce(block.declarations, `${block.element}'s rule`, reportAt);
     for (const [target, declarations] of block.targets)
         checkPropertiesOnce(declarations, `${block.element}'s \`@origami-target ${target}\` block`, reportAt);
+    checkOwnRefWidth(block, reportAt);
     if (block.targets.size === 0)
         return checkLayoutPropertiesOnly(block, reportAt);
     checkRootPropertiesAtTop(block, reportAt);
@@ -192,6 +195,8 @@ function checkScope(scope, inherited, reportAt) {
             reportAt(decl, 'incompatible_container_property', `${element} is a ${own} container (\`display: ${own}\`), and \`${prop}\` is a ${other} property: remove it, or use \`display: ${other}\`.`);
             continue;
         }
+        if (hasCssFunction(value, '--layout-spx'))
+            continue; // internal_spx_call reports it
         if (prop === 'flex-wrap' && ownType === 'stack')
             continue; // :218 reported it; an inherited flex reads it as a value (:437)
         const spec = ELEMENT_PROPS[prop] ?? ITEM_PROPS[prop] ?? container?.spec;
@@ -221,6 +226,54 @@ function checkSpxReference({ element, values }, reportAt) {
         return;
     reportAt(first, 'invalid_spx_context', `${element}'s spx context is invalid: \`--spx-ref-width\` takes a plain number (1280, no px) and \`--spx-resolver-type\` takes scale or fixed.`);
 }
+/** A rule that uses `--spx()` sets its own `--spx-ref-width`: the build reads each call's width from its rule only (#579), so another
+ * rule's width doesn't count; an `@origami-target` block uses its holding rule's. */
+function checkOwnRefWidth({ element, declarations, targets }, reportAt) {
+    if (declarations.some((decl) => decl.prop === '--spx-ref-width'))
+        return;
+    for (const decl of [...declarations, ...[...targets.values()].flat()]) {
+        if (hasCssFunction(decl.value, '--spx'))
+            reportAt(decl, 'missing_spx_reference_width', `${element} uses \`--spx()\` without \`--spx-ref-width\` in its rule: add \`--spx-ref-width\` to the same rule, like 1280.`);
+    }
+}
+/** No hand-written `--layout-spx()` in layout.css, style.css or theme.css outside the preamble: the build writes it from each `--spx(N)`. */
+function checkInternalSpxCalls({ rulesApi, report }) {
+    for (const kind of ['layout', 'style', 'theme']) {
+        const reportAt = createCssFileReporter(`${kind}.css`, report);
+        rulesApi.page.css.files[kind]?.walkDecls((decl) => {
+            if (rulesApi.getEnclosingAtRules(decl).some(({ name, params }) => name === 'layer' && params.trim() === PREAMBLE_LAYER))
+                return;
+            if (hasCssFunction(decl.value, '--layout-spx'))
+                reportAt(decl, 'internal_spx_call', '`--layout-spx()` is internal to the build: write `--spx(N)` instead.');
+        });
+    }
+}
+/** Whether a CSS value calls this function, outside comments and quoted strings. */
+function hasCssFunction(value, functionName) {
+    let quote;
+    for (let index = 0; index < value.length; index++) {
+        const character = value[index];
+        if (quote) {
+            if (character === '\\')
+                index++;
+            else if (character === quote)
+                quote = undefined;
+        }
+        else if (character === '/' && value[index + 1] === '*') {
+            const end = value.indexOf('*/', index + 2);
+            if (end === -1)
+                return false;
+            index = end + 1;
+        }
+        else if (character === "'" || character === '"') {
+            quote = character;
+        }
+        else if (!/[\w-]/.test(value[index - 1] ?? '') && value.startsWith(`${functionName}(`, index)) {
+            return true;
+        }
+    }
+    return false;
+}
 /** The container type the scope's own display gives (resolveContainerType): grid, or flex with no flex-wrap other than nowrap (:218). */
 function checkContainerType({ element, values }, reportAt) {
     const display = values.get('display')?.value.trim();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/origami-lint",
-  "version": "1.34.41",
+  "version": "1.34.42",
   "description": "Offline lint for an exported Origami site: lints the pages that changed since the last passing run",
   "type": "module",
   "bin": {
@@ -54,5 +54,5 @@
       ]
     }
   },
-  "falconPackageHash": "cd79205599adab600f2e5287c59ffd8f71d60a92c28f544cf5fe719f"
+  "falconPackageHash": "75ff158491c0d257f4c8c0c0a34a9cff8171ca1a8112cfe25b219155"
 }