@plumeria/codemod 18.2.18 → 18.2.20

package/dist/transforms/from-plumeria.js

@@ -1,11 +1,29 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.__private = void 0;
+exports.__private = exports.compositionSignature = void 0;
 exports.extractPlumeriaThemes = extractPlumeriaThemes;
+exports.extractPlumeriaStatics = extractPlumeriaStatics;
 exports.extractPlumeriaAnimations = extractPlumeriaAnimations;
 exports.convertPlumeriaModule = convertPlumeriaModule;
 const parser_1 = require("@typescript-eslint/parser");
 const zss_engine_1 = require("zss-engine");
+const compositionSignature = (classNames) => classNames.join('|');
+exports.compositionSignature = compositionSignature;
+const toIdent = (value) => value.replace(/[^A-Za-z0-9-]/g, '');
+const capitalize = (value) => `${value.charAt(0).toUpperCase()}${value.slice(1)}`;
+const camelJoin = (names) => names
+    .map((name, index) => {
+    const camel = name
+        .split('-')
+        .map((part, position) => (position === 0 ? part : capitalize(part)))
+        .join('');
+    return index === 0 ? camel : capitalize(camel);
+})
+    .join('');
+const markerVariable = (id, pseudo) => {
+    const hash = (0, zss_engine_1.genBase36Hash)({ [id]: pseudo }, 1, 8);
+    return `--${hash}-${toIdent(id)}-${toIdent(pseudo.split('(')[0])}`;
+};
 const propertyKey = (node) => {
     if (!node)
         return undefined;
@@ -35,11 +53,37 @@ const lookup = (path, values) => {
     }
     return value;
 };
