gradio

1
import { defineConfig } from "vite";
2
import { svelte } from "@sveltejs/vite-plugin-svelte";
3
import sveltePreprocess from "svelte-preprocess";
4
// @ts-ignore
5
import custom_media from "postcss-custom-media";
6
import global_data from "@csstools/postcss-global-data";
7
// @ts-ignore
8
import prefixer from "postcss-prefix-selector";
9
import { readFileSync } from "fs";
10
import { join } from "path";
11
import { fileURLToPath } from "url";
12

13
const __dirname = fileURLToPath(new URL(".", import.meta.url));
14
const version_path = join(__dirname, "..", "gradio", "package.json");
15
const theme_token_path = join(
16
	__dirname,
17
	"..",
18
	"js",
19
	"theme",
20
	"src",
21
	"tokens.css"
22
);
23

24
const version = JSON.parse(readFileSync(version_path, { encoding: "utf-8" }))
25
	.version.trim()
26
	.replace(/\./g, "-");
27

28
//@ts-ignore
29
export default defineConfig(({ mode }) => {
30
	const production = mode === "production";
31

32
	return {
33
		server: {
34
			port: 9876
35
		},
36

37
		build: {
38
			sourcemap: false,
39
			target: "esnext",
40
			minify: production
41
		},
42
		define: {
43
			BUILD_MODE: production ? JSON.stringify("prod") : JSON.stringify("dev"),
44
			BACKEND_URL: production
45
				? JSON.stringify("")
46
				: JSON.stringify("http://localhost:7860/"),
47
			GRADIO_VERSION: JSON.stringify(version)
48
		},
49
		css: {
50
			postcss: {
51
				plugins: [
52
					prefixer({
53
						prefix: `.gradio-container-${version}`,
54
						// @ts-ignore
55
						transform(prefix, selector, prefixedSelector, fileName) {
56
							if (selector.indexOf("gradio-container") > -1) {
57
								return prefix;
58
							} else if (
59
								selector.indexOf(":root") > -1 ||
60
								selector.indexOf("dark") > -1 ||
61
								fileName.indexOf(".svelte") > -1
62
							) {
63
								return selector;
64
							}
65
							return prefixedSelector;
66
						}
67
					}),
68
					custom_media()
69
				]
70
			}
71
		},
72
		plugins: [
73
			svelte({
74
				inspector: true,
75
				compilerOptions: {
76
					dev: !production
77
				},
78
				hot: !process.env.VITEST && !production,
79
				preprocess: sveltePreprocess({
80
					postcss: {
81
						plugins: [
82
							global_data({ files: [theme_token_path] }),
83
							custom_media()
84
						]
85
					}
86
				})
87
			})
88
		]
89
	};
90
});
91