@plumeria/codemod 18.2.20 → 18.2.22

package/README.md

@@ -194,8 +194,23 @@ 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
+naming nothing is removed with it:
+
+```diff
+- const size = 'small';
+- <div classStyle={styles[size]} />
++ <div className={styles.small} />
+```
+
+Only a `const` holding a string literal is followed. A key computed at runtime is
+reported as `dynamic-style-access` and its definitions stay in Plumeria.
 
 ### Global styles
 

package/dist/cli.js

@@ -331,7 +331,7 @@ async function migrateFromCssModules(options) {
         console.log(line);
     return 1;
 }
-function releaseConfig(modules, themes, animations, statics, values, complete) {
+function releaseConfig(modules, themes, animations, statics, values, complete, constants) {
     return [
         { ignores: IGNORES },
         {
@@ -347,7 +347,15 @@ function releaseConfig(modules, themes, animations, statics, values, complete) {
             rules: {
                 'codemod/release-styles': [
                     'error',
-                    { modules, themes, animations, statics, values, complete },
+                    {
+                        modules,
+                        themes,
+                        animations,
+                        statics,
+                        values,
+                        complete,
+                        constants,
+                    },
                 ],
             },
         },
@@ -374,7 +382,7 @@ async function migrateFromPlumeria(options) {
     }
     const config = {
         overrideConfigFile: true,
-        overrideConfig: releaseConfig(planned.modules, planned.themes, planned.animations, planned.statics, planned.values, planned.complete),
+        overrideConfig: releaseConfig(planned.modules, planned.themes, planned.animations, planned.statics, planned.values, planned.complete, planned.constants),
         errorOnUnmatchedPattern: false,
     };
     const preview = await new eslint_1.ESLint(config).lintFiles(targets);

package/dist/release.d.ts

@@ -14,6 +14,7 @@ export interface ReleasePlan {
     statics: Record<string, string[]>;
     values: Record<string, Record<string, unknown>>;
     complete: boolean;
+    constants: Record<string, Record<string, string>>;
     global?: {
         target: string;
         css: string;

package/dist/release.js

@@ -310,7 +310,61 @@ function planRelease(targets) {
         catch {
         }
     }
+    const stringConstants = new Map();
+    const exportedConstants = new Map();
+    for (const source of sources) {
+        let ast;
+        try {
+            ast = (0, parser_1.parse)(sourceText.get(source), {
+                sourceType: 'module',
+                ecmaFeatures: { jsx: true },
+            });
+        }
+        catch {
+            continue;
+        }
+        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;
+            for (const declaration of statement.declarations) {
+                if (declaration.id.type !== 'Identifier' ||
+                    declaration.init?.type !== 'Literal' ||
+                    typeof declaration.init.value !== 'string')
+                    continue;
+                if (held.has(declaration.id.name))
+                    duplicated.add(declaration.id.name);
+                held.set(declaration.id.name, declaration.init.value);
+                if (isExport)
+                    exported.set(declaration.id.name, declaration.init.value);
+            }
+        };
+        walk(ast.body, (node) => {
+            if (node.type === 'ExportNamedDeclaration')
+                read(node.declaration, true);
+            else
+                read(node, false);
+        });
+        for (const name of duplicated) {
+            held.delete(name);
+            exported.delete(name);
+        }
+        if (held.size > 0)
+            stringConstants.set(source, held);
+        if (exported.size > 0)
+            exportedConstants.set(source, exported);
+    }
+    const resolvedConstants = new Map();
     const compositions = new Map();
+    const foldings = new Map();
+    const reached = new Map();
     for (const source of sources) {
         let ast;
         try {
@@ -324,6 +378,25 @@ function planRelease(targets) {
         catch {
             continue;
         }
+        const constants = new Map(stringConstants.get(source) ?? []);
+        for (const node of ast.body) {
+            if (node.type !== 'ImportDeclaration')
+                continue;
+            const target = (0, resolve_1.resolveSourcePath)(String(node.source.value), source);
+            const available = target ? exportedConstants.get(target) : undefined;
+            if (!available)
+                continue;
+            for (const specifier of node.specifiers) {
+                if (specifier.type !== 'ImportSpecifier')
+                    continue;
+                const imported = specifier.imported.name ?? specifier.imported.value;
+                const value = available.get(imported);
+                if (value !== undefined)
+                    constants.set(specifier.local.name, value);
+            }
+        }
+        if (constants.size > 0)
+            resolvedConstants.set(source, constants);
         const owners = new Map();
         for (const binding of createBindings.get(source) ?? [])
             owners.set(binding, { source, binding });
@@ -354,6 +427,9 @@ function planRelease(targets) {
             const owner = owners.get(node.object.name);
             if (!owner)
                 return;
+            if (node.property.type === 'Identifier' &&
+                constants.has(node.property.name))
+                return;
             note(owner.source, [
                 {
                     line: node.loc.start.line,
@@ -379,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) ?? []),
                 {
@@ -403,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;
@@ -505,6 +625,10 @@ function planRelease(targets) {
         statics,
         values,
         complete: stylesheets.every((sheet) => sheet.reports.length === 0),
+        constants: Object.fromEntries([...resolvedConstants].map(([source, held]) => [
+            source,
+            Object.fromEntries(held),
+        ])),
         global: globalRules.length > 0
             ? {
                 target: globalPath(targets),

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 &&
@@ -119,6 +126,25 @@ exports.adoptStyles = {
             const name = element?.name;
             return name?.type === 'JSXIdentifier' && /^[a-z]/.test(String(name.name));
         };
+        const renamedText = (element) => {
+            const read = styleRead(element);
+            const binding = read?.object?.type === 'Identifier'
+                ? bindings.get(read.object.name)
+                : undefined;
+            if (!binding)
+                return context.sourceCode.getText(element);
+            const written = read.computed && read.property.type === 'Literal'
+                ? String(read.property.value)
+                : !read.computed && read.property.type === 'Identifier'
+                    ? read.property.name
+                    : undefined;
+            if (written === undefined)
+                return context.sourceCode.getText(element);
+            const access = `${binding.local}.${binding.entry.names[written] ?? written}`;
+            return element.type === 'LogicalExpression'
+                ? `${context.sourceCode.getText(element.left)} ${element.operator} ${access}`
+                : access;
+        };
         const styleRead = (node) => node?.type === 'LogicalExpression'
             ? styleRead(node.right)
             : node?.type === 'MemberExpression'
@@ -152,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') {
@@ -210,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' &&
@@ -268,14 +291,6 @@ exports.adoptStyles = {
                     : undefined;
                 if (!binding)
                     return;
-                if (coreLocal && !stylingPosition(node) && !insideUse(node)) {
-                    context.report({
-                        node,
-                        messageId: 'value',
-                        fix: (fixer) => fixer.replaceText(node, `${coreLocal}.use(${context.sourceCode.getText(node)})`),
-                    });
-                    return;
-                }
                 const written = node.computed && node.property.type === 'Literal'
                     ? String(node.property.value)
                     : !node.computed && node.property.type === 'Identifier'
@@ -285,6 +300,14 @@ exports.adoptStyles = {
                     return;
                 const key = binding.entry.names[written] ?? written;
                 const local = binding.local;
+                if (coreLocal && !stylingPosition(node) && !insideUse(node)) {
+                    context.report({
+                        node,
+                        messageId: 'value',
+                        fix: (fixer) => fixer.replaceText(node, `${coreLocal}.use(${local}.${key})`),
+                    });
+                    return;
+                }
                 if (key === written && local === node.object.name)
                     return;
                 context.report({
@@ -383,9 +406,21 @@ exports.adoptStyles = {
                 if (joined) {
                     if (!joined.some((element) => bindings.has(styleRead(element)?.object?.name)))
                         return;
-                    const list = joined
-                        .map((element) => context.sourceCode.getText(element))
-                        .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>>;
@@ -19,6 +20,7 @@ export interface ReleaseStylesOptions {
     statics?: Record<string, string[]>;
     values?: Record<string, Record<string, unknown>>;
     complete?: boolean;
+    constants?: Record<string, Record<string, string>>;
     styleProp?: string;
     active?: boolean;
 }

package/dist/transforms/release-styles.js

@@ -56,6 +56,23 @@ const isCreate = (node) => {
     return path?.length === 2 && path[1] === 'create';
 };
 const IDENTIFIER = /^[A-Za-z_$][A-Za-z0-9_$]*$/;
+const walk = (node, visit) => {
+    if (!node || typeof node !== 'object')
+        return;
+    if (Array.isArray(node)) {
+        for (const child of node)
+            walk(child, visit);
+        return;
+    }
+    if (typeof node.type !== 'string')
+        return;
+    visit(node);
+    for (const key of Object.keys(node)) {
+        if (key === 'parent' || key === 'loc' || key === 'range')
+            continue;
+        walk(node[key], visit);
+    }
+};
 const needsFilter = (node) => node.type === 'LogicalExpression' ||
     node.type === 'ConditionalExpression' ||
     node.type === 'SpreadElement';
@@ -82,6 +99,7 @@ exports.releaseStyles = {
             use: 'Read the class name straight from the CSS Module.',
             token: 'Inline the value this token resolved to.',
             styleType: 'A released style is a class name.',
+            folded: 'This only named a style key, which the export has resolved.',
             functionStyle: 'Use the CSS Module class and pass function arguments as custom properties.',
             unsupportedFunctionStyle: 'This function style call cannot be converted without changing its behavior.',
         },
@@ -95,6 +113,7 @@ exports.releaseStyles = {
                     statics: { type: 'object' },
                     values: { type: 'object' },
                     complete: { type: 'boolean' },
+                    constants: { type: 'object' },
                     styleProp: { type: 'string' },
                     active: { type: 'boolean' },
                 },
@@ -117,6 +136,7 @@ exports.releaseStyles = {
         const styleProp = raw.styleProp ?? 'classStyle';
         const sourceCode = context.sourceCode;
         const moduleByLocal = new Map();
+        const styleLocals = new Set();
         let active = Boolean(entry || raw.active || raw.complete);
         let coreImport;
         let coreLocal;
@@ -167,10 +187,14 @@ exports.releaseStyles = {
                     bindings.includes(candidate.imported.name ?? candidate.imported.value)));
         };
         const removeStatement = (fixer, node) => {
-            const body = sourceCode.ast.body;
+            const body = (Array.isArray(node.parent?.body)
+                ? node.parent.body
+                : sourceCode.ast.body);
             const next = body.find((statement) => statement.range[0] >= node.range[1]);
             if (!next)
-                return fixer.removeRange([node.range[0], sourceCode.text.length]);
+                return body === sourceCode.ast.body
+                    ? fixer.removeRange([node.range[0], sourceCode.text.length])
+                    : fixer.remove(node);
             if (removesStatement(next))
                 return fixer.remove(node);
             const anchor = importAnchor();
@@ -279,6 +303,7 @@ exports.releaseStyles = {
         const moduleOf = (node) => node?.type === 'MemberExpression' && node.object.type === 'Identifier'
             ? moduleByLocal.get(node.object.name)
             : undefined;
+        const constants = raw.constants?.[context.filename] ?? {};
         const styleKey = (node) => {
             const module = moduleOf(node);
             if (!module)
@@ -286,7 +311,9 @@ exports.releaseStyles = {
             const written = node.computed
                 ? node.property.type === 'Literal'
                     ? String(node.property.value)
-                    : undefined
+                    : node.property.type === 'Identifier'
+                        ? constants[node.property.name]
+                        : undefined
                 : node.property.name;
             if (written === undefined)
                 return undefined;
@@ -360,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}`;
                 }),
             };
         };
@@ -385,6 +415,8 @@ exports.releaseStyles = {
             }
             if (value.type === 'Literal' && !value.value)
                 return sourceCode.getText(value);
+            if (value.type === 'Identifier' && styleLocals.has(value.name))
+                return sourceCode.getText(value);
             return classText(value);
         };
         const declarationsOf = (value) => {
@@ -447,6 +479,13 @@ exports.releaseStyles = {
                     moduleByLocal.set(local, { ...module, binding: local });
                     active = true;
                 }
+                walk(program.body, (node) => {
+                    if (node.type !== 'VariableDeclarator' ||
+                        node.id.type !== 'Identifier' ||
+                        !styleKey(node.init))
+                        return;
+                    styleLocals.add(node.id.name);
+                });
                 const migrating = active || themeBindings.length > 0 || animationBindings.length > 0;
                 coreNeeded = keptDefinition || !migrating || survivesCore(program);
                 if (coreImport &&
@@ -585,6 +624,37 @@ exports.releaseStyles = {
                     fix: (fixer) => fixer.replaceText(node, literal),
                 });
             },
+            VariableDeclarator(node) {
+                if (!active ||
+                    keptDefinition ||
+                    node.id.type !== 'Identifier' ||
+                    node.init?.type !== 'Literal' ||
+                    constants[node.id.name] !== node.init.value ||
+                    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);
+                if (!variable || variable.references.length === 0)
+                    return;
+                const onlyNamesKeys = variable.references.every((reference) => {
+                    if (reference.init)
+                        return true;
+                    const parent = reference.identifier.parent;
+                    return (parent?.type === 'MemberExpression' &&
+                        parent.computed &&
+                        parent.property === reference.identifier &&
+                        Boolean(moduleOf(parent)));
+                });
+                if (!onlyNamesKeys)
+                    return;
+                const target = node.parent;
+                context.report({
+                    node: target,
+                    messageId: 'folded',
+                    fix: (fixer) => removeStatement(fixer, target),
+                });
+            },
             TSTypeReference(node) {
                 if (!complete || keptDefinition)
                     return;
@@ -629,7 +699,9 @@ exports.releaseStyles = {
                 const key = node.computed
                     ? node.property.type === 'Literal'
                         ? String(node.property.value)
-                        : undefined
+                        : node.property.type === 'Identifier'
+                            ? constants[node.property.name]
+                            : undefined
                     : node.property.name;
                 const className = key ? alias[key] : undefined;
                 if (!className)
@@ -709,13 +781,14 @@ exports.releaseStyles = {
                     if (elements.length < 2)
                         return undefined;
                     const resolved = elements.map(styleKey);
-                    if (resolved.some((part) => !part))
-                        return undefined;
-                    const module = resolved[0].module;
-                    if (resolved.some((part) => part.module !== module))
+                    if (resolved.some((part) => !part?.module.target))
                         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.20",
+  "version": "18.2.22",
   "description": "Codemods for migrating Plumeria APIs",
   "author": "Refirst 11",
   "license": "MIT",