@wix/origami-lint 0.0.0-stage → 1.34.2

package/dist/rules/allowed-imports.js

@@ -0,0 +1,109 @@
+// The "allowed-imports" subject of the converter rules. Also: nothing is imported from @wix/interact or @wix/motion-presets: since
+// converter 0.80 a page's interactions live in servicesConfigs/interactions.ts, and structure.jsx can't use these packages (0.86
+// refuses a tag from them, parseJsx.ts:471, identity.ts:80; a call is free code, and fn() / ctx() refuse them as a source).
+import path from 'node:path';
+import { CSS_FILES, JSX_FILES } from "../page-model/index.js";
+import { BUILDERS, RUNTIME_ONLY_BUILDERS, RUNTIME_PACKAGE } from "../rules-api/index.js";
+import { GLOBAL_COMPONENTS, GLOBAL_COMPONENTS_FOLDER, GLOBAL_FOLDER, SITE_SRC } from "../shared/site-files-tree-mapping.js";
+import { defineRule } from "./define-rule.js";
+/** The interactions packages, which the import reserves: structure.jsx imports nothing from them. Matched by source, not by name: `Interact` from @site/site-code is the site's own. */
+const INTERACTIONS_PACKAGES = ['interactReact', 'interact', 'motionPresets'];
+const SOURCE_HINT = `Only packages, files in ${path.posix.basename(GLOBAL_FOLDER)}/, and ${CSS_FILES.map((file) => `'./${file}'`).join(' or ')} can be.`;
+export default defineRule({
+    name: 'allowed-imports',
+    editors: 'all',
+    callbacks: {
+        ImportDeclaration: (input) => {
+            if (!hasAllowedSource(input))
+                return;
+            if (!isNotInteractionsPackage(input))
+                return;
+            checkGlobalComponentImport(input);
+            checkBuilderImports(input);
+        },
+    },
+});
+// ── the steps ──
+function hasAllowedSource({ node, rulesApi, report }) {
+    const source = node.source.value;
+    if (isAllowedSource(source, rulesApi.page.jsxFile))
+        return true;
+    report({ loc: node.loc, message: `\`${source}\` can't be imported. ${SOURCE_HINT}` });
+    return false;
+}
+/** Reports an import from @wix/interact or @wix/motion-presets; an `import type` is erased, so it passes. */
+function isNotInteractionsPackage({ node, rulesApi, report }) {
+    const source = node.source.value;
+    const kind = rulesApi.getImportKind(source);
+    if (!kind || !INTERACTIONS_PACKAGES.includes(kind) || (node.specifiers.length > 0 && getValueSpecifiers(node).length === 0))
+        return true;
+    report({ loc: node.loc, message: `\`${source}\` can't be imported: a page's interactions go in its servicesConfigs/interactions.ts, with the element's id as \`key\`. Remove the import and any <Interaction> tag around an element (keep the element).` });
+    return false;
+}
+/** An import that reaches global/components must be `import <Folder> from '…/global/components/<Folder>'`, as the converter reads it. */
+function checkGlobalComponentImport({ node, rulesApi, report }) {
+    const source = node.source.value;
+    const { jsxFile } = rulesApi.page;
+    const folder = getGlobalComponentFolder(source, jsxFile);
+    if (!folder)
+        return;
+    if (node.specifiers.length === 0) {
+        report({ loc: node.loc, message: `${source} is imported without a name. Import a global component under its folder's name: \`import ${folder} from '${getGlobalComponentImportPath(folder, jsxFile)}'\`, and write \`<${folder}>\`.` });
+    }
+    for (const specifier of getValueSpecifiers(node)) {
+        const name = specifier.type === 'ImportNamespaceSpecifier' ? '*' : specifier.local.name;
+        if (withoutLeadingDots(source) === `${GLOBAL_COMPONENTS}/${name}`)
+            continue;
+        report({
+            loc: specifier.loc,
+            message: `\`${specifier.local.name}\` is imported from ${source}. Import a global component under its folder's name: \`import ${folder} from '${getGlobalComponentImportPath(folder, jsxFile)}'\`, and write \`<${folder}>\`.`,
+        });
+    }
+}
+function checkBuilderImports({ node, rulesApi, report }) {
+    const source = node.source.value;
+    for (const specifier of getValueSpecifiers(node)) {
+        const localName = specifier.local.name;
+        const importedName = rulesApi.getImportedName(specifier);
+        if (source === RUNTIME_PACKAGE) {
+            if (importedName === 'default') {
+                report({ loc: specifier.loc, message: `\`${localName}\` is a default import of ${RUNTIME_PACKAGE}. Import each builder by name: \`import { ctx } from '${RUNTIME_PACKAGE}'\`.` });
+            }
+            else if (BUILDERS.includes(importedName) && localName !== importedName) {
+                report({ loc: specifier.loc, message: `The builder \`${importedName}\` is imported as \`${localName}\`. Import it under its own name: \`import { ${importedName} } from '${RUNTIME_PACKAGE}'\`, and call it as \`${importedName}(…)\`.` });
+            }
+        }
+        else if (RUNTIME_ONLY_BUILDERS.includes(localName)) {
+            report({ loc: specifier.loc, message: `\`${localName}\` is imported from ${source}, but \`${localName}\` is a builder of ${RUNTIME_PACKAGE}. Import it from there: \`import { ${localName} } from '${RUNTIME_PACKAGE}'\`.` });
+        }
+    }
+}
+// ── reading the code ──
+function isAllowedSource(source, jsxFile) {
+    if (!/^[./]/.test(source) && !source.includes(':'))
+        return true;
+    if (CSS_FILES.some((file) => source === `./${file}`))
+        return true;
+    if (!source.startsWith('.'))
+        return false;
+    const ownFolder = path.posix.dirname(jsxFile);
+    const importedPath = path.posix.join(ownFolder, source);
+    return importedPath.startsWith(`${GLOBAL_FOLDER}/`) && !importedPath.startsWith(`${ownFolder}/`);
+}
+/** The converter's canonicalSpecifier (identity.ts). */
+const withoutLeadingDots = (source) => source.replace(/^(\.\.?\/)+/, '');
+/** The global component an import reaches from jsxFile's folder (`../FooterSection`, `…/Header/`, `…/Header/structure.jsx`), or null:
+ * another file in its folder (`…/Header/helper.js`) isn't the component. */
+function getGlobalComponentFolder(source, jsxFile) {
+    if (!source.startsWith('.'))
+        return null;
+    const target = path.posix.join(path.posix.dirname(jsxFile), source);
+    if (!target.startsWith(`${GLOBAL_COMPONENTS_FOLDER}/`))
+        return null;
+    const [folder, ...rest] = target.slice(GLOBAL_COMPONENTS_FOLDER.length + 1).split('/').filter(Boolean);
+    return folder && (rest.length === 0 || (rest.length === 1 && JSX_FILES.includes(rest[0]))) ? folder : null;
+}
+/** The import of a global component as the export writes it: up to src/, then down to its folder. */
+const getGlobalComponentImportPath = (folder, jsxFile) => `${path.posix.relative(path.posix.dirname(jsxFile), SITE_SRC)}/${GLOBAL_COMPONENTS}/${folder}`;
+/** The specifiers that exist at runtime: `import type { … }` and `import { type … }` are erased, so they import no component or builder. */
+const getValueSpecifiers = (node) => node.importKind === 'type' ? [] : node.specifiers.filter((specifier) => specifier.type !== 'ImportSpecifier' || specifier.importKind !== 'type');

