@wix/origami-lint 1.34.28 → 1.34.29

package/dist/rules/index.js

@@ -12,8 +12,9 @@ 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 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, slotAttributes, themeRoot, breakpoints, cssFileNesting, globalStyles, applyAndPresets, bindings, dataValues, cssLayoutProperties, cssSelectors, slotPlacement];
+export const ruleRegistry = [allowedImports, noFreeCode, pageStructure, noAbsoluteSection, themeFontIds, themeFontKnown, slotAttributes, themeRoot, breakpoints, cssFileNesting, globalStyles, applyAndPresets, bindings, dataValues, cssLayoutProperties, cssSelectors, slotPlacement];
 export { defineRule } from "./site-app/define-rule.js";

package/dist/rules/site-app/theme-font-ids.js

@@ -1,71 +1,29 @@
 // Every theme font token (`--wst-heading-1-font: normal normal 700 --spx(88)/1em benzin`) must end in exactly one font id
 // from the Wix font catalog in @wix/origami-fonts: no quotes, commas or fallbacks, the same case. The editor reads that
-// family as one Wix font id and fails the import otherwise. A legacy font, which the editor no longer offers, counts as
-// not in the catalog. A `var(…)` token is left alone.
+// family as one Wix font id. The import keeps any family as written (an unknown id, a quoted one, a list, another case),
+// so this is a warning. A legacy font is in the catalog, and the import takes it. A `var(…)` token is left alone.
 // theme.css isn't a file oxlint lints, so the rule runs on each linted page (a theme change lints every page) and
 // marks the page's start; the message names the token's line in theme.css.
-import { fonts } from '@wix/origami-fonts';
-import { reportCssProblem } from "../../rules-api/index.js";
+import { CATALOG_FONTS, readFontShorthand, reportCssProblem } from "../../rules-api/index.js";
 import { defineRule } from "./define-rule.js";
 const CHECKS = ['invalid_font_id'];
-const FONT_TOKEN = /^--wst-[\w-]+-font$/;
-// The size in a `font` shorthand, with its optional line height: the family follows it. The number's quantifiers
-// never overlap, so a long run of digits that is not a size fails in linear time.
-const SIZE = /^(?:--spx\(.*\)|calc\(.*\)|(?:\d+(?:\.\d*)?|\.\d+)(?:px|em|rem|%|vw|vh|pt)?)(?:\/\S+)?$/i;
-const FONT_IDS = new Set(fonts.filter((font) => font.permissions !== 'legacy').map((font) => font.id));
 export default defineRule({
     name: 'theme-font-ids',
     checks: CHECKS,
     editors: 'all',
+    severity: 'warn',
     callbacks: {
         Program: (input) => {
-            for (const token of getFontTokens(input))
+            for (const token of input.rulesApi.getThemeFontTokens())
                 hasCatalogFontId(token, input);
         },
     },
 });
 // ── the steps ──
-/** The theme's font tokens: `--wst-…-font`. */
-function getFontTokens({ rulesApi }) {
-    return rulesApi.getThemeTokens().filter(({ name }) => FONT_TOKEN.test(name));
-}
 /** Reports a font token whose family isn't exactly one id from the catalog. A `var(…)` or a value without a family isn't checked. */
 function hasCatalogFontId({ name, value, line }, { report }) {
-    const family = getFontFamily(value);
-    if (family === undefined || FONT_IDS.has(family))
+    const family = readFontShorthand(value)?.family;
+    if (family === undefined || CATALOG_FONTS.has(family))
         return;
     reportCssProblem(report, 'theme.css', line, 'invalid_font_id', `${name} must name exactly one Wix font id from the catalog; found ${family}. Run \`wix origami search-font --font <name>\` for the id.`);
 }
-// ── reading a font value ──
-/** A value split on top-level whitespace, so `--spx(16)/1.3em` stays one part. */
-function splitParts(value) {
-    const parts = [];
-    let depth = 0;
-    let current = '';
-    for (const char of value) {
-        if (char === '(')
-            depth++;
-        else if (char === ')')
-            depth--;
-        if (depth === 0 && /\s/.test(char)) {
-            if (current)
-                parts.push(current);
-            current = '';
-        }
-        else
-            current += char;
-    }
-    if (current)
-        parts.push(current);
-    return parts;
-}
-/** A font shorthand's family as written, after its last size; undefined for `var(…)` or no family. */
-function getFontFamily(value) {
-    if (value.includes('var('))
-        return undefined;
-    const parts = splitParts(value);
-    const size = parts.findLastIndex((part) => SIZE.test(part));
-    if (size === -1 || size === parts.length - 1)
-        return undefined;
-    return parts.slice(size + 1).join(' ');
-}

package/dist/rules/site-app/theme-font-known.js

