@plumeria/codemod 18.2.21 → 18.2.22

package/README.md

@@ -194,8 +194,10 @@ under the same condition as the style that has to win:
 ```
 
 Order is only forced where the two classes actually disagree, measured per
-at-rule and per selector. Anything left unsettled is reported as
-`composition-order`.
+at-rule and per selector. Where one property covers another — `padding` against
+`padding-top` — Plumeria settles it by specificity rather than order, so the
+shorthand is written first and the array has no say. Anything left unsettled is
+reported as `composition-order`.
 
 A variant picked with a bracket is resolved to the class its key names, whether
 the constant is declared in the same file or imported, and a constant left

package/dist/release.js

@@ -326,7 +326,11 @@ function planRelease(targets) {
         const held = new Map();
         const exported = new Map();
         const duplicated = new Set();
+        const seen = new Set();
         const read = (statement, isExport) => {
+            if (seen.has(statement))
+                return;
+            seen.add(statement);
             if (statement?.type !== 'VariableDeclaration' ||
                 statement.kind !== 'const')
                 return;
@@ -359,6 +363,8 @@ function planRelease(targets) {
     }
     const resolvedConstants = new Map();
     const compositions = new Map();
+    const foldings = new Map();
+    const reached = new Map();
     for (const source of sources) {
         let ast;
         try {
@@ -449,14 +455,43 @@ function planRelease(targets) {
             if (owners_.some((candidate) => !candidate))
                 return;
             const owner = owners_[0].source;
-            if (owners_.some((candidate) => candidate.source !== owner))
-                return;
             const named = slots.map((slot) => slot.map((part) => ({
                 binding: owners.get(part.object).binding,
                 key: part.key,
             })));
             const collapsible = expression.elements.every((element) => memberOf(element)) &&
                 named.every((slot) => slot.length === 1);
+            if (owners_.some((candidate) => candidate.source !== owner)) {
+                if (!collapsible)
+                    return;
+                const parts = slots.map((slot, index) => {
+                    const held = owners.get(slot[0].object);
+                    return {
+                        binding: held.binding,
+                        key: slot[0].key,
+                        ...(held.source === owner ? {} : { source: held.source }),
+                        target: (0, exports.releasedPath)(held.source),
+                        at: index,
+                    };
+                });
+                foldings.set(owner, [
+                    ...(foldings.get(owner) ?? []),
+                    {
+                        signature: parts
+                            .map((part) => `${part.target}#${part.key}`)
+                            .join('|'),
+                        parts: parts.map(({ binding, key, source }) => ({
+                            binding,
+                            key,
+                            ...(source ? { source } : {}),
+                        })),
+                    },
+                ]);
+                for (const part of parts)
+                    if (part.source)
+                        reached.set(owner, (reached.get(owner) ?? new Set()).add(part.source));
+                return;
+            }
             compositions.set(owner, [
                 ...(compositions.get(owner) ?? []),
                 {
@@ -473,7 +508,22 @@ function planRelease(targets) {
     for (const source of sources) {
         let module;
         try {
-            module = (0, from_plumeria_1.convertPlumeriaModule)(sourceText.get(source), importedPlumeriaValues(source), compositions.get(source) ?? []);
+            module = (0, from_plumeria_1.convertPlumeriaModule)(sourceText.get(source), importedPlumeriaValues(source), compositions.get(source) ?? [], {
+                target: (0, exports.releasedPath)(source),
+                foldings: foldings.get(source) ?? [],
+                foreign: Object.fromEntries([...(reached.get(source) ?? [])].map((other) => [
+                    other,
+                    {
+                        text: sourceText.get(other),
+                        values: {
+                            ...importedPlumeriaValues(other),
+                            ...(staticValues.get(other) ?? {}),
+                            ...(themeValues.get(other) ?? {}),
+                            ...(animationValues.get(other) ?? {}),
+                        },
+                    },
+                ])),
+            });
         }
         catch {
             continue;

package/dist/transforms/adopt-styles.js

@@ -80,6 +80,13 @@ exports.adoptStyles = {
         let coreLocal;
         let readsValue = false;
         let several = false;
+        const moduleFor = (specifier) => {
+            const resolved = (0, resolve_1.resolveSourcePath)(specifier, context.filename);
+            if (resolved && modules[resolved])
+                return modules[resolved];
+            const named = Object.entries(modules).filter(([key]) => key === specifier || path.basename(key) === path.basename(specifier));
+            return named.length === 1 ? named[0][1] : undefined;
+        };
         const stylingPosition = (node) => {
             let current = node;
             while (current.parent &&
@@ -171,8 +178,7 @@ exports.adoptStyles = {
                                 coreLocal = specifier.local.name;
                         continue;
                     }
-                    const target = (0, resolve_1.resolveSourcePath)(String(statement.source.value), context.filename);
-                    if (!target || !modules[target])
+                    if (!moduleFor(String(statement.source.value)))
                         continue;
                     for (const specifier of statement.specifiers)
                         if (specifier.type === 'ImportDefaultSpecifier') {
@@ -229,14 +235,12 @@ exports.adoptStyles = {
             },
             ImportDeclaration(node) {
                 const specifier = String(node.source.value);
-                const resolved = (0, resolve_1.resolveSourcePath)(specifier, context.filename);
-                const named = Object.entries(modules).filter(([key]) => key === specifier ||
-                    path.basename(key) === path.basename(specifier));
-                const entry = (resolved ? modules[resolved] : undefined) ??
-                    (named.length === 1 ? named[0][1] : undefined);
+                const entry = moduleFor(specifier);
                 if (!entry) {
-                    const adopted = resolved &&
-                        Object.values(modules).find((candidate) => candidate.target === resolved);
+                    const resolved = (0, resolve_1.resolveSourcePath)(specifier, context.filename);
+                    const adopted = Object.values(modules).find((candidate) => candidate.target === resolved ||
+                        candidate.source === specifier ||
+                        path.basename(candidate.source) === path.basename(specifier));
                     if (!adopted)
                         return;
                     const already = node.specifiers.find((specifier) => specifier.type === 'ImportSpecifier' &&
@@ -402,7 +406,21 @@ exports.adoptStyles = {
                 if (joined) {
                     if (!joined.some((element) => bindings.has(styleRead(element)?.object?.name)))
                         return;
-                    const list = joined.map(renamedText).join(', ');
+                    const styles_ = joined.filter((element) => bindings.has(styleRead(element)?.object?.name));
+                    const carried = joined.filter((element) => !styles_.includes(element));
+                    const list = styles_.map(renamedText).join(', ');
+                    if (carried.length > 0) {
+                        const kept = carried
+                            .map((element) => context.sourceCode.getText(element))
+                            .join(', ');
+                        context.report({
+                            node,
+                            messageId: 'prop',
+                            data: { prop: styleProp },
+                            fix: (fixer) => fixer.replaceText(node, `className={[${kept}].filter(Boolean).join(' ')} ${styleProp}={[${list}]}`),
+                        });
+                        return;
+                    }
                     if (!intrinsic(node.parent) && coreLocal) {
                         context.report({
                             node: expression,

package/dist/transforms/from-plumeria.d.ts

@@ -12,6 +12,7 @@ export interface PlumeriaModule {
     functions: Record<string, {
         params: string[];
         variables: string[];
+        lengths: boolean[];
     }>;
     aliases: Record<string, Record<string, string>>;
     merges: Record<string, string>;
@@ -32,7 +33,22 @@ export interface PlumeriaComposition {
     line: number;
     column: number;
 }
-export declare const compositionSignature: (classNames: string[]) => string;
+export interface PlumeriaFolding {
+    signature: string;
+    parts: {
+        binding: string;
+        key: string;
+        source?: string;
+    }[];
+}
+export interface PlumeriaForeign {
+    text: string;
+    values: Record<string, unknown>;
+}
+export declare const compositionSignature: (parts: {
+    target: string;
+    className: string;
+}[]) => string;
 export interface ThemeExtraction {
     bindings: Record<string, Record<string, string>>;
     globalCss: string;
@@ -58,4 +74,8 @@ export declare const __private: {
 export declare function extractPlumeriaThemes(source: string): ThemeExtraction;
 export declare function extractPlumeriaStatics(source: string, externalValues?: Record<string, unknown>): StaticExtraction;
 export declare function extractPlumeriaAnimations(source: string, externalValues?: Record<string, unknown>): AnimationExtraction;
-export declare function convertPlumeriaModule(source: string, externalValues?: Record<string, unknown>, compositions?: PlumeriaComposition[]): PlumeriaModule | null;
+export declare function convertPlumeriaModule(source: string, externalValues?: Record<string, unknown>, compositions?: PlumeriaComposition[], options?: {
+    target?: string;
+    foldings?: PlumeriaFolding[];
+    foreign?: Record<string, PlumeriaForeign>;
+}): PlumeriaModule | null;

package/dist/transforms/from-plumeria.js

@@ -7,8 +7,87 @@ 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('|');
+const UNITLESS = new Set(zss_engine_1.exceptionCamelCase.map((property) => (0, zss_engine_1.camelToKebabCase)(property)));
+const compositionSignature = (parts) => parts.map((part) => `${part.target}#${part.className}`).join('|');
 exports.compositionSignature = compositionSignature;
+const own = (target, classNames) => (0, exports.compositionSignature)(classNames.map((className) => ({ target, className })));
+const DIRECT_SHORTHANDS = {};
+for (const [shorthand, longhands] of Object.entries(zss_engine_1.DIRECT_LONGHANDS)) {
+    for (const longhand of longhands) {
+        if (!DIRECT_SHORTHANDS[longhand])
+            DIRECT_SHORTHANDS[longhand] = [];
+        DIRECT_SHORTHANDS[longhand].push(shorthand);
+    }
+}
+const depths = new Map();
+const depthOf = (property) => {
+    const cached = depths.get(property);
+    if (cached !== undefined)
+        return cached;
+    depths.set(property, 0);
+    let depth = 0;
+    for (const shorthand of DIRECT_SHORTHANDS[property] || [])
+        depth = Math.max(depth, depthOf(shorthand) + 1);
+    depths.set(property, depth);
+    return depth;
+};
+const coverages = new Map();
+const coverageOf = (property) => {
+    const cached = coverages.get(property);
+    if (cached)
+        return cached;
+    const longhands = zss_engine_1.DIRECT_LONGHANDS[property];
+    const coverage = longhands
+        ? new Set(longhands.flatMap((longhand) => [...coverageOf(longhand)]))
+        : new Set([property]);
+    coverages.set(property, coverage);
+    return coverage;
+};
+const covers = (outer, inner) => {
+    if (outer === inner)
+        return false;
+    const wide = coverageOf(outer);
+    const narrow = coverageOf(inner);
+    return wide.size > narrow.size && [...narrow].every((leaf) => wide.has(leaf));
+};
+const overlaps = (first, second) => {
+    const left = coverageOf(first);
+    return [...coverageOf(second)].some((leaf) => left.has(leaf));
+};
+const byRank = (written) => {
+    const outranked = (later, earlier) => (later.held ?? []).some((mine) => (earlier.held ?? []).some((theirs) => later.suffix === earlier.suffix &&
+        overlaps(mine.property, theirs.property) &&
+        mine.rank > theirs.rank));
+    const ordered = [];
+    const pending = [...written];
+    while (pending.length > 0) {
+        const index = pending.findIndex((candidate, position) => !pending.some((other, held) => held !== position && outranked(candidate, other)));
+        ordered.push(...pending.splice(index === -1 ? 0 : index, 1));
+    }
+    return ordered;
+};
+const byImplication = (written) => {
+    const ordered = [];
+    const pending = [...written];
+    while (pending.length > 0) {
+        const index = pending.findIndex((candidate, position) => !pending.some((other, held) => held !== position &&
+            candidate.condition !== undefined &&
+            other.condition !== undefined &&
+            candidate.condition !== other.condition &&
+            (0, zss_engine_1.impliesCondition)(candidate.condition, other.condition)));
+        ordered.push(...pending.splice(index === -1 ? 0 : index, 1));
+    }
+    return ordered.map((entry) => entry.text);
+};
+const byContainment = (declared) => {
+    const ordered = [];
+    const pending = [...declared];
+    while (pending.length > 0) {
+        const index = pending.findIndex((candidate, position) => !pending.some((other, held) => held !== position && covers(other.property, candidate.property)));
+        ordered.push(...pending.splice(index === -1 ? 0 : index, 1));
+    }
+    return ordered.map((entry) => entry.text);
+};
 const toIdent = (value) => value.replace(/[^A-Za-z0-9-]/g, '');
 const capitalize = (value) => `${value.charAt(0).toUpperCase()}${value.slice(1)}`;
 const camelJoin = (names) => names
@@ -366,7 +445,8 @@ function extractPlumeriaAnimations(source, externalValues = {}) {
         reports,
     };
 }
-function convertPlumeriaModule(source, externalValues = {}, compositions = []) {
+function convertPlumeriaModule(source, externalValues = {}, compositions = [], options = {}) {
+    const target = options.target ?? '';
     const ast = (0, parser_1.parse)(source, {
         sourceType: 'module',
         ecmaFeatures: { jsx: true },
@@ -435,27 +515,37 @@ function convertPlumeriaModule(source, externalValues = {}, compositions = []) {
     const members = new Map();
     const footprints = new Map();
     const track = (className) => {
-        const map = new Map();
-        footprints.set(className, map);
-        return { root: `.${className}`, map };
+        const held = [];
+        footprints.set(className, held);
+        return { root: `.${className}`, held };
     };
-    const conflicts = (first, second) => {
+    const relate = (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 { crossing: true };
+        let ranked;
+        let crossing = false;
+        for (const mine of left) {
+            for (const theirs of right) {
+                if (mine.suffix !== theirs.suffix)
+                    continue;
+                if (!overlaps(mine.property, theirs.property))
+                    continue;
+                if (mine.rank > theirs.rank)
+                    ranked ??= [second, first];
+                else if (theirs.rank > mine.rank)
+                    ranked ??= [first, second];
+                else
+                    crossing = true;
+            }
         }
-        return false;
+        return { ranked, crossing };
     };
+    const crosses = (first, second) => relate(first, second).crossing;
     const taken = new Set();
     const functions = {};
+    const variableUses = new Map();
     const classNameFor = (owner, key) => {
         if (!taken.has(key))
             return key;
@@ -477,7 +567,7 @@ function convertPlumeriaModule(source, externalValues = {}, compositions = []) {
             return;
         }
         const restrictRoot = restrict ? selectorRoot(selector) : 0;
-        const declarations = [];
+        const declared = [];
         const nested = [];
         const markers = [];
         for (const property of style.properties) {
@@ -519,15 +609,24 @@ function convertPlumeriaModule(source, externalValues = {}, compositions = []) {
                     .get(bucketOf(wrappers, selector.slice(restrictRoot)))
                     ?.has(cssProperty))
                 continue;
+            if (typeof value === 'string')
+                for (const [, variable] of value.matchAll(/var\((--[\w-]+)\)/g))
+                    variableUses.set(variable, (variableUses.get(variable) ?? new Set()).add(cssProperty));
             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);
+                const suffix = selector.slice(footprint.root.length);
+                footprint.held.push({
+                    bucket: bucketOf(wrappers, suffix),
+                    suffix,
+                    property: cssProperty,
+                    rank: depthOf(cssProperty) + (wrappers.length > 0 ? 1 : 0),
+                });
             }
-            declarations.push(`  ${cssProperty}: ${(0, zss_engine_1.applyCssValue)(value, cssProperty)};`);
+            declared.push({
+                property: cssProperty,
+                text: `  ${cssProperty}: ${(0, zss_engine_1.applyCssValue)(value, cssProperty)};`,
+            });
         }
-        const pushRule = (target, lines) => {
+        const pushRule = (target, lines, held = []) => {
             if (lines.length === 0)
                 return;
             let rule = `${target} {\n${lines.join('\n')}\n}`;
@@ -537,10 +636,18 @@ function convertPlumeriaModule(source, externalValues = {}, compositions = []) {
                     .map((line) => `  ${line}`)
                     .join('\n')}\n}`;
             }
-            rules.push(rule);
+            rules.push({
+                text: rule,
+                condition: wrappers.length === 1 ? wrappers[0] : undefined,
+                suffix: target.slice(target.indexOf('.') + 1).replace(/^[\w-]+/, ''),
+                held,
+            });
         };
         if (phase !== 'nested')
-            pushRule(selector, declarations);
+            pushRule(selector, byContainment(declared), declared.map((entry) => ({
+                property: entry.property,
+                rank: depthOf(entry.property) + (wrappers.length > 0 ? 1 : 0),
+            })));
         if (phase === 'declarations')
             return;
         for (const marker of markers) {
@@ -600,10 +707,19 @@ function convertPlumeriaModule(source, externalValues = {}, compositions = []) {
                 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));
+                functions[className] = {
+                    params,
+                    variables,
+                    lengths: variables.map((variable) => {
+                        const used = variableUses.get(variable);
+                        return (used !== undefined &&
+                            used.size > 0 &&
+                            [...used].every((property) => !UNITLESS.has(property) && !property.startsWith('--')));
+                    }),
+                };
                 continue;
             }
             keys.push(className);
@@ -631,6 +747,7 @@ function convertPlumeriaModule(source, externalValues = {}, compositions = []) {
     const sort = () => {
         const edges = new Map();
         const blame = new Map();
+        const link = (before, after) => edges.set(before, (edges.get(before) ?? new Set()).add(after));
         for (const entry of resolved) {
             if (inlined.has(entry))
                 continue;
@@ -638,9 +755,14 @@ function convertPlumeriaModule(source, externalValues = {}, compositions = []) {
                 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))
+                            if (before === after)
+                                continue;
+                            const { ranked, crossing } = relate(before, after);
+                            if (ranked)
+                                link(ranked[0], ranked[1]);
+                            if (!crossing)
                                 continue;
-                            edges.set(before, (edges.get(before) ?? new Set()).add(after));
+                            link(before, after);
                             blame.set(`${before}|${after}`, entry.composition);
                         }
                     }
@@ -693,7 +815,7 @@ function convertPlumeriaModule(source, externalValues = {}, compositions = []) {
         if (entry.slots.some((slot) => slot.length !== 1))
             continue;
         const names = entry.slots.map((slot) => slot[0]);
-        const signature = (0, exports.compositionSignature)(names);
+        const signature = own(target, names);
         if (overrides[signature])
             continue;
         const perSlot = {};
@@ -701,7 +823,7 @@ function convertPlumeriaModule(source, externalValues = {}, compositions = []) {
             const losers = names
                 .slice(0, slot)
                 .filter((earlier) => earlier !== names[slot] &&
-                conflicts(earlier, names[slot]) &&
+                crosses(earlier, names[slot]) &&
                 order.get(earlier) > order.get(names[slot]));
             if (losers.length === 0)
                 continue;
@@ -721,17 +843,15 @@ function convertPlumeriaModule(source, externalValues = {}, compositions = []) {
             const theirs = footprints.get(loser);
             if (!mine || !theirs)
                 continue;
-            for (const [bucket, properties] of mine) {
-                const other = theirs.get(bucket);
-                if (!other)
+            for (const entry of mine) {
+                const crossed = theirs.some((candidate) => candidate.suffix === entry.suffix &&
+                    candidate.rank === entry.rank &&
+                    overlaps(entry.property, candidate.property));
+                if (!crossed)
                     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);
-                }
+                const held = disputed.get(entry.bucket) ?? new Set();
+                held.add(entry.property);
+                disputed.set(entry.bucket, held);
             }
         }
         if (disputed.size === 0)
@@ -747,7 +867,7 @@ function convertPlumeriaModule(source, externalValues = {}, compositions = []) {
         if (inlined.has(entry))
             continue;
         const signature = entry.slots.every((slot) => slot.length === 1) &&
-            (0, exports.compositionSignature)(entry.slots.map((slot) => slot[0]));
+            own(target, 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++) {
@@ -755,7 +875,10 @@ function convertPlumeriaModule(source, externalValues = {}, compositions = []) {
                     continue;
                 for (const before of entry.slots[first]) {
                     for (const after of entry.slots[second]) {
-                        if (before === after || !conflicts(before, after))
+                        if (before === after)
+                            continue;
+                        const { ranked, crossing } = relate(before, after);
+                        if (ranked || !crossing)
                             continue;
                         if (order.get(before) < order.get(after))
                             continue;
@@ -774,7 +897,7 @@ function convertPlumeriaModule(source, externalValues = {}, compositions = []) {
         });
     }
     for (const entry of collapsible) {
-        const signature = (0, exports.compositionSignature)(entry.parts.map((part) => part.className));
+        const signature = own(target, entry.parts.map((part) => part.className));
         if (merges[signature])
             continue;
         const merged = classNameFor(binding, camelJoin(entry.parts.map((part) => part.className)));
@@ -787,13 +910,80 @@ function convertPlumeriaModule(source, externalValues = {}, compositions = []) {
                 emit(part.value, `.${merged}`, [], values, 'nested');
         }
         else {
-            rules.push(`.${merged} {\n  composes: ${entry.parts
-                .map((part) => part.className)
-                .join(' ')};\n}`);
+            rules.push({
+                text: `.${merged} {\n  composes: ${entry.parts
+                    .map((part) => part.className)
+                    .join(' ')};\n}`,
+            });
         }
         keys.push(merged);
         merges[signature] = merged;
     }
+    const parsed = new Map();
+    const styleOf = (part) => {
+        if (!part.source) {
+            const held = members.get(`${part.binding}.${part.key}`);
+            return held ? { value: held.value, scope: values } : undefined;
+        }
+        const held = options.foreign?.[part.source];
+        if (!held)
+            return undefined;
+        let tree = parsed.get(part.source);
+        if (!tree) {
+            try {
+                tree = (0, parser_1.parse)(held.text, {
+                    sourceType: 'module',
+                    ecmaFeatures: { jsx: true },
+                    loc: true,
+                    range: true,
+                });
+            }
+            catch {
+                return undefined;
+            }
+            parsed.set(part.source, tree);
+        }
+        for (const raw of tree.body) {
+            const statement = declarationOf(raw);
+            if (statement?.type !== 'VariableDeclaration')
+                continue;
+            for (const declaration of statement.declarations) {
+                if (declaration.id.name !== part.binding ||
+                    !isCall(declaration.init, 'create'))
+                    continue;
+                for (const property of declaration.init.arguments[0]?.properties ??
+                    []) {
+                    if (property.type !== 'Property')
+                        continue;
+                    const name = property.computed
+                        ? undefined
+                        : propertyKey(property.key);
+                    if (name === part.key)
+                        return {
+                            value: property.value,
+                            scope: new Map(Object.entries(held.values)),
+                        };
+                }
+            }
+        }
+        return undefined;
+    };
+    for (const folding of options.foldings ?? []) {
+        if (merges[folding.signature])
+            continue;
+        const parts = folding.parts.map(styleOf);
+        if (parts.some((part) => !part))
+            continue;
+        const merged = classNameFor(binding, camelJoin(folding.parts.map((part) => part.key)));
+        taken.add(merged);
+        openGroup(merged);
+        for (const part of parts)
+            emit(part.value, `.${merged}`, [], part.scope, 'declarations');
+        for (const part of parts)
+            emit(part.value, `.${merged}`, [], part.scope, 'nested');
+        keys.push(merged);
+        merges[folding.signature] = merged;
+    }
     const emitted = [
         ...sorted.ordered,
         ...[...sorted.stuck],
@@ -804,7 +994,8 @@ function convertPlumeriaModule(source, externalValues = {}, compositions = []) {
         if (seen.has(name))
             return [];
         seen.add(name);
-        return groups.find((group) => group.name === name)?.rules ?? [];
+        const group = groups.find((held) => held.name === name);
+        return group ? byImplication(byRank(group.rules)) : [];
     });
     return {
         binding,

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

@@ -8,6 +8,7 @@ export interface ReleaseModule {
     functions?: Record<string, {
         params: string[];
         variables: string[];
+        lengths?: boolean[];
     }>;
     merges?: Record<string, string>;
     overrides?: Record<string, Record<number, string>>;

package/dist/transforms/release-styles.js

@@ -387,7 +387,10 @@ exports.releaseStyles = {
                 className: accessOf(resolved.module, resolved.key),
                 declarations: func.variables.map((variable, index) => {
                     const argument = sourceCode.getText(value.arguments[index]);
-                    return `['${variable}' as string]: ${argument}`;
+                    const written = func.lengths?.[index]
+                        ? `typeof ${argument} === 'number' ? \`\${${argument}}px\` : ${argument}`
+                        : argument;
+                    return `['${variable}' as string]: ${written}`;
                 }),
             };
         };
@@ -627,7 +630,8 @@ exports.releaseStyles = {
                     node.id.type !== 'Identifier' ||
                     node.init?.type !== 'Literal' ||
                     constants[node.id.name] !== node.init.value ||
-                    node.parent.declarations.length !== 1)
+                    node.parent.declarations.length !== 1 ||
+                    node.parent.parent?.type === 'ExportNamedDeclaration')
                     return;
                 const scope = sourceCode.getScope(node);
                 const variable = scope.variables.find((candidate) => candidate.name === node.id.name);
@@ -777,13 +781,14 @@ exports.releaseStyles = {
                     if (elements.length < 2)
                         return undefined;
                     const resolved = elements.map(styleKey);
-                    if (resolved.some((part) => !part))
+                    if (resolved.some((part) => !part?.module.target))
                         return undefined;
-                    const module = resolved[0].module;
-                    if (resolved.some((part) => part.module !== module))
-                        return undefined;
-                    const name = module.merges?.[resolved.map((part) => part.key).join('|')];
-                    return name ? accessOf(module, name) : undefined;
+                    const host = resolved[0].module;
+                    const signature = resolved
+                        .map((part) => `${part.module.target}#${part.key}`)
+                        .join('|');
+                    const name = host.merges?.[signature];
+                    return name ? accessOf(host, name) : undefined;
                 };
                 const replaceWithFunctionStyle = (className, declarations) => {
                     const styleAttribute = node.parent.attributes.find((attribute) => attribute.type === 'JSXAttribute' &&

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plumeria/codemod",
-  "version": "18.2.21",
+  "version": "18.2.22",
   "description": "Codemods for migrating Plumeria APIs",
   "author": "Refirst 11",
   "license": "MIT",