package/dist/rules/apply-and-presets.js

@@ -0,0 +1,310 @@
+import { createCssFileReporter, describeAtRule, getCssChildren, getDashedId, getSegmentClass, getSelectorSegments, isPresetProperty, isSafeCssIdentifier } from "../rules-api/index.js";
+import { defineRule } from "./define-rule.js";
+export default defineRule({
+    name: 'apply-and-presets',
+    editors: ['studio2'],
+    callbacks: {
+        Program: ({ rulesApi, report }) => {
+            for (const kind of ['style', 'theme']) {
+                const root = rulesApi.page.css.files[kind];
+                if (root)
+                    checkAppliesAndPresets(root, kind, rulesApi, report);
+            }
+        },
+    },
+});
+// ── the steps ──
+/** Each rule on its own, in the file's order; then the rules that passed, by selector (CONV-styleParser.ts). */
+function checkAppliesAndPresets(root, kind, rulesApi, report) {
+    const reportInFile = createCssFileReporter(`${kind}.css`, report);
+    const elementRules = [];
+    root.walkRules((rule) => {
+        if (isInsideRule(rule))
+            return;
+        const enclosing = rulesApi.getEnclosingAtRules(rule);
+        if (isInMixinResult(enclosing))
+            checkMixinRule(rule, enclosing[0], reportInFile);
+        else if (isElementRulePlace(enclosing)) {
+            const elementRule = checkElementRule(rule, getBreakpointKey(enclosing, kind, rulesApi), enclosing.at(-1), reportInFile);
+            if (elementRule)
+                elementRules.push(elementRule);
+        }
+    });
+    const groups = groupBySelector(elementRules.filter((rule) => !rule.selector.startsWith(':root') && isSelectorParsed(rule.selector)));
+    const componentClasses = new Set(Object.values(rulesApi.page.components).flatMap((component) => component.classNames));
+    for (const group of groups)
+        checkSelectorRules(group, componentClasses, reportInFile);
+    checkOneSelectorPerElement(groups, reportInFile);
+}
+/** An element rule: one `@apply` (CONV-astParser.ts:99), written `--id` with no block (:41), and no style declaration beside it but `--preset…` (:117). */
+function checkElementRule(node, breakpoint, media, reportInFile) {
+    const selector = node.selector.trim();
+    // a flat `--id { }` rule is global-styles' (astParser.ts:87)
+    if (selector.startsWith('--'))
+        return null;
+    const children = getCssChildren(node);
+    const atRules = children.filter((child) => child.type === 'atrule');
+    // another at-rule in a style rule is css-file-nesting's (CONV-astParser.ts:95)
+    if (atRules.some((atRule) => atRule.name !== 'apply'))
+        return null;
+    const where = `rule \`${selector}\``;
+    if (atRules.length > 1)
+        return reportTwoApplies(atRules, where, 'an element takes one global style', reportInFile);
+    const [apply] = atRules;
+    if (apply && !isApplyWritten(apply))
+        return reportApplyForm(apply, where, reportInFile);
+    const declarations = children.filter((child) => child.type === 'decl');
+    const values = declarations.filter((declaration) => !isPresetProperty(declaration.prop));
+    if (apply && values.length > 0) {
+        reportInFile(values[0], `${where}: \`${describeAtRule(apply)}\` can't share a rule with style declarations (${describeProperties(values)}). Put them in the global style (\`@mixin ${apply.params.trim()}\` in theme.css), or under another breakpoint or state; only \`--preset…\` may stay beside the \`@apply\` (tracker CONV-astParser.ts:117).`);
+        return null;
+    }
+    return { node, selector: node.selector, breakpoint, media, apply, presets: declarations.filter((declaration) => isPresetProperty(declaration.prop)), values };
+}
+/** A `@mixin`'s `&` rule, in the import's order: one `@apply` (CONV-astParser.ts:99, at :228), nothing beside it (:117, at :231), written `--id` with no block (:41). */
+function checkMixinRule(node, mixin, reportInFile) {
+    const selector = node.selector.trim();
+    const children = getCssChildren(node);
+    // a rule that doesn't start with `&`, a bare `&`, or a nested rule is global-styles' (CONV-astParser.ts:195, :198, :204)
+    if (!selector.startsWith('&') || selector === '&' || children.some((child) => child.type === 'rule'))
+        return;
+    const atRules = children.filter((child) => child.type === 'atrule');
+    // another at-rule in an `&` rule is css-file-nesting's (CONV-astParser.ts:95, at :211)
+    if (atRules.some((atRule) => atRule.name !== 'apply'))
+        return;
+    const where = `\`${selector}\` of \`@mixin ${mixin.params.trim()}\``;
+    if (atRules.length > 1)
+        return void reportTwoApplies(atRules, where, 'an inner part takes one global style', reportInFile);
+    const [apply] = atRules;
+    if (!apply)
+        return;
+    const declarations = children.filter((child) => child.type === 'decl');
+    if (declarations.length > 0)
+        return reportInFile(declarations[0], `${where}: \`${describeAtRule(apply)}\` can't share a rule with declarations (${describeProperties(declarations)}). Move them into \`@mixin ${apply.params.trim()}\` (tracker CONV-astParser.ts:117).`);
+    if (!isApplyWritten(apply))
+        reportApplyForm(apply, where, reportInFile);
+}
+/** The rules of one selector, by breakpoint: the preset picks (CONV-styleParser.ts:62, :88, :583), one `@apply` (:179), an `@apply` or declarations (:204). */
+function checkSelectorRules(group, componentClasses, reportInFile) {
+    const where = `rule \`${group[0].selector.trim()}\``;
+    const picks = group.flatMap((rule) => rule.presets.flatMap((declaration) => checkPresetName(declaration, where, reportInFile)));
+    if (isInnerPartRule(group[0].selector, componentClasses)) {
+        for (const { declaration } of picks.filter(({ path }) => path.length > 0)) {
+            reportInFile(declaration, `${where}: \`${declaration.prop}\` can't be set on an inner part's rule, which picks only the part's own preset (\`--preset\`). Write it on the component's own rule, with the part's whole path: \`--preset-<part>-${declaration.prop.slice('--preset-'.length)}\` (tracker CONV-styleParser.ts:583).`);
+        }
+    }
+    for (const rules of groupByBreakpoint(group)) {
+        const breakpointPresets = new Set(rules.flatMap((rule) => rule.presets));
+        checkPresetValues(picks.filter(({ declaration }) => breakpointPresets.has(declaration)), where, reportInFile);
+        const breakpointDescription = rules[0].media ? `in \`${describeAtRule(rules[0].media)}\`` : 'outside any @media';
+        const applies = rules.filter((rule) => rule.apply);
+        for (const rule of applies.slice(1)) {
+            reportInFile(rule.apply, `${where}: two \`@apply\` for this selector ${breakpointDescription} (\`${describeAtRule(applies[0].apply)}\` on line ${getLine(applies[0].apply)}, \`${describeAtRule(rule.apply)}\`): keep one (tracker CONV-styleParser.ts:179).`);
+        }
+        const ruleWithValues = rules.find((rule) => rule.values.length > 0);
+        if (applies.length > 0 && ruleWithValues) {
+            const { apply } = applies[0];
+            reportInFile(ruleWithValues.values[0], `${where} has both \`${describeAtRule(apply)}\` (line ${getLine(apply)}) and style declarations ${breakpointDescription}: keep one, or move the declarations into the global style (\`@mixin ${apply.params.trim()}\` in theme.css) (tracker CONV-styleParser.ts:204).`);
+        }
+    }
+}
+/** A `--preset-<path>` names each part as a CSS identifier (CONV-styleParser.ts:62); returns the pick, or none after reporting. */
+function checkPresetName(declaration, where, reportInFile) {
+    if (declaration.prop === '--preset')
+        return [{ declaration, path: [] }];
+    const path = decodePresetPath(declaration.prop.slice('--preset-'.length));
+    if (path.every(isSafeCssIdentifier))
+        return [{ declaration, path }];
+    reportInFile(declaration, `${where}: \`${declaration.prop}\` doesn't name an inner part: write \`--preset-<part>\`, each part a CSS identifier, parts joined by \`-\` and a \`-\` inside a part's name written \`--\` (\`close-button\` → \`--preset-close--button\`) (tracker CONV-styleParser.ts:62).`);
+    return [];
+}
+/** The last pick of each path at one breakpoint is the one the import reads: it has a value (CONV-styleParser.ts:88). */
+function checkPresetValues(picks, where, reportInFile) {
+    const seen = new Set();
+    for (const { declaration, path } of picks.toReversed()) {
+        const key = path.join('|');
+        if (seen.has(key))
+            continue;
+        seen.add(key);
+        if (!declaration.value.trim())
+            reportInFile(declaration, `${where}: \`${declaration.prop}\` has no value. Write a preset name, or remove the declaration to use no preset (tracker CONV-styleParser.ts:88).`);
+    }
+}
+/**
+ * One element (or inner part) takes its default style, and each default preset, from one selector (CONV-styleParser.ts:109): not
+ * `.comp-x .label` and `.comp-x  .label`, not `--preset-label` on `.comp-x` and `--preset` on `.comp-x .label`. Default: outside any
+ * `@media`, with no state. A part is matched by its class name, `.label` with `--preset-label`.
+ */
+function checkOneSelectorPerElement(groups, reportInFile) {
+    const firstStylingRules = new Map();
+    const firstPicks = new Map();
+    for (const group of groups) {
+        const target = getDefaultTarget(group[0].selector);
+        if (target === null)
+            continue;
+        const rules = group.filter((rule) => rule.breakpoint === '');
+        const stylingRule = rules.find((rule) => rule.apply !== undefined || rule.values.length > 0);
+        if (stylingRule) {
+            const first = firstStylingRules.get(target.join(' '));
+            if (first && first.selector !== stylingRule.selector) {
+                reportInFile(stylingRule.node, `\`${stylingRule.selector.trim()}\` and \`${first.selector.trim()}\` (line ${getLine(first.node)}) are one element, and both set its default style: write it under one selector (tracker CONV-styleParser.ts:109).`);
+            }
+            else if (!first)
+                firstStylingRules.set(target.join(' '), stylingRule);
+        }
+        const lastPicks = new Map();
+        for (const declaration of rules.flatMap((rule) => rule.presets)) {
+            const path = getPresetPath(declaration.prop);
+            if (path === null || (target.length > 1 && path.length > 0))
+                continue;
+            lastPicks.set([target[0], ...target.slice(1).map((part) => part.slice(1)), ...path].join('|'), declaration);
+        }
+        for (const [key, declaration] of lastPicks) {
+            const first = firstPicks.get(key);
+            if (!first)
+                firstPicks.set(key, { selector: group[0].selector, declaration });
+            else
+                reportInFile(declaration, `${describePresetOwner(key)}'s preset is picked twice: \`${first.declaration.prop}\` on \`${first.selector.trim()}\` (line ${getLine(first.declaration)}) and \`${declaration.prop}\` on \`${group[0].selector.trim()}\`. Keep one (tracker CONV-styleParser.ts:109).`);
+        }
+    }
+}
+// ── where a rule is ──
+/** Inside another style rule, at any depth (`.a { .b { } }`, `.a { @media (…) { .b { } } }`): css-file-nesting's and global-styles' rows. */
+function isInsideRule(rule) {
+    for (let parent = rule.parent; parent && parent.type !== 'root'; parent = parent.parent) {
+        if (parent.type === 'rule')
+            return true;
+    }
+    return false;
+}
+/** In a top-level `@mixin`'s `@result`, or in one `@media` (or `@scope` → `@media`) in it; deeper is global-styles' (CONV-astParser.ts:254). */
+const isInMixinResult = (enclosing) => enclosing[0]?.name === 'mixin' && enclosing[1]?.name === 'result' && isElementRulePlace(enclosing.slice(2));
+/** At the top of the file, or in one top-level breakpoint: `@media`, or `@scope` → … → `@media`. Anywhere else is css-file-nesting's. */
+const isElementRulePlace = (enclosing) => enclosing.length === 0 || (enclosing.at(-1).name === 'media' && enclosing.slice(0, -1).every((atRule) => atRule.name === 'scope'));
+/** The breakpoint key, as the import resolves it: the query with a named breakpoint replaced by its range from the file's `@custom-media`, spaces collapsed, after its `@scope`s. */
+function getBreakpointKey(enclosing, kind, rulesApi) {
+    return enclosing
+        .map((atRule) => {
+        if (atRule.name === 'scope')
+            return `@scope ${collapseSpaces(atRule.params)}`;
+        const name = rulesApi.getBreakpointName(atRule.params);
+        const declared = name === null ? undefined : rulesApi.getCustomMedia(kind).find((customMedia) => customMedia.name === name);
+        return collapseSpaces(declared?.query ?? atRule.params);
+    })
+        .join(' ');
+}
+// ── reading a selector ──
+/**
+ * Whether a selector's rule is an inner part's (`.comp-x .label`), as the import's parseComponentChain reads it: anything after the
+ * component's class is its inner part, except a component's own class after an ancestor's state (`.comp-y:hover .comp-x` is comp-x's).
+ */
+function isInnerPartRule(selector, componentClasses) {
+    const segments = getSelectorSegments(selector);
+    if (segments === null || segments.length < 2 || !hasComponentClass(segments[0]))
+        return false;
+    const hasAncestorState = hasComponentState(segments[0]);
+    const second = getSegmentClass(segments[1]);
+    const isComponentClass = second !== null && /^\.[^.]+$/.test(second) && componentClasses.has(second.slice(1));
+    return hasAncestorState && isComponentClass ? segments.length > 2 : true;
+}
+/** The element a selector with no state names: its classes ['.comp-x', '.label']; null with a state, or for a selector the import can't parse (the selectors rows'). */
+function getDefaultTarget(selector) {
+    const segments = getSelectorSegments(selector);
+    if (segments === null || segments.length === 0 || !hasComponentClass(segments[0]))
+        return null;
+    if (hasComponentState(segments[0]))
+        return null;
+    return segments.every((segment) => getSegmentClass(segment) === segment) ? segments : null;
+}
+/**
+ * Whether a selector's first segment names a component as parseComponentChain reads it: its class, a class after it aside
+ * (withStateClasses), is a safe identifier. `.comp-x[data-x]` isn't (an attribute is part of the class at 0.83.0): the selectors rows'.
+ */
+function hasComponentClass(segment) {
+    const className = getSegmentClass(segment)?.slice(1);
+    if (className === undefined)
+        return false;
+    return isSafeCssIdentifier(/^[^:[\]"]+$/.test(className) ? className.split('.')[0] : className);
+}
+/**
+ * Whether the import parses the selector (parseSelector, which it runs on a selector's rules before it reads their presets and
+ * `@apply`): one selector, its brackets closed, its first segment a component class. Any other is the selectors rows' (invalidSelector).
+ */
+function isSelectorParsed(selector) {
+    const segments = getSelectorSegments(selector);
+    return segments !== null && segments.length > 0 && hasComponentClass(segments[0]);
+}
+/** Whether a component's segment has a state: `:hover`, or a class after its own (`.comp-x.onSale`, withStateClasses since 0.80.0). */
+const hasComponentState = (segment) => getSegmentClass(segment) !== segment || /^\.[^.:[\]"]+\./.test(segment);
+/** `--preset` → []; `--preset-close--button-icon` → ['close-button', 'icon']; null for a path a part of which isn't an identifier. */
+function getPresetPath(prop) {
+    if (prop === '--preset')
+        return [];
+    const path = decodePresetPath(prop.slice('--preset-'.length));
+    return path.every(isSafeCssIdentifier) ? path : null;
+}
+/** A `--preset-` property's path (css/utils.ts decodePresetPath): a lone `-` ends a part, a doubled `-` is one `-` in a part's name. */
+function decodePresetPath(suffix) {
+    const path = [];
+    let current = '';
+    for (let index = 0; index < suffix.length; index += 1) {
+        if (suffix[index] !== '-')
+            current += suffix[index];
+        else if (suffix[index + 1] === '-') {
+            current += '-';
+            index += 1;
+        }
+        else {
+            path.push(current);
+            current = '';
+        }
+    }
+    path.push(current);
+    return path;
+}
+/** Whether an `@apply` is one dashed id with no block after it (CONV-astParser.ts:41; an empty block, or one with only comments, passes). */
+const isApplyWritten = (apply) => getDashedId(apply.params) !== undefined && getCssChildren(apply).length === 0;
+// ── grouping ──
+/** The rules by selector as written, in the file's order (the import's parseRecords groups by it). */
+function groupBySelector(rules) {
+    const groups = new Map();
+    for (const rule of rules) {
+        const group = groups.get(rule.selector);
+        if (group)
+            group.push(rule);
+        else
+            groups.set(rule.selector, [rule]);
+    }
+    return [...groups.values()];
+}
+/** One selector's rules by breakpoint (groupDeclarationsByBreakpoint). */
+function groupByBreakpoint(rules) {
+    const groups = new Map();
+    for (const rule of rules) {
+        const group = groups.get(rule.breakpoint);
+        if (group)
+            group.push(rule);
+        else
+            groups.set(rule.breakpoint, [rule]);
+    }
+    return [...groups.values()];
+}
+// ── reporting ──
+/** Reports the second `@apply` of one rule (CONV-astParser.ts:99); returns null, as the rule isn't read further. */
+function reportTwoApplies(applies, where, why, reportInFile) {
+    reportInFile(applies[1], `${where}: ${applies.length} \`@apply\` in one rule (${applies.map((apply) => `\`${describeAtRule(apply)}\``).join(', ')}). Keep one: ${why} (tracker CONV-astParser.ts:99).`);
+    return null;
+}
+/** Reports an `@apply` that isn't one dashed id with no block (CONV-astParser.ts:41); returns null, as the rule isn't read further. */
+function reportApplyForm(apply, where, reportInFile) {
+    reportInFile(apply, `${where}: \`${describeAtRule(apply)}\` must name one global style by its dashed id. Write \`@apply --<global-style-id>;\`, with no block after it (tracker CONV-astParser.ts:41).`);
+    return null;
+}
+/** A pick's key → the element it picks the preset of: '.comp-x|label' → '`label` of `.comp-x`'; '.comp-x' → '`.comp-x`'. */
+function describePresetOwner(key) {
+    const [component, ...path] = key.split('|');
+    return path.length > 0 ? `\`${path.join(' ')}\` of \`${component}\`` : `\`${component}\``;
+}
+const describeProperties = (declarations) => declarations.map((declaration) => `\`${declaration.prop}\``).join(', ');
+const getLine = (node) => node.source?.start?.line ?? 1;
+const collapseSpaces = (text) => text.trim().replace(/\s+/g, ' ');