material-ui-codemorphs

Smart codemod scripts for day-to-day work with Material UI

Table of Contents

• useStyles
  • Special options
  • Flow Example
  • TypeScript example
• withStyles
  • Special options
  • Flow example
  • TypeScript example
• setupSystem
  • Example

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} />