chore: add scss dts for better DX

package.json

@@ -154,6 +154,8 @@
     "typescript": "5.4.3",
     "vite": "5.2.7",
     "vite-plugin-monaco-editor": "1.1.0",
-    "vite-plugin-svgr": "4.2.0"
+    "vite-plugin-sass-dts": "^1.3.17",
+    "vite-plugin-svgr": "4.2.0",
+    "vite-tsconfig-paths": "^4.3.2"
   }
 }

src/components/base/base-dialog.module.scss.d.ts

@@ -0,0 +1,6 @@
+import globalClassNames from "../../style.d";
+declare const classNames: typeof globalClassNames & {
+  readonly basePageTransition: "basePageTransition";
+  readonly "MuiDialog-paper": "MuiDialog-paper";
+};
+export = classNames;

src/components/log/log-item.module.scss.d.ts

@@ -0,0 +1,7 @@
+import globalClassNames from "../../style.d";
+declare const classNames: typeof globalClassNames & {
+  readonly item: "item";
+  readonly shiki: "shiki";
+  readonly dark: "dark";
+};
+export = classNames;

src/components/proxy/proxy-group.module.scss.d.ts

@@ -0,0 +1,5 @@
+import globalClassNames from "../../style.d";
+declare const classNames: typeof globalClassNames & {
+  readonly proxyVirtuoso: "proxyVirtuoso";
+};
+export = classNames;

src/main.tsx

@@ -1,15 +1,14 @@
 /// <reference types="vite/client" />
 /// <reference types="vite-plugin-svgr/client" />
-import "./assets/styles/index.scss";
 
 import { ResizeObserver } from "@juggle/resize-observer";
 if (!window.ResizeObserver) {
   window.ResizeObserver = ResizeObserver;
 }
 
+import { Routes } from "@generouted/react-router/lazy";
 import React from "react";
 import { createRoot } from "react-dom/client";
-import { Routes } from "@generouted/react-router/lazy";
 import { RecoilRoot } from "recoil";
 import "./services/i18n";
 const container = document.getElementById("root")!;

src/pages/_app.module.scss.d.ts

@@ -0,0 +1,6 @@
+import globalClassNames from "../style.d";
+declare const classNames: typeof globalClassNames & {
+  readonly oops: "oops";
+  readonly dark: "dark";
+};
+export = classNames;

src/pages/connections..module.scss.d.ts

@@ -0,0 +1,7 @@
+import globalClassNames from "../style.d";
+declare const classNames: typeof globalClassNames & {
+  readonly TopPanelPaper: "TopPanelPaper";
+  readonly label: "label";
+  readonly value: "value";
+};
+export = classNames;

src/style.d.ts

@@ -0,0 +1,22 @@
+declare const classNames: {
+  readonly layout: "layout";
+  readonly layout__left: "layout__left";
+  readonly "the-logo": "the-logo";
+  readonly "the-newbtn": "the-newbtn";
+  readonly "the-menu": "the-menu";
+  readonly "the-traffic": "the-traffic";
+  readonly layout__right: "layout__right";
+  readonly "the-bar": "the-bar";
+  readonly "the-content": "the-content";
+  readonly "drag-mask": "drag-mask";
+  readonly linux: "linux";
+  readonly windows: "windows";
+  readonly unknown: "unknown";
+  readonly macos: "macos";
+  readonly "base-page": "base-page";
+  readonly "base-container": "base-container";
+  readonly "base-content": "base-content";
+  readonly "no-padding": "no-padding";
+  readonly "user-none": "user-none";
+};
+export = classNames;

vite.config.ts

@@ -1,8 +1,11 @@
 import generouted from "@generouted/react-router/plugin";
 import react from "@vitejs/plugin-react";
+import path from "node:path";
 import { defineConfig } from "vite";
 import monaco from "vite-plugin-monaco-editor";
+import sassDts from "vite-plugin-sass-dts";
 import svgr from "vite-plugin-svgr";
+import tsconfigPaths from "vite-tsconfig-paths";
 
 // https://vitejs.dev/config/
 export default defineConfig(({ command }) => {
@@ -11,10 +14,36 @@ export default defineConfig(({ command }) => {
   return {
     // root: "/",
     server: { port: 3000 },
+    css: {
+      preprocessorOptions: {
+        scss: {
+          additionalData: `@use "@/styles" as common;`,
+          importer(...args) {
+            if (args[0] !== "@/styles") {
+              return;
+            }
+
+            return {
+              file: `${path.resolve(__dirname, "./src/assets/styles")}`,
+            };
+          },
+        },
+      },
+    },
     plugins: [
+      tsconfigPaths(),
       svgr(),
       react(),
       generouted(),
+      sassDts({
+        enabledMode: ["development", "production"],
+        global: {
+          generate: true,
+          outputFilePath: path.resolve(__dirname, "./src/style.d.ts"),
+        },
+        sourceDir: path.resolve(__dirname, "./src"),
+        outputDir: path.resolve(__dirname, "./dist"),
+      }),
       monaco({ languageWorkers: ["editorWorkerService", "typescript"] }),
     ],
     esbuild: {
@@ -24,12 +53,6 @@ export default defineConfig(({ command }) => {
       outDir: "dist",
       emptyOutDir: true,
     },
-    resolve: {
-      alias: {
-        "@": "/src",
-        "~/": "/",
-      },
-    },
     define: {
       OS_PLATFORM: `"${process.platform}"`,
       WIN_PORTABLE: !!process.env.VITE_WIN_PORTABLE,