@wix/origami-lint 1.34.36 → 1.34.38

package/dist/rules/index.js

@@ -13,10 +13,11 @@ import noAbsoluteSection from "./site-app/no-absolute-section.js";
 import pageStructure from "./site-app/page-structure.js";
 import slotAttributes from "./site-app/slot-attributes.js";
 import slotPlacement from "./site-app/slot-placement.js";
+import spxValues from "./site-app/spx-values.js";
 import themeFontIds from "./site-app/theme-font-ids.js";
 import themeFontKnown from "./site-app/theme-font-known.js";
 import themeRoot from "./site-app/theme-root.js";
 import noFreeCode from "./site-app/no-free-code.js";
 // Execution registries combine already-checked rules; only this boundary erases their individual key unions.
-export const ruleRegistry = [allowedImports, noFreeCode, pageStructure, noAbsoluteSection, themeFontIds, themeFontKnown, slotAttributes, themeRoot, breakpoints, cssFileNesting, globalStyles, applyAndPresets, bindings, dataValues, cssLayoutProperties, cssSelectors, slotPlacement, knownTags, layoutDesignNotes];
+export const ruleRegistry = [allowedImports, noFreeCode, pageStructure, noAbsoluteSection, themeFontIds, themeFontKnown, slotAttributes, themeRoot, breakpoints, cssFileNesting, globalStyles, applyAndPresets, bindings, dataValues, cssLayoutProperties, cssSelectors, slotPlacement, knownTags, layoutDesignNotes, spxValues];
 export { defineRule } from "./site-app/define-rule.js";

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