@@ -0,0 +1,30 @@
+// A theme font token (`--wst-heading-1-font: normal normal 700 --spx(88)/1em benzin`) names a weight its font has, in
+// the Wix font catalog's weights (@wix/origami-fonts); tracker row KIT-fontCatalog. The import keeps the value as written,
+// so a weight the font lacks only renders worse (the browser synthesizes it): a warning. A font that isn't a catalog id is
+// theme-font-ids' warning, not checked again here; nor is a `var(…)`, or `bolder` / `lighter`, which depend on the parent.
+import { CATALOG_FONTS, readFontShorthand, reportCssProblem } from "../../rules-api/index.js";
+import { defineRule } from "./define-rule.js";
+const CHECKS = ['missing_font_weight'];
+export default defineRule({
+    name: 'theme-font-known',
+    checks: CHECKS,
+    editors: ['studio2'],
+    severity: 'warn',
+    callbacks: {
+        Program: checkThemeFontWeights,
+    },
+});
+// ── the steps ──
+/** Each theme font token's weight. */
+function checkThemeFontWeights(input) {
+    for (const token of input.rulesApi.getThemeFontTokens())
+        checkFontTokenWeight(token, input);
+}
+/** Reports a font token whose weight isn't one of its catalog font's weights. */
+function checkFontTokenWeight({ name, value, line }, { report }) {
+    const font = readFontShorthand(value);
+    const weights = font && CATALOG_FONTS.get(font.family)?.weights;
+    if (!font || font.weight === undefined || !weights || weights.includes(font.weight))
+        return;
+    reportCssProblem(report, 'theme.css', line, 'missing_font_weight', `${name} uses weight ${font.weight}, which ${font.family} does not have; the browser will synthesize it. Write one of its weights: ${weights.join(', ')} (rule KIT-fontCatalog).`);
+}

package/dist/rules-api/index.js

@@ -2,5 +2,5 @@
 export { createRulesApi, getOrCreateRulesApi } from "./rules-api.js";
 export { createCssFileReporter, describeAtRule, reportCssProblem } from "./report.js";
 export { bare, getAttribute, getExpression, getKey, getName, getObject, getProperties, getCallbackKind, getParamReadKind, getProperty, isBound, isOneEditAway, isRecord, isReservedAttribute, isStructure, isReadByImport, ownerOf, } from "../shared/utils.js";
