[system] Shorten class names in production

[oliviertassinari]

Testing this idea #27838 (comment) out.

• Before: https://next--material-ui.netlify.app/branding/home/: 15.5 kB - 136 kB
• After: https://deploy-preview-27932--material-ui.netlify.app/branding/home/ 15.2 kB - 125 kB

It doesn't make a major difference but it seems harmless and consistent with how emotion & styled-components handles debuggable class names.

I have tried https://www.webpagetest.org/ but the variance was too high to see a real difference. So I guess, it's more around, do we want the long class names in production at the expense of an inlined CSS a bit larger?

[mui-pr-bot]

Details of bundle changes (experimental)

Generated by 🚫 dangerJS against 76fe285

[oliviertassinari]

@mnajdova what do you think about this one?

[mnajdova]

Makes sense, sorry I must have missed the PR, thanks for mentioning me

[oliviertassinari]

I have tested with styled-components, it works too. I'm moving forward on the simple basis that it's closer to how emotion and styled-components behave. It might help developers to feel more "at home", e.g. they could wonder if they correctly set NODE_ENV = 'production' if they keep seeing the dev class names in production.

[maxtechera]

@oliviertassinari @mnajdova - Hey! Thanks a lot for the library! I see how this improves the length of the inlined styles.
Although it changes how custom components built with styled() work compared to native MUI components which include at least the global class names.

In particular, this change broke customization of custom components using selectors like [class$=Component-slot] to target as you would with [class$=MuiLink-root].
This still works on development but no longer in production, and AFAIK is the only solution to targeting when using nested themes.

This was working previously in production as this check was not in place, but no longer does.

Is this no longer supported? and/or is there a new way to do this or workaround? Would you be interested in supporting this feature parity for MUI components and custom components? Maybe through enabling the global class names.

[oliviertassinari]

@maxtechera do you have a reproduction of the behavior so we have context? There are too many unknown for me to really understand the problem you are trying to solve.

If I had to guess, it seems that you are creating custom components with the styled() method, and using the component name, slot name options. Did you consider adding the class names on the element directly?