Codemod scripts for Material-UI.
Last updated 2 months ago by oliviertassinari .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @material-ui/codemod 
SYNC missed versions from official npm registry.


Codemod scripts for Material-UI

npm version npm downloads

This repository contains a collection of codemod scripts based for use with JSCodeshift that help update Material-UI APIs.

Setup & Run

  • npm install -g jscodeshift
  • npm install @material-ui/codemod
  • jscodeshift -t <codemod-script> <path>
  • Use the -d option for a dry-run and use -p to print the output for comparison

Included Scripts



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);
find src -name '*.js' -print | xargs jscodeshift -t node_modules/@material-ui/codemod/lib/v4.0.0/theme-spacing-api.js

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;



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';
find src -name '*.js' -print | xargs jscodeshift -t node_modules/@material-ui/codemod/lib/v1.0.0/import-path.js

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.


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'];
find src -name '*.js' -print | xargs jscodeshift -t node_modules/@material-ui/codemod/lib/v1.0.0/color-imports.js

additional options

jscodeshift -t <color-imports.js> <path> --importPath='mui/styles/colors' --targetPath='mui/colors'


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';
find src -name '*.js' -print | xargs jscodeshift -t node_modules/@material-ui/codemod/lib/v1.0.0/svg-icon-imports.js



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/lib/raised-button';
+import RaisedButton from 'material-ui/RaisedButton';
find src -name '*.js' -print | xargs jscodeshift -t node_modules/@material-ui/codemod/lib/v0.15.0/import-path.js

Recast Options

Options to recast's printer can be provided through the printOptions command line argument:

jscodeshift -t transform.js <path> --printOptions='{"quote": "double", "trailingComma": false}'

Current Tags

  • 4.0.2                                ...           latest (2 months ago)

7 Versions

  • 4.0.2                                ...           2 months ago
  • 4.0.1                                ...           2 months ago
  • 1.1.0                                ...           a year ago
  • 1.0.0                                ...           a year ago
  • 1.0.0-rc.0                                ...           a year ago
  • 1.0.0-beta.45                                ...           a year ago
  • 1.0.0-beta.41                                ...           a year ago
Today 0
This Week 6
This Month 28
Last Day 1
Last Week 22
Last Month 32
Dependencies (0)
Dev Dependencies (1)

Copyright 2014 - 2016 © taobao.org |