[codemod] Fix jss-to-styled to support other export class, function e…

…tc. mui#28321

packages/mui-codemod/src/v5.0.0/jss-to-styled.js

@@ -40,6 +40,9 @@ export default function transformer(file, api, options) {
     if (!prefix) {
       // 3. use name export that is Capitalize
       root.find(j.ExportNamedDeclaration).forEach((path) => {
+        if (path.node.declaration.type !== 'VariableDeclaration') {
+          return;
+        }
         const name = path.node.declaration.declarations[0].id.name;
         if (!prefix && name.match(/^[A-Z]/)) {
           prefix = name;

packages/mui-codemod/src/v5.0.0/jss-to-styled.test.js

@@ -504,5 +504,64 @@ describe('@mui/codemod', () => {
         expect(actual).to.equal(expected, 'The transformed version should be correct');
       });
     });
+
+    describe('bugs - #28317 export function declaration', () => {
+      it('transforms as needed', () => {
+        const actual = transform(
+          {
+            source: read('./jss-to-styled.test/exportFunction.actual.js'),
+            path: require.resolve('./jss-to-styled.test/exportFunction.actual.js'),
+          },
+          { jscodeshift },
+          {},
+        );
+
+        const expected = read('./jss-to-styled.test/exportFunction.expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+
+      it('should be idempotent', () => {
+        const actual = transform(
+          {
+            source: read('./jss-to-styled.test/exportFunction.expected.js'),
+            path: require.resolve('./jss-to-styled.test/exportFunction.expected.js'),
+          },
+          { jscodeshift },
+          {},
+        );
+
+        const expected = read('./jss-to-styled.test/exportFunction.expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+    });
+    describe('bugs - #28317 export class declaration', () => {
+      it('transforms as needed', () => {
+        const actual = transform(
+          {
+            source: read('./jss-to-styled.test/exportClass.actual.js'),
+            path: require.resolve('./jss-to-styled.test/exportClass.actual.js'),
+          },
+          { jscodeshift },
+          {},
+        );
+
+        const expected = read('./jss-to-styled.test/exportClass.expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+
+      it('should be idempotent', () => {
+        const actual = transform(
+          {
+            source: read('./jss-to-styled.test/exportClass.expected.js'),
+            path: require.resolve('./jss-to-styled.test/exportClass.expected.js'),
+          },
+          { jscodeshift },
+          {},
+        );
+
+        const expected = read('./jss-to-styled.test/exportClass.expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+    });
   });
 });

packages/mui-codemod/src/v5.0.0/jss-to-styled.test/exportClass.actual.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import withStyles from '@material-ui/styles/withStyles';
+
+export class Bug {}
+
+const styles = {
+  root: {},
+};
+
+const Test = withStyles(styles)(props => {
+  const { classes } = props;
+  return <div className={classes.root}>Anonymous</div>;
+});
+
+export default Test

packages/mui-codemod/src/v5.0.0/jss-to-styled.test/exportClass.expected.js

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { styled } from '@material-ui/core/styles';
+const PREFIX = 'Test';
+
+const classes = {
+  root: `${PREFIX}-root`
+};
+
+const Root = styled('div')({
+  [`&.${classes.root}`]: {},
+});
+
+export class Bug {}
+
+const Test = (props => {
+  const { } = props;
+  return <Root className={classes.root}>Anonymous</Root>;
+});
+
+export default Test

packages/mui-codemod/src/v5.0.0/jss-to-styled.test/exportFunction.actual.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import withStyles from '@material-ui/styles/withStyles';
+
+export function Bug() {}
+
+const styles = {
+  root: {},
+};
+
+const Test = withStyles(styles)(props => {
+  const { classes } = props;
+  return <div className={classes.root}>Anonymous</div>;
+});
+
+export default Test

packages/mui-codemod/src/v5.0.0/jss-to-styled.test/exportFunction.expected.js

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { styled } from '@material-ui/core/styles';
+const PREFIX = 'Test';
+
+const classes = {
+  root: `${PREFIX}-root`
+};
+
+const Root = styled('div')({
+  [`&.${classes.root}`]: {},
+});
+
+export function Bug() {}
+
+const Test = (props => {
+  const { } = props;
+  return <Root className={classes.root}>Anonymous</Root>;
+});
+
+export default Test