@@ -1,4 +1,4 @@
-import { CONTENT_TARGET, createCssFileReporter, getLayoutLiteral, OVERFLOW_TARGET } from "../../rules-api/index.js";
+import { CONTENT_TARGET, createCssFileReporter, getLayoutLiteral, mergeLayoutScopes, OVERFLOW_TARGET, 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'];
 // ── the tables (propSpecs.ts) ──
@@ -80,9 +80,6 @@ const CONTAINER_PROPS = {
     '--spx-stopper-min': both(SIZE, 'root'),
     '--spx-stopper-max': both(SIZE, 'root'),
 };
-/** The reference its `--spx()` sizes scale by (spxTransformer.ts SPX_PROPS); checked together, :417. */
-const SPX_PROPS = ['--spx-ref-width', '--spx-resolver-type'];
-const SPX_RESOLVER_TYPES = ['scale', 'fixed'];
 /** 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;
@@ -95,16 +92,17 @@ export default defineRule({
         JSXElement: checkItemParents,
     },
 });
+// ── 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 }) {
     const root = rulesApi.page.css.files.layout;
     if (!root)
         return;
     const reportAt = createCssFileReporter('layout.css', report);
-    const blocks = readRuleBlocks(root);
+    const blocks = readLayoutRuleBlocks(root);
     for (const block of blocks)
         checkBlock(block, reportAt);
-    const scopes = mergeScopes(blocks);
+    const scopes = mergeLayoutScopes(blocks);
     const defaultTypes = new Map();
     for (const scope of scopes) {
         const inherited = scope.media === null ? undefined : defaultTypes.get(scope.element);
@@ -279,55 +277,6 @@ const isOnElement = (decl) => decl.selector === '&';
 /** How the import names the element: its class (the selector's), or its key when it has no class (and so no layout CSS). */
 const nameOf = (component) => component.classNames[0] ?? component.key;
 // ── reading the file ──
-/** A layout rule's selector: one element's class. Any other selector is the selectors subject's. */
-const CLASS_SELECTOR = /^\.(\S+)$/;
-/** The rule blocks of the file in order: at the top level, in each `@media`, and in each `@scope`'s `@media`. The preamble layer is skipped. */
-function readRuleBlocks(root) {
-    const blocks = [];
-    const readRules = (container, media) => {
-        for (const node of container.nodes ?? []) {
-            if (node.type === 'rule') {
-                const element = CLASS_SELECTOR.exec(node.selector.trim())?.[1];
-                if (element)
-                    blocks.push(readRuleBlock(element, media, node));
-            }
-            else if (node.type === 'atrule' && media === null) {
-                if (node.name === 'media')
-                    readRules(node, node.params.trim());
-                else if (node.name === 'scope')
-                    readRules(node, null);
-            }
-        }
-    };
-    readRules(root, null);
-    return blocks;
-}
-function readRuleBlock(element, media, rule) {
-    const block = { element, media, rule, declarations: [], targets: new Map() };
-    for (const node of rule.nodes) {
-        if (node.type === 'decl')
-            block.declarations.push(node);
-        else if (node.type === 'atrule' && node.name === 'origami-target' && node.nodes) {
-            const target = node.params.trim();
-            block.targets.set(target, [...(block.targets.get(target) ?? []), ...node.nodes.filter((child) => child.type === 'decl')]);
-        }
-    }
-    return block;
-}
-/** The blocks merged per element and breakpoint, the default scopes first (a breakpoint inherits the default's container type); a target's declarations join the rule's. */
-function mergeScopes(blocks) {
-    const scopes = new Map();
-    for (const block of blocks) {
-        const key = `${block.media ?? ''}\n${block.element}`;
-        const scope = scopes.get(key) ?? { element: block.element, media: block.media, values: new Map(), rulesWithTargets: [] };
-        scopes.set(key, scope);
-        for (const decl of [...block.declarations, ...[...block.targets.values()].flat()])
-            scope.values.set(decl.prop, decl);
-        if (block.targets.size)
-            scope.rulesWithTargets.push(block.rule);
-    }
-    return [...scopes.values()].sort((a, b) => Number(a.media !== null) - Number(b.media !== null));
-}
 // ── reading values (valueDeserializers.ts) ──
 /** A value reads as the import reads it: a site layout variable's token, `var(--name, <fallback>)`, by its fallback (layoutVariables.ts literalOf); `--spx(12)` as `12spx`. */
 function isReadable(spec, value) {

package/dist/rules/site-app/spx-values.js

@@ -0,0 +1,112 @@
+import { createCssFileReporter, mergeLayoutScopes, PREAMBLE_LAYER, readLayoutRuleBlocks, SPX_PROPS, SPX_RESOLVER_TYPES } from "../../rules-api/index.js";
+import { defineRule } from "./define-rule.js";
+const CHECKS = ['invalid_spx_resolver_type', 'invalid_spx_ref_width', 'non_literal_spx_call'];
+/** A literal `--spx()` call as the build compiles it (spx/calls.js CALL): a number, spaces around it. */
+const SPX_LITERAL_CALL = /--spx\(\s*-?(?:\d+(?:\.\d*)?|\.\d+)\s*\)/g;
+export default defineRule({
+    name: 'spx-values',
+    checks: CHECKS,
+    editors: 'all',
+    callbacks: {
+        Program: ({ rulesApi, report }) => checkCssFiles(rulesApi, report),
+    },
+});
+// ── the steps ──
+/** The page's layout.css, style.css and theme.css, each checked on its own. */
+function checkCssFiles(rulesApi, report) {
+    for (const kind of ['layout', 'style', 'theme']) {
+        const root = rulesApi.page.css.files[kind];
+        if (root)
+            checkSpxValues(root, kind, rulesApi, report);
+    }
+}
+/** Each declaration of the file outside the `@function --spx(…)`, in order, with the checks no other rule makes on it. */
+function checkSpxValues(root, kind, rulesApi, report) {
+    const reportInFile = createCssFileReporter(`${kind}.css`, report);
+    const judgedElsewhere = getJudgedElsewhere(root, kind, rulesApi);
+    root.walkDecls((declaration) => {
+        if (isInSpxFunction(declaration, rulesApi))
+            return;
+        const judged = judgedElsewhere.has(declaration);
+        // css-layout-properties asks the last value only for a number (CONV-layoutParser.ts:417); the --spx() calls are checked on every
+        // declaration, as it takes some properties' values as they are (position, align-items)
+        if (judged && kind === 'layout')
+            checkRefWidth(declaration, 'number', reportInFile);
+        if (!judged)
+            checkResolverType(declaration, reportInFile);
+        if (!judged)
+            checkRefWidth(declaration, 'any', reportInFile);
+        checkSpxCalls(declaration, reportInFile);
+    });
+}
+/** The declarations another rule judges, as the import reads them: in layout.css, css-layout-properties' (the last of each property per
+ * element and breakpoint, its rules merged as it reads them: readRuleBlocks, mergeScopes; not an spx context with an empty value, which it
+ * leaves to its empty-value row); in theme.css, theme-root's (the last spx property of a `:root` rule that holds only the spx context, with
+ * no preset, outside a `@mixin`: checkThemeRoot). None in style.css. */
+function getJudgedElsewhere(root, kind, rulesApi) {
+    if (kind === 'layout')
+        return getLastLayoutValues(root);
+    const judged = new Set();
+    if (kind === 'theme')
+        root.walkRules((rule) => {
+            if (rule.selector.trim() !== ':root' || isInPreamble(rule, rulesApi) || rulesApi.getEnclosingAtRules(rule).some(({ name }) => name === 'mixin'))
+                return;
+            const declarations = rule.nodes.filter((node) => node.type === 'decl');
+            if (!declarations.every(({ prop }) => SPX_PROPS.includes(prop)))
+                return;
+            for (const prop of SPX_PROPS) {
+                const last = declarations.filter((declaration) => declaration.prop === prop).at(-1);
+                if (last)
+                    judged.add(last);
+            }
+        });
+    return judged;
+}
+/** css-layout-properties' view of layout.css, read with the same shared merge (readLayoutRuleBlocks, mergeLayoutScopes): the last
+ * declaration of each property per element and breakpoint. */
+function getLastLayoutValues(root) {
+    return new Set(mergeLayoutScopes(readLayoutRuleBlocks(root)).flatMap(({ values }) => {
+        const hasEmptySpx = SPX_PROPS.some((prop) => values.get(prop)?.value.trim() === '');
+        return [...values.values()].filter(({ prop }) => !hasEmptySpx || !SPX_PROPS.includes(prop) || values.get(prop).value.trim() === '');
+    }));
+}
+/** Reports a `--spx-resolver-type` that isn't scale or fixed (OUR-028). */
+function checkResolverType(declaration, reportInFile) {
+    if (declaration.prop !== '--spx-resolver-type' || SPX_RESOLVER_TYPES.includes(declaration.value.trim()))
+        return;
+    reportInFile(declaration, 'invalid_spx_resolver_type', `${describeDeclaration(declaration)}: write scale or fixed.`);
+}
+/** Reports a `--spx-ref-width` that isn't a number above 0 (OUR-029); `'number'`: only a number at or below 0, as css-layout-properties
+ * reports one that isn't a number (CONV-layoutParser.ts:417) or is empty (:430). */
+function checkRefWidth(declaration, values, reportInFile) {
+    if (declaration.prop !== '--spx-ref-width')
+        return;
+    const value = declaration.value.trim();
+    const isNumber = value !== '' && Number.isFinite(Number(value));
+    if (isNumber && Number(value) > 0)
+        return;
+    if (values === 'number' && !isNumber)
+        return;
+    reportInFile(declaration, 'invalid_spx_ref_width', `${describeDeclaration(declaration)}: write the reference width as a number above 0, like 1280.`);
+}
+/** Reports a `--spx()` call whose argument isn't a number as written (OUR-030). */
+function checkSpxCalls(declaration, reportInFile) {
+    if (!declaration.value.replace(SPX_LITERAL_CALL, '').includes('--spx('))
+        return;
+    reportInFile(declaration, 'non_literal_spx_call', `${describeDeclaration(declaration)}: --spx() takes a number as written, like --spx(16), not a var or an expression.`);
+}
+// ── reading the CSS ──
+/** Whether the rule is in the `@layer spx-preamble { … }` block the export writes, which theme-root skips. */
+const isInPreamble = (node, rulesApi) => rulesApi.getEnclosingAtRules(node).some(({ name, params }) => name === 'layer' && params.trim() === PREAMBLE_LAYER);
+/** Whether the declaration is in the `@function --spx(…)` the export's preamble defines, which the build removes (spxPlugin) before it
+ * walks the declarations. */
+const isInSpxFunction = (declaration, rulesApi) => rulesApi.getEnclosingAtRules(declaration).some(({ name, params }) => name === 'function' && params.trimStart().startsWith('--spx('));
+// ── reporting ──
+/** '`--spx-ref-width: 0` in `.comp-a`': the rule it's in, through an `@origami-target` block. */
+function describeDeclaration(declaration) {
+    let rule = declaration.parent;
+    while (rule && rule.type !== 'rule' && rule.type !== 'root')
+        rule = rule.parent;
+    const where = rule?.type === 'rule' ? ` in \`${rule.selector.trim()}\`` : '';
+    return `\`${declaration.prop}: ${declaration.value.trim()}\`${where}`;
+}

package/dist/rules-api/index.js

@@ -4,4 +4,4 @@ export { createCssFileReporter, describeAtRule, reportCssProblem } from "./repor
 export { bare, getAttribute, getExpression, getKey, getName, getObject, getProperties, getCallbackKind, getParamReadKind, getProperty, isBound, isOneEditAway, isRecord, isReservedAttribute, isStructure, isReadByImport, ownerOf, } from "../shared/utils.js";
 export { BUILDERS, CATALOG_FONTS, CALLBACK_PROP, DATA_KEY, ELEMENT_PROPS, EVENT_ATTRIBUTE, GLOBAL_SECTIONS, INSTANCE_PROPS, INTERACTIONS_PACKAGES, LAYER_ATTRIBUTES, RESERVED_ATTRIBUTES, RESERVED_ENTRY_KEYS, RUNTIME_ONLY_BUILDERS, RUNTIME_PACKAGE, SECTIONS, SHARED_COMP_ID, STRUCTURE, SYSTEM_PACKAGE, TRANSFORM_BUILDERS, TYPED_BUILDERS, WRAPPERS, } from "../shared/constants.js";
 export { isElementDeclaration } from "./utils.js";
-export { BREAKPOINT_AT_RULES, CONTENT_TARGET, getCssChildren, getDashedId, getLayoutLiteral, getMixinId, getSegmentClass, getSelectorSegments, isCssIdentifier, isPresetProperty, isSafeCssIdentifier, ORIGAMI_TARGETS, OVERFLOW_TARGET, PREAMBLE_LAYER, readFontShorthand, readSegment } from "../shared/css.js";
+export { BREAKPOINT_AT_RULES, CONTENT_TARGET, getCssChildren, getDashedId, getLayoutLiteral, getMixinId, getSegmentClass, getSelectorSegments, isCssIdentifier, isPresetProperty, isSafeCssIdentifier, mergeLayoutScopes, ORIGAMI_TARGETS, OVERFLOW_TARGET, PREAMBLE_LAYER, readFontShorthand, readLayoutRuleBlocks, readSegment, SPX_PROPS, SPX_RESOLVER_TYPES } from "../shared/css.js";

package/dist/shared/css.js

@@ -186,3 +186,56 @@ export function getSegmentClass(segment) {
     const { base, unread } = readSegment(segment);
     return base === undefined || unread ? null : base;
 }
+// ── layout.css, as the import reads it (layoutParser.ts) ──
+/** The spx context: the reference an element's or the theme's `--spx()` sizes scale by (spxTransformer.ts SPX_PROPS), and the resolvers it takes. */
+export const SPX_PROPS = ['--spx-ref-width', '--spx-resolver-type'];
+export const SPX_RESOLVER_TYPES = ['scale', 'fixed'];
+/** A layout rule's selector, as the import reads one: one element's class. */
+const LAYOUT_CLASS_SELECTOR = /^\.(\S+)$/;
+/** layout.css's rule blocks in order, as the import reads them: at the top level, in each `@media`, and in each `@scope`'s `@media`. The preamble layer is skipped. */
+export function readLayoutRuleBlocks(root) {
+    const blocks = [];
+    const readRules = (container, media) => {
+        for (const node of container.nodes ?? []) {
+            if (node.type === 'rule') {
+                const element = LAYOUT_CLASS_SELECTOR.exec(node.selector.trim())?.[1];
+                if (element)
+                    blocks.push(readLayoutRuleBlock(element, media, node));
+            }
+            else if (node.type === 'atrule' && media === null) {
+                if (node.name === 'media')
+                    readRules(node, node.params.trim());
+                else if (node.name === 'scope')
+                    readRules(node, null);
+            }
+        }
+    };
+    readRules(root, null);
+    return blocks;
+}
+function readLayoutRuleBlock(element, media, rule) {
+    const block = { element, media, rule, declarations: [], targets: new Map() };
+    for (const node of rule.nodes) {
+        if (node.type === 'decl')
+            block.declarations.push(node);
+        else if (node.type === 'atrule' && node.name === 'origami-target' && node.nodes) {
+            const target = node.params.trim();
+            block.targets.set(target, [...(block.targets.get(target) ?? []), ...node.nodes.filter((child) => child.type === 'decl')]);
+        }
+    }
+    return block;
+}
+/** The blocks merged per element and breakpoint, the default scopes first (a breakpoint inherits the default's container type); a target's declarations join the rule's. */
+export function mergeLayoutScopes(blocks) {
+    const scopes = new Map();
+    for (const block of blocks) {
+        const key = `${block.media ?? ''}\n${block.element}`;
+        const scope = scopes.get(key) ?? { element: block.element, media: block.media, values: new Map(), rulesWithTargets: [] };
+        scopes.set(key, scope);
+        for (const decl of [...block.declarations, ...[...block.targets.values()].flat()])
+            scope.values.set(decl.prop, decl);
+        if (block.targets.size)
+            scope.rulesWithTargets.push(block.rule);
+    }
+    return [...scopes.values()].sort((a, b) => Number(a.media !== null) - Number(b.media !== null));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/origami-lint",
-  "version": "1.34.36",
+  "version": "1.34.38",
   "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.14.0"
+    "@wix/origami-bi": "0.15.0"
   },
   "devDependencies": {
     "@types/node": "^22.0.0",
@@ -54,5 +54,5 @@
       ]
     }
   },
-  "falconPackageHash": "5ed1f78b0c887661ab15c42ac1bb33758bdc0b4f1afd67d94b64c989"
+  "falconPackageHash": "c431ea5cde0e620296c9af3b1ba90bbaaf1d6d4167b10bc3d93465b0"
 }