@plumeria/codemod 18.3.1 → 18.3.3

package/README.md

@@ -64,6 +64,11 @@ A descendant rule has no combinator to translate into, so it becomes
 is read from the stylesheet; no markup is inspected. Class names become
 camel-case keys, and a bare pixel length loses its unit.
 
+A `@keyframes` the stylesheet declares becomes a `css.keyframes` binding above
+the `css.create`, and the rules naming it read the binding. An `animation`
+shorthand naming one is split into its longhands, since only `animationName`
+resolves a binding.
+
 ### What it reports instead of converting
 
 ```
@@ -214,13 +219,22 @@ reported as `dynamic-style-access` and its definitions stay in Plumeria.
 
 ### Global styles
 
-`css.createTheme`, `css.keyframes`, and `css.viewTransition` produce rules that
-belong in a global stylesheet, not in a CSS Module. The codemod extracts them and
-appends them to `src/styles/global.css` (or `styles/global.css` when `src` does
-not exist). Theme tokens become CSS custom properties under `:where(:root)` and
-the theme selector; keyframes become `@keyframes kf-<hash>`; view transitions
-become `::view-transition-*` pseudo-element rules. References in style objects
-are replaced by their generated names.
+`css.createTheme` and `css.viewTransition` produce rules that belong in a global
+stylesheet, not in a CSS Module. The codemod extracts them and appends them to
+the stylesheet the project already loads — `app/global.css` or
+`styles/global.css`, under `src` or not, spelled `global` or `globals` — and
+writes `src/styles/global.css` (or `styles/global.css` when `src` does not
+exist) when it finds none. Theme tokens become CSS custom properties under
+`:where(:root)` and the theme selector; view transitions become
+`::view-transition-*` pseudo-element rules. References in style objects are
+replaced by their generated names. A `keyframes` or `viewTransition` nothing the
+migration exports reaches is left where it is.
+
+A CSS Module renames the value of `animation-name` the way it renames a class,
+so a `css.keyframes` is written as `@keyframes kf-<hash>` at the top of each
+module that reads it. In the global stylesheet the renamed reference would match
+nothing. One a view transition names is written globally as well, since the
+`::view-transition-*` rule is not scoped.
 
 `css.createStatic` values are statically evaluated and inlined directly into the
 generated CSS rules — no separate output file is needed.

package/dist/release.js

@@ -117,17 +117,24 @@ const walk = (node, visit) => {
 };
 const releasedPath = (source) => source.replace(/(?:\.styles)?\.[^.]+$/, '.module.css');
 exports.releasedPath = releasedPath;
+const GLOBAL_DIRECTORIES = [
+    ['src', 'app'],
+    ['app'],
+    ['src', 'styles'],
+    ['styles'],
+];
+const GLOBAL_NAMES = ['global.css', 'globals.css'];
 const globalPath = (targets) => {
     const first = path.resolve(targets[0]);
     const root = fs.existsSync(first) && fs.statSync(first).isDirectory()
         ? first
         : path.dirname(first);
-    const candidates = [
-        path.join(root, 'src', 'styles', 'global.css'),
-        path.join(root, 'styles', 'global.css'),
-    ];
-    return (candidates.find((candidate) => fs.existsSync(candidate)) ??
-        (fs.existsSync(path.join(root, 'src')) ? candidates[0] : candidates[1]));
+    const existing = GLOBAL_DIRECTORIES.flatMap((directory) => GLOBAL_NAMES.map((name) => path.join(root, ...directory, name))).find((candidate) => fs.existsSync(candidate));
+    if (existing)
+        return existing;
+    return fs.existsSync(path.join(root, 'src'))
+        ? path.join(root, 'src', 'styles', 'global.css')
+        : path.join(root, 'styles', 'global.css');
 };
 function planRelease(targets) {
     const stylesheets = [];
@@ -141,9 +148,10 @@ function planRelease(targets) {
     const animationValues = new Map();
     const staticValues = new Map();
     const reportsBySource = new Map();
-    const globalBySource = new Map();
     const themeKeys = new Map();
+    const themeCss = new Map();
     const animationKeys = new Map();
+    const animationCss = new Map();
     const staticKeys = new Map();
     const dependencies = new Map();
     const note = (source, reports) => {
@@ -154,15 +162,6 @@ function planRelease(targets) {
             ...reports,
         ]);
     };
-    const addGlobal = (source, css) => {
-        const trimmed = css.trim();
-        if (trimmed.length === 0)
-            return;
-        globalBySource.set(source, [
-            ...(globalBySource.get(source) ?? []),
-            trimmed,
-        ]);
-    };
     for (const source of sources) {
         try {
             const extracted = (0, from_plumeria_1.extractPlumeriaStatics)(sourceText.get(source));
@@ -248,7 +247,7 @@ function planRelease(targets) {
             if (Object.keys(extracted.bindings).length === 0)
                 continue;
             themeKeys.set(source, Object.keys(extracted.bindings));
-            addGlobal(source, extracted.globalCss);
+            themeCss.set(source, extracted.cssByBinding);
         }
         catch {
         }
@@ -279,7 +278,7 @@ function planRelease(targets) {
                 ...extracted.keyframes,
                 ...extracted.viewTransitions,
             ]);
-            addGlobal(source, extracted.globalCss);
+            animationCss.set(source, extracted.cssByBinding);
         }
         catch {
         }
@@ -564,16 +563,174 @@ function planRelease(targets) {
             }
         }
     }
+    const definedKey = (source, binding) => `${source}\u0000${binding}`;
+    const definedIn = (source) => [
+        ...(themeKeys.get(source) ?? []),
+        ...(animationKeys.get(source) ?? []),
+    ];
+    const outerReferences = new Map();
+    const innerReferences = new Map();
+    for (const source of sources) {
+        if (blocked.has(source))
+            continue;
+        const owned = definedIn(source);
+        let ast;
+        try {
+            ast = (0, parser_1.parse)(sourceText.get(source), {
+                sourceType: 'module',
+                ecmaFeatures: { jsx: true },
+            });
+        }
+        catch {
+            continue;
+        }
+        const local = new Map();
+        const namespaces = new Map();
+        for (const binding of owned)
+            local.set(binding, definedKey(source, binding));
+        for (const node of ast.body) {
+            if (node.type !== 'ImportDeclaration' ||
+                typeof node.source.value !== 'string')
+                continue;
+            const target = (0, resolve_1.resolveSourcePath)(node.source.value, source);
+            const available = target ? definedIn(target) : [];
+            if (!target || available.length === 0)
+                continue;
+            for (const specifier of node.specifiers) {
+                if (specifier.type === 'ImportNamespaceSpecifier') {
+                    namespaces.set(specifier.local.name, target);
+                    continue;
+                }
+                if (specifier.type !== 'ImportSpecifier')
+                    continue;
+                const imported = specifier.imported.name ?? specifier.imported.value;
+                if (available.includes(imported))
+                    local.set(specifier.local.name, definedKey(target, imported));
+            }
+        }
+        if (local.size === 0 && namespaces.size === 0)
+            continue;
+        const named = new Set();
+        walk(ast, (node) => {
+            if (node.type === 'MemberExpression' && !node.computed)
+                named.add(node.property);
+            else if (node.type === 'Property' && !node.computed)
+                named.add(node.key);
+            else if (node.type === 'ImportSpecifier') {
+                named.add(node.local);
+                named.add(node.imported);
+            }
+            else if (node.type === 'ImportDefaultSpecifier' ||
+                node.type === 'ImportNamespaceSpecifier')
+                named.add(node.local);
+        });
+        const definitions = new Map();
+        for (const raw of ast.body) {
+            const statement = raw.type === 'ExportNamedDeclaration' ? raw.declaration : raw;
+            if (statement?.type !== 'VariableDeclaration')
+                continue;
+            for (const declaration of statement.declarations) {
+                if (declaration.id.type !== 'Identifier' ||
+                    !owned.includes(declaration.id.name))
+                    continue;
+                named.add(declaration.id);
+                definitions.set(declaration.id.name, declaration.init);
+            }
+        }
+        const inside = new Set();
+        for (const init of definitions.values())
+            walk(init, (node) => inside.add(node));
+        const readsOf = (root, skip) => {
+            const found = new Set();
+            walk(root, (node) => {
+                if (skip(node))
+                    return;
+                if (node.type === 'Identifier' && !named.has(node)) {
+                    const key = local.get(node.name);
+                    if (key)
+                        found.add(key);
+                    return;
+                }
+                if (node.type !== 'MemberExpression' ||
+                    node.computed ||
+                    node.object.type !== 'Identifier' ||
+                    node.property.type !== 'Identifier')
+                    return;
+                const target = namespaces.get(node.object.name);
+                const available = target ? definedIn(target) : [];
+                if (target && available.includes(node.property.name))
+                    found.add(definedKey(target, node.property.name));
+            });
+            return [...found];
+        };
+        outerReferences.set(source, readsOf(ast, (node) => inside.has(node)));
+        innerReferences.set(source, new Map([...definitions].map(([binding, init]) => [
+            binding,
+            readsOf(init, () => false),
+        ])));
+    }
+    const reachable = new Set();
+    const pending = [];
+    const reach = (key) => {
+        if (reachable.has(key))
+            return;
+        reachable.add(key);
+        pending.push(key);
+    };
+    for (const keys of outerReferences.values())
+        for (const key of keys)
+            reach(key);
+    while (pending.length > 0) {
+        const [target, binding] = pending.pop().split('\u0000');
+        for (const key of innerReferences.get(target)?.get(binding) ?? [])
+            reach(key);
+    }
+    const releasedFrom = (source, binding) => reachable.has(definedKey(source, binding));
+    const keyframesByName = new Map();
+    for (const [source, bindings] of animationValues) {
+        for (const [binding, name] of Object.entries(bindings)) {
+            if (!name.startsWith('kf-') || !releasedFrom(source, binding))
+                continue;
+            const rule = animationCss.get(source)?.[binding]?.trim();
+            if (rule)
+                keyframesByName.set(name, rule);
+        }
+    }
+    const globalReads = new Set();
+    for (const [source, bindings] of animationValues) {
+        for (const [binding, name] of Object.entries(bindings)) {
+            if (!name.startsWith('vt-') || !releasedFrom(source, binding))
+                continue;
+            for (const read of animationCss
+                .get(source)?.[binding]?.match(/\bkf-[a-z0-9]+\b/g) ?? [])
+                globalReads.add(read);
+        }
+    }
+    const carried = new Map();
+    const placed = new Set();
+    for (const [source, module] of converted) {
+        if (blocked.has(source) || !module)
+            continue;
+        const read = [...new Set(module.css.match(/\bkf-[a-z0-9]+\b/g) ?? [])]
+            .filter((name) => keyframesByName.has(name))
+            .map((name) => {
+            placed.add(name);
+            return keyframesByName.get(name);
+        });
+        if (read.length > 0)
+            carried.set(source, read);
+    }
     const globalRules = [];
     const values = {};
     for (const source of sources) {
         const reports = reportsBySource.get(source) ?? [];
         const module = converted.get(source);
         if (module) {
+            const held = carried.get(source);
             stylesheets.push({
                 source,
                 target: (0, exports.releasedPath)(source),
-                css: module.css,
+                css: held ? `${held.join('\n\n')}\n\n${module.css}` : module.css,
                 reports,
             });
         }
@@ -584,16 +741,32 @@ function planRelease(targets) {
             continue;
         const resolved = {
             ...(staticValues.get(source) ?? {}),
-            ...(themeValues.get(source) ?? {}),
-            ...(animationValues.get(source) ?? {}),
+            ...Object.fromEntries(Object.entries(themeValues.get(source) ?? {}).filter(([binding]) => releasedFrom(source, binding))),
+            ...Object.fromEntries(Object.entries(animationValues.get(source) ?? {}).filter(([binding]) => releasedFrom(source, binding))),
         };
         if (Object.keys(resolved).length > 0)
             values[source] = resolved;
-        globalRules.push(...(globalBySource.get(source) ?? []));
-        if (themeKeys.has(source))
-            themes[source] = themeKeys.get(source);
-        if (animationKeys.has(source))
-            animations[source] = animationKeys.get(source);
+        const releasedThemes = (themeKeys.get(source) ?? []).filter((binding) => releasedFrom(source, binding));
+        if (releasedThemes.length > 0) {
+            themes[source] = releasedThemes;
+            for (const binding of releasedThemes) {
+                const rule = themeCss.get(source)?.[binding]?.trim();
+                if (rule)
+                    globalRules.push(rule);
+            }
+        }
+        const releasedAnimations = (animationKeys.get(source) ?? []).filter((binding) => releasedFrom(source, binding));
+        if (releasedAnimations.length > 0) {
+            animations[source] = releasedAnimations;
+            for (const binding of releasedAnimations) {
+                const name = animationValues.get(source)?.[binding];
+                if (name && placed.has(name) && !globalReads.has(name))
+                    continue;
+                const rule = animationCss.get(source)?.[binding]?.trim();
+                if (rule)
+                    globalRules.push(rule);
+            }
+        }
         if (staticKeys.has(source))
             statics[source] = staticKeys.get(source);
         if (!module)

package/dist/transforms/css-modules.js

@@ -25,6 +25,43 @@ const toKey = (className) => camel(className);
 exports.toKey = toKey;
 const PX = /^-?(\d+\.?\d*|\.\d+)px$/;
 const NUMBER = /^-?(\d+\.?\d*|\.\d+)$/;
+const IDENTIFIER = /^[A-Za-z_$][A-Za-z0-9_$]*$/;
+const RESERVED_BINDINGS = new Set(['css', 'styles']);
+const ANIMATION_PARTS = [
+    ['animationTimingFunction', /^(cubic-bezier|steps|linear)\(/i],
+    [
+        'animationTimingFunction',
+        /^(linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end)$/i,
+    ],
+    ['animationIterationCount', /^(infinite|\d+\.?\d*)$/i],
+    ['animationDirection', /^(normal|reverse|alternate|alternate-reverse)$/i],
+    ['animationFillMode', /^(none|forwards|backwards|both)$/i],
+    ['animationPlayState', /^(running|paused)$/i],
+];
+const TIME = /^-?(\d+\.?\d*|\.\d+)(s|ms)$/i;
+const words = (value) => {
+    const found = [];
+    let depth = 0;
+    let current = '';
+    for (const character of value) {
+        if (character === '(')
+            depth += 1;
+        if (character === ')')
+            depth -= 1;
+        if (character === ',' && depth === 0)
+            return null;
+        if (/\s/.test(character) && depth === 0) {
+            if (current)
+                found.push(current);
+            current = '';
+            continue;
+        }
+        current += character;
+    }
+    if (current)
+        found.push(current);
+    return found;
+};
 const toValue = (raw) => {
     const value = raw.trim();
     if (PX.test(value))
@@ -193,7 +230,11 @@ const serialise = (node, indent) => {
         lines.push(`${indent}${key}: ${written},`);
     }
     for (const [key, child] of node.nested) {
-        const written = key.startsWith('css.extended(') ? `[${key}]` : `'${key}'`;
+        const written = key.startsWith('css.extended(')
+            ? `[${key}]`
+            : IDENTIFIER.test(key)
+                ? key
+                : `'${key}'`;
         lines.push(`${indent}${written}: {`);
         lines.push(serialise(child, indent + '  '));
         lines.push(`${indent}},`);
@@ -233,6 +274,94 @@ function convertStylesheet(css) {
             hint,
         });
     };
+    const animations = new Map();
+    const animationNodes = new Map();
+    const reachedAnimations = new Set();
+    root.walkAtRules(/^(-[a-z]+-)?keyframes$/i, (atRule) => {
+        const name = atRule.params.trim();
+        const binding = (0, exports.toKey)(name);
+        const taken = RESERVED_BINDINGS.has(binding) ||
+            [...animations.values()].includes(binding);
+        if (!IDENTIFIER.test(binding) || taken) {
+            reports.push({
+                line: atRule.source?.start?.line ?? 0,
+                column: atRule.source?.start?.column ?? 0,
+                kind: 'unsupported-keyframes',
+                source: `@${atRule.name} ${atRule.params}`,
+                hint: `\`${name}\` cannot be written as a \`css.keyframes\` binding. Rename it, then run again.`,
+            });
+            atRule.remove();
+            return;
+        }
+        const node = emptyNode();
+        atRule.each((child) => {
+            if (child.type !== 'rule')
+                return;
+            const step = nest(node, child.selectors.join(', '));
+            child.each((declaration) => {
+                if (declaration.type !== 'decl')
+                    return;
+                step.decls.push([
+                    (0, exports.toProperty)(declaration.prop),
+                    (0, exports.toValue)(declaration.value),
+                ]);
+            });
+        });
+        animations.set(name, binding);
+        animationNodes.set(binding, node);
+        atRule.remove();
+    });
+    const animationDeclarations = (declaration) => {
+        if (animations.size === 0)
+            return null;
+        const value = declaration.value.trim();
+        if (declaration.prop === 'animation-name') {
+            const binding = animations.get(value);
+            if (!binding)
+                return null;
+            reachedAnimations.add(binding);
+            return [['animation-name', { raw: binding }]];
+        }
+        if (declaration.prop !== 'animation')
+            return null;
+        const tokens = words(value);
+        const named = tokens?.filter((token) => animations.has(token)) ?? [];
+        if (!tokens || named.length === 0) {
+            const reads = (words(value.replace(/,/g, ' ')) ?? []).some((token) => animations.has(token));
+            if (reads)
+                report(declaration, 'unsupported-animation', 'Only a single `animation` naming one local `@keyframes` is split into longhands. Write the longhands instead.');
+            return null;
+        }
+        const written = new Map();
+        for (const token of tokens) {
+            if (animations.has(token)) {
+                if (written.has('animation-name'))
+                    return null;
+                written.set('animation-name', { raw: animations.get(token) });
+                continue;
+            }
+            if (TIME.test(token)) {
+                const property = written.has('animation-duration')
+                    ? 'animation-delay'
+                    : 'animation-duration';
+                if (written.has(property))
+                    return null;
+                written.set(property, token);
+                continue;
+            }
+            const part = ANIMATION_PARTS.find(([, pattern]) => pattern.test(token));
+            const property = part
+                ? part[0].replace(/([A-Z])/g, '-$1').toLowerCase()
+                : undefined;
+            if (!property || written.has(property)) {
+                report(declaration, 'unsupported-animation', `\`${token}\` was not recognised as an \`animation\` component, so the shorthand was left as it was written.`);
+                return null;
+            }
+            written.set(property, token);
+        }
+        reachedAnimations.add(written.get('animation-name').raw);
+        return [...written];
+    };
     root.walkRules((rule) => {
         for (const selector of rule.selectors) {
             const read = readSelector(selector);
@@ -302,18 +431,23 @@ function convertStylesheet(css) {
                     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);
-                node.decls.push([property, (0, exports.toValue)(child.value)]);
+                const expanded = animationDeclarations(child) ?? [
+                    [child.prop, (0, exports.toValue)(child.value)],
+                ];
+                for (const [name, value] of expanded) {
+                    const property = (0, exports.toProperty)(name);
+                    props.add(`${where}::${property}`);
+                    mine.push({
+                        property: name,
+                        suffix: target.pseudo,
+                        rank: (0, cascade_1.rankOf)(name, conditional),
+                        place: wrote++,
+                    });
+                    const held = node.decls.findIndex(([held]) => held === property);
+                    if (held !== -1)
+                        node.decls.splice(held, 1);
+                    node.decls.push([property, value]);
+                }
             });
         }
     });
