vite.config.mts

/// <reference types="vitest" />
/// <reference types="vite/client" />

import { fileURLToPath } from "node:url";

import tailwindcss from "@tailwindcss/vite";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";

import { featureFlagsPlugin } from "./scripts/vite-plugin-feature-flags.ts";

export type ViteConfigInput = {
  mode: "development" | "production";
};

// https://vitejs.dev/config/
export default (args: ViteConfigInput) => {
  const generateScopedName =
    args.mode === "development" ? "[local]_[hash:base64:4]" : "[hash:base64:4]";
  return defineConfig({
    assetsInclude: ["**.*.svg"],
    base: "./",
    build: {
      cssMinify: "esbuild",
      emptyOutDir: true,
      outDir: "./dist",
      target: "es2022",
    },
    css: {
      modules: {
        generateScopedName,
        localsConvention: "camelCase",
      },
    },
    json: {
      stringify: true,
    },
    logLevel: args.mode === "development" ? "warn" : "silent",
    plugins: [
      // Feature flags plugin - injects build-time flags for tree-shaking
      featureFlagsPlugin({
        configPath: "./flipt.yaml",
        prefix: "FEATURE_",
        verbose: args.mode === "development",
      }),
      tailwindcss(),
      react({
        babel: {
          plugins: [
            [
              "babel-plugin-react-compiler",
              {
                compilationMode: "infer",
              },
            ],
          ],
        },
        jsxImportSource:
          args.mode === "development"
            ? "@welldone-software/why-did-you-render"
            : "react",
      }),
    ],
    resolve: {
      alias: {
        "@": fileURLToPath(new URL("./src", import.meta.url)),
      },
    },
    server: {
      port: 3000,
    },
  });
};