-export { BUILDERS, CALLBACK_PROP, DATA_KEY, ELEMENT_PROPS, EVENT_ATTRIBUTE, GLOBAL_SECTIONS, INSTANCE_PROPS, 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 { BREAKPOINT_AT_RULES, CONTENT_TARGET, getCssChildren, getDashedId, getMixinId, getSegmentClass, getSelectorSegments, isCssIdentifier, isPresetProperty, isSafeCssIdentifier, ORIGAMI_TARGETS, OVERFLOW_TARGET, PREAMBLE_LAYER, readSegment } from "../shared/css.js";
+export { BUILDERS, CATALOG_FONTS, CALLBACK_PROP, DATA_KEY, ELEMENT_PROPS, EVENT_ATTRIBUTE, GLOBAL_SECTIONS, INSTANCE_PROPS, 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 { BREAKPOINT_AT_RULES, CONTENT_TARGET, getCssChildren, getDashedId, getMixinId, getSegmentClass, getSelectorSegments, isCssIdentifier, isPresetProperty, isSafeCssIdentifier, ORIGAMI_TARGETS, OVERFLOW_TARGET, PREAMBLE_LAYER, readFontShorthand, readSegment } from "../shared/css.js";

package/dist/rules-api/rules-api.js

@@ -6,7 +6,7 @@ import { GLOBAL_COMPONENTS_FOLDER } from "../shared/site-files-tree-mapping.js";
 import { models, pageId } from "../bi/stats.js";
 import { readPage } from "../page-model/index.js";
 import { getAttributeElements as getHeldElements, getAttributeValue, getChildren, getId, getImport, getImportKind, getImportedName, getPropNames, getSlot, getTagName, getType, hasDataAttributes, isTypeScript } from "../shared/utils.js";
-import { readBreakpointName, readCustomMedia, readThemeTokens } from "../shared/css.js";
+import { readBreakpointName, readCustomMedia, readThemeFontTokens, readThemeTokens } from "../shared/css.js";
 import { WRAPPERS } from "../shared/constants.js";
 import { getEnclosingAtRules, isBaseDeclaration } from "./utils.js";
 /** Theme lines come from @apply inside style.css, so style.css's own lines usually come after them. */
@@ -35,6 +35,7 @@ export function createRulesApi(page) {
         getCss,
         getBaseCss: (component, property) => getCss(component, property).filter(isBaseDeclaration).at(-1),
         getThemeTokens: () => readThemeTokens(page.css.files.theme),
+        getThemeFontTokens: () => readThemeFontTokens(page.css.files.theme),
         getCustomMedia: (kind) => readCustomMedia(page.css.files[kind]),
         getBreakpointName: readBreakpointName,
         getEnclosingAtRules,

package/dist/shared/constants.js

@@ -1,3 +1,7 @@
+// The constants more than one part reads: the groups of element types, the packages' names, and what the converter reserves on a tag (reservedAttributes.ts). A rule imports them from rules-api/index.ts; a part from here.
+import { fonts } from '@wix/origami-fonts';
+/** The Wix font catalog (@wix/origami-fonts) by id, legacy fonts too: the import takes a legacy font as it takes any other. */
+export const CATALOG_FONTS = new Map(fonts.map((font) => [font.id, font]));
 /** Any section: rules that don't care which one. */
 export const SECTIONS = ['section', 'header', 'footer'];
 /** A page's reference to a global component (`<HeaderSection_x sharedCompId="…" />`). */

package/dist/shared/css.js

@@ -18,6 +18,13 @@ const BASE_CLASS = /^\.[^:[\]"]+/;
 const FUNCTIONAL_PSEUDO = /^:[A-Za-z-]+\([^)]*\)/;
 /** A class after the first: a state (`&.onSale`). */
 const STATE_CLASS = /^\.[^.:[\]"]+/;
+/** A theme font token: `--wst-heading-1-font`. */
+const THEME_FONT_TOKEN = /^--wst-[\w-]+-font$/;
+// The size in a `font` shorthand, with its optional line height: the family follows it. The number's quantifiers
+// never overlap, so a long run of digits that is not a size fails in linear time.
+const FONT_SIZE = /^(?:--spx\(.*\)|calc\(.*\)|(?:\d+(?:\.\d*)?|\.\d+)(?:px|em|rem|%|vw|vh|pt)?)(?:\/\S+)?$/i;
+/** A number weight in a `font` shorthand: before the size, only the weight is a bare number. */
+const FONT_WEIGHT = /^\d+(?:\.\d+)?$/;
 const PSEUDO_CLASS = /^:[A-Za-z-]+/;
 const ATTRIBUTE = /^\[[^\]]*\]/;
 /** Every `--name: value` in a file, wherever it's declared, in order. No file → none. */
@@ -28,6 +35,8 @@ export function readThemeTokens(file) {
     });
     return tokens;
 }
+/** The theme's font tokens (`--wst-heading-1-font: …`), as readThemeTokens reads them. */
+export const readThemeFontTokens = (file) => readThemeTokens(file).filter(({ name }) => THEME_FONT_TOKEN.test(name));
 /** Every `@custom-media --name (query)` at a file's top level, in order, as the import reads them; theme.css's are the site's breakpoints. No file → none. */
 export function readCustomMedia(file) {
     if (file === undefined)
@@ -43,6 +52,51 @@ function parseCustomMedia(params) {
     const [, name = '', query = ''] = /^(\S*)\s*([\s\S]*)$/.exec(params.trim()) ?? [];
     return { name, query };
 }
+/** A `font` shorthand's weight and family; undefined for a `var(…)` or a value with no family after its size. */
+export function readFontShorthand(value) {
+    if (value.includes('var('))
+        return undefined;
+    const parts = splitFontParts(value);
+    const size = parts.findLastIndex((part) => FONT_SIZE.test(part));
+    if (size === -1 || size === parts.length - 1)
+        return undefined;
+    return { weight: readFontWeight(parts.slice(0, size)), family: parts.slice(size + 1).join(' ') };
+}
+/** The weight among a shorthand's parts before its size: a number, `bold`, or 400 (`normal`, or none written). */
+function readFontWeight(parts) {
+    for (const part of parts) {
+        if (FONT_WEIGHT.test(part))
+            return Number(part);
+        const keyword = part.toLowerCase();
+        if (keyword === 'bold')
+            return 700;
+        if (keyword === 'bolder' || keyword === 'lighter')
+            return undefined;
+    }
+    return 400;
+}
+/** A value split on top-level whitespace, so `--spx(16)/1.3em` stays one part. */
+function splitFontParts(value) {
+    const parts = [];
+    let depth = 0;
+    let current = '';
+    for (const char of value) {
+        if (char === '(')
+            depth++;
+        else if (char === ')')
+            depth--;
+        if (depth === 0 && /\s/.test(char)) {
+            if (current)
+                parts.push(current);
+            current = '';
+        }
+        else
+            current += char;
+    }
+    if (current)
+        parts.push(current);
+    return parts;
+}
 /** A container's children, comments aside; none for a node with no block. */
 export const getCssChildren = (node) => (node.nodes ?? []).filter((child) => child.type !== 'comment');
 /** Whether a property picks a preset (css/utils.ts `isPresetProperty`): `--preset` (the rule's own element) or `--preset-<part path>`. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/origami-lint",
-  "version": "1.34.28",
+  "version": "1.34.29",
   "description": "Offline lint for an exported Origami site: lints the pages that changed since the last passing run",
   "type": "module",
   "bin": {
@@ -52,5 +52,5 @@
       ]
     }
   },
-  "falconPackageHash": "97fa36a3eb31cb9ae9a81f66fff2679fde030431f3b1767dcaf5154a"
+  "falconPackageHash": "2c36ab85acce27a2dc10d53da990328e863a2935e38f2d82a6dd7467"
 }