[system] set before directly without using prepend for global styles

[siriwatknp]

closes #44597

Root cause

Each GlobalStyles create its own sheet and injected at this line:

…
before = this.container.firstChild
…
this.container.insertBefore(tag, before) // this.container = head

This cause the 2nd GlobalStyles in the app to be injected above (insertBefore) the 1st GlobalStyles.

Solution

set before to be the insertion point at the insert method of the custom sheet.

Benefit of insertion point

• prepend (deprecated) is replaced by insertionPoint https://github.com/emotion-js/emotion/tree/main/packages/sheet#prepend.
• prepend is unpredictable for GlobalStyles. Different order of GlobalStyles and components produce different injection order 😮 (even without <StyledEngine injectFirst>. This PR makes the order of GlobalStyles and components same as using the default cache.

Test

Added a regression test. I don't think this can be easily tested with a unit test.

---

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

[mui-bot]

Netlify deploy preview

https://deploy-preview-44648--material-ui.netlify.app/

@mui/joy: parsed: +0.06% , gzip: +0.08%

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against 02ded2c

[DiegoAndai]

Hey @siriwatknp! Sorry for the delay

Have you identified with what change (PR) this broke from v5 to v6?

Should we also update this section and this warning on the docs?

[siriwatknp]

Should we also update this section and this warning on the docs?

To be honest, I think they are separate issues, not specific to StyledEngineProvider. I believe they need a rewrite to use insertionPoint instead but it should not be in this PR.