@wix/origami-lint 1.34.42 → 1.34.44

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

@@ -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,
@@ -104,7 +110,9 @@ function checkLayoutFile(input) {
     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);
@@ -115,7 +123,7 @@ function checkLayoutFile(input) {
 }
 /** 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);
@@ -134,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)}.`);
     }
@@ -147,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];
@@ -170,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;
@@ -187,8 +206,8 @@ 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'];
@@ -305,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.42",
+  "version": "1.34.44",
   "description": "Offline lint for an exported Origami site: lints the pages that changed since the last passing run",
   "type": "module",
   "bin": {
@@ -26,7 +26,7 @@
     "eslint": "^10.12.0",
     "postcss": "^8.5.3",
     "typescript": "^5.8.3 || ~6.0.3",
-    "@wix/origami-bi": "0.17.0"
+    "@wix/origami-bi": "0.18.0"
   },
   "devDependencies": {
     "@types/node": "^22.0.0",
@@ -54,5 +54,5 @@
       ]
     }
   },
-  "falconPackageHash": "75ff158491c0d257f4c8c0c0a34a9cff8171ca1a8112cfe25b219155"
+  "falconPackageHash": "dd56bf015e4bd3779535e6af5723b0f06fe7f30031097ebd9e6a964e"
 }