@material-next/codemod v5.0.0-alpha.37
@material-ui/codemod
Codemod scripts for Material-UI
This repository contains a collection of codemod scripts based for use with jscodeshift that help update Material-UI APIs.
Setup & run
npx @material-ui/codemod@next <codemod> <paths...>
Applies a `@material-ui/codemod` to the specified paths
Positionals:
codemod The name of the codemod [string]
paths Paths forwarded to `jscodeshift` [string]
Options:
--version Show version number [boolean]
--help Show help [boolean]
--dry dry run (no changes are made to files)
[boolean] [default: false]
--print print transformed files to stdout, useful for development
[boolean] [default: false]
Examples:
npx @material-ui/codemod v4.0.0/theme-spacing-api src
npx @material-ui/codemod v5.0.0/component-rename-prop src --
--component=Grid --from=prop --to=newProp
Included scripts
v5.0.0
component-rename-prop
A generic codemod to rename any component prop.
-<Component prop="value" />
-<Component prop />
+<Component newProp="value" />
+<Component newProp />
npx @material-ui/codemod v5.0.0/component-rename-prop <path> -- --component=Grid --from=prop --to=newProp
autocomplete-rename-closeicon
Renames fade
style utility import and calls from fade
to alpha
.
-<Autocomplete closeIcon={defaultClearIcon} />
+<Autocomplete clearIcon={defaultClearIcon} />
npx @material-ui/codemod v5.0.0/autocomplete-rename-closeicon <path>
You can find more details about this breaking change in the migration guide.
avatar-circle-circular
Updates the Avatar variant
value and classes key from 'circle' to 'circular'.
-<Avatar variant="circle" />
-<Avatar classes={{ circle: 'className' }} />
+<Avatar variant="circular" />
+<Avatar classes={{ circular: 'className' }} />
npx @material-ui/codemod v5.0.0/avatar-circle-circular <path>
You can find more details about this breaking change in the migration guide.
button-color-prop
Removes the outdated color
prop values.
-<Button color="primary">
-<Button color="default">
+<Button>
+<Button>
npx @material-ui/codemod v5.0.0/box-borderradius-values <path>
You can find more details about this breaking change in the migration guide.
box-borderradius-values
Updates the Box API from separate system props to sx
.
-<Box borderRadius="borderRadius">
-<Box borderRadius={16}>
+<Box borderRadius={1}>
+<Box borderRadius="16px">
npx @material-ui/codemod/v5.0.0/box-sx-prop <path>
You can find more details about this breaking change in the migration guide.
box-rename-gap
Renames the Box grid*Gap
props.
-<Box gridGap={2}>Item 3</Box>
-<Box gridColumnGap={3}>Item 4</Box>
-<Box gridRowGap={4}>Item 5</Box>
+<Box gap={2}>Item 3</Box>
+<Box columnGap={3}>Item 4</Box>
+<Box rowGap={4}>Item 5</Box>
npx @material-ui/codemod v5.0.0/box-rename-gap <path>
You can find more details about this breaking change in the migration guide.
badge-overlap-value
Renames the badge's props.
-<Badge overlap="circle">
-<Badge overlap="rectangle">
+<Badge overlap="circular">
+<Badge overlap="rectangular">
<Badge classes={{
- anchorOriginTopRightRectangle: 'className',
- anchorOriginBottomRightRectangle: 'className',
- anchorOriginTopLeftRectangle: 'className',
- anchorOriginBottomLeftRectangle: 'className',
- anchorOriginTopRightCircle: 'className',
- anchorOriginBottomRightCircle: 'className',
- anchorOriginTopLeftCircle: 'className',
+ anchorOriginTopRightRectangular: 'className',
+ anchorOriginBottomRightRectangular: 'className',
+ anchorOriginTopLeftRectangular: 'className',
+ anchorOriginBottomLeftRectangular: 'className',
+ anchorOriginTopRightCircular: 'className',
+ anchorOriginBottomRightCircular: 'className',
+ anchorOriginTopLeftCircular: 'className',
}}>
npx @material-ui/codemod v5.0.0/box-rename-gap <path>
You can find more details about this breaking change in the migration guide.
chip-variant-prop
Removes the Chip variant
prop if the value is "default"
.
-<Chip variant="default">
+<Chip>
npx @material-ui/codemod v5.0.0/chip-variant-prop <path>
You can find more details about this breaking change in the migration guide.
circularprogress-variant
Rename the CircularPress static
variant to determinate
.
-<CircularProgress variant="static" classes={{ static: 'className' }} />
+<CircularProgress variant="determinate" classes={{ determinate: 'className' }} />
npx @material-ui/codemod v5.0.0/circularprogress-variant <path>
You can find more details about this breaking change in the migration guide.
collapse-rename-collapsedheight
Rename the CircularPress static
variant to determinate
.
-<Collapse collapsedHeight={40} />
-<Collapse classes={{ container: 'collapse' }} />
+<Collapse collapsedSize={40} />
+<Collapse classes={{ root: 'collapse' }} />
npx @material-ui/codemod v5.0.0/collapse-rename-collapsedheight <path>
You can find more details about this breaking change in the migration guide.
fade-rename-alpha
Renames fade
style utility import and calls frpm fade
to alpha
.
-import { fade, lighten } from '@material-ui/core/styles';
+import { alpha, lighten } from '@material-ui/core/styles';
-const foo = fade('#aaa');
+const foo = alpha('#aaa');
npx @material-ui/codemod v5.0.0/fade-rename-alpha <path>
You can find more details about this breaking change in the migration guide.
grid-justify-justifycontent
Renames fade
style utility import and calls frpm fade
to alpha
.
-<Grid justify="left">Item</Grid>
+<Grid item justifyContent="left">Item</Grid>
npx @material-ui/codemod v5.0.0/grid-justify-justifycontent <path>
You can find more details about this breaking change in the migration guide.
moved-lab-modules
Updates all imports for @material-ui/lab
components that have moved to @material-ui/core
.
-import Skeleton from '@material-ui/lab/Skeleton';
+import Skeleton from '@material-ui/core/Skeleton';
or
-import { SpeedDial } from '@material-ui/lab';
+import { SpeedDial } from '@material-ui/core';
npx @material-ui/codemod v5.0.0/moved-lab-modules <path>
You can find more details about this breaking change in the migration guide.
variant-prop
Add the TextField, Select, and FormControl variant="standard"
prop when variant
is undefined.
The diff should look like this:
-<TextField value="Standard" />
-<TextField value="Outlined" variant="outlined" />
+<TextField value="Standard" variant="standard" />
+<TextField value="Outlined" />
-<Select value="Standard" />
-<Select value="Outlined" variant="outlined" />
+<Select value="Standard" variant="standard" />
+<Select value="Outlined" />
-<FormControl value="Standard" />
-<FormControl value="Outlined" variant="outlined" />
+<FormControl value="Standard" variant="standard" />
+<FormControl value="Outlined" />
This codemod is non-idempotent (variant="standard"
would be added on a subsequent run, where variant="outlined"
was removed), so it should only be run once against any particular codebase.
npx @material-ui/codemod v5.0.0/variant-prop <path>
theme-breakpoints
Updates breakpoint values to match new logic.
-theme.breakpoints.down('sm')
-theme.breakpoints.between('sm', 'md')
+theme.breakpoints.down('md')
+theme.breakpoints.between('sm', 'lg')
npx @material-ui/codemod v5.0.0/theme-breakpoints <path>
use-transitionprops
Updates Dialog, Menu, Popover, and Snackbar to use the TransitionProps
prop to replace the onEnter*
and onExit*
props.
<Dialog
- onEnter={onEnter}
- onEntered={onEntered}
- onEntering={onEntering}
- onExit={onExit}
- onExited={onExited}
- onExiting={onExiting}
+ TransitionProps={{
+ onEnter,
+ onEntered,
+ onEntering,
+ onExit,
+ onExited,
+ onExiting,
+ }}
/>
npx @material-ui/codemod v5.0.0/use-transitionprops <path>
You can find more details about this breaking change in the migration guide.
theme-breakpoints
Updates breakpoint values to match new logic.
-theme.breakpoints.down('sm')
-theme.breakpoints.between('sm', 'md')
+theme.breakpoints.down('md')
+theme.breakpoints.between('sm', 'lg')
npx jscodeshift --extensions js,ts,jsx,tsx --parser tsx -t node_modules/@material-ui/codemod/node/v5.0.0/theme-breakpoints.js <path>
You can find more details about this breaking change in the migration guide.
theme-spacing
Removes the 'px' suffix from some template strings.
-`${theme.spacing(2)}px`
-`${theme.spacing(2)}px ${theme.spacing(4)}px`
+`${theme.spacing(2)}`
+`${theme.spacing(2)} ${theme.spacing(4)}`
npx @material-ui/codemod v5.0.0/theme-spacing <path>
Note that if there are calculations using theme.spacing()
, these will need to be resolved manually. Consider using CSS calc:
-width: `${theme.spacing(2) - 1}px`,
+widith: `calc(${theme.spacing(2)} - 1px)`,
You can find more details about this breaking change in the migration guide.
v4.0.0
theme-spacing-api
Updates the theme-spacing-api
from theme.spacing.unit x
to theme.spacing(x)
.
The diff should look like this:
-const spacing = theme.spacing.unit;
+const spacing = theme.spacing(1);
npx @material-ui/codemod v4.0.0/theme-spacing-api <path>
This codemod tries to perform a basic expression simplification which can be improved for expressions that use more than one operation.
-const spacing = theme.spacing.unit / 5;
+const spacing = theme.spacing(0.2);
// Limitation
-const spacing = theme.spacing.unit * 5 * 5;
+const spacing = theme.spacing(5) * 5;
optimal-imports
Converts all @material-ui/core
imports more than 1 level deep to the optimal form for tree shaking:
-import withStyles from '@material-ui/core/styles/withStyles';
-import createTheme from '@material-ui/core/styles/createTheme';
+import { withStyles, createTheme } from '@material-ui/core/styles';
npx @material-ui/codemod v4.0.0/optimal-imports <path>
Head to https://material-ui.com/guides/minimizing-bundle-size/ to understand when it's useful.
top-level-imports
Converts all @material-ui/core
submodule imports to the root module:
-import List from '@material-ui/core/List';
-import { withStyles } from '@material-ui/core/styles';
+import { List, withStyles } from '@material-ui/core';
npx @material-ui/codemod v4.0.0/top-level-imports <path>
Head to https://material-ui.com/guides/minimizing-bundle-size/ to understand when it's useful.
v1.0.0
import-path
Updates the import-paths
for the new location of the components.
Material-UI v1.0.0 flatten the import paths.
The diff should look like this:
-import { MenuItem } from '@material-ui/core/Menu';
+import MenuItem from '@material-ui/core/MenuItem';
npx @material-ui/codemod v1.0.0/import-path <path>
Notice: if you are migrating from pre-v1.0, and your imports use material-ui
, you will need to manually find and replace all references to material-ui
in your code to @material-ui/core
. E.g.:
-import Typography from 'material-ui/Typography';
+import Typography from '@material-ui/core/Typography';
Subsequently, you can run the above find ...
command to flatten your imports.
color-imports
Updates the color-imports
for the new location of Material-UI color palettes.
The diff should look like this:
-import { blue, teal500 } from 'material-ui/styles/colors';
+import blue from '@material-ui/core/colors/blue';
+import teal from '@material-ui/core/colors/teal';
+const teal500 = teal['500'];
npx @material-ui/codemod v1.0.0/color-imports <path>
additional options
npx @material-ui/codemod v1.0.0/color-imports <path> -- --importPath='mui/styles/colors' --targetPath='mui/colors'
svg-icon-imports
Updates the svg-icons
import paths from material-ui/svg-icons/<category>/<icon-name>
to @material-ui/icons/<IconName>
, to use the new @material-ui/icons
package.
The diff should look like this:
-import AccessAlarmIcon from 'material-ui/svg-icons/device/AccessAlarm';
-import ThreeDRotation from 'material-ui/svg-icons/action/ThreeDRotation';
+import AccessAlarmIcon from '@material-ui/icons/AccessAlarm';
+import ThreeDRotation from '@material-ui/icons/ThreeDRotation';
npx @material-ui/codemod v1.0.0/svg-icon-imports <path>
v0.15.0
import-path
Updates the import-paths
for the new location of the components.
Material-UI v0.15.0 is reorganizing the folder distribution of the project.
The diff should look like this:
// From the source
-import FlatButton from 'material-ui/src/flat-button';
+import FlatButton from 'material-ui/src/FlatButton';
// From npm
-import RaisedButton from 'material-ui raised-button';
+import RaisedButton from 'material-ui/RaisedButton';
npx @material-ui/codemod v0.15.0/import-path <path>