feat: add @Vanilla-Extract

createdbymahmood · Feb 4, 2024 · a31db9c · a31db9c
1 parent 435facb
commit a31db9c
Show file tree

Hide file tree

Showing 8 changed files with 427 additions and 17 deletions.
diff --git a/next.config.mjs b/next.config.mjs
@@ -1,8 +1,12 @@
+import {createVanillaExtractPlugin} from '@vanilla-extract/next-plugin'
+
+const withVanillaExtract = createVanillaExtractPlugin()
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   experimental: {
     optimizePackageImports: ['@mantine/core', '@mantine/hooks'],
   },
 }
 
-export default nextConfig
+export default withVanillaExtract(nextConfig)
diff --git a/package.json b/package.json
@@ -15,6 +15,8 @@
   "dependencies": {
     "@mantine/core": "7.5.1",
     "@mantine/hooks": "7.5.1",
+    "@mantine/vanilla-extract": "7.5.1",
+    "@vanilla-extract/css": "1.14.1",
     "clsx": "2.1.0",
     "next": "14.1.0",
     "react": "18.2.0",
@@ -42,6 +44,7 @@
     "@types/node": "20.11.16",
     "@types/react": "18.2.52",
     "@types/react-dom": "18.2.18",
+    "@vanilla-extract/next-plugin": "2.3.6",
     "auto-changelog": "2.4.0",
     "eslint": "8.38.0",
     "jest": "29.7.0",

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -3,6 +3,7 @@ import type {Metadata} from 'next'
 import {Inter} from 'next/font/google'
 
 import {Providers} from '@/components/common/providers'
+import {defaultThemeColorScheme} from '@/constants'
 import {constructMetadata} from '@/utils/constructMetadata'
 
 const inter = Inter({subsets: ['latin']})
@@ -23,7 +24,7 @@ export default function RootLayout({children}: RootLayoutProps) {
           content='minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no'
           name='viewport'
         />
-        <ColorSchemeScript defaultColorScheme='light' />
+        <ColorSchemeScript defaultColorScheme={defaultThemeColorScheme} />
       </head>
       <body className={inter.className}>
         <Providers>{children}</Providers>

diff --git a/src/components/common/providers.tsx b/src/components/common/providers.tsx
@@ -3,12 +3,17 @@ import '@mantine/core/styles.css'
 import {MantineProvider} from '@mantine/core'
 import type {ReactNode} from 'react'
 
-import {theme} from '@/lib/theme'
+import {defaultThemeColorScheme} from '@/constants'
+import {theme} from '@/lib/ui/theme'
 
 interface ProvidersProps {
   children: ReactNode
 }
 
 export function Providers({children}: ProvidersProps) {
-  return <MantineProvider theme={theme}> {children}</MantineProvider>
+  return (
+    <MantineProvider defaultColorScheme={defaultThemeColorScheme} theme={theme}>
+      {children}
+    </MantineProvider>
+  )
 }
diff --git a/src/constants.ts b/src/constants.ts
@@ -0,0 +1,3 @@
+import type {MantineColorScheme} from '@mantine/core'
+
+export const defaultThemeColorScheme: MantineColorScheme = 'light'
diff --git a/src/lib/theme.ts b/src/lib/theme.ts
diff --git a/src/lib/ui/theme.ts b/src/lib/ui/theme.ts
@@ -0,0 +1,5 @@
+import {createTheme} from '@mantine/core'
+import {themeToVars} from '@mantine/vanilla-extract'
+
+export const theme = createTheme({})
+export const vars = themeToVars(theme)
diff --git a/yarn.lock b/yarn.lock
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import type {MantineColorScheme} from '@mantine/core'

		export const defaultThemeColorScheme: MantineColorScheme = 'light'