@@ -360,9 +494,24 @@ function convertStylesheet(css) {
         return `  ${key}: (${params}) => ({\n${serialise(node, '    ')}\n  }),`;
     })
         .join('\n');
+    const bindings = [...animationNodes]
+        .filter(([binding]) => reachedAnimations.has(binding))
+        .map(([binding, node]) => `const ${binding} = css.keyframes({\n${serialise(node, '  ')}\n});\n\n`)
+        .join('');
+    for (const [name, binding] of animations) {
+        if (reachedAnimations.has(binding))
+            continue;
+        reports.push({
+            line: 0,
+            column: 0,
+            kind: 'unused-keyframes',
+            source: `@keyframes ${name}`,
+            hint: `Nothing in the stylesheet reads \`${name}\`, so it was not written.`,
+        });
+    }
     const code = `import * as css from '@plumeria/core';
 
-export const styles = css.create({
+${bindings}export const styles = css.create({
 ${body}
 });
 `;

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

@@ -52,6 +52,7 @@ export declare const compositionSignature: (parts: {
 export interface ThemeExtraction {
     bindings: Record<string, Record<string, string>>;
     globalCss: string;
+    cssByBinding: Record<string, string>;
     reports: PlumeriaReport[];
 }
 export interface StaticExtraction {
@@ -63,6 +64,7 @@ export interface AnimationExtraction {
     keyframes: string[];
     viewTransitions: string[];
     globalCss: string;
+    cssByBinding: Record<string, string>;
     reports: PlumeriaReport[];
 }
 export declare const __private: {

package/dist/transforms/from-plumeria.js

@@ -202,6 +202,7 @@ const readThemes = (ast) => {
     const values = new Map();
     const reports = [];
     const globalRules = [];
+    const cssByBinding = {};
     const report = (node, kind, hint) => {
         reports.push({
             line: node.loc.start.line,
@@ -251,7 +252,7 @@ const readThemes = (ast) => {
                 continue;
             }
             values.set(declaration.id.name, references);
-            globalRules.push(`:where(:root) {\n${rootDeclarations.join('\n')}\n}`);
+            const rules = [`:where(:root) {\n${rootDeclarations.join('\n')}\n}`];
             const target = selector.startsWith('@') ||
                 selector.startsWith('.') ||
                 selector.startsWith('#') ||
@@ -260,18 +261,21 @@ const readThemes = (ast) => {
                 ? selector
                 : `.${selector}`;
             if ((0, zss_engine_1.isAtRule)(target)) {
-                globalRules.push(`${target} {\n  :where(:root) {\n${themeDeclarations
+                rules.push(`${target} {\n  :where(:root) {\n${themeDeclarations
                     .map((line) => `  ${line}`)
                     .join('\n')}\n  }\n}`);
             }
             else {
-                globalRules.push(`${target} {\n${themeDeclarations.join('\n')}\n}`);
+                rules.push(`${target} {\n${themeDeclarations.join('\n')}\n}`);
             }
+            cssByBinding[declaration.id.name] = rules.join('\n\n');
+            globalRules.push(...rules);
         }
     }
     return {
         bindings: Object.fromEntries(values),
         globalCss: globalRules.length > 0 ? `${globalRules.join('\n\n')}\n` : '',
+        cssByBinding,
         reports,
     };
 };
@@ -348,6 +352,7 @@ function extractPlumeriaAnimations(source, externalValues = {}) {
     const bindings = {};
     const reports = [];
     const rules = [];
+    const cssByBinding = {};
     const keyframes = [];
     const viewTransitions = [];
     const report = (node, kind, hint) => {
@@ -378,7 +383,9 @@ function extractPlumeriaAnimations(source, externalValues = {}) {
         values.set(declaration.id.name, name);
         bindings[declaration.id.name] = name;
         keyframes.push(declaration.id.name);
-        rules.push(emitGlobalObject(`@keyframes ${name}`, object));
+        const rule = emitGlobalObject(`@keyframes ${name}`, object);
+        cssByBinding[declaration.id.name] = rule;
+        rules.push(rule);
     }
     for (const declaration of declarations) {
         if (declaration.id.type !== 'Identifier' ||
@@ -394,19 +401,24 @@ function extractPlumeriaAnimations(source, externalValues = {}) {
         values.set(declaration.id.name, name);
         bindings[declaration.id.name] = name;
         viewTransitions.push(declaration.id.name);
+        const parts = [];
         for (const part of ['group', 'imagePair', 'old', 'new']) {
             const style = object[part];
             if (style && typeof style === 'object') {
                 const pseudoPart = part === 'imagePair' ? 'image-pair' : part;
-                rules.push(emitGlobalObject(`::view-transition-${pseudoPart}(${name})`, style));
+                parts.push(emitGlobalObject(`::view-transition-${pseudoPart}(${name})`, style));
             }
         }
+        if (parts.length > 0)
+            cssByBinding[declaration.id.name] = parts.join('\n\n');
+        rules.push(...parts);
     }
     return {
         bindings,
         keyframes,
         viewTransitions,
         globalCss: rules.length > 0 ? `${rules.join('\n\n')}\n` : '',
+        cssByBinding,
         reports,
     };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plumeria/codemod",
-  "version": "18.3.1",
+  "version": "18.3.3",
   "description": "Codemods for Plumeria: migrate a CSS Modules codebase in, export it back out, and rename the styling prop",
   "author": "Refirst 11",
   "license": "MIT",