From 7b0083f78251a53aaeb64f0c297c3231d11ad438 Mon Sep 17 00:00:00 2001
From: Pablo Pettinari <pettinarip@gmail.com>
Date: Thu, 12 Sep 2024 10:19:38 +0200
Subject: [PATCH] reuse the screens file instead of importing the entire tw
 config file

---
 src/hooks/useBreakpointValue.ts |  2 +-
 src/lib/types.ts                |  4 ++--
 src/lib/utils/screen.ts         | 12 ++++++++++--
 src/styles/config.ts            |  7 -------
 tailwind.config.ts              |  2 +-
 tailwind/screens.ts             |  9 ---------
 6 files changed, 14 insertions(+), 22 deletions(-)
 delete mode 100644 src/styles/config.ts
 delete mode 100644 tailwind/screens.ts

diff --git a/src/hooks/useBreakpointValue.ts b/src/hooks/useBreakpointValue.ts
index 44a7f756d88..971ed16e029 100644
--- a/src/hooks/useBreakpointValue.ts
+++ b/src/hooks/useBreakpointValue.ts
@@ -1,4 +1,4 @@
-import { screens } from "../../tailwind/screens"
+import { screens } from "@/lib/utils/screen"
 
 import { useMediaQuery } from "./useMediaQuery"
 
diff --git a/src/lib/types.ts b/src/lib/types.ts
index 852fdd3cc9a..c5b6b840387 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -23,10 +23,10 @@ import type { SimulatorNav } from "@/components/Simulator/interfaces"
 import allQuizData from "@/data/quizzes"
 import allQuestionData from "@/data/quizzes/questionBank"
 
+import { screens } from "./utils/screen"
 import { WALLETS_FILTERS_DEFAULT } from "./constants"
 
 import { layoutMapping } from "@/pages/[...slug]"
-import twConfig from "@/styles/config"
 
 // Credit: https://stackoverflow.com/a/52331580
 export type Unpacked<T> = T extends (infer U)[] ? U : T
@@ -858,4 +858,4 @@ export type EventCardProps = {
   imageUrl?: string
 }
 
-export type BreakpointKey = keyof typeof twConfig.theme.screens
+export type BreakpointKey = keyof typeof screens
diff --git a/src/lib/utils/screen.ts b/src/lib/utils/screen.ts
index 3fda3f97301..9f89a6a208e 100644
--- a/src/lib/utils/screen.ts
+++ b/src/lib/utils/screen.ts
@@ -1,8 +1,16 @@
+import type { ScreensConfig } from "tailwindcss/types/config"
+
 import type { BreakpointKey } from "../types"
 
-import twConfig from "@/styles/config"
+export const screens = {
+  sm: "480px",
+  md: "768px",
+  lg: "992px",
+  xl: "1280px",
+  "2xl": "1536px",
+} satisfies ScreensConfig
 
-export const breakpointAsNumber = Object.entries(twConfig.theme.screens).reduce(
+export const breakpointAsNumber = Object.entries(screens).reduce(
   (acc, curr) => {
     const [breakpoint, value] = curr
     acc[breakpoint] = +value.split("px")[0]
diff --git a/src/styles/config.ts b/src/styles/config.ts
deleted file mode 100644
index 8ce8205b09d..00000000000
--- a/src/styles/config.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import resolveConfig from "tailwindcss/resolveConfig"
-
-import tailwindConfig from "../../tailwind.config"
-
-const config = resolveConfig(tailwindConfig)
-
-export default config
diff --git a/tailwind.config.ts b/tailwind.config.ts
index f9b48323724..1a526f701e4 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,7 +1,7 @@
 import type { Config } from "tailwindcss"
 import plugin from "tailwindcss/plugin"
 
-import { screens } from "./tailwind/screens"
+import { screens } from "./src/lib/utils/screen"
 
 const config = {
   // TODO: Move to "class" strategy after removing Chakra
diff --git a/tailwind/screens.ts b/tailwind/screens.ts
deleted file mode 100644
index beba7395305..00000000000
--- a/tailwind/screens.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import type { ScreensConfig } from "tailwindcss/types/config"
-
-export const screens = {
-  sm: "480px",
-  md: "768px",
-  lg: "992px",
-  xl: "1280px",
-  "2xl": "1536px",
-} satisfies ScreensConfig