[styled-engine] Add StylesProvider with injectFirst option

[mnajdova]

This PR adds StylesProvider with injectFirst option in both @material-ui/styled-engine and @material-ui/styled-engine-sc. The StylesProvider is exported from core as StyledEngineProvider and used in the docs, codesandbox example template & the argos TestViewer.

The usage of this Provider will be necessary during the transition stage, where we have emotion components being overridden by JSS styles.

• Find issue with @material-ui/styled-engine-sc's generated style tag being ignored
• Find issues with remaining argos differences 😕

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/mui-org/material-ui/dzfp3vav0
✅ Preview: https://material-ui-git-feat-styled-engine-prepend.mui-org.vercel.app

[mui-pr-bot]

Details of bundle changes

Generated by 🚫 dangerJS against 435e8e5

[oliviertassinari]

Find issues with remaining argos differences 😕

• This one is linked to the <Box component={SvgIcon} /> pattern. Emotion does no longer win specificity with font-size. I guess it's an acceptable cost during the migration

• This one seems to be the same issue. clone does no longer work. We could also say that it's fine considering it will be resolved once the migration is completed.

• The last one, with the drawer. The size of the drawer increase by 1px, the width of the border. It's box-sizing related. The regression tests are supposed to set boxSizing: 'content-box',. However, it's only now that it takes effect. Looks like a fix if you ask me. However, it also surfaces that these demos are not box-sizing invariant, not great. I would encourage we update the demos to force the box-sizing to border-box.

[oliviertassinari]

• Should we cleanup the style node after introduction?
• Did you consider <StyleSheetManager target={}> with a comment node as target?

Provide an alternate DOM node to inject styles

https://styled-components.com/docs/api#stylesheetmanager

[mnajdova]

I tried it at some point but it didn't work, but it may have been related to other changes. Let me try again, it should definitely be cleaner than this. Also this doesn't work at the moment, the node is created but the styles are being added to a different node.

[mnajdova]

I found out why it wasn't working, but it is awkward. The node added has to be style tag with data-styled='active'. Adding just a comment doesn't work. Basically, now it works, but we have first empty style tag, and then the one from styled-components.. Will leave it like this until we find a better alternative..

[oliviertassinari]

Should we do this for all demos? Like a global style? Or explicitly for the failing demos?

@mnajdova We apply box-sizing: content-box; in the visual regression tests and box-sizing: border-box; in the documentation to spot the few lines of CSS that aren't invariant.

https://github.com/mui-org/material-ui/blob/d3cfb6bca523eaa58b768b6371b07009073d7aaa/test/regressions/TestViewer.js#L11-L19

I was suggesting we do the same thing as with the core components but for the demos that are impacted, e.g.

diff --git a/docs/src/pages/components/drawers/ResponsiveDrawer.tsx b/docs/src/pages/components/drawers/ResponsiveDrawer.tsx
index 9158b08af2..b4ddd17624 100644
--- a/docs/src/pages/components/drawers/ResponsiveDrawer.tsx
+++ b/docs/src/pages/components/drawers/ResponsiveDrawer.tsx
@@ -45,6 +45,7 @@ const useStyles = makeStyles((theme: Theme) =>
     toolbar: theme.mixins.toolbar,
     drawerPaper: {
       width: drawerWidth,
+      boxSizing: 'border-box',
     },
     content: {
       flexGrow: 1,

Most of the time, it works fine.

[mnajdova]

@oliviertassinari did the changes the only differences now are the ones which we could consider as an acceptable cost during the migration. ( We can update the examples for the Box to override another component where we won't have conflicts with the styles being applied, like Typography maybe... ).

Regarding the migration guide, should I update the migration-v4.md with instruction that developers should use the StylesProvider while migrating, so that JSS overrides could win over the emotion default styles?

[oliviertassinari]

Well done! Hopefully, thats it, we have covered most of the challenges with the migration to emotion.