[core] Remove createStyles from @material-ui/core

.eslintignore

@@ -10,7 +10,6 @@
 /examples/preact/scripts
 # auto-generated by Framer
 /framer/Material-UI.framerfx/design/document.json
-/packages/babel-plugin-unwrap-createstyles/test/__fixtures__/
 /packages/material-ui-codemod/lib
 /packages/material-ui-codemod/src/*/*.test/*
 /packages/material-ui-codemod/src/*/*.test.js

docs/package.json

@@ -125,7 +125,6 @@
  "@babel/preset-typescript": "^7.7.4",
  "@types/marked": "^2.0.0",
  "@types/recharts": "^1.8.14",
- "babel-plugin-unwrap-createstyles": "5.0.0-alpha.24",
  "cross-fetch": "^3.0.5",
  "gm": "^1.23.0"
  }

docs/scripts/formattedTSDemos.js

@@ -23,7 +23,7 @@ const tsConfig = typescriptToProptypes.loadConfig(path.resolve(__dirname, '../ts
 
 const babelConfig = {
  presets: ['@babel/preset-typescript'],
- plugins: ['babel-plugin-unwrap-createstyles'],
+ plugins: [],
  generatorOpts: { retainLines: true },
  babelrc: false,
  configFile: false,

docs/src/pages/components/autocomplete/CustomInputAutocomplete.tsx

@@ -1,20 +1,18 @@
 import * as React from 'react';
 import clsx from 'clsx';
 import Autocomplete from '@material-ui/core/Autocomplete';
-import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+import { makeStyles, Theme } from '@material-ui/core/styles';
 
-const useStyles = makeStyles((theme: Theme) =>
- createStyles({
- autocomplete: {
- display: 'inline-block',
- },
- input: {
- width: 200,
- backgroundColor: theme.palette.background.paper,
- color: theme.palette.getContrastText(theme.palette.background.paper),
- },
- }),
-);
+const useStyles = makeStyles((theme: Theme) => ({
+ autocomplete: {
+ display: 'inline-block',
+ },
+ input: {
+ width: 200,
+ backgroundColor: theme.palette.background.paper,
+ color: theme.palette.getContrastText(theme.palette.background.paper),
+ },
+}));
 
 const options = ['Option 1', 'Option 2'];
 

docs/src/pages/components/autocomplete/GitHubLabel.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-use-before-define */
 import * as React from 'react';
-import { useTheme, makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+import { useTheme, makeStyles, Theme } from '@material-ui/core/styles';
 import Popper from '@material-ui/core/Popper';
 import ClickAwayListener from '@material-ui/core/ClickAwayListener';
 import SettingsIcon from '@material-ui/icons/Settings';
@@ -23,136 +23,132 @@ function PopperComponent(props: PopperComponentProps) {
  return <div {...other} />;
 }
 
-const useStyles = makeStyles((theme: Theme) =>
- createStyles({
- root: {
- width: 221,
- fontSize: 13,
+const useStyles = makeStyles((theme: Theme) => ({
+ root: {
+ width: 221,
+ fontSize: 13,
+ },
+ button: {
+ fontSize: 13,
+ width: '100%',
+ textAlign: 'left',
+ paddingBottom: 8,
+ color: theme.palette.mode === 'light' ? '#586069' : '#8b949e',
+ fontWeight: 600,
+ '&:hover,&:focus': {
+ color: theme.palette.mode === 'light' ? '#0366d6' : '#58a6ff',
  },
- button: {
- fontSize: 13,
+ '& span': {
  width: '100%',
- textAlign: 'left',
- paddingBottom: 8,
- color: theme.palette.mode === 'light' ? '#586069' : '#8b949e',
- fontWeight: 600,
- '&:hover,&:focus': {
- color: theme.palette.mode === 'light' ? '#0366d6' : '#58a6ff',
- },
- '& span': {
- width: '100%',
- },
- '& svg': {
- width: 16,
- height: 16,
- },
- },
- tag: {
- marginTop: 3,
- height: 20,
- padding: '.15em 4px',
- fontWeight: 600,
- lineHeight: '15px',
- borderRadius: 2,
- },
- popper: {
- border: `1px solid ${theme.palette.mode === 'light' ? '#e1e4e8' : '#30363d'}`,
- boxShadow: `0 8px 24px ${
- theme.palette.mode === 'light' ? 'rgba(149, 157, 165, 0.2)' : 'rgb(1, 4, 9)'
- }`,
- borderRadius: 6,
- width: 300,
- zIndex: theme.zIndex.modal,
- fontSize: 13,
- color: theme.palette.mode === 'light' ? '#24292e' : '#c9d1d9',
- backgroundColor: theme.palette.mode === 'light' ? '#fff' : '#1c2128',
  },
- header: {
- borderBottom: `1px solid ${
- theme.palette.mode === 'light' ? '#eaecef' : '#30363d'
- }`,
- padding: '8px 10px',
- fontWeight: 600,
+ '& svg': {
+ width: 16,
+ height: 16,
  },
- inputBase: {
- padding: 10,
- width: '100%',
- borderBottom: `1px solid ${
- theme.palette.mode === 'light' ? '#eaecef' : '#30363d'
- }`,
- '& input': {
- borderRadius: 4,
- backgroundColor: theme.palette.mode === 'light' ? '#fff' : '#0d1117',
- padding: 8,
- transition: theme.transitions.create(['border-color', 'box-shadow']),
- border: `1px solid ${
- theme.palette.mode === 'light' ? '#eaecef' : '#30363d'
+ },
+ tag: {
+ marginTop: 3,
+ height: 20,
+ padding: '.15em 4px',
+ fontWeight: 600,
+ lineHeight: '15px',
+ borderRadius: 2,
+ },
+ popper: {
+ border: `1px solid ${theme.palette.mode === 'light' ? '#e1e4e8' : '#30363d'}`,
+ boxShadow: `0 8px 24px ${
+ theme.palette.mode === 'light' ? 'rgba(149, 157, 165, 0.2)' : 'rgb(1, 4, 9)'
+ }`,
+ borderRadius: 6,
+ width: 300,
+ zIndex: theme.zIndex.modal,
+ fontSize: 13,
+ color: theme.palette.mode === 'light' ? '#24292e' : '#c9d1d9',
+ backgroundColor: theme.palette.mode === 'light' ? '#fff' : '#1c2128',
+ },
+ header: {
+ borderBottom: `1px solid ${
+ theme.palette.mode === 'light' ? '#eaecef' : '#30363d'
+ }`,
+ padding: '8px 10px',
+ fontWeight: 600,
+ },
+ inputBase: {
+ padding: 10,
+ width: '100%',
+ borderBottom: `1px solid ${
+ theme.palette.mode === 'light' ? '#eaecef' : '#30363d'
+ }`,
+ '& input': {
+ borderRadius: 4,
+ backgroundColor: theme.palette.mode === 'light' ? '#fff' : '#0d1117',
+ padding: 8,
+ transition: theme.transitions.create(['border-color', 'box-shadow']),
+ border: `1px solid ${theme.palette.mode === 'light' ? '#eaecef' : '#30363d'}`,
+ fontSize: 14,
+ '&:focus': {
+ boxShadow: `0px 0px 0px 3px ${
+ theme.palette.mode === 'light'
+ ? 'rgba(3, 102, 214, 0.3)'
+ : 'rgb(12, 45, 107)'
  }`,
- fontSize: 14,
- '&:focus': {
- boxShadow: `0px 0px 0px 3px ${
- theme.palette.mode === 'light'
- ? 'rgba(3, 102, 214, 0.3)'
- : 'rgb(12, 45, 107)'
- }`,
- borderColor: theme.palette.mode === 'light' ? '#0366d6' : '#388bfd',
- },
+ borderColor: theme.palette.mode === 'light' ? '#0366d6' : '#388bfd',
  },
  },
- paper: {
- boxShadow: 'none',
- margin: 0,
- color: 'inherit',
- fontSize: 13,
- },
- listbox: {
- backgroundColor: theme.palette.mode === 'light' ? '#fff' : '#1c2128',
- padding: 0,
- '& .MuiAutocomplete-option': {
- minHeight: 'auto',
- alignItems: 'flex-start',
- padding: 8,
- borderBottom: `1px solid ${
- theme.palette.mode === 'light' ? ' #eaecef' : '#30363d'
- }`,
- '&[aria-selected="true"]': {
- backgroundColor: 'transparent',
- },
- '&[data-focus="true"], &[data-focus="true"][aria-selected="true"]': {
- backgroundColor: theme.palette.action.hover,
- },
+ },
+ paper: {
+ boxShadow: 'none',
+ margin: 0,
+ color: 'inherit',
+ fontSize: 13,
+ },
+ listbox: {
+ backgroundColor: theme.palette.mode === 'light' ? '#fff' : '#1c2128',
+ padding: 0,
+ '& .MuiAutocomplete-option': {
+ minHeight: 'auto',
+ alignItems: 'flex-start',
+ padding: 8,
+ borderBottom: `1px solid ${
+ theme.palette.mode === 'light' ? ' #eaecef' : '#30363d'
+ }`,
+ '&[aria-selected="true"]': {
+ backgroundColor: 'transparent',
  },
- },
- popperDisablePortal: {
- position: 'relative',
- },
- iconSelected: {
- width: 17,
- height: 17,
- marginRight: 5,
- marginLeft: -2,
- },
- color: {
- width: 14,
- height: 14,
- flexShrink: 0,
- borderRadius: 3,
- marginRight: 8,
- marginTop: 2,
- },
- text: {
- flexGrow: 1,
- '& span': {
- color: theme.palette.mode === 'light' ? '#586069' : '#8b949e',
+ '&[data-focus="true"], &[data-focus="true"][aria-selected="true"]': {
+ backgroundColor: theme.palette.action.hover,
  },
  },
- close: {
- opacity: 0.6,
- width: 18,
- height: 18,
+ },
+ popperDisablePortal: {
+ position: 'relative',
+ },
+ iconSelected: {
+ width: 17,
+ height: 17,
+ marginRight: 5,
+ marginLeft: -2,
+ },
+ color: {
+ width: 14,
+ height: 14,
+ flexShrink: 0,
+ borderRadius: 3,
+ marginRight: 8,
+ marginTop: 2,
+ },
+ text: {
+ flexGrow: 1,
+ '& span': {
+ color: theme.palette.mode === 'light' ? '#586069' : '#8b949e',
  },
- }),
-);
+ },
+ close: {
+ opacity: 0.6,
+ width: 18,
+ height: 18,
+ },
+}));
 
 export default function GitHubLabel() {
  const classes = useStyles();

docs/src/pages/components/autocomplete/LimitTags.tsx

@@ -1,19 +1,17 @@
 /* eslint-disable @typescript-eslint/no-use-before-define */
 import * as React from 'react';
 import Autocomplete from '@material-ui/core/Autocomplete';
-import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import { makeStyles, Theme } from '@material-ui/core/styles';
 import TextField from '@material-ui/core/TextField';
 
-const useStyles = makeStyles((theme: Theme) =>
- createStyles({
- root: {
- width: 500,
- '& > * + *': {
- marginTop: theme.spacing(3),
- },
+const useStyles = makeStyles((theme: Theme) => ({
+ root: {
+ width: 500,
+ '& > * + *': {
+ marginTop: theme.spacing(3),
  },
- }),
-);
+ },
+}));
 
 export default function LimitTags() {
  const classes = useStyles();

docs/src/pages/components/autocomplete/Sizes.tsx

@@ -2,19 +2,17 @@
 import * as React from 'react';
 import Chip from '@material-ui/core/Chip';
 import Autocomplete from '@material-ui/core/Autocomplete';
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
+import { makeStyles, Theme } from '@material-ui/core/styles';
 import TextField from '@material-ui/core/TextField';
 
-const useStyles = makeStyles((theme: Theme) =>
- createStyles({
- root: {
- width: 500,
- '& > * + *': {
- marginTop: theme.spacing(2),
- },
+const useStyles = makeStyles((theme: Theme) => ({
+ root: {
+ width: 500,
+ '& > * + *': {
+ marginTop: theme.spacing(2),
  },
- }),
-);
+ },
+}));
 
 export default function Sizes() {
  const classes = useStyles();