How to handle Emotion and Google Fonts inlined styles #34
Description
Hey all,
I'm just integrating the middleware into my Next.js website and I'm running into a few issues. You can see the issues live here.
I am using Google Fonts and it seems like Google or Next.js does some inlining into a style tag, and those tags don't have a hash.
Here's how I include the Google Fonts:
render() {
const { Head, NextScript } = provideComponents(this.props)
return (
<Html>
<Head>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
<link // eslint-disable-line @next/next/no-page-custom-font
href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700;800&family=Playfair+Display:wght@500&display=swap"
rel="stylesheet"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}The other problem is that I am using Mantine which leverages Emotion under the hood. It outputs an inline style tag at the top of my that also doesn't seem to have a hash. I do have access to the nonce option of Emotion in my _app.ts but not sure if that's even helpful.
Anyone know if there there are any workarounds to these problems? Cheers!