[material-ui] Migrate components to support CSS extraction

docs/pages/material-ui/api/input.json

@@ -19,7 +19,7 @@
     },
     "defaultValue": { "type": { "name": "any" } },
     "disabled": { "type": { "name": "bool" } },
-    "disableUnderline": { "type": { "name": "bool" } },
+    "disableUnderline": { "type": { "name": "bool" }, "default": "false" },
     "endAdornment": { "type": { "name": "node" } },
     "error": { "type": { "name": "bool" } },
     "fullWidth": { "type": { "name": "bool" }, "default": "false" },

packages/mui-codemod/src/v6.0.0/styled/styled-v6.js

@@ -15,7 +15,7 @@ export default function styledV6(file, api, options) {
         if (key.type === 'Identifier' || key.type === 'StringLiteral') {
           return upperBuildStyle(j.objectExpression([j.objectProperty(key, styleExpression)]));
         }
-        if (key.type === 'TemplateLiteral') {
+        if (key.type === 'TemplateLiteral' || key.type === 'CallExpression') {
           return upperBuildStyle(
             j.objectExpression([
               {
@@ -84,10 +84,10 @@ export default function styledV6(file, api, options) {
 
   /**
    *
-   * @param {import('ast-types').namedTypes.Identifier | import('ast-types').namedTypes.BinaryExpression | import('ast-types').namedTypes.UnaryExpression} node
+   * @param {import('ast-types').namedTypes.Identifier | import('ast-types').namedTypes.BinaryExpression | import('ast-types').namedTypes.UnaryExpression | import('ast-types').namedTypes.MemberExpression} node
    */
   function inverseBinaryExpression(node) {
-    if (node.type === 'Identifier') {
+    if (node.type === 'Identifier' || node.type === 'MemberExpression') {
       return j.unaryExpression('!', node);
     }
     if (node.operator === '===') {
@@ -343,7 +343,7 @@ export default function styledV6(file, api, options) {
                   return (
                     props &&
                     styleVal &&
-                    styleVal.value.properties.length > 0 &&
+                    (!styleVal.value.properties || styleVal.value.properties.length > 0) &&
                     (props.value.type === 'ArrowFunctionExpression' ||
                       props.value.properties.length > 0)
                   );
@@ -384,7 +384,7 @@ export default function styledV6(file, api, options) {
         if (data.node.type === 'SpreadElement') {
           if (data.node.argument.type === 'LogicalExpression') {
             const paramName = getObjectKey(data.node.argument.left)?.name;
-            if (paramName && !parameters.has(paramName)) {
+            if (paramName && (paramName === 'theme' || !parameters.has(paramName))) {
               return;
             }
 
@@ -397,30 +397,32 @@ export default function styledV6(file, api, options) {
             const lastLength = variants.push({}); // preserve the order of the recursive calls
 
             const modeStyles = {}; // to collect styles from `theme.palette.mode === '...'`
-            variant.style.properties.forEach((prop) => {
-              if (prop.type === 'ObjectProperty') {
-                recurseObjectExpression({
-                  ...data,
-                  node: prop.value,
-                  parentNode: variant.style,
-                  props: variant.props,
-                  key: prop.key,
-                  buildStyle: createBuildStyle(prop.key, data.buildStyle),
-                  replaceValue: (newValue) => {
-                    prop.value = newValue;
-                  },
-                  modeStyles,
-                });
-              } else {
-                recurseObjectExpression({
-                  ...data,
-                  node: prop,
-                  parentNode: variant.style,
-                  props: variant.props,
-                  buildStyle: createBuildStyle(prop.key, data.buildStyle),
-                });
-              }
-            });
+            if (variant.style.type === 'ObjectExpression') {
+              variant.style.properties.forEach((prop) => {
+                if (prop.type === 'ObjectProperty') {
+                  recurseObjectExpression({
+                    ...data,
+                    node: prop.value,
+                    parentNode: variant.style,
+                    props: variant.props,
+                    key: prop.key,
+                    buildStyle: createBuildStyle(prop.key, data.buildStyle),
+                    replaceValue: (newValue) => {
+                      prop.value = newValue;
+                    },
+                    modeStyles,
+                  });
+                } else {
+                  recurseObjectExpression({
+                    ...data,
+                    node: prop,
+                    parentNode: variant.style,
+                    props: variant.props,
+                    buildStyle: createBuildStyle(prop.key, data.buildStyle),
+                  });
+                }
+              });
+            }
             appendPaletteModeStyles(variant.style, modeStyles);
             variant.style = data.buildStyle(variant.style);
             variants[lastLength - 1] = buildObjectAST(variant);
@@ -439,7 +441,8 @@ export default function styledV6(file, api, options) {
           if (
             data.node.test.type === 'BinaryExpression' ||
             data.node.test.type === 'UnaryExpression' ||
-            data.node.test.type === 'Identifier'
+            data.node.test.type === 'Identifier' ||
+            data.node.test.type === 'MemberExpression'
           ) {
             let leftName = getObjectKey(data.node.test)?.name;
             if (data.node.test.left) {

packages/mui-codemod/src/v6.0.0/styled/test-cases/ConditionalStyled.actual.js

@@ -123,3 +123,30 @@ const StyledAppContainer = styled(AppContainer, {
     },
   };
 });
+
+const DialogContentRoot = styled('div', {
+  name: 'MuiDialogContent',
+  slot: 'Root',
+  overridesResolver: (props, styles) => {
+    const { ownerState } = props;
+
+    return [styles.root, ownerState.dividers && styles.dividers];
+  },
+})(({ theme, ownerState }) => ({
+  flex: '1 1 auto',
+  // Add iOS momentum scrolling for iOS < 13.0
+  WebkitOverflowScrolling: 'touch',
+  overflowY: 'auto',
+  padding: '20px 24px',
+  ...(ownerState.dividers
+    ? {
+        padding: '16px 24px',
+        borderTop: `1px solid ${(theme.vars || theme).palette.divider}`,
+        borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`,
+      }
+    : {
+        [`.${dialogTitleClasses.root} + &`]: {
+          paddingTop: 0,
+        },
+      }),
+}));

packages/mui-codemod/src/v6.0.0/styled/test-cases/ConditionalStyled.expected.js

@@ -230,3 +230,44 @@ const StyledAppContainer = styled(AppContainer, {
     }]
   };
 });
+
+const DialogContentRoot = styled('div', {
+  name: 'MuiDialogContent',
+  slot: 'Root',
+  overridesResolver: (props, styles) => {
+    const { ownerState } = props;
+
+    return [styles.root, ownerState.dividers && styles.dividers];
+  },
+})(({
+  theme
+}) => ({
+  flex: '1 1 auto',
+  // Add iOS momentum scrolling for iOS < 13.0
+  WebkitOverflowScrolling: 'touch',
+  overflowY: 'auto',
+  padding: '20px 24px',
+  variants: [{
+    props: (
+      {
+        ownerState
+      }
+    ) => ownerState.dividers,
+    style: {
+          padding: '16px 24px',
+          borderTop: `1px solid ${(theme.vars || theme).palette.divider}`,
+          borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`,
+        }
+  }, {
+    props: (
+      {
+        ownerState
+      }
+    ) => !ownerState.dividers,
+    style: {
+          [`.${dialogTitleClasses.root} + &`]: {
+            paddingTop: 0,
+          },
+        }
+  }]
+}));