import { defineConfig, loadEnv } from "vite"; import react from "@vitejs/plugin-react-swc"; import path from "path"; import { componentTagger } from "lovable-tagger"; export default defineConfig(({ mode }) => { const env = loadEnv(mode, process.cwd(), ""); const themeName = env.VITE_THEME || "default"; const themeColors: Record = { default: { primary: "173 65% 36%", sidebarPrimary: "173 65% 36%", ring: "173 65% 36%" }, dev: { primary: "0 72% 51%", sidebarPrimary: "0 72% 51%", ring: "0 72% 51%" }, preprod: { primary: "270 70% 55%", sidebarPrimary: "270 70% 55%", ring: "270 70% 55%" }, }; const colors = themeColors[themeName] || themeColors.default; const appName = env.VITE_APP_NAME || (themeName === "dev" ? "Secuird Dev" : themeName === "preprod" ? "Secuird Staging" : "Secuird"); const favicon = env.VITE_FAVICON || (themeName === "dev" ? "/favicon-dev.svg" : themeName === "preprod" ? "/favicon-staging.svg" : "/favicon.svg"); const themeColorHsl = `hsl(${colors.primary})`; // Build a CSS block that injects directly into before any stylesheets load. const themeStyles = ` `; return { server: { host: "::", port: 8080, allowedHosts: env.VITE_ALLOWED_HOSTS?.split(",") || [ "ui.webauthn.local", "gatehouse-ui.hawkvelt.tech", ], }, plugins: [ react(), mode === "development" && componentTagger(), { name: "vite-plugin-theme-injection", transformIndexHtml: { order: "pre", handler: (html) => { const headClose = html.indexOf(""); const withStyle = headClose > -1 ? html.slice(0, headClose) + themeStyles + "\n" + html.slice(headClose) : html; return withStyle .replace(/%VITE_APP_NAME%/g, appName) .replace(/%VITE_FAVICON%/g, favicon) .replace(/%VITE_THEME_COLOR%/g, themeColorHsl); }, }, }, ], resolve: { alias: { "@": path.resolve(__dirname, "./src"), }, }, build: { target: "esnext", }, }; });