74 lines
2.5 KiB
TypeScript
74 lines
2.5 KiB
TypeScript
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<string, { primary: string; sidebarPrimary: string; ring: string }> = {
|
|
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 <head> before any stylesheets load.
|
|
const themeStyles = `
|
|
<style data-theme="${themeName}">
|
|
:root {
|
|
--theme-primary: ${colors.primary};
|
|
--theme-primary-foreground: 0 0% 100%;
|
|
--theme-sidebar-primary: ${colors.sidebarPrimary};
|
|
--theme-sidebar-primary-foreground: 0 0% 100%;
|
|
--theme-ring: ${colors.ring};
|
|
--theme-color: ${themeColorHsl};
|
|
}
|
|
</style>`;
|
|
|
|
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("</head>");
|
|
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",
|
|
},
|
|
};
|
|
});
|