From c00fdeb35bee85100bf52abc2ce36ed3a5d6949a Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Tue, 4 Aug 2026 10:25:49 +0300
Subject: [PATCH] Fix css modules source map error

---
 package.json   | 1 +
 pnpm-lock.yaml | 3 +++
 vite.config.ts | 8 +++++++-
 3 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index f53f1834e..337925b0b 100644
--- a/package.json
+++ b/package.json
@@ -113,6 +113,7 @@
 		"cross-env": "10.1.0",
 		"i18next-locales-sync": "2.1.1",
 		"knip": "6.29.0",
+		"magic-string": "0.30.21",
 		"sql-formatter": "15.8.2",
 		"typescript": "7.0.2",
 		"vite": "8.1.5",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 079c724db..ff49dcd77 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -226,6 +226,9 @@ importers:
       knip:
         specifier: 6.29.0
         version: 6.29.0
+      magic-string:
+        specifier: 0.30.21
+        version: 0.30.21
       sql-formatter:
         specifier: 15.8.2
         version: 15.8.2
diff --git a/vite.config.ts b/vite.config.ts
index 830743032..51f3addf1 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,5 +1,6 @@
 import { reactRouter } from "@react-router/dev/vite";
 import { sentryReactRouter } from "@sentry/react-router";
+import MagicString from "magic-string";
 import { defineConfig, loadEnv } from "vite";
 import babel from "vite-plugin-babel";
 
@@ -29,8 +30,13 @@ export default defineConfig((config) => {
 					const layer = id.includes("/components/elements/")
 						? "elements"
 						: "components";
+					const magicCode = new MagicString(code);
+					magicCode.prepend(`${layerOrder}\n@layer ${layer} {\n`);
+					magicCode.append("\n}");
+
 					return {
-						code: `${layerOrder}\n@layer ${layer} {\n${code}\n}`,
+						code: magicCode.toString(),
+						map: magicCode.generateMap({ source: id, hires: true }),
 					};
 				},
 			},