[codemod] Support keyframes in jss-to-styled

[stop1love1]

Closes #30801

Problem

v5.0.0/jss-to-styled throws on any style object that declares keyframes, and since the transform aborts, nothing in the file is migrated:

Error: undefined does not match field "name": string of type Identifier
  at createClasses (src/v5.0.0/jss-to-styled.js:179)

const useStyles = makeStyles((theme) => ({
  root: { animation: '$pulse 1.5s ease-in-out infinite' },
  '@keyframes pulse': { '0%': { opacity: 1 }, '100%': { opacity: 0.4 } },
}));

createClasses walks every entry of the style object and reads prop.key.name, assuming each one is a class name written as an identifier. JSS declares keyframes with a string key, so prop.key.name is undefined, and j.identifier(undefined) throws.

This matches what was established in the issue thread — @mnajdova asked whether keyframes were supported and @siriwatknp confirmed "the Codemod does not transform the keyframes at this point".

Solution

A keyframes entry is not a class, and — unlike @media — the keys it nests (0%, from, to) are not class names either. So the whole property is carried over untouched, which is exactly what emotion expects in an object style. It is skipped in the three places that build class names: the classes map, the & .${classes.x} selector rewrite, and the withStyles classes mapping.

One more step is needed for the output to actually work: JSS references a keyframe as $pulse, emotion by its bare name. The $ is dropped, but only for names that the same style object really declares via @keyframes, so unrelated strings are left alone.

-const useStyles = makeStyles((theme) => ({
-  root: {
-    animation: '$pulse 1.5s ease-in-out infinite',
+const Root = styled('div')(({ theme }) => ({
+  [`&.${classes.root}`]: {
+    animation: 'pulse 1.5s ease-in-out infinite',
     color: theme.palette.primary.main,
   },
   '@keyframes pulse': { … },
 }));

Deliberately out of scope

Other at-rules (@media, @supports) hit the same prop.key.name crash, but they do nest class names, so skipping them would turn a loud crash into silently wrong output. They need their own handling and are left untouched here.

Testing

A bugs - #30801 keyframes fixture pair plus the idempotency test the other cases use. On master the new case fails with the crash above; with the fix both pass.

Test Files  1 passed (1)
     Tests  41 passed (41)

Whole @mui/codemod package: 686 passed on this branch vs 684 passed on master — the two new tests, no other change. Both runs show the same pre-existing failure, path-imports > should not leak imports between file transformations, which is order-sensitive and unrelated.

eslint and prettier --check --ignore-path .lintignore are clean on the touched files.

• I have followed (at least) the PR section of the contributing guide.

[code-infra-dashboard]

Deploy preview

https://deploy-preview-49119--material-ui.netlify.app/

Bundle size

Bundle	Parsed size	Gzip size
@mui/material	0B(0.00%)	0B(0.00%)
@mui/lab	0B(0.00%)	0B(0.00%)
@mui/private-theming	0B(0.00%)	0B(0.00%)
@mui/system	0B(0.00%)	0B(0.00%)
@mui/utils	0B(0.00%)	0B(0.00%)

Details of bundle changes

---

Check out the code infra dashboard for more information about this PR.