Size long-hand rename codemod

Migrates the long-hand size prop values to their short-hand equivalents on the Pluma components whose size scale dropped the long-hand names in v3:

Affected components: Button, ButtonGroup, ProgressBar, SegmentedControl, Select, TextField, Toggle (plus Combobox, Search, and ToggleButton, which share the same size scale). Components with their own size scales (e.g. Avatar, Modal, Drawer) are unaffected.

There are two transforms — one for React (.tsx/.ts/.jsx/.js) and one for Ember (.gts/.gjs/.hbs). Run whichever apply to your app.

Running it

Run it through the Pluma CLI from inside your consuming app. Always start with a dry run to review the diff and warning summary before applying:

# from the root of your consuming app

# Dry run first (no writes; per-file diff printed inline)
pnx @customerio/pluma-cli@latest upgrade --codemod size-longhand-rename react --dry ./src
pnx @customerio/pluma-cli@latest upgrade --codemod size-longhand-rename ember --dry ./app

# Then apply for real
pnx @customerio/pluma-cli@latest upgrade --codemod size-longhand-rename react ./src
pnx @customerio/pluma-cli@latest upgrade --codemod size-longhand-rename ember ./app ./addon

Both frameworks accept --dry / -d. The React path also forwards standard jscodeshift flags, so -p prints transformed output.

What gets matched

React. Only JSX elements whose tag resolves (via the import in the same file) to one of the affected components from @customerio/pluma-components/react (or the bare @customerio/pluma-components entry). Aliased imports (import { Button as B } from …) are handled. A local component named Button that wasn't imported from Pluma is left alone.

Inline string literals are always rewritten (size="small", size={'small'}, size={'small' as const}), along with result-position literals — branches of a ?:, the right-hand side of ?? / || / &&.

Ember. Only the <PlumaButton …>, <PlumaButtonGroup …>, etc. element nodes are touched. Inline literals — @size="small", @size={{"small"}} — are always rewritten, along with result-position literals inside the if / unless / or / and helpers.

Warnings — values that need manual review

Both transforms print a summary listing every size value they recognized but couldn't resolve to a literal — dynamic expressions, identifiers/consts, class members ({{this.x}}), component arguments ({{@arg}}), and unknown helper calls. They're reported (not auto-rewritten) so you can rename them by hand where they hold a long-hand value.

After running, you can also grep for any leftover size="small", size="medium", or size="large" to catch anything the warnings missed.

Working on the codemod itself

The React/Ember transform engines and reporting are shared across the attribute-rename codemods under ../../_shared/; this codemod is a thin config wrapper. There's a test suite under tests/:

pnpm --filter @customerio/pluma-cli run test:transforms

It uses Node's built-in test runner (node --test).