[docs] Link a VSCode extension for working with Material-UI

[jedwards1211]

I think VSCode users out there will really love this extension I just made!

It has commands for wrapping a component in the text editor in withStyles, and another for automatically creating/updating up the declaration of Box for work with @material-ui/system.

https://marketplace.visualstudio.com/items?itemName=vscodeshift.material-ui-codemorphs

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

[jedwards1211]

No worries, do you use WebStorm?

[oliviertassinari]

Sublime Text

[jedwards1211]

@oliviertassinari had a thought while working on a mui-fab-extended snippet... So the example in the docs is

<Fab variant="extended">
  <NavigationIcon className={classes.extendedIcon} />
  Navigate
</Fab>

I don't want my snippets to assume there will be a classes.extendedIcon, it would just confuse people. I have enough JSCodeshift fu to make it magically put in everything necessary but...that's not a great road to go down I think.

To me a button with an icon and text is so very common that it's always going to feel like a shortcoming until MUI provides a builtin solution for this use case that doesn't rely on useStyles or Box.

I'm thinking of using Box in the snippet, what do you think?

<Fab variant="extended">
  <Box marginRight={1}>
    <$1Icon />
  </Box>
  $0
</Fab>

More thoughts:

• Wrapping the icon in a <div /> doesn't feel ideal
• Personally I wish all icons supported margin properties like Box; that's the only way to eliminate the hassles entirely
• Otherwise I would propose a new component that clones its child with override margins somehow

[jedwards1211]

Btw I'm not sure "providing codemods" is a very clear term for the links. I assume people think of "codemod" as something you run on your whole project to manage breaking API changes, not something lightweight you use to modify code in a text editor. "Refactoring" is probably a better term for it even though adding stuff is not a true refactor. For instance this extension uses the term "refactoring": https://github.com/wix/vscode-glean

[oliviertassinari]

Sounds great, for v5, I would like to look into how we can remove the intermediary Box.

[oliviertassinari]

@jedwards1211 I hope these extentions will get adoption, keep up the good work :)

[jedwards1211]

Thanks! I want to help out with more migration type codemods too, if I made a codemod to migrate from withStyles to useStyles would you accept a PR for it? Let me know if there are any other things that would be useful, I love writing codemods

[oliviertassinari]

We want to use and document styled-components by default in v5. A codemod that could help with this would also be great.

[jedwards1211]

Oh no 😱 I'm not a fan of styled-components...being a user of JSS before I came to MUI, I was so happy that MUI uses it. Or do you mean the plan is that either one can be used with MUI? I wouldn't want styled-components to be required, because it would increase the bundle size of anyone who's already got a lot of JSS in their app.

[oliviertassinari]

@jedwards1211 Ideally, styled-components will be optional but come by default.

[jedwards1211]

Huh, what's motivating this? I don't get why any React devs would be into it. We don't like putting our HTML in template strings, so why would we want to put our CSS in template strings?

	JS Objects	Template Strings
HTML	React ✨	Angular
CSS	JSS	styled-components

That said I could try to make a codemod for it. I would want to make a codemod for the reverse direction back to JSS too though. Though it would be harder because I would have to parse the CSS in the template strings -- which is an example of how template strings are less powerful to work with than JS objects.

[mbrookes]

@jedwards1211 We track it here: https://github.com/mui-org/material-ui/issues/6115