@plumeria/codemod 18.2.19 → 18.2.20

package/dist/transforms/from-plumeria.js

@@ -1,13 +1,25 @@
 "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])}`;
@@ -64,6 +76,14 @@ const evaluate = (node, values) => {
     }
     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') {
@@ -346,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 },
@@ -403,9 +423,37 @@ function convertPlumeriaModule(source, externalValues = {}) {
     if (creates.length === 0)
         return null;
     const { binding } = creates[0];
-    const rules = [];
+    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 classNameFor = (owner, key) => {
@@ -418,11 +466,17 @@ function convertPlumeriaModule(source, externalValues = {}) {
             candidate = `${namespaced}-${suffix++}`;
         return candidate;
     };
-    const emit = (style, selector, wrappers = [], scope = values) => {
+    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 = [];
@@ -460,6 +514,17 @@ 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)};`);
         }
         const pushRule = (target, lines) => {
@@ -474,16 +539,19 @@ function convertPlumeriaModule(source, externalValues = {}) {
             }
             rules.push(rule);
         };
-        pushRule(selector, declarations);
+        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);
             }
         }
     };
@@ -506,6 +574,7 @@ function convertPlumeriaModule(source, externalValues = {}) {
             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 = [];
@@ -533,22 +602,219 @@ function convertPlumeriaModule(source, externalValues = {}) {
                 });
                 functions[className] = { params, variables };
                 keys.push(className);
-                emit(body, `.${className}`, [], scope);
+                openGroup(className);
+                emit(body, `.${className}`, [], scope, 'both', track(className));
                 continue;
             }
             keys.push(className);
-            emit(property.value, `.${className}`);
+            openGroup(className);
+            emit(property.value, `.${className}`, [], values, 'both', track(className));
         }
         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);
+                        }
+                    }
+                }
+            }
+        }
+        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);
+            }
+        }
+        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];
+                    }
+                }
+            }
+        }
+        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(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

@@ -9,12 +9,16 @@ export interface ReleaseModule {
         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;
 }