[mui-codemod][AccordionSummary] Add contentGutters deprecation codemods

[DiegoAndai]

Part of: #40417

Summary

This PR adds codemods for the AccordionSummary's contentGutters composed class deprecation. It covers the customization use cases on our docs (https://mui.com/material-ui/customization/how-to-customize/): the sx prop, the theme, the styled function, and plain CSS.

CSS transform support

Previously, we only had JS transforms. This PR adds support for CSS transforms using postcss and postcss-cli. It was necessary to use postcss in an unusual (but supported) way to keep the same codemod CLI API. The way it works is:

• A codemod must have JS transforms, and CSS transforms are optional
• To add a CSS transform to a codemod:
  • Add a <codemod>/postcss-plugin.js file that implements and exports the postcss plugin
  • Add a <codemod>/postcss.config.js file that imports the plugin and exports the config with only that plugin. This is the only way I could find to load local plugins.
• For deprecations/all, we have a separate postcss.config.js that imports all the plugins (which is only one for now)

If the user runs a specific codemod, then <codemod>/postcss.config.js is used so only that codemod's plugin is applied. If the users runs the deprecations/all codemod, then deprecations/all/postcss.config.js is used so all codemod plugins are applied.

Other styling options

In theory, we could leverage postcss to support other style approaches, like Sass or Less. This could be done via the codemod's CLI. This PR doesn't implement this, but we can do if the community asks for it.

Child class

The contentGutters class is applied to the content child, not the AccordionSummary root. The content class is also applied to the content child, but the gutters class is applied to the root. Because of this, we only cover contentGutters used with a child selector ( .contentGutters ). The gutters class is applied without the child selector, and the content class keeps the child selector: .gutters .content.

[mui-bot]

Netlify deploy preview

• docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against b000c4b

[siriwatknp]

Please see my comments about the styleOverrides and overridesResolver. The rest looks good 👍

[DiegoAndai]

Thanks for the review @siriwatknp! I implemented the fixes

Also, I reduced the scope of the codemods to only pickup the contentGutters class when used with a child selector. Otherwise, it would be difficult to determine how to introduce the gutters class. This covers less, but I think it's enough, and if it isn't, we should wait until a user requests it before diving into that complex case.

[siriwatknp]

Thanks for the review @siriwatknp! I implemented the fixes

Also, I reduced the scope of the codemods to only pickup the contentGutters class when used with a child selector. Otherwise, it would be difficult to determine how to introduce the gutters class. This covers less, but I think it's enough, and if it isn't, we should wait until a user requests it before diving into that complex case.

Agree!

[siriwatknp]

👍