Migrates deprecated Pluma icon usage for v3. It covers four changes:
Deprecated icon names are rewritten to their replacement on name (on Icon)
and on the icon / markerIcon / trailingIcon props of any Pluma component.
| Before (old name) | After (new name) |
|---|---|
cio-parcel | design-studio |
design-studio-new | design-studio |
design-studio-new-filled | design-studio-filled |
error | critical |
folder-add | folder-new |
lock-insecure | lock-unsecure |
email-layout | layout |
warning | caution |
collection | database |
copy-to | exit |
delivery-drafts | delivery-log |
event | trigger-event |
editor-drag-and-drop | move |
list | list-bullet |
new-folder | folder-new |
push | mobile |
rows | navigation-menu |
security | lock-secure |
spacer | spacer-height |
trigger-segment | segment |
url-parameters | link |
zoom-to-fit | search |
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:
| Before | After |
|---|---|
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.
sizeVersion propsizeVersion 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).
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.
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:
Both frameworks accept --dry / -d. The React path also forwards standard
jscodeshift flags, so -p prints transformed output.
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.
Both transforms print a summary listing:
name/icon/markerIcon/trailingIcon prop;
pick a replacement by hand.sizeVersion="v1" — verify the icon size and switch to the equivalent
size.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.
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/:
It uses Node's built-in test runner (node --test).