refactor: lints & less arguments

packages/mui-joy/src/AutocompleteListbox/AutocompleteListbox.tsx

@@ -85,7 +85,7 @@ const AutocompleteListboxRoot = styled(StyledAutocompleteListbox, {
   name: 'JoyAutocompleteListbox',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root,
-})({});
+})();
 /**
  *
  * Demos:

packages/mui-joy/src/AutocompleteOption/AutocompleteOption.tsx

@@ -40,7 +40,7 @@ const AutocompleteOptionRoot = styled(StyledAutocompleteOption, {
   name: 'JoyAutocompleteOption',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root,
-})({});
+})();
 /**
  *
  * Demos:

packages/mui-joy/src/IconButton/IconButton.tsx

@@ -113,7 +113,7 @@ export const IconButtonRoot = styled(StyledIconButton, {
   name: 'JoyIconButton',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root,
-})({});
+})();
 
 const ButtonLoading = styled('span', {
   name: 'JoyIconButton',

packages/mui-joy/src/Input/Input.tsx

@@ -212,25 +212,25 @@ const InputRoot = styled(StyledInputRoot, {
   name: 'JoyInput',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root,
-})({});
+})();
 
 const InputInput = styled(StyledInputHtml, {
   name: 'JoyInput',
   slot: 'Input',
   overridesResolver: (props, styles) => styles.input,
-})({});
+})();
 
 const InputStartDecorator = styled(StyledInputStartDecorator, {
   name: 'JoyInput',
   slot: 'StartDecorator',
   overridesResolver: (props, styles) => styles.startDecorator,
-})({});
+})();
 
 const InputEndDecorator = styled(StyledInputEndDecorator, {
   name: 'JoyInput',
   slot: 'EndDecorator',
   overridesResolver: (props, styles) => styles.endDecorator,
-})({});
+})();
 /**
  *
  * Demos:

packages/mui-joy/src/List/List.tsx

@@ -170,7 +170,7 @@ const ListRoot = styled(StyledList, {
   name: 'JoyList',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root,
-})({});
+})();
 /**
  *
  * Demos:

packages/mui-material/src/Breadcrumbs/Breadcrumbs.js

@@ -31,7 +31,7 @@ const BreadcrumbsRoot = styled(Typography, {
   overridesResolver: (props, styles) => {
     return [{ [`& .${breadcrumbsClasses.li}`]: styles.li }, styles.root];
   },
-})({});
+})();
 
 const BreadcrumbsOl = styled('ol', {
   name: 'MuiBreadcrumbs',

packages/mui-material/src/DialogContentText/DialogContentText.js

@@ -29,7 +29,7 @@ const DialogContentTextRoot = styled(Typography, {
   name: 'MuiDialogContentText',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root,
-})({});
+})();
 
 const DialogContentText = React.forwardRef(function DialogContentText(inProps, ref) {
   const props = useDefaultProps({ props: inProps, name: 'MuiDialogContentText' });

packages/mui-material/src/Input/Input.js

@@ -132,7 +132,7 @@ const InputInput = styled(InputBaseInput, {
   name: 'MuiInput',
   slot: 'Input',
   overridesResolver: inputBaseInputOverridesResolver,
-})({});
+})();
 
 const Input = React.forwardRef(function Input(inProps, ref) {
   const props = useDefaultProps({ props: inProps, name: 'MuiInput' });

packages/mui-material/src/Menu/Menu.js

@@ -41,7 +41,7 @@ const MenuRoot = styled(Popover, {
   name: 'MuiMenu',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root,
-})({});
+})();
 
 export const MenuPaper = styled(PopoverPaper, {
   name: 'MuiMenu',

packages/mui-material/src/NativeSelect/NativeSelectInput.js

@@ -97,7 +97,7 @@ const NativeSelectSelect = styled(StyledSelectSelect, {
       { [`&.${nativeSelectClasses.multiple}`]: styles.multiple },
     ];
   },
-})({});
+})();
 
 export const StyledSelectIcon = styled('svg')(({ theme }) => ({
   // We use a position absolute over a flexbox in order to forward the pointer events
@@ -149,7 +149,7 @@ const NativeSelectIcon = styled(StyledSelectIcon, {
       ownerState.open && styles.iconOpen,
     ];
   },
-})({});
+})();
 
 /**
  * @ignore - internal component.

packages/mui-material/src/Pagination/Pagination.js

@@ -30,7 +30,7 @@ const PaginationRoot = styled('nav', {
 
     return [styles.root, styles[ownerState.variant]];
   },
-})({});
+})();
 
 const PaginationUl = styled('ul', {
   name: 'MuiPagination',

packages/mui-material/src/Popover/Popover.js

@@ -74,7 +74,7 @@ export const PopoverRoot = styled(Modal, {
   name: 'MuiPopover',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root,
-})({});
+})();
 
 export const PopoverPaper = styled(PaperBase, {
   name: 'MuiPopover',

packages/mui-material/src/Popper/Popper.tsx

@@ -44,7 +44,7 @@ const PopperRoot = styled(BasePopper, {
   name: 'MuiPopper',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root,
-})({});
+})();
 
 /**
  *

packages/mui-material/src/Select/SelectInput.js

@@ -53,7 +53,7 @@ const SelectIcon = styled(StyledSelectIcon, {
       ownerState.open && styles.iconOpen,
     ];
   },
-})({});
+})();
 
 const SelectNativeInput = styled('input', {
   shouldForwardProp: (prop) => slotShouldForwardProp(prop) && prop !== 'classes',

packages/mui-material/src/StepContent/StepContent.js

@@ -52,7 +52,7 @@ const StepContentTransition = styled(Collapse, {
   name: 'MuiStepContent',
   slot: 'Transition',
   overridesResolver: (props, styles) => styles.transition,
-})({});
+})();
 
 const StepContent = React.forwardRef(function StepContent(inProps, ref) {
   const props = useDefaultProps({ props: inProps, name: 'MuiStepContent' });

packages/mui-material/src/TablePagination/TablePagination.js

@@ -105,7 +105,7 @@ const TablePaginationMenuItem = styled(MenuItem, {
   name: 'MuiTablePagination',
   slot: 'MenuItem',
   overridesResolver: (props, styles) => styles.menuItem,
-})({});
+})();
 
 const TablePaginationDisplayedRows = styled('p', {
   name: 'MuiTablePagination',

packages/mui-material/src/TextField/TextField.js

@@ -37,7 +37,7 @@ const TextFieldRoot = styled(FormControl, {
   name: 'MuiTextField',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root,
-})({});
+})();
 
 /**
  * The `TextField` is a convenience wrapper for the most common cases (80%).

packages/mui-system/src/createStyled/createStyled.js

@@ -165,9 +165,7 @@ export default function createStyled(input = {}) {
       return style;
     };
 
-    const muiStyledResolver = (expressionFirst, ...expressionsMiddle) => {
-      expressionFirst = transformStyle(expressionFirst)
-
+    const muiStyledResolver = (...expressionsMiddle) => {
       const expressionsHead = []
       const expressionsTail = []
 
@@ -210,23 +208,25 @@ export default function createStyled(input = {}) {
         expressionsTail.push(styleFunctionSx);
       }
 
-      // This function can be called as a tagged template, so `style` would contain CSS
-      // `string[]` values and `expressions` would contain the interpolated values.
-      if (Array.isArray(expressionFirst)) {
+      // This function can be called as a tagged template, so the first argument would contain
+      // CSS `string[]` values.
+      if (Array.isArray(expressionsMiddle[0])) {
+        const inputStrings = expressionsMiddle.shift();
+
         // We need to add placeholders in the tagged template for the custom functions we have
         // possibly added (attachTheme, overrides, variants, and sx).
         const placeholdersHead = new Array(expressionsHead.length).fill('');
         const placeholdersTail = new Array(expressionsTail.length).fill('');
 
-        let taggedStrings;
-        taggedStrings     = [...placeholdersHead, ...expressionFirst,     ...placeholdersTail];
-        taggedStrings.raw = [...placeholdersHead, ...expressionFirst.raw, ...placeholdersTail];
+        let outputStrings;
+        // prettier-ignore
+        {
+          outputStrings     = [...placeholdersHead, ...inputStrings,     ...placeholdersTail];
+          outputStrings.raw = [...placeholdersHead, ...inputStrings.raw, ...placeholdersTail];
+        }
 
         // The only case where we put something before `attachTheme`
-        expressionsHead.unshift(taggedStrings)
-      } else {
-        // But otherwise, we always want attachTheme to stay first.
-        expressionsHead.push(expressionFirst)
+        expressionsHead.unshift(outputStrings)
       }
 
       const expressions = [

packages/mui-system/src/memoTheme.ts

@@ -21,8 +21,7 @@ export default function memoTheme<T>(styleFn: ThemeStyleFunction<T>) {
     if (value === undefined || props.theme !== lastTheme) {
       arg.theme = props.theme;
 
-      value = styleFn(arg);
-      value = preprocessStyles(value);
+      value = preprocessStyles(styleFn(arg));
 
       lastValue = value;
       lastTheme = props.theme;

packages/mui-system/src/preprocessStyles.ts

@@ -4,9 +4,9 @@ export default function preprocessStyles(styles: any) {
   const variants = styles.variants
 
   // Avoid passing `style.variants` to emotion, it will pollute the styles.
-  styles.variants = undefined
+  if (variants) { styles.variants = undefined }
   const serialized = internal_serializeStyles(styles) as any
-  styles.variants = variants
+  if (variants) { styles.variants = variants }
 
   // Not supported on styled-components
   if (serialized === styles) {
@@ -15,11 +15,9 @@ export default function preprocessStyles(styles: any) {
 
   if (variants) {
     variants.forEach((variant: any) => {
-      if (typeof variant.style === 'function') {
-        return variant
+      if (typeof variant.style !== 'function') {
+        variant.style = internal_serializeStyles(variant.style)
       }
-
-      variant.style = internal_serializeStyles(variant.style)
     })
 
     serialized.variants = variants

test/integration/mui-system/createStyled.test.js

@@ -38,7 +38,7 @@ describe('createStyled', () => {
       const styled = createStyled({});
       const SomeMuiComponent = styled(function SomeMuiComponent() {
         return null;
-      })({});
+      })();
 
       expect(SomeMuiComponent).to.have.property('displayName', 'Styled(SomeMuiComponent)');
     });
@@ -185,12 +185,12 @@ describe('createStyled', () => {
         styles.root,
         { [`& .MuiButton-avatar`]: styles.avatar },
       ],
-    })({});
+    })();
     const ButtonIcon = styled('span', {
       name: 'MuiButton',
       slot: 'Icon',
       overridesResolver: (props, styles) => styles.icon,
-    })({});
+    })();
     function Button({ children, startIcon, endIcon, color = 'primary', ...props }) {
       const ownerState = { startIcon, endIcon, color, ...props };
       return (