@plumeria/codemod 18.2.26 → 18.2.28

package/dist/cascade.d.ts

@@ -0,0 +1,14 @@
+export declare const depthOf: (property: string) => number;
+export declare const rankOf: (property: string, conditional: boolean) => number;
+export declare const coverageOf: (property: string) => Set<string>;
+export declare const overlaps: (first: string, second: string) => boolean;
+export interface Held {
+    property: string;
+    suffix: string;
+    rank: number;
+    place: number;
+}
+export declare const unrepresentable: (left: Held[], right: Held[]) => {
+    earlier: Held;
+    later: Held;
+} | undefined;

package/dist/cascade.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.unrepresentable = exports.overlaps = exports.coverageOf = exports.rankOf = exports.depthOf = void 0;
+const zss_engine_1 = require("zss-engine");
+const SHORTHANDS_OF = {};
+for (const [shorthand, longhands] of Object.entries(zss_engine_1.DIRECT_LONGHANDS))
+    for (const longhand of longhands)
+        (SHORTHANDS_OF[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 SHORTHANDS_OF[property] ?? [])
+        depth = Math.max(depth, (0, exports.depthOf)(shorthand) + 1);
+    depths.set(property, depth);
+    return depth;
+};
+exports.depthOf = depthOf;
+const rankOf = (property, conditional) => property.startsWith('--') ? 0 : 1 + (conditional ? 1 : 0) + (0, exports.depthOf)(property);
+exports.rankOf = rankOf;
+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) => [...(0, exports.coverageOf)(longhand)]))
+        : new Set([property]);
+    coverages.set(property, coverage);
+    return coverage;
+};
+exports.coverageOf = coverageOf;
+const overlaps = (first, second) => {
+    const left = (0, exports.coverageOf)(first);
+    return [...(0, exports.coverageOf)(second)].some((leaf) => left.has(leaf));
+};
+exports.overlaps = overlaps;
+const unrepresentable = (left, right) => {
+    for (const mine of left)
+        for (const theirs of right) {
+            if (mine.suffix !== theirs.suffix)
+                continue;
+            if (mine.place === theirs.place)
+                continue;
+            if (!(0, exports.overlaps)(mine.property, theirs.property))
+                continue;
+            const [earlier, later] = mine.place < theirs.place ? [mine, theirs] : [theirs, mine];
+            if (earlier.rank > later.rank)
+                return { earlier, later };
+        }
+    return undefined;
+};
+exports.unrepresentable = unrepresentable;

package/dist/cli.js

@@ -301,6 +301,36 @@ async function migrateFromCssModules(options) {
         console.log('No *.module.css found.');
         return 0;
     }
