upgrade to next 15 and react 19, step 2: fix broken stuffs

nextjs random css import order + tailwindcss + mantine = chaos
MCDReforged · Dec 19, 2024 · cc88c2e · cc88c2e
1 parent 1548cd8
commit cc88c2e
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 10 deletions.
diff --git a/src/app/[locale]/layout.tsx b/src/app/[locale]/layout.tsx
@@ -3,14 +3,13 @@ import { Navbar } from "@/components/layout/navbar";
 import { RouterTransition } from "@/components/layout/router-transition";
 import { siteConfig } from "@/site/config";
 import { pick } from "@/utils/i18n-utils";
-import { ColorSchemeScript } from '@mantine/core'
+import { ColorSchemeScript, mantineHtmlProps } from '@mantine/core'
 import "@/styles/globals.css";
 import "@/styles/variables.css";
 import { clsx } from "clsx";
 import type { Metadata } from 'next'
 import { NextIntlClientProvider } from "next-intl";
 import { getMessages, setRequestLocale } from "next-intl/server";
-import '@mantine/core/styles.css'
 import styles from './layout.module.css';
 import MantineThemeProvider from "./mantine-theme-provider";
 import { StatsScripts } from "./stats-scripts";
@@ -45,7 +44,10 @@ export default async function RootLayout(props: RootLayoutProps) {
 
   // noinspection HtmlRequiredTitleElement
   return (
-    <html lang={locale}>
+    <html
+      lang={locale}
+      {...mantineHtmlProps}  // https://github.com/mantinedev/mantine/issues/7008
+    >
       <head>
         <ColorSchemeScript defaultColorScheme="auto"/>
         <StatsScripts/>

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -1,11 +1,21 @@
-/* ============= Basic setups ============= */
+/* ============= Layer setups ============= */
+/* https://mantine.dev/styles/mantine-styles/#css-layers */
+/* https://github.com/mantinedev/mantine/issues/6109 */
+/* https://github.com/orgs/mantinedev/discussions/1672#discussioncomment-10777394 */
+/* https://github.com/songkeys/next-app-mantine-tailwind-template/blob/b50ed8d3b8707988493ab4d0f481d5a379a109cf/src/app/globals.css */
 
-/* https://github.com/orgs/mantinedev/discussions/1672#discussioncomment-7870643 */
-@layer tailwind {
-  @tailwind base;
-}
-@tailwind components;
-@tailwind utilities;
+@layer tw_base, mantine, tw_components, tw_utilities;
+
+/*noinspection CssInvalidImport*/
+@import "tailwindcss/base" layer(tw_base);
+/*noinspection CssInvalidImport*/
+@import "tailwindcss/components" layer(tw_components);
+/*noinspection CssInvalidImport*/
+@import "tailwindcss/utilities" layer(tw_utilities);
+/*noinspection CssInvalidImport*/
+@import "@mantine/core/styles.layer.css";
+
+/* ============= Common tweaks ============= */
 
 .scrollbar-shift-fix {
   /* https://stackoverflow.com/questions/1417934/how-to-prevent-scrollbar-from-repositioning-web-page/39289453#39289453 */