FOUC when using NextAppDirEmotionCacheProvider with prepend true

[kpericin]

Hi,

Thank you for providing out of the box solution to make MUI Next.JS setup easier, especially with app router!

The issue we encounter is with prepend option set to true:

<NextAppDirEmotionCacheProvider options={{ key: "css", prepend: true }}>
    <AppThemeProvider>{children}</AppThemeProvider>
</NextAppDirEmotionCacheProvider>

I forked the example repo and added a custom button style (a blue border). Repository can be found here: https://github.com/kpericin/mui-next-appdir-demo. There is also stackblitz: https://stackblitz.com/edit/stackblitz-starters-ebxkz3

As you can see in the example, button first gets rendered without a border which gets applied with a delay. If JS is disabled, border never gets applied. This may be the wrong place to raise the issue, but I was wondering is it possible to use prepend: true with Next.JS app router?

There is a workaround for this simple example: not using prepend and increasing specificity of CSS selector which applies the border:

.root.root {
    border: 1px solid blue;
}

While this does work, it is cumbersome and I'm hoping there is a better/simpler solution.

[garronej]

Hello @kpericin,

In the page router version of the tooling I'm able to implement some magic to get prepend working.

tss-react/src/next/pagesDir.tsx

Lines 106 to 108 in d193e11

	"styles": prepend
	? [...emotionStyles, ...otherStyles]
	: [...otherStyles, ...emotionStyles]

Unfortunately, with the App Router, I don't know how to do it or even if it's possible. We're relying on the useServerInsertedHTML hook and I don't know how to configure it to provide a precise insertion point...

What's your end goal? You have a global stylesheet and you want it to be after the emotion style in the head so that it has higher priority?

[kpericin]

@garronej thank you for the quick response!

We have an existing component library which is based on MUI and heavily customized. We used SCSS modules (each component has *.module.scss file containing style overrides) to override styles so we can migrate away from MUI in the future. It works great for our SPA. Now we need to reuse it in a new Next.JS project which is where we are seeing the issue.

So it's not a global stylesheet but the end goal is the same - we need our CSS styles to be after emotion styles so our styles win.

[garronej]

I understand, your point is entirely valid.

Regrettably, at the moment, I don't have a ready solution, nor the capacity to explore this further immediately.

Here's a suggestion though, you could raise an issue on the Emotion repository. Make sure to include a reproducible example where you are using a custom component with CSS modules. Highlight the issue of not being able to prioritize your CSS module over the Emotion styles. Please avoid using TSS in this instance, you can simply copy and paste TSS's provider instead. After you're done, notify me, and I will bring it to the attention of Emotion's lead developer.

Assuming a feasible solution is found, I assure you that I will promptly implement it.

In case you're unable to invest time into this, the only alternative I could propose is to opt for Next Pages Router. However, I acknowledge that it may not be the most desirable solution for you.

[kpericin]

@garronej I opened issue on the Emotion repository: emotion-js/emotion#3059.

I do have some time to look into this, right now looking into it is less work than replacing/reworking our component library. However, I'm not even sure where the issue is - should Next.JS provide better options regarding CSS ordering, or is it something that CSS-in-JS libraries should handle?

[kpericin]

I left a comment on Emotion issue with the workaround I found, leaving it here as well if someone else encounters the same issue:

If emotion styles are wrapped into @layer, all other styles which aren't in a layer will take precedence. Here is stackblitz and github branch.

[garronej]

Congratulations for finding a workaround and sharing it with the community.

[garronej]

looks like there might be a legit way: https://mui.com/material-ui/guides/next-js-app-router/#css-injection-order

[garronej]

Emotion option prepend should work in 4.9.1.
Thanks for reporting!
Let me know if it dosen't work.