Add missing style names

src/attributes/components/AttributeList/AttributeList.tsx

@@ -20,7 +20,8 @@ export interface AttributeListProps extends ListProps, ListActions {
   attributes: AttributeList_attributes_edges_node[];
 }
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(
+  theme => ({
     [theme.breakpoints.up("lg")]: {
       colFaceted: {
         width: 150
@@ -54,7 +55,9 @@ const useStyles = makeStyles(theme => ({
     link: {
       cursor: "pointer"
     }
-}));
+  }),
+  { name: "AttributeList" }
+);
 
 const numberOfColumns = 6;
 

src/attributes/components/AttributeValues/AttributeValues.tsx

@@ -29,7 +29,8 @@ export interface AttributeValuesProps {
   onValueUpdate: (id: string) => void;
 }
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(
+  theme => ({
     columnAdmin: {
       width: "50%"
     },
@@ -51,7 +52,9 @@ const useStyles = makeStyles(theme => ({
     link: {
       cursor: "pointer"
     }
-}));
+  }),
+  { name: "AttributeValues" }
+);
 
 const AttributeValues: React.FC<AttributeValuesProps> = ({
   disabled,

src/categories/components/CategoryBackground/CategoryBackground.tsx

@@ -15,7 +15,8 @@ import { FormattedMessage, useIntl } from "react-intl";
 import { CategoryDetails_category_backgroundImage } from "../../types/CategoryDetails";
 import { FormData } from "../CategoryUpdatePage";
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(
+  theme => ({
     fileField: {
       display: "none"
     },
@@ -36,7 +37,9 @@ const useStyles = makeStyles(theme => ({
       position: "relative",
       width: 148
     }
-}));
+  }),
+  { name: "CategoryBackground" }
+);
 
 export interface CategoryBackgroundProps {
   data: FormData;

src/components/AddressEdit/AddressEdit.tsx

@@ -11,13 +11,16 @@ import SingleAutocompleteSelectField, {
   SingleAutocompleteChoiceType
 } from "../SingleAutocompleteSelectField";
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(
+  theme => ({
     root: {
       display: "grid",
       gridColumnGap: theme.spacing(2),
       gridTemplateColumns: "1fr 1fr"
     }
-}));
+  }),
+  { name: "AddressEdit" }
+);
 
 interface AddressEditProps {
   countries: SingleAutocompleteChoiceType[];

src/components/AppHeader/AppHeader.tsx

@@ -11,7 +11,8 @@ export interface AppHeaderProps {
   onBack();
 }
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(
+  theme => ({
     backArrow: {
       fontSize: 30
     },
@@ -48,7 +49,9 @@ const useStyles = makeStyles(theme => ({
         display: "none"
       }
     }
-}));
+  }),
+  { name: "AppHeader" }
+);
 
 const AppHeader: React.FC<AppHeaderProps> = props => {
   const { children, onBack } = props;

src/components/AppLayout/MenuList.tsx

@@ -19,7 +19,8 @@ import { orderDraftListUrl, orderListUrl } from "../../orders/urls";
 import MenuNested from "./MenuNested";
 import { IMenuItem } from "./menuStructure";
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(
+  theme => ({
     menuIcon: {
       "& svg": {
         height: 32,
@@ -153,7 +154,9 @@ const useStyles = makeStyles(theme => ({
     subMenuDrawerOpen: {
       width: `100vw`
     }
-}));
+  }),
+  { name: "MenuList" }
+);
 
 interface MenuListProps {
   className?: string;

src/components/AppLayout/MenuNested.tsx

@@ -12,7 +12,8 @@ import { drawerNestedMenuWidth, drawerWidthExpandedMobile } from "./consts";
 import { IActiveSubMenu } from "./MenuList";
 import { IMenuItem } from "./menuStructure";
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(
+  theme => ({
     menuListNested: {
       background: theme.palette.background.paper,
       height: "100vh",
@@ -94,7 +95,9 @@ const useStyles = makeStyles(theme => ({
       display: "inline",
       paddingLeft: 10
     }
-}));
+  }),
+  { name: "MenuNested" }
+);
 
 export interface MenuNestedProps {
   activeItem: IActiveSubMenu;

src/components/AssignCategoryDialog/AssignCategoryDialog.tsx

@@ -27,7 +27,8 @@ export interface FormData {
   query: string;
 }
 
-const useStyles = makeStyles({
+const useStyles = makeStyles(
+  {
     avatar: {
       "&:first-child": {
         paddingLeft: 0
@@ -42,7 +43,9 @@ const useStyles = makeStyles({
     wideCell: {
       width: "100%"
     }
-});
+  },
+  { name: "AssignCategoryDialog" }
+);
 
 interface AssignCategoriesDialogProps {
   categories: SearchCategories_search_edges_node[];

src/components/AssignCollectionDialog/AssignCollectionDialog.tsx

@@ -27,7 +27,8 @@ export interface FormData {
   query: string;
 }
 
-const useStyles = makeStyles({
+const useStyles = makeStyles(
+  {
     avatar: {
       "&:first-child": {
         paddingLeft: 0
@@ -42,7 +43,9 @@ const useStyles = makeStyles({
     wideCell: {
       width: "100%"
     }
-});
+  },
+  { name: "AssignCollectionDialog" }
+);
 
 interface AssignCollectionDialogProps {
   collections: SearchCollections_search_edges_node[];

src/components/AssignProductDialog/AssignProductDialog.tsx

@@ -29,7 +29,8 @@ export interface FormData {
   query: string;
 }
 
-const useStyles = makeStyles({
+const useStyles = makeStyles(
+  {
     avatar: {
       "&:first-child": {
         paddingLeft: 0
@@ -48,7 +49,9 @@ const useStyles = makeStyles({
       paddingLeft: 0,
       width: "100%"
     }
-});
+  },
+  { name: "AssignProductDialog" }
+);
 
 export interface AssignProductDialogProps {
   confirmButtonState: ConfirmButtonTransitionState;

src/components/AutocompleteSelectMenu/AutocompleteSelectMenu.tsx

@@ -38,7 +38,8 @@ const DebounceAutocomplete: React.ComponentType<
   DebounceProps<string>
 > = Debounce;
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(
+  theme => ({
     container: {
       flexGrow: 1,
       position: "relative"
@@ -56,7 +57,9 @@ const useStyles = makeStyles(theme => ({
       zIndex: 2
     },
     root: {}
-}));
+  }),
+  { name: "AutocompleteSelectMenu" }
+);
 const AutocompleteSelectMenu: React.FC<AutocompleteSelectMenuProps> = props => {
   const {
     disabled,

src/components/CardMenu/CardMenu.tsx

@@ -18,7 +18,8 @@ export interface CardMenuProps {
   menuItems: CardMenuItem[];
 }
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(
+  theme => ({
     iconButton: {
       background: theme.palette.background.paper,
       borderRadius: "100%",
@@ -26,7 +27,9 @@ const useStyles = makeStyles(theme => ({
       padding: 0,
       width: 32
     }
-}));
+  }),
+  { name: "CardMenu" }
+);
 
 const CardMenu: React.FC<CardMenuProps> = props => {
   const { className, disabled, menuItems } = props;

src/components/CardSpacer.tsx

@@ -1,14 +1,17 @@
 import { makeStyles } from "@material-ui/core/styles";
 import React from "react";
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(
+  theme => ({
     spacer: {
       [theme.breakpoints.down("sm")]: {
         marginTop: theme.spacing(1)
       },
       marginTop: theme.spacing(3)
     }
-}));
+  }),
+  { name: "CardSpacer" }
+);
 
 interface CardSpacerProps {
   children?: React.ReactNode;

src/components/CardTitle/CardTitle.tsx

@@ -3,7 +3,8 @@ import Typography from "@material-ui/core/Typography";
 import classNames from "classnames";
 import React from "react";
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(
+  theme => ({
     children: theme.mixins.gutters({}),
     constantHeight: {
       height: 56
@@ -29,7 +30,9 @@ const useStyles = makeStyles(theme => ({
     toolbar: {
       marginRight: -theme.spacing(1)
     }
-}));
+  }),
+  { name: "CardTitle" }
+);
 
 interface CardTitleProps {
   children?: React.ReactNode;

src/components/Checkbox/Checkbox.tsx

@@ -19,7 +19,8 @@ export type CheckboxProps = Omit<
   onChange?: (event: React.ChangeEvent<any>) => void;
 };
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(
+  theme => ({
     box: {
       "&$checked": {
         "&:before": {
@@ -79,7 +80,9 @@ const useStyles = makeStyles(theme => ({
       margin: "5px 9px",
       width: 30
     }
-}));
+  }),
+  { name: "Checkbox" }
+);
 const Checkbox: React.FC<CheckboxProps> = props => {
   const {
     checked,

src/components/Chip/Chip.tsx

@@ -11,7 +11,8 @@ export interface ChipProps {
   onClose?: () => void;
 }
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(
+  theme => ({
     closeIcon: {
       cursor: "pointer",
       fontSize: 16,
@@ -28,7 +29,9 @@ const useStyles = makeStyles(theme => ({
       marginRight: theme.spacing(2),
       padding: "6px 12px"
     }
-}));
+  }),
+  { name: "Chip" }
+);
 const Chip: React.FC<ChipProps> = props => {
   const { className, label, onClose } = props;
 

src/components/ColumnPicker/ColumnPickerContent.tsx

@@ -30,7 +30,8 @@ export interface ColumnPickerContentProps extends Partial<FetchMoreProps> {
   onSave: () => void;
 }
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(
+  theme => ({
     actionBar: {
       display: "flex",
       justifyContent: "space-between"
@@ -73,7 +74,9 @@ const useStyles = makeStyles(theme => ({
     titleContainer: {
       padding: theme.spacing(1.5, 3.5)
     }
-}));
+  }),
+  { name: "ColumnPickerContent" }
+);
 
 const ColumnPickerContent: React.FC<ColumnPickerContentProps> = props => {
   const {

src/components/ConfirmButton/ConfirmButton.tsx

@@ -67,7 +67,7 @@ interface ConfirmButtonState {
   displayCompletedActionState: boolean;
 }
 
-const ConfirmButton = withStyles(styles)(
+const ConfirmButton = withStyles(styles, { name: "ConfirmButton" })(
   class ConfirmButtonComponent extends React.Component<
     ConfirmButtonProps &
       WithStyles<

src/components/ControlledSwitch.tsx

@@ -3,14 +3,17 @@ import FormControlLabel from "@material-ui/core/FormControlLabel";
 import Switch from "@material-ui/core/Switch";
 import React from "react";
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(
+  theme => ({
     label: {
       marginLeft: theme.spacing(3.5)
     },
     labelText: {
       fontSize: 14
     }
-}));
+  }),
+  { name: "ControlledSwitch" }
+);
 
 interface ControlledSwitchProps {
   checked: boolean;

src/components/CountryList/CountryList.tsx

@@ -27,7 +27,8 @@ export interface CountryListProps {
   onCountryUnassign: (country: string) => void;
 }
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(
+  theme => ({
     iconCell: {
       "&:last-child": {
         paddingRight: 0
@@ -70,7 +71,9 @@ const useStyles = makeStyles(theme => ({
     wideColumn: {
       width: "100%"
     }
-}));
+  }),
+  { name: "CountryList" }
+);
 
 const CountryList: React.FC<CountryListProps> = props => {
   const {

src/components/EditableTableCell/EditableTableCell.tsx

@@ -9,7 +9,8 @@ import React from "react";
 
 import useForm from "@saleor/hooks/useForm";
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(
+  theme => ({
     card: {
       border: `1px solid ${theme.palette.divider}`
     },
@@ -37,7 +38,9 @@ const useStyles = makeStyles(theme => ({
       cursor: "pointer",
       fontSize: "0.8125rem"
     }
-}));
+  }),
+  { name: "EditableTableCell" }
+);
 
 interface EditableTableCellProps {
   className?: string;

src/components/ErrorPage/ErrorPage.tsx

@@ -11,7 +11,8 @@ export interface ErrorPageProps {
   onBack: () => void;
 }
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(
+  theme => ({
     bottomHeader: {
       fontWeight: 600 as 600,
       textTransform: "uppercase"
@@ -53,7 +54,9 @@ const useStyles = makeStyles(theme => ({
     upperHeader: {
       fontWeight: 600 as 600
     }
-}));
+  }),
+  { name: "ErrorPage" }
+);
 
 const ErrorPage: React.FC<ErrorPageProps> = props => {
   const { onBack } = props;

src/components/ExternalLink/ExternalLink.tsx

@@ -2,11 +2,14 @@ import { makeStyles } from "@material-ui/core/styles";
 import Typography, { TypographyProps } from "@material-ui/core/Typography";
 import React from "react";
 
-const useStyles = makeStyles({
+const useStyles = makeStyles(
+  {
     link: {
       textDecoration: "none"
     }
-});
+  },
+  { name: "ExternalLink" }
+);
 
 interface ExternalLinkProps extends React.HTMLProps<HTMLAnchorElement> {
   href: string;

src/components/FileUpload/FileUpload.tsx

@@ -4,7 +4,8 @@ import TextField from "@material-ui/core/TextField";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
-const useStyles = makeStyles({
+const useStyles = makeStyles(
+  {
     fileUploadField: {
       display: "none"
     },
@@ -14,7 +15,9 @@ const useStyles = makeStyles({
     textField: {
       flex: 1
     }
-});
+  },
+  { name: "FileUpload" }
+);
 
 interface FileUploadProps {
   disabled?: boolean;

src/components/Filter/Filter.tsx

@@ -21,7 +21,8 @@ export interface FilterProps<TFilterKeys = string> {
   onFilterAdd: (filter: FilterContentSubmitData) => void;
 }
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(
+  theme => ({
     addFilterButton: {
       "&$filterButton": {
         "&:hover, &:focus": {
@@ -77,7 +78,9 @@ const useStyles = makeStyles(theme => ({
     rotate: {
       transform: "rotate(180deg)"
     }
-}));
+  }),
+  { name: "Filter" }
+);
 const Filter: React.FC<FilterProps> = props => {
   const { currencySymbol, filterLabel, menu, onFilterAdd } = props;
   const classes = useStyles(props);

src/components/Filter/FilterActions.tsx

@@ -6,14 +6,17 @@ import React from "react";
 import { FilterContentSubmitData, IFilter } from "../Filter";
 import Filter from "./Filter";
 
-const useInputStyles = makeStyles({
+const useInputStyles = makeStyles(
+  {
     input: {
       padding: "10.5px 12px"
     },
     root: {
       flex: 1
     }
-});
+  },
+  { name: "FilterActions" }
+);
 
 const Search: React.FC<TextFieldProps> = props => {
   const classes = useInputStyles({});

src/components/Filter/FilterContent.tsx

@@ -34,11 +34,14 @@ function getFilterChoices(items: IFilter<string>) {
   }));
 }
 
-const useStyles = makeStyles({
+const useStyles = makeStyles(
+  {
     input: {
       padding: "20px 12px 17px"
     }
-});
+  },
+  { name: "FilterContent" }
+);
 
 const FilterContent: React.FC<FilterContentProps> = ({
   currencySymbol,

src/components/Filter/FilterElement.tsx

@@ -17,14 +17,17 @@ export interface FilterElementProps<TFilterKeys = string> {
   onChange: (value: string | string[]) => void;
 }
 
-const useStyles = makeStyles({
+const useStyles = makeStyles(
+  {
     calendar: {
       margin: 8
     },
     input: {
       padding: "20px 12px 17px"
     }
-});
+  },
+  { name: "FilterElement" }
+);
 
 export interface FilterElementProps<TFilterKeys = string> {
   className?: string;

src/components/FormSpacer.tsx

@@ -1,11 +1,14 @@
 import { makeStyles } from "@material-ui/core/styles";
 import React from "react";
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(
+  theme => ({
     spacer: {
       marginTop: theme.spacing(3)
     }
-}));
+  }),
+  { name: "FormSpacer" }
+);
 
 interface FormSpacerProps {
   children?: React.ReactNode;

src/components/Grid/Grid.tsx

@@ -9,7 +9,8 @@ export interface GridProps {
   variant?: GridVariant;
 }
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(
+  theme => ({
     default: {
       gridTemplateColumns: "9fr 4fr"
     },
@@ -28,7 +29,9 @@ const useStyles = makeStyles(theme => ({
     uniform: {
       gridTemplateColumns: "1fr 1fr"
     }
-}));
+  }),
+  { name: "Grid" }
+);
 
 export const Grid: React.FC<GridProps> = props => {
   const { className, children, variant } = props;

src/components/Hr.tsx

@@ -6,7 +6,8 @@ interface HrProps {
   className?: string;
 }
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(
+  theme => ({
     root: {
       backgroundColor: theme.palette.divider,
       border: "none",
@@ -15,7 +16,9 @@ const useStyles = makeStyles(theme => ({
       margin: 0,
       width: "100%"
     }
-}));
+  }),
+  { name: "Hr" }
+);
 
 export const Hr: React.FC<HrProps> = props => {
   const { className } = props;

src/components/IconButtonTableCell/IconButtonTableCell.tsx

@@ -12,7 +12,8 @@ export interface IconButtonTableCellProps {
   onClick: () => void;
 }
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(
+  theme => ({
     root: {
       "&:last-child": {
         paddingRight: 0
@@ -20,7 +21,9 @@ const useStyles = makeStyles(theme => ({
       paddingRight: 0,
       width: ICONBUTTON_SIZE + theme.spacing(0.5)
     }
-}));
+  }),
+  { name: "IconButtonTableCell" }
+);
 const IconButtonTableCell: React.FC<IconButtonTableCellProps> = props => {
   const {
     children,

src/components/ImageTile/ImageTile.tsx

@@ -6,7 +6,8 @@ import EditIcon from "@material-ui/icons/Edit";
 import classNames from "classnames";
 import React from "react";
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(
+  theme => ({
     image: {
       height: "100%",
       objectFit: "contain",
@@ -49,7 +50,9 @@ const useStyles = makeStyles(theme => ({
       display: "flex",
       justifyContent: "flex-end"
     }
-}));
+  }),
+  { name: "ImageTile" }
+);
 
 interface ImageTileProps {
   image: {

src/components/ImageUpload/ImageUpload.tsx

@@ -17,7 +17,8 @@ interface ImageUploadProps {
   onImageUpload: (file: FileList) => void;
 }
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(
+  theme => ({
     backdrop: {
       background: fade(theme.palette.primary.main, 0.1),
       color: theme.palette.primary.main
@@ -52,7 +53,9 @@ const useStyles = makeStyles(theme => ({
       fontWeight: 600,
       textTransform: "uppercase"
     }
-}));
+  }),
+  { name: "ImageUpload" }
+);
 
 export const ImageUpload: React.FC<ImageUploadProps> = props => {
   const {

src/components/LanguageSwitch/LanguageSwitch.tsx

@@ -21,7 +21,8 @@ export interface LanguageSwitchProps {
   onLanguageChange: (lang: LanguageCodeEnum) => void;
 }
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(
+  theme => ({
     arrow: {
       color: theme.palette.primary.main,
       transition: theme.transitions.duration.standard + "ms"
@@ -50,7 +51,9 @@ const useStyles = makeStyles(theme => ({
     rotate: {
       transform: "rotate(180deg)"
     }
-}));
+  }),
+  { name: "LanguageSwitch" }
+);
 const LanguageSwitch: React.FC<LanguageSwitchProps> = props => {
   const { currentLanguage, languages, onLanguageChange } = props;
   const classes = useStyles(props);

src/components/Link.tsx

@@ -3,7 +3,8 @@ import Typography, { TypographyProps } from "@material-ui/core/Typography";
 import classNames from "classnames";
 import React from "react";
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(
+  theme => ({
     primary: {
       color: theme.palette.primary.main
     },
@@ -17,7 +18,9 @@ const useStyles = makeStyles(theme => ({
     underline: {
       textDecoration: "underline"
     }
-}));
+  }),
+  { name: "Link" }
+);
 
 interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
   color?: "primary" | "secondary";

src/components/ListField/ListField.tsx

@@ -36,7 +36,7 @@ interface ListFieldProps
   }>;
 }
 
-const ListField = withStyles(styles)(
+const ListField = withStyles(styles, { name: "ListField" })(
   class ListFieldComponent extends React.Component<
     ListFieldProps,
     ListFieldState

src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx

@@ -15,7 +15,8 @@ import MultiAutocompleteSelectFieldContent, {
   MultiAutocompleteChoiceType
 } from "./MultiAutocompleteSelectFieldContent";
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(
+  theme => ({
     chip: {
       width: "100%"
     },
@@ -50,7 +51,9 @@ const useStyles = makeStyles(theme => ({
       flexGrow: 1,
       position: "relative"
     }
-}));
+  }),
+  { name: "MultiAutocompleteSelectField" }
+);
 
 export interface MultiAutocompleteSelectFieldProps
   extends Partial<FetchMoreProps> {

src/components/MultiSelectField/MultiSelectField.tsx

@@ -10,7 +10,8 @@ import { FormattedMessage } from "react-intl";
 
 import Checkbox from "../Checkbox";
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(
+  theme => ({
     checkbox: {
       marginRight: -theme.spacing(2)
     },
@@ -23,7 +24,9 @@ const useStyles = makeStyles(theme => ({
       justifyContent: "space-between",
       width: "100%"
     }
-}));
+  }),
+  { name: "MultiSelectField" }
+);
 
 interface MultiSelectFieldProps {
   choices: Array<{

src/components/NotFoundPage/NotFoundPage.tsx

@@ -7,7 +7,8 @@ import { FormattedMessage } from "react-intl";
 
 import notFoundImage from "@assets/images/not-found-404.svg";
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(
+  theme => ({
     button: {
       marginTop: theme.spacing(2),
       padding: 20
@@ -45,7 +46,9 @@ const useStyles = makeStyles(theme => ({
       display: "flex",
       height: "calc(100vh - 180px)"
     }
-}));
+  }),
+  { name: "NotFoundPage" }
+);
 
 interface NotFoundPageProps {
   onBack: () => void;

src/components/PageHeader/PageHeader.tsx

@@ -5,7 +5,8 @@ import React from "react";
 import ExtendedPageHeader from "../ExtendedPageHeader";
 import Skeleton from "../Skeleton";
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(
+  theme => ({
     root: {
       display: "flex"
     },
@@ -19,7 +20,9 @@ const useStyles = makeStyles(theme => ({
       flex: 1,
       fontSize: 24
     }
-}));
+  }),
+  { name: "PageHeader" }
+);
 
 interface PageHeaderProps {
   children?: React.ReactNode;

src/components/PhoneField/PhoneField.tsx

@@ -4,13 +4,16 @@ import React from "react";
 
 import SingleSelectField from "@saleor/components/SingleSelectField";
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(
+  theme => ({
     root: {
       display: "grid",
       gridColumnGap: theme.spacing(2),
       gridTemplateColumns: "5rem 1fr"
     }
-}));
+  }),
+  { name: "PhoneField" }
+);
 
 interface PhoneFieldProps {
   name: string;

src/components/PriceField/PriceField.tsx

@@ -4,7 +4,8 @@ import { makeStyles } from "@material-ui/core/styles";
 import TextField from "@material-ui/core/TextField";
 import React from "react";
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(
+  theme => ({
     currencySymbol: {
       fontSize: "0.875rem"
     },
@@ -23,7 +24,9 @@ const useStyles = makeStyles(theme => ({
     widgetContainer: {
       marginTop: theme.spacing(2)
     }
-}));
+  }),
+  { name: "PriceField" }
+);
 
 interface PriceFieldProps {
   className?: string;

src/components/RadioSwitchField/RadioSwitchField.tsx

@@ -6,7 +6,8 @@ import { makeStyles } from "@material-ui/core/styles";
 import classNames from "classnames";
 import React from "react";
 
-const useStyles = makeStyles({
+const useStyles = makeStyles(
+  {
     formControl: {
       padding: 0,
       width: "100%"
@@ -24,7 +25,9 @@ const useStyles = makeStyles({
       display: "block",
       fontSize: "12px"
     }
-});
+  },
+  { name: "RadioSwitchField" }
+);
 
 interface RadioSwitchFieldProps {
   className?: string;

src/components/RichTextEditor/ImageEntity.tsx

@@ -18,7 +18,8 @@ interface ImageEntityProps {
   onRemove: (entityKey: string) => void;
 }
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(
+  theme => ({
     anchor: {
       display: "inline-block"
     },
@@ -36,7 +37,9 @@ const useStyles = makeStyles(theme => ({
       minHeight: 72,
       padding: theme.spacing(1.5)
     }
-}));
+  }),
+  { name: "ImageEntity" }
+);
 
 const ImageEntity: React.FC<ImageEntityProps> = props => {
   const { contentState, entityKey, onEdit, onRemove } = props;

src/components/RichTextEditor/LinkEntity.tsx

@@ -22,7 +22,8 @@ interface LinkEntityProps {
   onRemove: (entityKey: string) => void;
 }
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(
+  theme => ({
     anchor: {
       display: "inline-block"
     },
@@ -50,7 +51,9 @@ const useStyles = makeStyles(theme => ({
       marginRight: theme.spacing(),
       width: 1
     }
-}));
+  }),
+  { name: "LinkEntity" }
+);
 
 const LinkEntity: React.FC<LinkEntityProps> = props => {
   const { children, contentState, entityKey, onEdit, onRemove } = props;

src/components/RichTextEditor/RichTextEditor.tsx

@@ -37,7 +37,8 @@ export interface RichTextEditorProps {
   onChange: (event: React.ChangeEvent<any>) => void;
 }
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(
+  theme => ({
     error: {
       color: theme.palette.error.main
     },
@@ -188,7 +189,9 @@ const useStyles = makeStyles(theme => ({
     smallIcon: {
       marginLeft: 10
     }
-}));
+  }),
+  { name: "RichTextEditor" }
+);
 
 function handleSave(
   value: any,

src/components/SaveButtonBar/SaveButtonBar.tsx

@@ -14,7 +14,8 @@ import ConfirmButton, {
 } from "../ConfirmButton/ConfirmButton";
 import Container from "../Container";
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(
+  theme => ({
     button: {
       marginRight: theme.spacing(1)
     },
@@ -52,7 +53,9 @@ const useStyles = makeStyles(theme => ({
         boxShadow: `0 0 0 0 ${theme.palette.divider}`
       }
     }
-}));
+  }),
+  { name: "SaveButtonBar" }
+);
 
 interface SaveButtonBarProps {
   disabled: boolean;

src/components/SeoForm/SeoForm.tsx

@@ -11,7 +11,8 @@ import { FormattedMessage, useIntl } from "react-intl";
 import CardTitle from "../CardTitle";
 import FormSpacer from "../FormSpacer";
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(
+  theme => ({
     addressBar: {
       color: "#006621",
       fontSize: "13px",
@@ -56,7 +57,9 @@ const useStyles = makeStyles(theme => ({
       textDecoration: "none",
       wordWrap: "break-word"
     }
-}));
+  }),
+  { name: "SeoForm" }
+);
 
 interface SeoFormProps {
   description?: string;

src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx

@@ -13,12 +13,15 @@ import SingleAutocompleteSelectFieldContent, {
   SingleAutocompleteChoiceType
 } from "./SingleAutocompleteSelectFieldContent";
 
-const useStyles = makeStyles({
+const useStyles = makeStyles(
+  {
     container: {
       flexGrow: 1,
       position: "relative"
     }
-});
+  },
+  { name: "SingleAutocompleteSelectField" }
+);
 
 export interface SingleAutocompleteSelectFieldProps
   extends Partial<FetchMoreProps> {

src/components/SingleSelectField/SingleSelectField.tsx

@@ -9,7 +9,8 @@ import classNames from "classnames";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(
+  theme => ({
     formControl: {
       "& label": {
         top: "-3px"
@@ -19,7 +20,9 @@ const useStyles = makeStyles(theme => ({
     noLabel: {
       padding: theme.spacing(2, 1.5)
     }
-}));
+  }),
+  { name: "SingleSelectField" }
+);
 
 interface SingleSelectFieldProps {
   choices: Array<{

src/components/Skeleton.tsx

@@ -2,7 +2,8 @@ import { makeStyles } from "@material-ui/core/styles";
 import classNames from "classnames";
 import React from "react";
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(
+  theme => ({
     "@keyframes skeleton-animation": {
       "0%": {
         opacity: 0.6
@@ -24,7 +25,9 @@ const useStyles = makeStyles(theme => ({
       height: "0.8em",
       margin: "0.2em 0"
     }
-}));
+  }),
+  { name: "Skeleton" }
+);
 
 interface SkeletonProps {
   className?: string;

src/components/SortableTable/SortableHandle.tsx

@@ -5,7 +5,8 @@ import { SortableHandle as SortableHandleHoc } from "react-sortable-hoc";
 
 import Draggable from "@saleor/icons/Draggable";
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(
+  theme => ({
     columnDrag: {
       "&:first-child": {
         paddingRight: theme.spacing(2)
@@ -13,7 +14,9 @@ const useStyles = makeStyles(theme => ({
       cursor: "grab",
       width: 48 + theme.spacing(1.5)
     }
-}));
+  }),
+  { name: "SortableHandle" }
+);
 
 const SortableHandle = SortableHandleHoc(() => {
   const classes = useStyles({});

src/components/SortableTable/SortableTableBody.tsx

@@ -13,7 +13,8 @@ export interface SortableTableBodyProps {
   onSortEnd: ReorderAction;
 }
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(
+  theme => ({
     ghost: {
       "& td": {
         borderBottom: "none"
@@ -24,7 +25,9 @@ const useStyles = makeStyles(theme => ({
       // fontSize: theme.overrides.MuiTableCell.root.fontSize,
       opacity: 0.5
     }
-}));
+  }),
+  { name: "SortableTableBody" }
+);
 
 const SortableTableBody: React.FC<
   Omit<TableBodyProps & SortableTableBodyProps, "ref">

src/components/StatusLabel/StatusLabel.tsx

@@ -4,7 +4,8 @@ import Typography, { TypographyProps } from "@material-ui/core/Typography";
 import classNames from "classnames";
 import React from "react";
 
-const useStyles = makeStyles(theme => {
+const useStyles = makeStyles(
+  theme => {
     const dot = {
       borderRadius: "100%",
       content: "''",
@@ -35,7 +36,9 @@ const useStyles = makeStyles(theme => {
         "&:before": { backgroundColor: theme.palette.primary.main, ...dot }
       }
     };
-});
+  },
+  { name: "StatusLabel" }
+);
 
 interface StatusLabelProps {
   className?: string;

src/components/Tab/TabContainer.tsx

@@ -5,11 +5,14 @@ export interface TabContainerProps {
   children: React.ReactNode | React.ReactNodeArray;
 }
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(
+  theme => ({
     root: {
       borderBottom: `1px solid ${theme.palette.divider}`
     }
-}));
+  }),
+  { name: "TabContainer" }
+);
 
 const TabContainer: React.FC<TabContainerProps> = props => {
   const { children } = props;

src/components/TableCellAvatar/TableCellAvatar.tsx

@@ -9,7 +9,8 @@ import Image from "../../icons/Image";
 
 export const AVATAR_MARGIN = 32;
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(
+  theme => ({
     avatar: {
       background: "none",
       border: `1px solid ${theme.palette.divider}`,
@@ -34,7 +35,9 @@ const useStyles = makeStyles(theme => ({
       paddingRight: theme.spacing(3),
       width: "1%"
     }
-}));
+  }),
+  { name: "TableCellAvatar" }
+);
 
 interface TableCellAvatarProps {
   className?: string;

src/components/TableCellHeader/TableCellHeader.tsx

@@ -5,7 +5,8 @@ import React from "react";
 
 import ArrowSort from "../../icons/ArrowSort";
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(
+  theme => ({
     arrow: {
       transition: theme.transitions.duration.short + "ms"
     },
@@ -38,7 +39,9 @@ const useStyles = makeStyles(theme => ({
     root: {
       cursor: "pointer"
     }
-}));
+  }),
+  { name: "TableCellHeader" }
+);
 
 export type TableCellHeaderArrowDirection = "asc" | "desc";
 export type TableCellHeaderArrowPosition = "left" | "right";

src/components/TableFilter/FilterTab.tsx

@@ -3,7 +3,8 @@ import Tab from "@material-ui/core/Tab";
 import classNames from "classnames";
 import React from "react";
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(
+  theme => ({
     selectedTabLabel: {
       "&$tabLabel": {
         color: theme.typography.body1.color
@@ -23,7 +24,9 @@ const useStyles = makeStyles(theme => ({
       paddingTop: theme.spacing(1),
       textTransform: "initial" as "initial"
     }
-}));
+  }),
+  { name: "FilterTab" }
+);
 
 interface FilterTabProps {
   onClick: () => void;

src/components/TableFilter/FilterTabs.tsx

@@ -2,12 +2,15 @@ import { makeStyles } from "@material-ui/core/styles";
 import Tabs from "@material-ui/core/Tabs";
 import React from "react";
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(
+  theme => ({
     tabsRoot: {
       borderBottom: `1px solid ${theme.palette.divider}`,
       paddingLeft: theme.spacing(3)
     }
-}));
+  }),
+  { name: "FilterTabs" }
+);
 
 interface FilterTabsProps {
   children?: React.ReactNode;

src/components/TableHead/TableHead.tsx

@@ -24,7 +24,8 @@ export interface TableHeadProps extends MuiTableHeadProps {
   toggleAll?: (items: Node[], selected: number) => void;
 }
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(
+  theme => ({
     cell: {
       padding: 0
     },
@@ -76,7 +77,9 @@ const useStyles = makeStyles(theme => ({
         marginLeft: theme.spacing(1)
       }
     }
-}));
+  }),
+  { name: "TableHead" }
+);
 
 const TableHead: React.FC<TableHeadProps> = props => {
   const {

src/components/TablePagination/TablePagination.tsx

@@ -9,7 +9,8 @@ import { maybe } from "@saleor/misc";
 import { ListSettings } from "../../types";
 import TablePaginationActions from "./TablePaginationActions";
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(
+  theme => ({
     actions: {
       color: theme.palette.text.secondary,
       flexShrink: 0,
@@ -48,7 +49,9 @@ const useStyles = makeStyles(theme => ({
       paddingLeft: 2,
       paddingRight: 2
     }
-}));
+  }),
+  { name: "TablePagination" }
+);
 
 interface TablePaginationProps {
   backIconButtonProps?: Partial<IconButtonProps>;

src/components/TablePagination/TablePaginationActions.tsx

@@ -7,7 +7,8 @@ import useTheme from "@saleor/hooks/useTheme";
 import classNames from "classnames";
 import React from "react";
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(
+  theme => ({
     dark: {
       "& svg": {
         color: theme.palette.primary.main
@@ -47,7 +48,9 @@ const useStyles = makeStyles(theme => ({
       flexShrink: 0,
       margin: theme.spacing(0, 2.5)
     }
-}));
+  }),
+  { name: "TablePaginationActions" }
+);
 
 export interface TablePaginationActionsProps {
   backIconButtonProps?: any;

src/components/TextFieldWithChoice/TextFieldWithChoice.tsx

@@ -23,7 +23,8 @@ export type TextFieldWithChoiceProps<TValue = string> = TextFieldProps & {
   };
 };
 
-const useStyles = makeStyles({
+const useStyles = makeStyles(
+  {
     adornment: {
       alignItems: "center",
       cursor: "pointer",
@@ -32,7 +33,9 @@ const useStyles = makeStyles({
     menu: {
       zIndex: 10
     }
-});
+  },
+  { name: "TextFieldWithChoice" }
+);
 
 const TextFieldWithChoice: React.FC<TextFieldWithChoiceProps> = props => {
   const { ChoiceProps, InputProps, onChange, ...rest } = props;

src/components/Timeline/TimelineEvent.tsx

@@ -8,7 +8,8 @@ import React from "react";
 
 import { DateTime } from "../Date";
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(
+  theme => ({
     date: {
       color: theme.typography.caption.color
     },
@@ -57,7 +58,9 @@ const useStyles = makeStyles(theme => ({
       position: "relative",
       width: "100%"
     }
-}));
+  }),
+  { name: "TimelineEvent" }
+);
 
 interface TimelineEventProps {
   children?: React.ReactNode;

src/components/Timeline/TimelineNote.tsx

@@ -29,7 +29,8 @@ const palette = [
   colors.yellow
 ].map(color => color[500]);
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(
+  theme => ({
     avatar: {
       left: -45,
       position: "absolute",
@@ -59,7 +60,9 @@ const useStyles = makeStyles(theme => ({
       marginBottom: theme.spacing(),
       paddingLeft: theme.spacing(3)
     }
-}));
+  }),
+  { name: "TimelineNote" }
+);
 
 interface TimelineNoteProps {
   date: string;

src/components/VisibilityCard/VisibilityCard.tsx

@@ -10,7 +10,8 @@ import CardTitle from "@saleor/components/CardTitle";
 import RadioSwitchField from "@saleor/components/RadioSwitchField";
 import { DateContext } from "../Date/DateContext";
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(
+  theme => ({
     children: {
       "& button": {
         margin: "0 9px"
@@ -39,7 +40,9 @@ const useStyles = makeStyles(theme => ({
       paddingTop: "15px",
       textDecoration: "underline"
     }
-}));
+  }),
+  { name: "VisibilityCard" }
+);
 
 interface VisibilityCardProps {
   children?: React.ReactNode | React.ReactNodeArray;

src/configuration/ConfigurationPage.tsx

@@ -26,7 +26,8 @@ export interface MenuSection {
   menuItems: MenuItem[];
 }
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(
+  theme => ({
     card: {
       "&:hover": {
         boxShadow: "0px 5px 15px rgba(0, 0, 0, 0.15);"
@@ -83,7 +84,9 @@ const useStyles = makeStyles(theme => ({
       fontSize: 20,
       fontWeight: 600 as 600
     }
-}));
+  }),
+  { name: "ConfigurationPage" }
+);
 
 export interface ConfigurationPageProps {
   menu: MenuSection[];

src/customers/components/CustomerAddress/CustomerAddress.tsx

@@ -25,7 +25,8 @@ export interface CustomerAddressProps {
   onSetAsDefault: (type: AddressTypeEnum) => void;
 }
 
-const useStyles = makeStyles({
+const useStyles = makeStyles(
+  {
     actions: {
       flexDirection: "row"
     },
@@ -39,7 +40,9 @@ const useStyles = makeStyles({
       display: "flex",
       flexDirection: "column"
     }
-});
+  },
+  { name: "CustomerAddress" }
+);
 const CustomerAddress: React.FC<CustomerAddressProps> = props => {
   const {
     address,

src/customers/components/CustomerAddressListPage/CustomerAddressListPage.tsx

@@ -23,7 +23,8 @@ export interface CustomerAddressListPageProps {
   onSetAsDefault: (id: string, type: AddressTypeEnum) => void;
 }
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(
+  theme => ({
     addButton: {
       marginTop: theme.spacing(2)
     },
@@ -41,7 +42,9 @@ const useStyles = makeStyles(theme => ({
       gridTemplateColumns: "repeat(3, 1fr)",
       rowGap: theme.spacing(3)
     }
-}));
+  }),
+  { name: "CustomerAddressListPage" }
+);
 
 const CustomerAddressListPage: React.FC<
   CustomerAddressListPageProps

src/customers/components/CustomerAddresses/CustomerAddresses.tsx

@@ -13,12 +13,15 @@ import { buttonMessages } from "@saleor/intl";
 import { maybe } from "../../../misc";
 import { CustomerDetails_user } from "../../types/CustomerDetails";
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(
+  theme => ({
     label: {
       fontWeight: 600,
       marginBottom: theme.spacing(1)
     }
-}));
+  }),
+  { name: "CustomerAddresses" }
+);
 
 export interface CustomerAddressesProps {
   customer: CustomerDetails_user;

src/customers/components/CustomerCreateAddress/CustomerCreateAddress.tsx

@@ -12,11 +12,14 @@ import { SingleAutocompleteChoiceType } from "@saleor/components/SingleAutocompl
 import { FormErrors } from "../../../types";
 import { AddressTypeInput } from "../../types";
 
-const useStyles = makeStyles({
+const useStyles = makeStyles(
+  {
     overflow: {
       overflow: "visible"
     }
-});
+  },
+  { name: "CustomerCreateAddress" }
+);
 
 export interface CustomerCreateAddressProps {
   countries: SingleAutocompleteChoiceType[];

src/customers/components/CustomerCreateDetails/CustomerCreateDetails.tsx

@@ -10,14 +10,17 @@ import { commonMessages } from "@saleor/intl";
 import { FormErrors } from "../../../types";
 import { CustomerCreatePageFormData } from "../CustomerCreatePage";
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(
+  theme => ({
     root: {
       display: "grid",
       gridColumnGap: theme.spacing(2),
       gridRowGap: theme.spacing(3),
       gridTemplateColumns: "1fr 1fr"
     }
-}));
+  }),
+  { name: "CustomerCreateDetails" }
+);
 
 export interface CustomerCreateDetailsProps {
   data: CustomerCreatePageFormData;

src/customers/components/CustomerDetails/CustomerDetails.tsx

@@ -14,7 +14,8 @@ import { maybe } from "@saleor/misc";
 import { FormErrors } from "@saleor/types";
 import { CustomerDetails_user } from "../../types/CustomerDetails";
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(
+  theme => ({
     cardTitle: {
       height: 72
     },
@@ -27,7 +28,9 @@ const useStyles = makeStyles(theme => ({
     subtitle: {
       marginTop: theme.spacing()
     }
-}));
+  }),
+  { name: "CustomerDetails" }
+);
 
 export interface CustomerDetailsProps {
   customer: CustomerDetails_user;

src/customers/components/CustomerInfo/CustomerInfo.tsx

@@ -11,7 +11,8 @@ import Grid from "@saleor/components/Grid";
 import Hr from "@saleor/components/Hr";
 import { commonMessages } from "@saleor/intl";
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(
+  theme => ({
     content: {
       paddingTop: theme.spacing(2)
     },
@@ -21,7 +22,9 @@ const useStyles = makeStyles(theme => ({
     sectionHeader: {
       marginBottom: theme.spacing()
     }
-}));
+  }),
+  { name: "CustomerInfo" }
+);
 
 export interface CustomerInfoProps {
   data: {

src/customers/components/CustomerList/CustomerList.tsx

@@ -15,7 +15,8 @@ import { getUserName, maybe, renderCollection } from "@saleor/misc";
 import { ListActions, ListProps } from "@saleor/types";
 import { ListCustomers_customers_edges_node } from "../../types/ListCustomers";
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(
+  theme => ({
     [theme.breakpoints.up("lg")]: {
       colEmail: {},
       colName: {},
@@ -33,7 +34,9 @@ const useStyles = makeStyles(theme => ({
     tableRow: {
       cursor: "pointer"
     }
-}));
+  }),
+  { name: "CustomerList" }
+);
 
 export interface CustomerListProps extends ListProps, ListActions {
   customers: ListCustomers_customers_edges_node[];

src/customers/components/CustomerOrders/CustomerOrders.tsx

@@ -17,14 +17,17 @@ import StatusLabel from "@saleor/components/StatusLabel";
 import { maybe, renderCollection, transformPaymentStatus } from "../../../misc";
 import { CustomerDetails_user_orders_edges_node } from "../../types/CustomerDetails";
 
-const useStyles = makeStyles({
+const useStyles = makeStyles(
+  {
     link: {
       cursor: "pointer"
     },
     textRight: {
       textAlign: "right"
     }
-});
+  },
+  { name: "CustomerOrders" }
+);
 
 export interface CustomerOrdersProps {
   orders: CustomerDetails_user_orders_edges_node[];

src/customers/components/CustomerStats/CustomerStats.tsx

@@ -12,14 +12,17 @@ import Skeleton from "@saleor/components/Skeleton";
 import { maybe } from "../../../misc";
 import { CustomerDetails_user } from "../../types/CustomerDetails";
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(
+  theme => ({
     label: {
       marginBottom: theme.spacing(1)
     },
     value: {
       fontSize: 24
     }
-}));
+  }),
+  { name: "CustomerStats" }
+);
 
 export interface CustomerStatsProps {
   customer: CustomerDetails_user;

src/discounts/components/DiscountCategories/DiscountCategories.tsx

@@ -27,7 +27,8 @@ export interface DiscountCategoriesProps extends ListProps, ListActions {
   onCategoryUnassign: (id: string) => void;
 }
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(
+  theme => ({
     iconCell: {
       "&:last-child": {
         paddingRight: 0
@@ -43,7 +44,9 @@ const useStyles = makeStyles(theme => ({
     wideColumn: {
       width: "60%"
     }
-}));
+  }),
+  { name: "DiscountCategories" }
+);
 
 const numberOfColumns = 4;
 

src/discounts/components/DiscountCollections/DiscountCollections.tsx

@@ -27,7 +27,8 @@ export interface DiscountCollectionsProps extends ListProps, ListActions {
   onCollectionUnassign: (id: string) => void;
 }
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(
+  theme => ({
     iconCell: {
       "&:last-child": {
         paddingRight: 0
@@ -43,7 +44,9 @@ const useStyles = makeStyles(theme => ({
     wideColumn: {
       width: "60%"
     }
-}));
+  }),
+  { name: "DiscountCollections" }
+);
 
 const numberOfColumns = 4;
 

src/discounts/components/DiscountCountrySelectDialog/DiscountCountrySelectDialog.tsx

@@ -40,7 +40,8 @@ export interface DiscountCountrySelectDialogProps {
   onConfirm: (data: FormData) => void;
 }
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(
+  theme => ({
     checkboxCell: {
       paddingLeft: 0
     },
@@ -54,7 +55,9 @@ const useStyles = makeStyles(theme => ({
     wideCell: {
       width: "100%"
     }
-}));
+  }),
+  { name: "DiscountCountrySelectDialog" }
+);
 const DiscountCountrySelectDialog: React.FC<
   DiscountCountrySelectDialogProps
 > = props => {

src/discounts/components/DiscountProducts/DiscountProducts.tsx

@@ -31,7 +31,8 @@ export interface SaleProductsProps extends ListProps, ListActions {
   onProductUnassign: (id: string) => void;
 }
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(
+  theme => ({
     colActions: {
       "&:last-child": {
         paddingRight: 0
@@ -57,7 +58,9 @@ const useStyles = makeStyles(theme => ({
     tableRow: {
       cursor: "pointer"
     }
-}));
+  }),
+  { name: "DiscountProducts" }
+);
 
 const numberOfColumns = 5;
 

src/discounts/components/SaleList/SaleList.tsx

@@ -24,7 +24,8 @@ export interface SaleListProps extends ListProps, ListActions {
   sales: SaleList_sales_edges_node[];
 }
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(
+  theme => ({
     [theme.breakpoints.up("lg")]: {
       colEnd: {
         width: 250
@@ -52,7 +53,9 @@ const useStyles = makeStyles(theme => ({
     tableRow: {
       cursor: "pointer"
     }
-}));
+  }),
+  { name: "SaleList" }
+);
 
 const numberOfColumns = 5;
 

src/discounts/components/VoucherList/VoucherList.tsx

@@ -24,7 +24,8 @@ export interface VoucherListProps extends ListProps, ListActions {
   vouchers: VoucherList_vouchers_edges_node[];
 }
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(
+  theme => ({
     [theme.breakpoints.up("lg")]: {
       colEnd: {
         width: 180
@@ -67,7 +68,9 @@ const useStyles = makeStyles(theme => ({
     textRight: {
       textAlign: "right"
     }
-}));
+  }),
+  { name: "VoucherList" }
+);
 
 const numberOfColumns = 7;
 

src/home/components/HomeActivityCard/HomeActivityCard.tsx

@@ -14,7 +14,8 @@ import { renderCollection } from "../../../misc";
 import { Home_activities_edges_node } from "../../types/Home";
 import { getActivityMessage } from "./activityMessages";
 
-const useStyles = makeStyles({
+const useStyles = makeStyles(
+  {
     loadingProducts: {
       paddingBottom: "10px",
       paddingTop: "10px"
@@ -23,7 +24,9 @@ const useStyles = makeStyles({
       paddingBottom: "16px",
       paddingTop: "16px"
     }
-});
+  },
+  { name: "HomeActivityCard" }
+);
 
 interface HomeActivityCardProps {
   activities: Home_activities_edges_node[];

src/home/components/HomeAnalyticsCard/HomeAnalyticsCard.tsx

@@ -6,7 +6,8 @@ import Typography from "@material-ui/core/Typography";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(
+  theme => ({
     cardContent: {
       "&:last-child": {
         padding: theme.spacing(2, 3)
@@ -47,7 +48,9 @@ const useStyles = makeStyles(theme => ({
     value: {
       textAlign: "right"
     }
-}));
+  }),
+  { name: "HomeAnalyticsCard" }
+);
 
 interface HomeAnalyticsCardProps {
   icon: React.ReactElement<IconProps>;

src/home/components/HomeHeader/HomeHeader.tsx

@@ -5,7 +5,8 @@ import { FormattedMessage } from "react-intl";
 
 import Skeleton from "@saleor/components/Skeleton";
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(
+  theme => ({
     headerContainer: {
       marginBottom: theme.spacing(3)
     },
@@ -15,7 +16,9 @@ const useStyles = makeStyles(theme => ({
     subtitle: {
       color: theme.typography.caption.color
     }
-}));
+  }),
+  { name: "HomeHeader" }
+);
 
 interface HomeOrdersCardProps {
   userName: string;

src/home/components/HomeNotificationTable/HomeNotificationTable.tsx

@@ -14,14 +14,17 @@ import Skeleton from "@saleor/components/Skeleton";
 import { UserPermissionProps } from "@saleor/types";
 import { PermissionEnum } from "@saleor/types/globalTypes";
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(
+  theme => ({
     arrowIcon: {
       width: theme.spacing(4)
     },
     tableRow: {
       cursor: "pointer"
     }
-}));
+  }),
+  { name: "HomeNotificationTable" }
+);
 
 interface HomeNotificationTableProps extends UserPermissionProps {
   ordersToCapture: number;

src/home/components/HomePage/HomePage.tsx

@@ -22,7 +22,8 @@ import HomeHeader from "../HomeHeader";
 import HomeNotificationTable from "../HomeNotificationTable/HomeNotificationTable";
 import HomeProductListCard from "../HomeProductListCard";
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(
+  theme => ({
     cardContainer: {
       display: "grid",
       gridColumnGap: theme.spacing(3),
@@ -34,7 +35,9 @@ const useStyles = makeStyles(theme => ({
         gridTemplateColumns: "1fr"
       }
     }
-}));
+  }),
+  { name: "HomePage" }
+);
 
 export interface HomePageProps extends UserPermissionProps {
   activities: Home_activities_edges_node[];

src/home/components/HomeProductListCard/HomeProductListCard.tsx

@@ -16,7 +16,8 @@ import TableCellAvatar from "@saleor/components/TableCellAvatar";
 import { maybe, renderCollection } from "../../../misc";
 import { Home_productTopToday_edges_node } from "../../types/Home";
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(
+  theme => ({
     avatarProps: {
       height: 64,
       width: 64
@@ -36,7 +37,9 @@ const useStyles = makeStyles(theme => ({
     tableRow: {
       cursor: "pointer"
     }
-}));
+  }),
+  { name: "HomeProductListCard" }
+);
 
 interface HomeProductListProps {
   topProducts: Home_productTopToday_edges_node[];

src/navigation/components/MenuItems/MenuItems.tsx

@@ -34,7 +34,8 @@ export interface MenuItemsProps {
   onUndo: () => void;
 }
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(
+  theme => ({
     actions: {
       flexDirection: "row"
     },
@@ -109,7 +110,9 @@ const useStyles = makeStyles(theme => ({
     spacer: {
       flex: 1
     }
-}));
+  }),
+  { name: "MenuItems" }
+);
 
 const Placeholder: React.FC = props => {
   const classes = useStyles(props);

src/navigation/components/MenuList/MenuList.tsx

@@ -23,7 +23,8 @@ export interface MenuListProps extends ListProps, ListActions {
   onDelete: (id: string) => void;
 }
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(
+  theme => ({
     [theme.breakpoints.up("lg")]: {
       colItems: {
         width: 200
@@ -39,7 +40,9 @@ const useStyles = makeStyles(theme => ({
     row: {
       cursor: "pointer"
     }
-}));
+  }),
+  { name: "MenuList" }
+);
 
 const numberOfColumns = 4;
 

src/orders/components/OrderAddressEditDialog/OrderAddressEditDialog.tsx

@@ -22,11 +22,14 @@ import { UserError } from "@saleor/types";
 import { AddressInput } from "@saleor/types/globalTypes";
 import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler";
 
-const useStyles = makeStyles({
+const useStyles = makeStyles(
+  {
     overflow: {
       overflowY: "visible"
     }
-});
+  },
+  { name: "OrderAddressEditDialog" }
+);
 
 interface OrderAddressEditDialogProps {
   confirmButtonState: ConfirmButtonTransitionState;

src/orders/components/OrderCancelDialog/OrderCancelDialog.tsx

@@ -19,7 +19,8 @@ export interface FormData {
   restock: boolean;
 }
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(
+  theme => ({
     deleteButton: {
       "&:hover": {
         backgroundColor: theme.palette.error.main
@@ -27,7 +28,9 @@ const useStyles = makeStyles(theme => ({
       backgroundColor: theme.palette.error.main,
       color: theme.palette.error.contrastText
     }
-}));
+  }),
+  { name: "OrderCancelDialog" }
+);
 
 interface OrderCancelDialogProps {
   confirmButtonState: ConfirmButtonTransitionState;

src/orders/components/OrderCustomer/OrderCustomer.tsx

@@ -24,7 +24,8 @@ import { customerUrl } from "../../../customers/urls";
 import { createHref, maybe } from "../../../misc";
 import { OrderDetails_order } from "../../types/OrderDetails";
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(
+  theme => ({
     sectionHeader: {
       alignItems: "center",
       display: "flex",
@@ -43,7 +44,9 @@ const useStyles = makeStyles(theme => ({
       fontWeight: 600 as 600,
       marginBottom: theme.spacing(1)
     }
-}));
+  }),
+  { name: "OrderCustomer" }
+);
 
 export interface OrderCustomerProps
   extends Partial<FetchMoreProps>,

src/orders/components/OrderDraftDetailsProducts/OrderDraftDetailsProducts.tsx

@@ -25,7 +25,8 @@ export interface FormData {
   quantity: number;
 }
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(
+  theme => ({
     colAction: {
       "&:last-child": {
         paddingRight: 0
@@ -60,7 +61,9 @@ const useStyles = makeStyles(theme => ({
     table: {
       tableLayout: "fixed"
     }
-}));
+  }),
+  { name: "OrderDraftDetailsProducts" }
+);
 
 interface OrderDraftDetailsProductsProps {
   lines: OrderDetails_order_lines[];

src/orders/components/OrderDraftDetailsSummary/OrderDraftDetailsSummary.tsx

@@ -8,7 +8,8 @@ import Skeleton from "@saleor/components/Skeleton";
 import { maybe } from "../../../misc";
 import { OrderDetails_order } from "../../types/OrderDetails";
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(
+  theme => ({
     root: {
       ...theme.typography.body1,
       lineHeight: 1.9,
@@ -17,7 +18,9 @@ const useStyles = makeStyles(theme => ({
     textRight: {
       textAlign: "right"
     }
-}));
+  }),
+  { name: "OrderDraftDetailsSummary" }
+);
 
 interface OrderDraftDetailsSummaryProps {
   order: OrderDetails_order;

src/orders/components/OrderDraftList/OrderDraftList.tsx

@@ -22,7 +22,8 @@ import {
 import { ListActions, ListProps } from "@saleor/types";
 import { OrderDraftList_draftOrders_edges_node } from "../../types/OrderDraftList";
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(
+  theme => ({
     [theme.breakpoints.up("lg")]: {
       colCustomer: {
         width: 300
@@ -46,7 +47,9 @@ const useStyles = makeStyles(theme => ({
     link: {
       cursor: "pointer"
     }
-}));
+  }),
+  { name: "OrderDraftList" }
+);
 
 interface OrderDraftListProps extends ListProps, ListActions {
   orders: OrderDraftList_draftOrders_edges_node[];

src/orders/components/OrderDraftPage/OrderDraftPage.tsx

@@ -23,7 +23,8 @@ import OrderDraftDetails from "../OrderDraftDetails/OrderDraftDetails";
 import { FormData as OrderDraftDetailsProductsFormData } from "../OrderDraftDetailsProducts";
 import OrderHistory, { FormData as HistoryFormData } from "../OrderHistory";
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(
+  theme => ({
     date: {
       marginBottom: theme.spacing(3)
     },
@@ -31,7 +32,9 @@ const useStyles = makeStyles(theme => ({
       display: "flex",
       marginBottom: 0
     }
-}));
+  }),
+  { name: "OrderDraftPage" }
+);
 
 export interface OrderDraftPageProps
   extends FetchMoreProps,

src/orders/components/OrderFulfillment/OrderFulfillment.tsx

@@ -23,7 +23,8 @@ import { maybe, renderCollection } from "../../../misc";
 import { FulfillmentStatus } from "../../../types/globalTypes";
 import { OrderDetails_order_fulfillments } from "../../types/OrderDetails";
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(
+  theme => ({
     clickableRow: {
       cursor: "pointer"
     },
@@ -56,7 +57,9 @@ const useStyles = makeStyles(theme => ({
     table: {
       tableLayout: "fixed"
     }
-}));
+  }),
+  { name: "OrderFulfillment" }
+);
 
 interface OrderFulfillmentProps {
   fulfillment: OrderDetails_order_fulfillments;