import { defineConfig, loadEnv } from "vite";
import vue from "@vitejs/plugin-vue";
import Components from "unplugin-vue-components/vite";
import { VantResolver } from "unplugin-vue-components/resolvers";
import postcsspxtoviewport from "postcss-px-to-viewport";
import { createHtmlPlugin } from "vite-plugin-html";
import VueSetupExtend from "vite-plugin-vue-setup-extend";
import legacy from "@vitejs/plugin-legacy";
import proxyConfig from "./proxy.config";
import { appName, injectScriptStr } from "./config";
import path from "path";

type enforceType = "post" | "pre";
const enforceValue:enforceType = "post";
const setCrossoriginUseCredentials = () => {
  return {
    name: "set-crossorigin",
    enforce: enforceValue,
    transformIndexHtml(html) {
      return html.replace(/crossorigin/g, "crossorigin=\"use-credentials\"");
    }
  };
};


// https://vitejs.dev/config/
export default (opt: any) => {
  const { mode } = opt;
  const env: any = loadEnv(mode, process.cwd());

  return defineConfig({
    base: "./",
    envDir: "./env",
    build: {
      target: "es2015"
    },
    plugins: [
      createHtmlPlugin({
        inject: {
          data: {
            title: appName,
            injectScript: injectScriptStr
          }
        }
      }),
      vue(),
      VueSetupExtend(),
      Components({
        resolvers: [VantResolver()]
      }),
      legacy({
        // targets: ['defaults', 'not IE 11'],
        targets: ["chrome 52"],
        additionalLegacyPolyfills: ["regenerator-runtime/runtime"],
        renderLegacyChunks: true,
        polyfills: [
          "es.symbol",
          "es.array.filter",
          "es.promise",
          "es.promise.finally",
          "es/map",
          "es/set",
          "es.array.for-each",
          "es.object.define-properties",
          "es.object.define-property",
          "es.object.get-own-property-descriptor",
          "es.object.get-own-property-descriptors",
          "es.object.keys",
          "es.object.to-string",
          "web.dom-collections.for-each",
          "esnext.global-this",
          "esnext.string.match-all"
        ]
      }),
      setCrossoriginUseCredentials()
    ],
    css: {
      preprocessorOptions: {
        less: {
          javascriptEnabled: true
        }
      },
      postcss: {
        plugins: [
          // postcsspxtoviewport({
          //   viewportWidth: 375,
          //   selectorBlackList: [""]
          // })
        ]
      }
    },
    server: {
      proxy: proxyConfig
    },
    resolve: {
      alias: {
        "@": path.resolve(__dirname, "src")
      }
    }
  });

};