Icon deprecations codemod

Migrates deprecated Pluma icon usage for v3. It covers four changes:

1. Renamed / merged icon names

Deprecated icon names are rewritten to their replacement on name (on Icon) and on the icon / markerIcon / trailingIcon props of any Pluma component.

table
Before (old name)After (new name)
cio-parceldesign-studio
design-studio-newdesign-studio
design-studio-new-filleddesign-studio-filled
errorcritical
folder-addfolder-new
lock-insecurelock-unsecure
email-layoutlayout
warningcaution
collectiondatabase
copy-toexit
delivery-draftsdelivery-log
eventtrigger-event
editor-drag-and-dropmove
listlist-bullet
new-folderfolder-new
pushmobile
rowsnavigation-menu
securitylock-secure
spacerspacer-height
trigger-segmentsegment
url-parameterslink
zoom-to-fitsearch

2. v1-only Icon sizes

Icon dropped its v1 size scale; only the former v2 scale (sm, md, lg, xl, fill) remains. The v1-only sizes fold into the smallest v2 step:

table
BeforeAfter
size="xxs"size="sm"
size="xs"size="sm"

This only applies to Icon — other components' size props (e.g. Text size="xs") are left alone.

3. The sizeVersion prop

sizeVersion no longer exists — Icon has a single size scale. sizeVersion="v2" was the default behavior and is removed. sizeVersion="v1" is not removed automatically: the v1 scale used different pixel sizes, so the transform leaves it in place and flags it for manual review (pick the equivalent size).

4. Icons removed without a replacement

These icons were deleted with no 1:1 replacement. They can't be rewritten, so the transform flags every use for manual review — choose a different icon:

destination, editor-parcel, heart-pride, javascript, manage-circle, react-native, segment-com, source.

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 icon-deprecations react --dry ./src
pnx @customerio/pluma-cli@latest upgrade --codemod icon-deprecations ember --dry ./app

# Then apply for real
pnx @customerio/pluma-cli@latest upgrade --codemod icon-deprecations react ./src
pnx @customerio/pluma-cli@latest upgrade --codemod icon-deprecations 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. Any JSX element imported from @customerio/pluma-components/react (or the bare @customerio/pluma-components entry). Aliased imports (import { Icon as I } from …) are handled. name and size are only rewritten on Icon; icon / markerIcon / trailingIcon are rewritten on any Pluma component.

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

Ember. Any <Pluma…> element node. Inline literals — @name="copy-to", @name={{"copy-to"}} — are 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:

  • Deleted icons — used on a name/icon/markerIcon/trailingIcon prop; pick a replacement by hand.
  • sizeVersion="v1" — verify the icon size and switch to the equivalent size.
  • Dynamic values — identifiers, this.x, arguments, unknown helper calls; rename by hand where they hold a deprecated value.

After running, you can also grep for any leftover deprecated names, size="xxs" / size="xs", or sizeVersion= to catch anything the warnings missed. The no-deprecated-icons ESLint rule from @customerio/eslint-plugin-pluma also flags any remaining deprecated icon names.

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 (its deprecation data lives in maps.cjs, shared by both transforms). 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).