MDX2 migration path for inline styles

[shilman]

The following pattern, which we included in our sb init for MDX1, breaks in MDX2:

<style>{`
  .foo {}

  .bar {}
`}</style>

This is documented as intended behavior in mdx-js/mdx#1945. The solution is to update this to:

<style>
  {`
    .foo {}

    .bar {}
  `}
</style>

We should create a migration path for users to help ease the transition:

1. An automigration that scans all .stories.mdx files, looks for this pattern, and updates
2. A migration that does the same, but must be invoked by user
3. Some kind of check that detects the pattern & points users to a guide (there will be other issues like this)
4. Something else?

[shilman]

Proposal:

• An automigration that globs **/*.stories.mdx and returns the list of files
• If the list is not empty, we prompt the user:

We've found ${files.length} '.stories.mdx' files in your project. Storybook has
upgraded to [MDX2](https://mdxjs.com/blog/v2/), which contains breaking changes from V1.

We can try to automatically upgrade your MDX files to MDX2 format using some common patterns. For a full guide for how to manually upgrade your files, see [MDX2 migration guide](https://mdxjs.com/migrating/v2/#update-mdx-files).

Do you want to run this automigration? [Y]n

Then, if the user responds yes, we run our set of heuristics, such as above ☝️ , on the set of files.

[shilman]

Zoinks!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.0-alpha.41 containing PR #19568 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.