material-ui-codemorphs
Smart codemod scripts for day-to-day work with Material UI
Table of Contents
useStyles
A jscodeshift transform that adds a makeStyles declaration and useStyles
hook to a function component.
Supports Flow, TypeScript, and plain JS. It's freakin great.
Special options
selectionStart (optional)
The start of the selection (e.g. in a text editor) within the source code.
This is used to determine which component(s) to add styles to. Without this
option, styles will be added to all components in the file. If selectionEnd
is not given, styles will only be added to the component that contains selectionStart.
selectionEnd (optional)
The end of the selection (e.g. in a text editor) within the source code. This is used to determine which component(s) to add styles to.
themeImport (optional)
Overrides the import statement added by useStyles for importing the Theme type definition.
You can also configure this by adding the following to your package.json:
{
"material-ui-codemorphs": {
"themeImport": "import { type Theme } from './src/universal/theme'"
}
}
makeStylesImport (optional)
Overrides the import statement added by useStyles for importing makeStyles.
You can also configure this by adding the following to your package.json:
{
"material-ui-codemorphs": {
"makeStylesImport": "import { makeStyles } from '@material-ui/core'"
}
}Flow Example
Before
// @flow
import * as React from 'react'
const Test = props => (
// position
<div>{props.text}</div>
)Transform
jscodeshift path/to/material-ui-codemorphs/useStyles.js src/Test.js \
--parser=babylon \
--selectionStart=95
After
// @flow
import * as React from 'react'
import { makeStyles } from '@material-ui/core/styles'
import { type Theme } from '../../src/universal/theme'
const useStyles = makeStyles((theme: Theme) => ({}))
const Test = props => {
const classes = useStyles(props)
return <div>{props.text}</div>
}TypeScript example
Before
import * as React from 'react'
const Test = ({ text }) => (
// position
<div>{text}</div>
)Transform
jscodeshift path/to/material-ui-codemorphs/useStyles.js src/Test.tsx \
--parser=tsx \
--selectionStart=95
After
import * as React from 'react'
import { makeStyles, Theme } from '@material-ui/core/styles'
const useStyles = makeStyles((theme: Theme) => ({}))
const Test = ({ text }) => {
const classes = useStyles()
return <div>{text}</div>
}
withStyles
A jscodeshift transform that wraps a component with withStyles,
adds the const styles = (theme: Theme) => ({ }) declaration,
and adds a classes type annotation and prop destructuring if possible.
Supports Flow, TypeScript, and plain JS. It's freakin great.
Special options
selectionStart (optional)
The start of the selection (e.g. in a text editor) within the source code.
This is used to determine which component(s) to add styles to. Without this
option, styles will be added to all components in the file. If selectionEnd
is not given, styles will only be added to the component that contains selectionStart.
selectionEnd (optional)
The end of the selection (e.g. in a text editor) within the source code. This is used to determine which component(s) to add styles to.
themeImport (optional)
Overrides the import statement added by withStyles for importing the Theme type definition.
You can also configure this by adding the following to your package.json:
{
"material-ui-codemorphs": {
"themeImport": "import { type Theme } from './src/universal/theme'"
}
}
withStylesImport (optional)
Overrides the import statement added by useStyles for importing withStyles.
You can also configure this by adding the following to your package.json:
{
"material-ui-codemorphs": {
"withStylesImport": "import { withStyles } from '@material-ui/core'"
}
}Flow example
Before
// @flow
type Props = {
+text: string,
}
export const Test = ({ text }: Props): React.Node => (
// position
<div>{text}</div>
)Transform
jscodeshift path/to/material-ui-codemorphs/withStyles.js src/Test.js \
--parser=babylon \
--selectionStart=95 \
--themeImport='import {type Theme} from "./src/universal/theme"'
After
// @flow
import { withStyles } from '@material-ui/core/styles'
import { type Theme } from '../theme'
type Classes<Styles> = $Call<<T>((any) => T) => { [$Keys<T>]: string }, Styles>
const styles = (theme: Theme) => ({})
type Props = {
+text: string,
+classes: Classes<typeof styles>,
}
const TestWithStyles = ({ text, classes }: Props): React.Node => (
<div>{text}</div>
)
const Test = withStyles(styles)(TestWithStyles)
export { Test }TypeScript example
Before
import * as React from 'react'
interface Props {
text: string
}
export const Test = ({ text }: Props): React.ReactNode => (
// position
<div>{text}</div>
)Transform
jscodeshift path/to/material-ui-codemorphs/withStyles.js src/Test.tsx \
--parser=tsx \
--selectionStart=95
After
import * as React from 'react'
import { withStyles, Theme, WithStyles } from '@material-ui/core/styles'
interface Props extends WithStyles<typeof styles> {
text: string
}
const styles = (theme: Theme) => ({})
const TestWithStyles = ({ text, classes }: Props): React.ReactNode => (
<div>{text}</div>
)
const Test = withStyles(styles)(TestWithStyles)
export { Test }
setupSystem
A jscodeshift transform that creates or updates the declaration for Box and corresponding imports
based upon the JSX attributes you use on it.
Example
Before
import * as React from 'react'
const Foo = () => (
<Box
sm={{ marginLeft: 2, fontSize: 12 }}
md={{ marginLeft: 3, fontSize: 16 }}
/>
)
const Bar = () => <Box boxShadow={1} />Transform
jscodeshift -t path/to/material-ui-codemorphs/setupSystem.js test.js
After
import * as React from 'react'
import { styled } from '@material-ui/styles'
import {
spacing,
typography,
shadows,
breakpoints,
compose,
} from '@material-ui/system'
const Box = styled('div')(breakpoints(compose(shadows, spacing, typography)))
const Foo = () => (
<Box
sm={{ marginLeft: 2, fontSize: 12 }}
md={{ marginLeft: 3, fontSize: 16 }}
/>
)
const Bar = () => <Box boxShadow={1} />