Fix css modules source map error

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",

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

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 }),
 					};
 				},
 			},