+const markerArguments = (node, method, values) => {
+    if (node?.type !== 'CallExpression')
+        return undefined;
+    const path = memberPath(node.callee);
+    if (path?.length !== 2 || path[1] !== method)
+        return undefined;
+    const id = evaluate(node.arguments[0], values);
+    const pseudo = evaluate(node.arguments[1], values);
+    return typeof id === 'string' && typeof pseudo === 'string'
+        ? { id, pseudo }
+        : undefined;
+};
 const evaluate = (node, values) => {
     if (!node)
         return undefined;
+    if (node.type === 'CallExpression') {
+        const extended = markerArguments(node, 'extended', values);
+        return extended
+            ? `@container style(${markerVariable(extended.id, extended.pseudo)}: 1)`
+            : undefined;
+    }
     if (node.type === 'Literal')
         return node.value;
+    if (node.type === 'UnaryExpression') {
+        if (node.operator !== '-' && node.operator !== '+')
+            return undefined;
+        const operand = evaluate(node.argument, values);
+        if (typeof operand !== 'number')
+            return undefined;
+        return node.operator === '-' ? -operand : operand;
+    }
     if (node.type === 'Identifier')
         return values.get(node.name);
     if (node.type === 'MemberExpression') {
@@ -78,7 +122,29 @@ const evaluate = (node, values) => {
     }
     return undefined;
 };
-exports.__private = { propertyKey, memberPath, evaluate };
+const bindsElsewhere = (ast, name, declared) => {
+    const skipped = new Set(['loc', 'range', 'parent']);
+    const visit = (node, parent) => {
+        if (!node || typeof node !== 'object' || node === declared)
+            return false;
+        if (Array.isArray(node))
+            return node.some((child) => visit(child, parent));
+        if (typeof node.type !== 'string')
+            return false;
+        if (node.type === 'Identifier' && node.name === name) {
+            if (parent?.type === 'ExportSpecifier')
+                return false;
+            if (parent?.type === 'MemberExpression' && parent.property === node)
+                return !!parent.computed;
+            if (parent?.type === 'Property' && parent.key === node)
+                return !!parent.computed;
+            return true;
+        }
+        return Object.keys(node).some((key) => !skipped.has(key) && visit(node[key], node));
+    };
+    return visit(ast, undefined);
+};
+exports.__private = { propertyKey, memberPath, evaluate, bindsElsewhere };
 const isCall = (node, method) => {
     if (node?.type !== 'CallExpression')
         return false;
@@ -192,6 +258,41 @@ const emitGlobalObject = (selector, object) => {
     const content = [...declarations, ...children].join('\n');
     return `${selector} {\n${content}\n}`;
 };
+function extractPlumeriaStatics(source, externalValues = {}) {
+    const ast = (0, parser_1.parse)(source, {
+        sourceType: 'module',
+        ecmaFeatures: { jsx: true },
+        loc: true,
+        range: true,
+    });
+    const values = new Map(Object.entries(externalValues));
+    const bindings = {};
+    const reports = [];
+    for (const raw of ast.body) {
+        const statement = declarationOf(raw);
+        if (statement?.type !== 'VariableDeclaration')
+            continue;
+        for (const declaration of statement.declarations) {
+            if (declaration.id.type !== 'Identifier' ||
+                !isCall(declaration.init, 'createStatic'))
+                continue;
+            const value = evaluate(declaration.init.arguments[0], values);
+            if (value && typeof value === 'object') {
+                values.set(declaration.id.name, value);
+                bindings[declaration.id.name] = value;
+            }
+            else {
+                reports.push({
+                    line: declaration.init.loc.start.line,
+                    column: declaration.init.loc.start.column + 1,
+                    kind: 'dynamic-create-static',
+                    hint: '`createStatic` must contain values that can be written into CSS.',
+                });
+            }
+        }
+    }
+    return { bindings, reports };
+}
 function extractPlumeriaAnimations(source, externalValues = {}) {
     const ast = (0, parser_1.parse)(source, {
         sourceType: 'module',
@@ -265,7 +366,7 @@ function extractPlumeriaAnimations(source, externalValues = {}) {
         reports,
     };
 }
-function convertPlumeriaModule(source, externalValues = {}) {
+function convertPlumeriaModule(source, externalValues = {}, compositions = []) {
     const ast = (0, parser_1.parse)(source, {
         sourceType: 'module',
         ecmaFeatures: { jsx: true },
@@ -311,7 +412,7 @@ function convertPlumeriaModule(source, externalValues = {}) {
             if (isCall(declaration.init, 'create')) {
                 const object = declaration.init.arguments[0];
                 if (object?.type === 'ObjectExpression') {
-                    creates.push({ binding: declaration.id.name, object });
+                    creates.push({ binding: declaration.id.name, object, declaration });
                 }
                 else {
                     report(declaration.init, 'dynamic-create', '`css.create` must receive an object literal.');
@@ -321,21 +422,75 @@ function convertPlumeriaModule(source, externalValues = {}) {
     }
     if (creates.length === 0)
         return null;
-    if (creates.length > 1) {
-        report(creates[1].object, 'multiple-create', 'Move each `css.create` call to its own module before exporting to CSS Modules.');
-    }
-    const { binding, object } = creates[0];
-    const rules = [];
+    const { binding } = creates[0];
+    const groups = [];
+    let rules = [];
+    const openGroup = (name) => {
+        rules = [];
+        groups.push({ name, rules });
+    };
     const keys = [];
+    const aliases = {};
+    const merges = {};
+    const members = new Map();
+    const footprints = new Map();
+    const track = (className) => {
+        const map = new Map();
+        footprints.set(className, map);
+        return { root: `.${className}`, map };
+    };
+    const conflicts = (first, second) => {
+        const left = footprints.get(first);
+        const right = footprints.get(second);
+        if (!left || !right)
+            return true;
+        for (const [bucket, properties] of left) {
+            const other = right.get(bucket);
+            if (!other)
+                continue;
+            for (const property of properties)
+                if (other.has(property))
+                    return true;
+        }
+        return false;
+    };
+    const taken = new Set();
     const functions = {};
-    const emit = (style, selector, wrappers = [], scope = values) => {
+    const classNameFor = (owner, key) => {
+        if (!taken.has(key))
+            return key;
+        const namespaced = `${owner}-${key}`;
+        let candidate = namespaced;
+        let suffix = 2;
+        while (taken.has(candidate))
+            candidate = `${namespaced}-${suffix++}`;
+        return candidate;
+    };
+    const bucketOf = (wrappers, suffix) => `${wrappers.join('\u0000')}\u0001${suffix}`;
+    const selectorRoot = (selector) => {
+        const match = /^\.[A-Za-z0-9_-]+(?::not\(#\\#\))?/.exec(selector);
+        return match ? match[0].length : 0;
+    };
+    const emit = (style, selector, wrappers = [], scope = values, phase = 'both', footprint, restrict) => {
         if (style?.type !== 'ObjectExpression') {
             report(style, 'dynamic-style', 'Only static style objects are exported.');
             return;
         }
+        const restrictRoot = restrict ? selectorRoot(selector) : 0;
         const declarations = [];
         const nested = [];
+        const markers = [];
         for (const property of style.properties) {
+            if (property.type === 'SpreadElement') {
+                const marker = markerArguments(property.argument, 'marker', scope);
+                if (marker) {
+                    markers.push({
+                        pseudo: marker.pseudo,
+                        variable: markerVariable(marker.id, marker.pseudo),
+                    });
+                    continue;
+                }
+            }
             if (property.type !== 'Property' || property.kind !== 'init') {
                 report(property, 'spread-style', 'Spread styles must be expanded before exporting to CSS Modules.');
                 continue;
@@ -359,10 +514,23 @@ function convertPlumeriaModule(source, externalValues = {}) {
                 continue;
             }
             const cssProperty = (0, zss_engine_1.camelToKebabCase)(rawKey);
+            if (restrict &&
+                !restrict
+                    .get(bucketOf(wrappers, selector.slice(restrictRoot)))
+                    ?.has(cssProperty))
+                continue;
+            if (footprint) {
+                const bucket = bucketOf(wrappers, selector.slice(footprint.root.length));
+                const held = footprint.map.get(bucket) ?? new Set();
+                held.add(cssProperty);
+                footprint.map.set(bucket, held);
+            }
             declarations.push(`  ${cssProperty}: ${(0, zss_engine_1.applyCssValue)(value, cssProperty)};`);
         }
-        if (declarations.length > 0) {
-            let rule = `${selector} {\n${declarations.join('\n')}\n}`;
+        const pushRule = (target, lines) => {
+            if (lines.length === 0)
+                return;
+            let rule = `${target} {\n${lines.join('\n')}\n}`;
             for (const wrapper of [...wrappers].reverse()) {
                 rule = `${wrapper} {\n${rule
                     .split('\n')
@@ -370,67 +538,284 @@ function convertPlumeriaModule(source, externalValues = {}) {
                     .join('\n')}\n}`;
             }
             rules.push(rule);
+        };
+        if (phase !== 'nested')
+            pushRule(selector, declarations);
+        if (phase === 'declarations')
+            return;
+        for (const marker of markers) {
+            pushRule(`${selector}${marker.pseudo}`, [`  ${marker.variable}: 1;`]);
         }
         for (const child of nested) {
             if (child.key.startsWith('@')) {
-                emit(child.value, selector, [...wrappers, child.key], scope);
+                emit(child.value, selector, [...wrappers, child.key], scope, 'both', footprint, restrict);
             }
             else {
-                emit(child.value, `${selector}${child.key}`, wrappers, scope);
+                emit(child.value, `${selector}${child.key}`, wrappers, scope, 'both', footprint, restrict);
             }
         }
     };
-    for (const property of object.properties) {
-        if (property.type !== 'Property' || property.kind !== 'init') {
-            report(property, 'spread-create', 'Top-level spreads cannot name a CSS Module class.');
-            continue;
-        }
-        const key = property.computed
-            ? evaluate(property.key, values)
-            : propertyKey(property.key);
-        if (typeof key !== 'string') {
-            report(property.key, 'dynamic-style-key', 'Style names must be statically known.');
-            continue;
+    for (const create of creates) {
+        const owner = create.binding;
+        const alias = {};
+        for (const property of create.object.properties) {
+            if (property.type !== 'Property' || property.kind !== 'init') {
+                report(property, 'spread-create', 'Top-level spreads cannot name a CSS Module class.');
+                continue;
+            }
+            const key = property.computed
+                ? evaluate(property.key, values)
+                : propertyKey(property.key);
+            if (typeof key !== 'string') {
+                report(property.key, 'dynamic-style-key', 'Style names must be statically known.');
+                continue;
+            }
+            const className = classNameFor(owner, key);
+            taken.add(className);
+            if (owner !== binding)
+                alias[key] = className;
+            members.set(`${owner}.${key}`, { className, value: property.value });
+            if (property.value.type === 'ArrowFunctionExpression' ||
+                property.value.type === 'FunctionExpression') {
+                const params = [];
+                let valid = true;
+                for (const parameter of property.value.params) {
+                    if (parameter.type !== 'Identifier') {
+                        valid = false;
+                        break;
+                    }
+                    params.push(parameter.name);
+                }
+                let body = property.value.body;
+                if (body.type === 'BlockStatement') {
+                    const returned = body.body.find((statement) => statement.type === 'ReturnStatement');
+                    body = returned?.argument;
+                }
+                if (!valid || body?.type !== 'ObjectExpression') {
+                    report(property.value, 'function-style', 'Function style keys need identifier parameters and an object return value.');
+                    continue;
+                }
+                const variables = params.map((parameter) => `--${(0, zss_engine_1.camelToKebabCase)(owner)}-${(0, zss_engine_1.camelToKebabCase)(key)}-${(0, zss_engine_1.camelToKebabCase)(parameter)}`);
+                const scope = new Map(values);
+                params.forEach((parameter, index) => {
+                    scope.set(parameter, `var(${variables[index]})`);
+                });
+                functions[className] = { params, variables };
+                keys.push(className);
+                openGroup(className);
+                emit(body, `.${className}`, [], scope, 'both', track(className));
+                continue;
+            }
+            keys.push(className);
+            openGroup(className);
+            emit(property.value, `.${className}`, [], values, 'both', track(className));
         }
-        if (property.value.type === 'ArrowFunctionExpression' ||
-            property.value.type === 'FunctionExpression') {
-            const params = [];
-            let valid = true;
-            for (const parameter of property.value.params) {
-                if (parameter.type !== 'Identifier') {
-                    valid = false;
-                    break;
+        if (owner !== binding)
+            aliases[owner] = alias;
+    }
+    const resolved = compositions.map((composition) => ({
+        composition,
+        parts: composition.parts.flatMap((part) => {
+            const member = members.get(`${part.binding}.${part.key}`);
+            return member && !functions[member.className] ? [member] : [];
+        }),
+        slots: composition.slots.map((slot) => slot.flatMap((part) => {
+            const member = members.get(`${part.binding}.${part.key}`);
+            return member ? [member.className] : [];
+        })),
+    }));
+    const collapsible = new Set(resolved.filter((entry) => entry.composition.parts.length > 1 &&
+        entry.parts.length === entry.composition.parts.length));
+    const position = new Map(groups.map((group, index) => [group.name, index]));
+    const inlined = new Set();
+    const sort = () => {
+        const edges = new Map();
+        const blame = new Map();
+        for (const entry of resolved) {
+            if (inlined.has(entry))
+                continue;
+            for (let first = 0; first < entry.slots.length; first++) {
+                for (let second = first + 1; second < entry.slots.length; second++) {
+                    for (const before of entry.slots[first]) {
+                        for (const after of entry.slots[second]) {
+                            if (before === after || !conflicts(before, after))
+                                continue;
+                            edges.set(before, (edges.get(before) ?? new Set()).add(after));
+                            blame.set(`${before}|${after}`, entry.composition);
+                        }
+                    }
                 }
-                params.push(parameter.name);
             }
-            let body = property.value.body;
-            if (body.type === 'BlockStatement') {
-                const returned = body.body.find((statement) => statement.type === 'ReturnStatement');
-                body = returned?.argument;
+        }
+        const incoming = new Map(groups.map((group) => [group.name, 0]));
+        for (const [, targets] of edges)
+            for (const target of targets)
+                if (incoming.has(target))
+                    incoming.set(target, incoming.get(target) + 1);
+        const ready = groups
+            .filter((group) => incoming.get(group.name) === 0)
+            .map((group) => group.name);
+        const ordered = [];
+        while (ready.length > 0) {
+            ready.sort((a, b) => position.get(a) - position.get(b));
+            const name = ready.shift();
+            ordered.push(name);
+            for (const target of edges.get(name) ?? []) {
+                if (!incoming.has(target))
+                    continue;
+                const remaining = incoming.get(target) - 1;
+                incoming.set(target, remaining);
+                if (remaining === 0)
+                    ready.push(target);
             }
-            if (!valid || body?.type !== 'ObjectExpression') {
-                report(property.value, 'function-style', 'Function style keys need identifier parameters and an object return value.');
+        }
+        const stuck = new Set(groups
+            .map((group) => group.name)
+            .filter((name) => !ordered.includes(name)));
+        return { ordered, stuck, edges, blame };
+    };
+    let sorted = sort();
+    while (sorted.stuck.size > 0) {
+        const offender = [...collapsible].find((entry) => !inlined.has(entry) &&
+            entry.parts.filter((part) => sorted.stuck.has(part.className)).length >
+                1);
+        if (!offender)
+            break;
+        inlined.add(offender);
+        sorted = sort();
+    }
+    const order = new Map([...sorted.ordered, ...sorted.stuck].map((name, index) => [name, index]));
+    const overrides = {};
+    const pending = [];
+    for (const entry of resolved) {
+        if (inlined.has(entry))
+            continue;
+        if (entry.slots.some((slot) => slot.length !== 1))
+            continue;
+        const names = entry.slots.map((slot) => slot[0]);
+        const signature = (0, exports.compositionSignature)(names);
+        if (overrides[signature])
+            continue;
+        const perSlot = {};
+        for (let slot = 1; slot < names.length; slot++) {
+            const losers = names
+                .slice(0, slot)
+                .filter((earlier) => earlier !== names[slot] &&
+                conflicts(earlier, names[slot]) &&
+                order.get(earlier) > order.get(names[slot]));
+            if (losers.length === 0)
                 continue;
+            pending.push({ signature, slot, winner: names[slot], losers });
+            perSlot[slot] = '';
+        }
+        if (Object.keys(perSlot).length > 0)
+            overrides[signature] = perSlot;
+    }
+    for (const request of pending) {
+        const winner = members.get([...members.keys()].find((key) => members.get(key)?.className === request.winner));
+        if (!winner)
+            continue;
+        const disputed = new Map();
+        const mine = footprints.get(request.winner);
+        for (const loser of request.losers) {
+            const theirs = footprints.get(loser);
+            if (!mine || !theirs)
+                continue;
+            for (const [bucket, properties] of mine) {
+                const other = theirs.get(bucket);
+                if (!other)
+                    continue;
+                for (const property of properties) {
+                    if (!other.has(property))
+                        continue;
+                    const held = disputed.get(bucket) ?? new Set();
+                    held.add(property);
+                    disputed.set(bucket, held);
+                }
+            }
+        }
+        if (disputed.size === 0)
+            continue;
+        const name = classNameFor(binding, camelJoin([request.winner, `over-${request.losers.join('-')}`]));
+        taken.add(name);
+        openGroup(name);
+        emit(winner.value, `.${name}:not(#\\#)`, [], values, 'both', undefined, disputed);
+        keys.push(name);
+        overrides[request.signature][request.slot] = name;
+    }
+    for (const entry of resolved) {
+        if (inlined.has(entry))
+            continue;
+        const signature = entry.slots.every((slot) => slot.length === 1) &&
+            (0, exports.compositionSignature)(entry.slots.map((slot) => slot[0]));
+        let unresolved;
+        for (let first = 0; first < entry.slots.length && !unresolved; first++) {
+            for (let second = first + 1; second < entry.slots.length; second++) {
+                if (signature && overrides[signature]?.[second])
+                    continue;
+                for (const before of entry.slots[first]) {
+                    for (const after of entry.slots[second]) {
+                        if (before === after || !conflicts(before, after))
+                            continue;
+                        if (order.get(before) < order.get(after))
+                            continue;
+                        unresolved = [before, after];
+                    }
+                }
             }
-            const variables = params.map((parameter) => `--${(0, zss_engine_1.camelToKebabCase)(binding)}-${(0, zss_engine_1.camelToKebabCase)(key)}-${(0, zss_engine_1.camelToKebabCase)(parameter)}`);
-            const scope = new Map(values);
-            params.forEach((parameter, index) => {
-                scope.set(parameter, `var(${variables[index]})`);
-            });
-            functions[key] = { params, variables };
-            keys.push(key);
-            emit(body, `.${key}`, [], scope);
+        }
+        if (!unresolved)
             continue;
+        reports.push({
+            line: entry.composition.line,
+            column: entry.composition.column,
+            kind: 'composition-order',
+            hint: `\`${unresolved[1]}\` has to win over \`${unresolved[0]}\` here and lose elsewhere, and this call site cannot carry an override.`,
+        });
+    }
+    for (const entry of collapsible) {
+        const signature = (0, exports.compositionSignature)(entry.parts.map((part) => part.className));
+        if (merges[signature])
+            continue;
+        const merged = classNameFor(binding, camelJoin(entry.parts.map((part) => part.className)));
+        taken.add(merged);
+        openGroup(merged);
+        if (inlined.has(entry)) {
+            for (const part of entry.parts)
+                emit(part.value, `.${merged}`, [], values, 'declarations');
+            for (const part of entry.parts)
+                emit(part.value, `.${merged}`, [], values, 'nested');
+        }
+        else {
+            rules.push(`.${merged} {\n  composes: ${entry.parts
+                .map((part) => part.className)
+                .join(' ')};\n}`);
         }
-        keys.push(key);
-        emit(property.value, `.${key}`);
+        keys.push(merged);
+        merges[signature] = merged;
     }
+    const emitted = [
+        ...sorted.ordered,
+        ...[...sorted.stuck],
+        ...groups.slice(position.size).map((group) => group.name),
+    ];
+    const seen = new Set();
+    const css = emitted.flatMap((name) => {
+        if (seen.has(name))
+            return [];
+        seen.add(name);
+        return groups.find((group) => group.name === name)?.rules ?? [];
+    });
     return {
         binding,
-        css: rules.length > 0 ? `${rules.join('\n\n')}\n` : '',
+        css: css.length > 0 ? `${css.join('\n\n')}\n` : '',
         globalCss: `${themes.globalCss}${animations.globalCss}`,
         keys,
         functions,
+        aliases,
+        merges,
+        overrides,
+        definitionOnly: creates.every((create) => !bindsElsewhere(ast, create.binding, create.declaration.id)),
         reports,
     };
 }

package/dist/transforms/release-styles.d.ts

@@ -1,16 +1,24 @@
 import type { Rule } from 'eslint';
 export interface ReleaseModule {
     source: string;
+    target?: string;
     binding: string;
+    definitionOnly?: boolean;
+    aliases?: Record<string, Record<string, string>>;
     functions?: Record<string, {
         params: string[];
         variables: string[];
     }>;
+    merges?: Record<string, string>;
+    overrides?: Record<string, Record<number, string>>;
 }
 export interface ReleaseStylesOptions {
     modules: Record<string, ReleaseModule>;
     themes?: Record<string, string[]>;
     animations?: Record<string, string[]>;
+    statics?: Record<string, string[]>;
+    values?: Record<string, Record<string, unknown>>;
+    complete?: boolean;
     styleProp?: string;
     active?: boolean;
 }