+    const held = new Map();
+    const detected = await new eslint_1.ESLint({
+        overrideConfigFile: true,
+        overrideConfig: migrateConfig(modules),
+        errorOnUnmatchedPattern: false,
+    }).lintFiles(targets);
+    for (const result of detected)
+        for (const message of result.messages) {
+            if (message.messageId !== 'missing' && message.messageId !== 'cascade')
+                continue;
+            const [sheet, rest] = message.message.split(' :: ');
+            if (!modules[sheet])
+                continue;
+            const named = held.get(sheet) ?? new Set();
+            named.add(rest);
+            held.set(sheet, named);
+        }
+    for (const [sheet, named] of held) {
+        delete modules[sheet];
+        const listed = [...named].map((name) => `\`${name}\``).join(', ');
+        stylesheets
+            .find((s) => s.source === sheet)
+            ?.reports.push({
+            line: 0,
+            column: 0,
+            kind: 'held-for-consumer',
+            source: '',
+            hint: `${listed} ${named.size === 1 ? 'is' : 'are'} read by a consumer the migration cannot answer for, so nothing was written and no consumer was moved. Settle the rules above and run again.`,
+        });
+    }
     for (const sheet of stylesheets) {
         if (!modules[sheet.source])
             continue;
@@ -320,7 +350,7 @@ async function migrateFromCssModules(options) {
     }
     else {
         warnIfDirty();
-        (0, migrate_1.write)(targets);
+        (0, migrate_1.write)(targets, new Set(held.keys()));
         const applied = await new eslint_1.ESLint({ ...config, fix: true }).lintFiles(targets);
         await eslint_1.ESLint.outputFixes(applied);
         const touched = applied.filter((r) => r.output !== undefined);

package/dist/migrate.d.ts

@@ -12,5 +12,5 @@ export interface Plan {
 export declare function findStylesheets(targets: string[]): string[];
 export declare const targetPath: (stylesheet: string) => string;
 export declare function plan(targets: string[]): Plan;
-export declare function write(targets: string[]): Plan;
+export declare function write(targets: string[], skip?: Set<string>): Plan;
 export declare function formatReports(sheets: Stylesheet[], cwd: string): string[];

package/dist/migrate.js

@@ -103,18 +103,25 @@ function plan(targets) {
         modules[source] = {
             source: `./${path.basename(target, '.ts')}`,
             target,
+            stylesheet: source,
             names: converted.names,
+            order: converted.order,
+            held: converted.held,
             composes: converted.composes,
             functions: converted.functions,
+            tags: converted.tags,
+            unconvertible: converted.unconvertible,
         };
     }
     return { stylesheets, modules };
 }
-function write(targets) {
+function write(targets, skip) {
     const result = plan(targets);
     for (const sheet of result.stylesheets) {
         if (!result.modules[sheet.source])
             continue;
+        if (skip?.has(sheet.source))
+            continue;
         const converted = (0, css_modules_1.convertStylesheet)(fs.readFileSync(sheet.source, 'utf-8'));
         fs.writeFileSync(sheet.target, converted.code, 'utf-8');
     }

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

@@ -3,8 +3,19 @@ export interface ModuleMap {
     source: string;
     target?: string;
     names: Record<string, string>;
+    order?: Record<string, number>;
+    held?: Record<string, import('../cascade').Held[]>;
     composes?: Record<string, string[]>;
     functions?: Record<string, string[]>;
+    tags?: {
+        key: string;
+        tag: string;
+        under: string;
+        direct?: boolean;
+        order?: number;
+    }[];
+    stylesheet?: string;
+    unconvertible?: string[];
 }
 export interface AdoptStylesOptions {
     modules: Record<string, ModuleMap>;

package/dist/transforms/adopt-styles.js

@@ -36,6 +36,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.adoptStyles = void 0;
 const path = __importStar(require("node:path"));
 const resolve_1 = require("../resolve");
+const cascade_1 = require("../cascade");
 const CORE = '@plumeria/core';
 const readOptions = (context) => {
     const raw = (context.options[0] ?? {});
@@ -61,6 +62,9 @@ exports.adoptStyles = {
             value: 'A style read as a value goes back through `css.use`.',
             joined: 'A joined class list is written as an array.',
             call: 'The custom properties are the arguments of a function style.',
+            tag: 'A rule reached this <{{tag}}> through a class; carry it as "{{key}}".',
+            missing: '{{stylesheet}} :: {{name}}',
+            cascade: '{{stylesheet}} :: {{name}}',
         },
         schema: [
             {
@@ -76,6 +80,7 @@ exports.adoptStyles = {
     create(context) {
         const { modules, styleProp } = readOptions(context);
         const bindings = new Map();
+        const tagged = new Set();
         let hasCore = false;
         let stylesTaken = false;
         let coreLocal;
@@ -182,6 +187,61 @@ exports.adoptStyles = {
                 current.parent.callee?.type === 'MemberExpression' &&
                 current.parent.callee.property?.name === 'use');
         };
+        const at = (element) => {
+            const read = styleRead(element);
+            const binding = bindings.get(read?.object?.name);
+            if (!binding)
+                return null;
+            const written = read.computed && read.property.type === 'Literal'
+                ? String(read.property.value)
+                : !read.computed && read.property.type === 'Identifier'
+                    ? read.property.name
+                    : null;
+            if (written === null)
+                return null;
+            const key = binding.entry.names[written] ?? written;
+            const place = binding.entry.order?.[key];
+            return place === undefined
+                ? null
+                : {
+                    module: binding.entry,
+                    place,
+                    key,
+                    entry: binding.entry,
+                };
+        };
+        const inStylesheetOrder = (elements) => {
+            const sorted = [...elements];
+            const groups = new Map();
+            elements.forEach((element, index) => {
+                const found = at(element);
+                if (!found)
+                    return;
+                const slots = groups.get(found.module) ?? [];
+                slots.push(index);
+                groups.set(found.module, slots);
+            });
+            for (const slots of groups.values()) {
+                const ordered = slots
+                    .map((index) => elements[index])
+                    .sort((a, b) => at(a).place - at(b).place);
+                slots.forEach((index, at_) => (sorted[index] = ordered[at_]));
+            }
+            return sorted;
+        };
+        const unsettled = (held) => held.flatMap((mine, index) => held.slice(index + 1).flatMap((theirs) => {
+            if (mine.entry !== theirs.entry)
+                return [];
+            const left = mine.entry.held?.[mine.key];
+            const right = theirs.entry.held?.[theirs.key];
+            if (!left || !right)
+                return [];
+            return (0, cascade_1.unrepresentable)(left, right) ? [mine, theirs] : [];
+        }));
+        const readsOf = (elements) => elements.flatMap((element) => {
+            const found = at(element);
+            return found ? [{ entry: found.entry, key: found.key }] : [];
+        });
         return {
             Program(program) {
                 hasCore = program.body.some((n) => n.type === 'ImportDeclaration' && n.source.value === CORE);
@@ -328,6 +388,16 @@ exports.adoptStyles = {
                         });
                     return;
                 }
+                const entry = binding.entry;
+                if (entry.stylesheet &&
+                    (entry.unconvertible?.includes(written) || !(written in entry.names))) {
+                    context.report({
+                        node: node.property,
+                        messageId: 'missing',
+                        data: { stylesheet: entry.stylesheet, name: written },
+                    });
+                    return;
+                }
                 const key = binding.entry.names[written] ?? written;
                 if (coreLocal && !stylingPosition(node) && !insideUse(node)) {
                     context.report({
@@ -422,6 +492,131 @@ exports.adoptStyles = {
                     ],
                 });
             },
+            JSXElement(node) {
+                const scoped = [];
+                for (const attribute of node.openingElement?.attributes ?? []) {
+                    if (attribute.type !== 'JSXAttribute')
+                        continue;
+                    const name = attribute.name?.name;
+                    if (name !== 'className' && name !== styleProp)
+                        continue;
+                    if (attribute.value?.type !== 'JSXExpressionContainer')
+                        continue;
+                    const reads = [];
+                    const gather = (expression) => {
+                        if (!expression || typeof expression !== 'object')
+                            return;
+                        if (expression.type === 'MemberExpression') {
+                            reads.push(expression);
+                            return;
+                        }
+                        if (expression.type === 'ArrayExpression')
+                            expression.elements.forEach(gather);
+                        else if (expression.type === 'TemplateLiteral')
+                            expression.expressions.forEach(gather);
+                        else if (expression.type === 'LogicalExpression') {
+                            gather(expression.left);
+                            gather(expression.right);
+                        }
+                        else if (expression.type === 'ConditionalExpression') {
+                            gather(expression.consequent);
+                            gather(expression.alternate);
+                        }
+                    };
+                    gather(attribute.value.expression);
+                    for (const read of reads) {
+                        const name_ = read.object?.name;
+                        const binding = bindings.get(name_) ??
+                            [...bindings.values()].find((b) => b.local === name_);
+                        if (!binding)
+                            continue;
+                        const written = read.property?.name ?? read.property?.value;
+                        if (written == null)
+                            continue;
+                        const key = binding.entry.names[written] ?? written;
+                        for (const pair of binding.entry.tags ?? [])
+                            if (pair.under === key)
+                                scoped.push({
+                                    tag: pair.tag,
+                                    key: pair.key,
+                                    local: binding.local,
+                                    direct: pair.direct === true,
+                                    order: pair.order ?? 0,
+                                });
+                    }
+                }
+                if (!scoped.length)
+                    return;
+                const walk = (children, depth) => {
+                    for (const child of children ?? []) {
+                        if (child.type !== 'JSXElement')
+                            continue;
+                        const opening = child.openingElement;
+                        const named = opening?.name?.type === 'JSXIdentifier'
+                            ? opening.name.name
+                            : null;
+                        const attributes = opening?.attributes ?? [];
+                        const already = attributes.find((attribute) => attribute.type === 'JSXAttribute' &&
+                            attribute.name?.name === styleProp &&
+                            attribute.value?.type === 'JSXExpressionContainer');
+                        const pending = attributes.some((attribute) => attribute.type === 'JSXAttribute' &&
+                            attribute.name?.name === 'className');
+                        const written = already?.value.expression.type === 'ArrayExpression'
+                            ? already.value.expression.elements.filter(Boolean)
+                            : [];
+                        const carried = new Set(already
+                            ? already.value.expression.type === 'ArrayExpression'
+                                ? written.map((element) => context.sourceCode.getText(element))
+                                : [context.sourceCode.getText(already.value.expression)]
+                            : []);
+                        for (const pair of scoped) {
+                            if (named !== pair.tag || pending)
+                                continue;
+                            if (pair.direct && depth > 1)
+                                continue;
+                            const read = `${pair.local}.${pair.key}`;
+                            if (carried.has(read))
+                                continue;
+                            if (tagged.has(opening))
+                                continue;
+                            tagged.add(opening);
+                            const reads = new Map();
+                            for (const { entry, local } of bindings.values())
+                                for (const other of entry.tags ?? [])
+                                    reads.set(`${local}.${other.key}`, other.order ?? 0);
+                            const placed = written.filter((element) => reads.has(context.sourceCode.getText(element)));
+                            const before = placed.find((element) => (reads.get(context.sourceCode.getText(element)) ?? 0) >
+                                pair.order);
+                            const after = before ? undefined : placed[placed.length - 1];
+                            context.report({
+                                node: opening.name,
+                                messageId: 'tag',
+                                data: { tag: pair.tag, key: pair.key },
+                                fix: (fixer) => {
+                                    if (!already)
+                                        return fixer.insertTextAfter(opening.name, ` ${styleProp}={${read}}`);
+                                    const expression = already.value.expression;
+                                    if (expression.type !== 'ArrayExpression') {
+                                        const held = context.sourceCode.getText(expression);
+                                        return fixer.replaceText(expression, reads.has(held)
+                                            ? `[${held}, ${read}]`
+                                            : `[${read}, ${held}]`);
+                                    }
+                                    if (before)
+                                        return fixer.insertTextBefore(before, `${read}, `);
+                                    if (after)
+                                        return fixer.insertTextAfter(after, `, ${read}`);
+                                    return written.length === 0
+                                        ? fixer.replaceText(expression, `[${read}]`)
+                                        : fixer.insertTextBefore(written[0], `${read}, `);
+                                },
+                            });
+                        }
+                        walk(child.children, depth + 1);
+                    }
+                };
+                walk(node.children, 1);
+            },
             JSXAttribute(node) {
                 if (node.name.type !== 'JSXIdentifier')
                     return;
@@ -437,7 +632,18 @@ exports.adoptStyles = {
                         return;
                     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(', ');
+                    const beyond = unsettled(readsOf(styles_));
+                    if (beyond.length > 0) {
+                        for (const { entry, key } of beyond)
+                            if (entry.stylesheet)
+                                context.report({
+                                    node,
+                                    messageId: 'cascade',
+                                    data: { stylesheet: entry.stylesheet, name: key },
+                                });
+                        return;
+                    }
+                    const list = inStylesheetOrder(styles_).map(renamedText).join(', ');
                     if (carried.length > 0) {
                         const kept = carried
                             .map((element) => context.sourceCode.getText(element))
@@ -496,8 +702,20 @@ exports.adoptStyles = {
                 const composed = key ? entry.composes?.[key] : undefined;
                 if (!composed || composed.length === 0)
                     return;
+                const beyond = unsettled(composed.concat(key).map((k) => ({ entry, key: k })));
+                if (beyond.length > 0) {
+                    for (const held of beyond)
+                        if (held.entry.stylesheet)
+                            context.report({
+                                node: expression,
+                                messageId: 'cascade',
+                                data: { stylesheet: held.entry.stylesheet, name: held.key },
+                            });
+                    return;
+                }
                 const parts = composed
                     .concat(key)
+                    .sort((a, b) => (entry.order?.[a] ?? 0) - (entry.order?.[b] ?? 0))
                     .map((k) => `${local}.${k}`)
                     .join(', ');
                 context.report({

package/dist/transforms/css-modules.d.ts

@@ -1,3 +1,4 @@
+import { type Held } from '../cascade';
 export interface Report {
     line: number;
     column: number;
@@ -10,8 +11,19 @@ export interface Converted {
     names: Record<string, string>;
     composes: Record<string, string[]>;
     functions: Record<string, string[]>;
+    tags: Tags[];
+    held: Record<string, Held[]>;
+    order: Record<string, number>;
+    unconvertible: string[];
     reports: Report[];
 }
+export interface Tags {
+    key: string;
+    tag: string;
+    under: string;
+    direct: boolean;
+    order: number;
+}
 interface Raw {
     raw: string;
 }

package/dist/transforms/css-modules.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.toValue = exports.toKey = exports.toProperty = void 0;
 exports.convertStylesheet = convertStylesheet;
 const postcss_1 = __importDefault(require("postcss"));
+const cascade_1 = require("../cascade");
 const postcss_selector_parser_1 = __importDefault(require("postcss-selector-parser"));
 const DOC = 'https://plumeria.dev/docs/api-reference/javascript/marker';
 const emptyNode = () => ({ decls: [], nested: [], markers: [] });
@@ -33,6 +34,7 @@ const toValue = (raw) => {
     return value;
 };
 exports.toValue = toValue;
+const last = (names) => names[names.length - 1];
 const nest = (node, key) => {
     const found = node.nested.find(([k]) => k === key);
     if (found)
@@ -59,51 +61,43 @@ const readSelector = (selector) => {
     };
     (0, postcss_selector_parser_1.default)((root) => {
         const nodes = root.first.nodes.filter((n) => n.type !== 'string' && !isSpecificityBoost(n));
-        const parts = [
-            { pseudos: [] },
-        ];
+        const parts = [{ classNames: [], pseudos: [] }];
         let combinator = null;
         let bad = null;
         for (const node of nodes) {
             if (node.type === 'class') {
-                const current = parts[parts.length - 1];
-                if (current.className) {
-                    bad = {
-                        kind: 'unsupported-selector',
-                        hint: 'Two classes on one element are written as an array at the call site.',
-                    };
-                    break;
-                }
-                current.className = node.value;
+                parts[parts.length - 1].classNames.push(node.value);
             }
             else if (node.type === 'pseudo') {
                 if (node.value === ':global') {
-                    bad = {
-                        kind: 'global',
-                        hint: "A global class is written as a selector key: `':is(.name *)'`.",
-                    };
-                    break;
+                    const inner = String(node)
+                        .slice(':global'.length)
+                        .replace(/^\(|\)$/g, '');
+                    if (!inner) {
+                        bad = {
+                            kind: 'global',
+                            hint: "A global class is written as a selector key: `':is(.name *)'`.",
+                        };
+                        break;
+                    }
+                    parts[parts.length - 1].global = inner;
+                    continue;
                 }
                 parts[parts.length - 1].pseudos.push(String(node));
             }
+            else if (node.type === 'tag') {
+                parts[parts.length - 1].tag = node.value;
+            }
+            else if (node.type === 'attribute') {
+                const attr = node;
+                if (attr.value != null && attr.quoteMark === "'")
+                    attr.quoteMark = '"';
+                parts[parts.length - 1].pseudos.push(`:is(${String(node).trim()})`);
+            }
             else if (node.type === 'combinator') {
                 const value = node.value.trim();
-                if (value === '+' || value === '~') {
-                    bad = {
-                        kind: 'sibling-combinator',
-                        hint: `A marker carries no order. Write the relation as a selector key: ${DOC}`,
-                    };
-                    break;
-                }
-                if (parts.length > 1) {
-                    bad = {
-                        kind: 'unsupported-selector',
-                        hint: 'Only one level of nesting is converted.',
-                    };
-                    break;
-                }
-                combinator = value === '>' ? '>' : ' ';
-                parts.push({ pseudos: [] });
+                combinator = value === '>' ? '>' : value === ' ' ? ' ' : value;
+                parts.push({ classNames: [], pseudos: [], after: combinator });
             }
             else {
                 bad = {
@@ -117,26 +111,64 @@ const readSelector = (selector) => {
             result = bad;
             return;
         }
-        if (parts.some((p) => !p.className))
+        const globals = parts.filter((p) => p.global && !p.classNames.length);
+        if (globals.length) {
+            const rest = parts.filter((p) => !(p.global && !p.classNames.length));
+            if (rest.length !== 1 || !rest[0].classNames.length)
+                return;
+            const ancestors = globals.map((p) => `${p.global} `).join('');
+            result = {
+                target: {
+                    key: (0, exports.toKey)(last(rest[0].classNames)),
+                    pseudo: `:is(${ancestors}*)${rest[0].pseudos.join('')}`,
+                },
+            };
+            return;
+        }
+        if (parts.some((p) => p.after === '+' || p.after === '~')) {
+            result = {
+                kind: 'sibling-combinator',
+                hint: `A container query reaches descendants, never siblings, so no marker states this. Whether an ordinal such as \`:not(:first-child)\` is equivalent depends on the markup — write the relation as a selector key: ${DOC}`,
+            };
             return;
-        const [first, second] = parts;
-        if (!second) {
+        }
+        const tagged = parts[parts.length - 1];
+        if (parts.length > 1 &&
+            tagged.tag &&
+            !tagged.classNames.length &&
+            parts.slice(0, -1).every((p) => p.classNames.length)) {
+            const above = parts.slice(0, -1);
+            const relation = tagged.after === '>' ? 'child-' : '';
             result = {
                 target: {
-                    key: (0, exports.toKey)(first.className),
-                    pseudo: first.pseudos.join(''),
+                    key: (0, exports.toKey)(`${last(above[above.length - 1].classNames)}-${relation}${tagged.tag}`),
+                    pseudo: tagged.pseudos.join(''),
+                    tag: tagged.tag,
+                    direct: tagged.after === '>',
+                    ancestors: above.map((part) => ({
+                        key: (0, exports.toKey)(last(part.classNames)),
+                        pseudo: part.pseudos.join('') || ':defined',
+                    })),
                 },
             };
             return;
         }
+        if (parts.some((p) => !p.classNames.length))
+            return;
+        const target = parts[parts.length - 1];
+        const above = parts.slice(0, -1);
         result = {
             target: {
-                key: (0, exports.toKey)(second.className),
-                pseudo: second.pseudos.join(''),
-                ancestor: {
-                    key: (0, exports.toKey)(first.className),
-                    pseudo: first.pseudos.join('') || ':defined',
-                },
+                key: (0, exports.toKey)(last(target.classNames)),
+                pseudo: target.pseudos.join(''),
+                ...(above.length
+                    ? {
+                        ancestors: above.map((part) => ({
+                            key: (0, exports.toKey)(last(part.classNames)),
+                            pseudo: part.pseudos.join('') || ':defined',
+                        })),
+                    }
+                    : {}),
             },
         };
         void combinator;
@@ -172,15 +204,26 @@ function convertStylesheet(css) {
     const root = postcss_1.default.parse(css);
     const keys = new Map();
     const names = {};
+    const candidates = {};
     const composes = {};
     const reports = [];
     const markerPseudos = new Map();
+    const tags = [];
+    const unconvertible = new Set();
+    const order = {};
+    const held = {};
+    let wrote = 0;
+    let seen = 0;
+    const written = [];
     const keyOf = (name) => {
         if (!keys.has(name))
             keys.set(name, emptyNode());
         return keys.get(name);
     };
     const report = (node, kind, hint) => {
+        const rule = node.type === 'rule' ? node : node.parent;
+        for (const found of rule?.selector?.match(/\.([A-Za-z0-9_-]+)/g) ?? [])
+            unconvertible.add(found.slice(1));
         const start = node.source?.start;
         reports.push({
             line: start?.line ?? 0,
@@ -201,23 +244,48 @@ function convertStylesheet(css) {
             for (const className of selector.match(/\.([A-Za-z0-9_-]+)/g) ?? []) {
                 const bare = className.slice(1);
                 const key = (0, exports.toKey)(bare);
-                const taken = Object.entries(names).find(([other, k]) => k === key && other !== bare);
+                const taken = Object.entries(candidates).find(([other, k]) => k === key && other !== bare);
                 if (taken) {
                     report(rule, 'key-collision', `\`${bare}\` and \`${taken[0]}\` both become \`${key}\`.`);
                 }
-                names[bare] = key;
+                candidates[bare] = key;
             }
             let node = keyOf(target.key);
-            if (target.ancestor) {
-                const { key: id, pseudo } = target.ancestor;
-                const seen = markerPseudos.get(id) ?? new Set();
-                if (!seen.has(pseudo)) {
-                    seen.add(pseudo);
-                    markerPseudos.set(id, seen);
-                    keyOf(id).markers.push(`css.marker('${id}', '${pseudo}')`);
+            if (target.tag && target.ancestors) {
+                const under = target.ancestors[target.ancestors.length - 1].key;
+                if (!tags.some((t) => t.key === target.key &&
+                    t.tag === target.tag &&
+                    t.direct === (target.direct === true)))
+                    tags.push({
+                        key: target.key,
+                        tag: target.tag,
+                        under,
+                        direct: target.direct === true,
+                        order: tags.length,
+                    });
+            }
+            if (target.ancestors) {
+                let gate = null;
+                for (const { key: id, pseudo } of target.ancestors) {
+                    const signature = `${gate ?? ''}>${pseudo}`;
+                    const seen = markerPseudos.get(id) ?? new Set();
+                    if (!seen.has(signature)) {
+                        seen.add(signature);
+                        markerPseudos.set(id, seen);
+                        const holder = gate ? nest(keyOf(id), gate) : keyOf(id);
+                        holder.markers.push(`css.marker('${id}', '${pseudo}')`);
+                    }
+                    gate = `css.extended('${id}', '${pseudo}')`;
                 }
-                node = nest(node, `css.extended('${id}', '${pseudo}')`);
+                node = nest(node, gate);
             }
+            const place = seen++;
+            order[target.key] = place;
+            const props = new Set();
+            const where = `${atRuleKeys(rule).join('|')}::${target.pseudo}`;
+            written.push({ key: target.key, place, props });
+            const conditional = atRuleKeys(rule).length > 0;
+            const mine = (held[target.key] ??= []);
             for (const key of atRuleKeys(rule))
                 node = nest(node, key);
             if (target.pseudo)
@@ -228,13 +296,20 @@ function convertStylesheet(css) {
                 if (child.prop === 'composes') {
                     const [name, from] = child.value.split(/\s+from\s+/);
                     if (from) {
-                        report(child, 'composes-external', 'A class composed from another file is not resolved.');
+                        report(child, 'composes-external', 'A class composed from another file is not resolved. Convert that stylesheet too, then pass both at the call site as an array.');
                         return;
                     }
                     composes[target.key] = (composes[target.key] ?? []).concat(name.split(/\s+/).map(exports.toKey));
                     return;
                 }
                 const property = (0, exports.toProperty)(child.prop);
+                props.add(`${where}::${property}`);
+                mine.push({
+                    property: child.prop,
+                    suffix: target.pseudo,
+                    rank: (0, cascade_1.rankOf)(child.prop, conditional),
+                    place: wrote++,
+                });
                 const held = node.decls.findIndex(([name]) => name === property);
                 if (held !== -1)
                     node.decls.splice(held, 1);
@@ -291,5 +366,75 @@ export const styles = css.create({
 ${body}
 });
 `;
-    return { code, names, composes, functions, reports };
+    for (const [key, declarations] of Object.entries(held)) {
+        const beaten = (0, cascade_1.unrepresentable)(declarations, declarations);
+        if (beaten) {
+            reports.push({
+                line: 0,
+                column: 0,
+                kind: 'rank-order',
+                source: '',
+                hint: `${beaten.earlier.property === beaten.later.property
+                    ? `\`${key}\` sets \`${beaten.later.property}\` after setting it where Plumeria ranks it higher — an at-rule is one step up.`
+                    : `\`${key}\` sets \`${beaten.later.property}\` after \`${beaten.earlier.property}\`, which Plumeria ranks above it.`} CSS gives the property to the later declaration and Plumeria cannot, and one key has no order to settle that with. Write the higher-ranked declaration last.`,
+            });
+            for (const [name, candidate] of Object.entries(candidates))
+                if (candidate === key)
+                    unconvertible.add(name);
+        }
+    }
+    for (const entry of written) {
+        const earlier = written.filter((other) => other.key === entry.key && other.place < entry.place);
+        if (earlier.length === 0)
+            continue;
+        for (const between of written) {
+            if (between.key === entry.key)
+                continue;
+            if (between.place > entry.place)
+                continue;
+            const above = new Set(earlier
+                .filter((other) => other.place < between.place)
+                .flatMap((other) => [...other.props]));
+            const shared = [...between.props].filter((prop) => above.has(prop));
+            if (shared.length === 0)
+                continue;
+            reports.push({
+                line: 0,
+                column: 0,
+                kind: 'split-order',
+                source: '',
+                hint: `\`${entry.key}\` is written on both sides of \`${between.key}\` and they share a property, so one place in the array cannot say which wins. Write the class once.`,
+            });
+            for (const [bare, key] of Object.entries(candidates))
+                if (key === entry.key || key === between.key)
+                    unconvertible.add(bare);
+        }
+    }
+    for (const pair of tags) {
+        const taken = Object.entries(candidates).find(([, key]) => key === pair.key);
+        if (!taken)
+            continue;
+        reports.push({
+            line: 0,
+            column: 0,
+            kind: 'key-collision',
+            source: '',
+            hint: `\`${taken[0]}\` and the rule reaching \`${pair.tag}\` both become \`${pair.key}\`.`,
+        });
+        unconvertible.add(taken[0]);
+    }
+    for (const [bare, key] of Object.entries(candidates))
+        if (keys.has(key))
+            names[bare] = key;
+    return {
+        code,
+        names,
+        order,
+        held,
+        composes,
+        functions,
+        tags,
+        unconvertible: [...unconvertible],
+        reports,
+    };
 }

package/dist/transforms/from-plumeria.js

@@ -6,57 +6,22 @@ exports.extractPlumeriaStatics = extractPlumeriaStatics;
 exports.extractPlumeriaAnimations = extractPlumeriaAnimations;
 exports.convertPlumeriaModule = convertPlumeriaModule;
 const parser_1 = require("@typescript-eslint/parser");
+const cascade_1 = require("../cascade");
 const zss_engine_1 = require("zss-engine");
 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);
+    const wide = (0, cascade_1.coverageOf)(outer);
+    const narrow = (0, cascade_1.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) &&
+        (0, cascade_1.overlaps)(mine.property, theirs.property) &&
         mine.rank > theirs.rank));
     const ordered = [];
     const pending = [...written];
@@ -530,7 +495,7 @@ function convertPlumeriaModule(source, externalValues = {}, compositions = [], o
             for (const theirs of right) {
                 if (mine.suffix !== theirs.suffix)
                     continue;
-                if (!overlaps(mine.property, theirs.property))
+                if (!(0, cascade_1.overlaps)(mine.property, theirs.property))
                     continue;
                 if (mine.rank > theirs.rank)
                     ranked ??= [second, first];
@@ -618,7 +583,7 @@ function convertPlumeriaModule(source, externalValues = {}, compositions = [], o
                     bucket: bucketOf(wrappers, suffix),
                     suffix,
                     property: cssProperty,
-                    rank: depthOf(cssProperty) + (wrappers.length > 0 ? 1 : 0),
+                    rank: (0, cascade_1.depthOf)(cssProperty) + (wrappers.length > 0 ? 1 : 0),
                 });
             }
             declared.push({
@@ -646,7 +611,7 @@ function convertPlumeriaModule(source, externalValues = {}, compositions = [], o
         if (phase !== 'nested')
             pushRule(selector, byContainment(declared), declared.map((entry) => ({
                 property: entry.property,
-                rank: depthOf(entry.property) + (wrappers.length > 0 ? 1 : 0),
+                rank: (0, cascade_1.depthOf)(entry.property) + (wrappers.length > 0 ? 1 : 0),
             })));
         if (phase === 'declarations')
             return;
@@ -846,7 +811,7 @@ function convertPlumeriaModule(source, externalValues = {}, compositions = [], o
             for (const entry of mine) {
                 const crossed = theirs.some((candidate) => candidate.suffix === entry.suffix &&
                     candidate.rank === entry.rank &&
-                    overlaps(entry.property, candidate.property));
+                    (0, cascade_1.overlaps)(entry.property, candidate.property));
                 if (!crossed)
                     continue;
                 const held = disputed.get(entry.bucket) ?? new Set();

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@plumeria/codemod",
-  "version": "18.2.26",
-  "description": "Codemods for migrating Plumeria APIs",
+  "version": "18.2.28",
+  "description": "Codemods for Plumeria: migrate a CSS Modules codebase in, export it back out, and rename the styling prop",
   "author": "Refirst 11",
   "license": "MIT",
   "funding": "https://github.com/sponsors/refirst11",
@@ -18,6 +18,7 @@
     "plumeria",
     "codemod",
     "migration",
+    "css-modules",
     "eslint",
     "css-in-js"
   ],