@wix/origami-lint 1.34.41 → 1.34.43

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' };
@@ -35,7 +35,7 @@ const ITEM_PROPS = {
     bottom: SIZE,
     left: SIZE,
     right: SIZE,
-    'z-index': { reads: (value) => value === 'auto' || /^calc\(\s*infinity\s*\)$/.test(value), allowed: 'calc(infinity), auto' },
+    'z-index': { reads: (value) => value === 'auto' || /^calc\(\s*infinity\s*\)$/.test(value), allowed: 'calc(infinity), auto, or a layer: 1, 51, 100000' },
     'align-self': SELF_ALIGNMENT,
     'justify-self': SELF_ALIGNMENT,
     'scroll-snap-align': keywords('start', 'center', 'end', 'none'),
@@ -83,6 +83,12 @@ const CONTAINER_PROPS = {
 /** A property allowed at the top of a rule with `@origami-target` blocks (isRootLayoutProperty): the element's own, item and spx properties, and the root-target container property. */
 const isRootProperty = (prop) => prop in ELEMENT_PROPS || prop in ITEM_PROPS || SPX_PROPS.includes(prop) || CONTAINER_PROPS[prop]?.target === 'root';
 const isLayoutProperty = (prop) => isRootProperty(prop) || prop in CONTAINER_PROPS;
+/** The element's transformation in layout.css (isLayoutTransformationDeclaration): these properties, and a z-index at a zLayer's value (Z_INDEXES). */
+const TRANSFORMATION_PROPS = ['opacity', 'transform', 'transform-origin', 'filter'];
+const Z_LAYER_INDEXES = ['1', '51', '100000'];
+const isTransformation = (prop, value) => TRANSFORMATION_PROPS.includes(prop) || (prop === 'z-index' && Z_LAYER_INDEXES.includes(value.trim()));
+/** A rule's top-level declarations as the import reads its layout: without the transformation, which it takes out first (withoutTransformationsOf). */
+const withoutTransformation = (declarations) => declarations.filter((decl) => !isTransformation(decl.prop, decl.value));
 export default defineRule({
     name: 'css-layout-properties',
     checks: CHECKS,
@@ -94,7 +100,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;
@@ -102,7 +110,9 @@ function checkLayoutFile({ rulesApi, report }) {
     const blocks = readLayoutRuleBlocks(root);
     for (const block of blocks)
         checkBlock(block, reportAt);
-    const scopes = mergeLayoutScopes(blocks);
+    // The import takes the transformation out of each rule before it reads the layout (withoutTransformationsOf), so `z-index: 5; z-index: 51` keeps the 5 as layout
+    const scopes = mergeLayoutScopes(blocks.map((block) => ({ ...block, declarations: withoutTransformation(block.declarations) })));
+    checkTransformationValues(blocks, reportAt);
     const defaultTypes = new Map();
     for (const scope of scopes) {
         const inherited = scope.media === null ? undefined : defaultTypes.get(scope.element);
@@ -113,9 +123,10 @@ function checkLayoutFile({ rulesApi, report }) {
 }
 /** Each property once per block (:498); a rule without targets holds layout properties (:505); with targets, root properties at the top (:512) and each container property in its target (:524). */
 function checkBlock(block, reportAt) {
-    checkPropertiesOnce(block.declarations, `${block.element}'s rule`, reportAt);
+    checkPropertiesOnce(withoutTransformation(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);
@@ -131,7 +142,7 @@ function checkPropertiesOnce(declarations, where, reportAt) {
     }
 }
 function checkLayoutPropertiesOnly({ element, declarations }, reportAt) {
-    for (const decl of declarations) {
+    for (const decl of withoutTransformation(declarations)) {
         if (!isLayoutProperty(decl.prop))
             reportAt(decl, 'non_layout_property', `${describeNonLayoutProperty(decl.prop, element)}.`);
     }
@@ -144,7 +155,7 @@ function describeNonLayoutProperty(prop, element) {
     return `\`${prop}\` on ${element} is not a layout property: move it to ${element}'s rule in style.css`;
 }
 function checkRootPropertiesAtTop({ element, declarations }, reportAt) {
-    for (const decl of declarations) {
+    for (const decl of withoutTransformation(declarations)) {
         if (isRootProperty(decl.prop))
             continue;
         const container = CONTAINER_PROPS[decl.prop];
@@ -167,11 +178,22 @@ function checkTargetProperties(element, target, declarations, reportAt) {
             reportAt(decl, 'property_in_wrong_target', `${element}'s \`${decl.prop}\` goes ${place}, not in ${target}.`);
         }
         else {
-            const fix = isLayoutProperty(decl.prop) ? `move it to the top of ${element}'s rule` : `move it to ${element}'s rule in style.css`;
+            // A transformation is taken out at the top of the rule only (withoutTransformationsOf reads a rule's own declarations, not its targets)
+            const fix = isLayoutProperty(decl.prop) || TRANSFORMATION_PROPS.includes(decl.prop) ? `move it to the top of ${element}'s rule` : `move it to ${element}'s rule in style.css`;
             reportAt(decl, 'non_container_target_property', `\`${decl.prop}\` in ${element}'s \`@origami-target ${target}\` block is not a container property: ${fix}.`);
         }
     }
 }
+/** A transformation at a rule's top has a value: the import reads each one by its last declaration per element and breakpoint (cssByNameOf), so an empty one before a value is not read. */
+function checkTransformationValues(blocks, reportAt) {
+    const transformations = blocks.map((block) => ({ ...block, declarations: block.declarations.filter((decl) => isTransformation(decl.prop, decl.value)), targets: new Map() }));
+    for (const { element, values } of mergeLayoutScopes(transformations)) {
+        for (const [prop, decl] of values) {
+            if (decl.value.trim() === '')
+                reportAt(decl, 'missing_property_value', `${element}'s \`${prop}\` has no value: write a value or remove the declaration.`);
+        }
+    }
+}
 /** An element at one breakpoint: its spx reference (:417), its container type (:218), each value (:430, :437, :440, :447), a display for its targets (:451), grid-row with grid-column (:264). Returns the container type, for the breakpoints that inherit it. */
 function checkScope(scope, inherited, reportAt) {
     const { element, values } = scope;
@@ -184,14 +206,16 @@ function checkScope(scope, inherited, reportAt) {
             reportAt(decl, 'missing_property_value', `${element}'s \`${prop}\` has no value: write a value or remove the declaration.`);
             continue;
         }
-        if (SPX_PROPS.includes(prop))
-            continue;
+        if (SPX_PROPS.includes(prop) || isTransformation(prop, value))
+            continue; // a transformation in a target block: checkTargetProperties reports it
         const container = CONTAINER_PROPS[prop];
         if (container && type && !container[type]) {
             const [own, other] = type === 'grid' ? ['grid', 'flex'] : ['flex', 'grid'];
             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 +245,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();
@@ -252,7 +324,8 @@ const getItems = ({ node, rulesApi }) => rulesApi.getItemElements(node).flatMap(
 function checkContainerParent(child, parent, { report, rulesApi }) {
     const byMedia = new Map();
     for (const prop of Object.keys(ITEM_PROPS)) {
-        for (const decl of (child.css.layout[prop] ?? []).filter(isOnElement))
+        const layout = (child.css.layout[prop] ?? []).filter((decl) => isOnElement(decl) && !isTransformation(prop, decl.value)); // a zLayer z-index is no item property
+        for (const decl of layout)
             byMedia.set(decl.media, [...(byMedia.get(decl.media) ?? []), { prop, decl }]);
     }
     for (const [media, declarations] of byMedia) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/origami-lint",
-  "version": "1.34.41",
+  "version": "1.34.43",
   "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": "4f9d0cd18bc1e203bfcc50088bfb980aad3cc77d7ca7f1bdc933c5ca"
 }