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

[dwjohnston]

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 🌎

`npx @mui/envinfo`

  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 

[xanderoku]

Experiencing the same issue

[siriwatknp]

If my understanding is correct, we have to add the logic to read the import file and do the correct transformation on both declaration & usage files.

🤔 I am not sure if we want to do this (it is good for sure if we can do it but it sounds really complicated to me as we have other priorities in our backlog). Anyway, if anyone would like to work on this, I'm very appreciate to review the PR.