[codemod] Support dynamic props styled transformation

[siriwatknp]

An improvement to cover #42675

• dynamic props specified in the callback object (works with nested style)

  // before
  const DemoToolbarRoot = styled('div', {
   shouldForwardProp: (prop) => prop !== 'demoOptions' && prop !== 'openDemoSource',
  })(({ theme, demoOptions, openDemoSource }) => [
   {
     [theme.breakpoints.up('sm')]: {
       marginTop: demoOptions.bg === 'inline' ? theme.spacing(1) : -1,
       
       
  // after
  const DemoToolbarRoot = styled('div', {
   shouldForwardProp: (prop) => prop !== 'demoOptions' && prop !== 'openDemoSource',
  })(({ theme }) => [
   {
     [theme.breakpoints.up('sm')]: {
       marginTop: -1,
     },
     variants: [
       {
       props: ({ demoOptions }) => demoOptions.bg === 'inline',
         style: { marginTop: theme.spacing(1) }
       },
     ]

• reduce the number of generated variants

  // before
  {
   marginTop: demoOptions.bg === 'inline' ? theme.spacing(1) : -1,
  }
  
  // after: create one new variant instead of two
  {
   marginTop: -1,
   variants: [
     {
     props: ({ demoOptions }) => demoOptions.bg === 'inline',
       style: { marginTop: theme.spacing(1) }
     },
   ]
  }

I suggest to review only the test case.

---

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

[mui-bot]

Netlify deploy preview

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

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against df2deba

[mnajdova]

Tests looks good 👍