import { defineConfig } from "vite"
import react from "@vitejs/plugin-react"
import tailwindcss from "@tailwindcss/vite"
import path from "node:path"

/**
 * Vite config — lightweight designer stack for the Exxat DS template.
 *
 * Why Vite over Next.js for designers:
 *  - Cold start ~300–500 ms vs 8–12 s with Next + Turbopack
 *  - Resident memory ~250–400 MB vs 1.4–4 GB with Next dev server
 *  - HMR is instant; no server-component reload
 *  - Lower barrier for designer prototyping
 *
 * The DS itself (`@exxatdesignux/ui`) and the local components/, hooks/,
 * lib/, contexts/ folders are framework-agnostic React — they work
 * identically here as they do under Next in the legacy `template/`.
 *
 * Engineers porting designer prototypes to a Next-target production app
 * follow the checklist in `consumer-extras/templates/handoff.md` —
 * mostly mechanical swaps for `Link`, `useNavigate`, `useLocation`.
 */
export default defineConfig({
  plugins: [
    react(),
    tailwindcss(),
  ],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "."),
    },
  },
  css: {
    /**
     * Tailwind v4 + `@tailwindcss/vite` does not require postcss. We
     * explicitly opt out of postcss config discovery so Vite does not
     * walk up the workspace tree and pick up the parent
     * `packages/ui/postcss.config.mjs`, which in this monorepo pins a
     * native lightningcss binary that may be missing per-platform.
     */
    postcss: { plugins: [] },
    transformer: "postcss",
  },
  server: {
    host: "127.0.0.1",
    port: 3000,
    strictPort: false,
  },
  build: {
    outDir: "dist",
    sourcemap: true,
  },
})
