Normalize CSS gets inserted at the wrong position

[W1zzardTPU]

What package has an issue

@mantine/core

Describe the bug

I have "prepend" set to true in createEmotionCache(), and it's correctly prepending the "mantine" styles, but the global and normalize styles still get appended, which makes overriding them difficult.

What version of @mantine/hooks page do you have in package.json?

6.0.0

If possible, please include a link to a codesandbox with the reproduced problem

No response

Do you know how to fix the issue

None

Are you willing to participate in fixing this issue and create a pull request with the fix

None

Possible fix

No response

[cyantree]

It seems MantineProvider must also configure the emotion <CacheProvider /> because currently the custom cache won't be used for the global styles:
https://github.com/mantinedev/mantine/blob/master/src/mantine-styles/src/theme/MantineProvider.tsx#L88

It can be seen because the global style tags start with css- instead of mantine-.

However even after fixing this the style tags won't be prepended.

Here's an example that uses the CacheProvider and therefore creates all style tags with the correct cache key:
https://codesandbox.io/s/dawn-snow-h4802t?file=/src/App.tsx

[cyantree]

The incorrect prepend handling seems to be a known bug in @emotion/react:
emotion-js/emotion#2790

For newer versions there seems to be a workaround:
https://github.com/igorovic/mantine-prepend-issue

So maybe for us a workaround could be avoiding the Global component and injecting the styles in a different way. Because for the other Mantine components this seems to work already. So maybe render some fake nodes that trigger emotion to prepend the styles to the head.

[rtivital]

I've tried adding CacheProvider to MantineProvider about six months ago, it broke ssr for Remix

[W1zzardTPU]

Here's an example that uses the CacheProvider and therefore creates all style tags with the correct cache key: https://codesandbox.io/s/dawn-snow-h4802t?file=/src/App.tsx

I see a white background with text "Your app here", so that approach doesn't seem to be working

[cyantree]

Here's an example that uses the CacheProvider and therefore creates all style tags with the correct cache key: https://codesandbox.io/s/dawn-snow-h4802t?file=/src/App.tsx

I see a white background with text "Your app here", so that approach doesn't seem to be working

Yes, as I've written in the same comment it unfortunately only fixes the key but not the prepend handling because of some issue in @emotion/react.

[rtivital]

This issue is closed for one of these reasons:

• It was fixed in 7.0
• It is no longer reproducible in 7.0
• It is no longer applicable in 7.0
• It does not have a reproduction

If you think that this issue was closed by mistake, and it is still an issue in version 7.0, please reopen it.