[codemod] jss-to-styled will not apply to standalone style files

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

When running the migration steps to migrate JSS to emotion documented here

We run:

npx @mui/codemod v5.0.0/jss-to-styled src

However, any styles contained a single file without an accompanying component where they are used, will not migrate properly. You will get this error:

 ERR /Users/davidjohnston/git/sandbox/mui-migrate/src/MyComponent.styles.ts Transformation error (Cannot read properties of null (reading 'match'))
TypeError: Cannot read properties of null (reading 'match')
    at transformer (/Users/davidjohnston/.npm/_npx/62df030d7e52d1d4/node_modules/@mui/codemod/node/v5.0.0/jss-to-styled.js:370:43)
All done. 
Results: 
1 errors
7 unmodified
0 skipped
0 ok
Time elapsed: 0.587seconds 

ie.

This is OK:

import React from 'react';
import makeStyles from '@mui/styles/makeStyles';


export type MyComponentProps = {
};


const useStyles = makeStyles(
  ({ spacing, palette }) => ({
    root: {
        padding: spacing(2),
        border: "solid 1px red",
    }
  })
);



export const MyComponent = (props: MyComponentProps) => {
  const {  } = props;
  const {root} = useStyles();


  return (
    <div className ={root}>
        this is a component
    </div>
  );
};

This is not:

//styles.ts
import makeStyles from '@mui/styles/makeStyles';

export const useStyles = makeStyles(
    ({ spacing, palette }) => ({
      root: {
          padding: spacing(2),
          border: "solid 1px red",
      }
    })
  );
  




//MyComponent.tsx
import React from 'react';
import { useStyles } from './styles';

export type MyComponentProps = {
};





export const MyComponent = (props: MyComponentProps) => {
  const {  } = props;
  const {root} = useStyles();


  return (
    <div className ={root}>
        this is a component
    </div>
  );
};

Expected behavior 🤔

I mean, I guess make the tool work for this import.

Steps to reproduce 🕹

Steps:

1. Check out this repo: https://github.com/dwjohnston/migrate-mui/tree/migrate-emotion
2. Note there is MyComponent.tsx and MyComponent2.tsx
3. run npx @mui/codemod v5.0.0/jss-to-styled src
4. Note how MyComponent migrates, but MyComponent2 does not.

Context 🔦

Migrating to v5. The code base I'm working in has the convention of keeping styles for components in a styles.ts file.

Your environment 🌎

  System:
    OS: macOS 12.3.1
  Binaries:
    Node: 16.14.0 - /usr/local/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 8.3.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 100.0.4896.75
    Edge: Not Found
    Firefox: Not Found
    Safari: 15.4
  npmPackages:
    @emotion/react: ^11.8.2 => 11.8.2 
    @emotion/styled: ^11.8.1 => 11.8.1 
    @mui/base:  5.0.0-alpha.74 
    @mui/icons-material: ^5.5.1 => 5.5.1 
    @mui/lab: ^5.0.0-alpha.75 => 5.0.0-alpha.75 
    @mui/material: ^5.5.3 => 5.5.3 
    @mui/private-theming:  5.5.3 
    @mui/styled-engine:  5.5.2 
    @mui/styles: ^5.5.3 => 5.5.3 
    @mui/system:  5.5.3 
    @mui/types:  7.1.3 
    @mui/utils:  5.5.3 
    @types/react: 17.0.42 => 17.0.42 
    react: 17.0.2 => 17.0.2 
    react-dom: 17.0.1 => 17.0.1 
    styled-components: ^5.2.1 => 5.3.3 
    typescript: 4.2.2 => 4.2.2 

npm notice 
npm notice New minor version of npm available! 8.3.1 -> 8.6.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.6.0
npm notice Run npm install -g npm@8.6.0 to update!
npm notice